feat(web): add missing error boundaries across all route groups

- 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>
2026-04-24 10:49:15 +07:00
parent 8a15df0bdb
commit 0fc23b7ebd
13 changed files with 877 additions and 0 deletions
--- a/apps/web/app/global-error.tsx
+++ b/apps/web/app/global-error.tsx
@@ -0,0 +1,126 @@
+'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>
+  );
+}