0fc23b7ebd
- Add global-error.tsx at app root (inline styles, wraps html/body) - Add group-level error.tsx for (public) — catches all unguarded public routes - Add per-route error.tsx for high-traffic public segments: listings, listings/[id], du-an, du-an/[slug], khu-cong-nghiep, khu-cong-nghiep/[slug], agents, agents/[id], payment - Add auth/callback/error.tsx for OAuth callback failures - Commit coverage table to apps/web/docs/error-boundary-coverage.md Pre-existing API test failures unrelated to this change (broker-cert, update-listing-status, mcp.module) were already failing on master. Closes GOO-115 Co-Authored-By: Paperclip <noreply@paperclip.ing>
127 lines
3.7 KiB
TypeScript
127 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
|
|
export default function GlobalError({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
console.error('Global error:', error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<html lang="vi">
|
|
<body>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
minHeight: '100vh',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '1rem',
|
|
fontFamily: 'system-ui, -apple-system, sans-serif',
|
|
backgroundColor: '#f9fafb',
|
|
}}
|
|
>
|
|
<div style={{ maxWidth: '28rem', textAlign: 'center' }}>
|
|
<div
|
|
style={{
|
|
margin: '0 auto',
|
|
display: 'flex',
|
|
height: '3.5rem',
|
|
width: '3.5rem',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: '9999px',
|
|
backgroundColor: '#fee2e2',
|
|
}}
|
|
>
|
|
<svg
|
|
style={{ height: '1.75rem', width: '1.75rem', color: '#ef4444' }}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h1
|
|
style={{
|
|
marginTop: '1rem',
|
|
fontSize: '1.25rem',
|
|
fontWeight: 600,
|
|
color: '#111827',
|
|
}}
|
|
>
|
|
Đã xảy ra lỗi nghiêm trọng
|
|
</h1>
|
|
<p style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#6b7280' }}>
|
|
Ứng dụng gặp sự cố không mong muốn. Vui lòng tải lại trang.
|
|
</p>
|
|
{error.digest && (
|
|
<p style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: '#9ca3af' }}>
|
|
Mã lỗi: {error.digest}
|
|
</p>
|
|
)}
|
|
<div
|
|
style={{
|
|
marginTop: '1.5rem',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
gap: '0.75rem',
|
|
}}
|
|
>
|
|
<button
|
|
onClick={reset}
|
|
style={{
|
|
display: 'inline-flex',
|
|
height: '2.25rem',
|
|
alignItems: 'center',
|
|
borderRadius: '0.375rem',
|
|
backgroundColor: '#2563eb',
|
|
padding: '0 1rem',
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
color: '#ffffff',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
Thử lại
|
|
</button>
|
|
<a
|
|
href="/"
|
|
style={{
|
|
display: 'inline-flex',
|
|
height: '2.25rem',
|
|
alignItems: 'center',
|
|
borderRadius: '0.375rem',
|
|
border: '1px solid #d1d5db',
|
|
backgroundColor: '#ffffff',
|
|
padding: '0 1rem',
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
color: '#374151',
|
|
textDecoration: 'none',
|
|
}}
|
|
>
|
|
Về trang chủ
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|