Granular Error Handling with error.tsx and global-error.tsx

1// app/dashboard/error.tsx
2// MUST BE A CLIENT COMPONENT
3'use client';
4
5import { useEffect } from 'react';
6
7export default function DashboardError({
8  error,
9  reset,
10}: {
11  error: Error & { digest?: string };
12  reset: () => void;
13}) {
14  useEffect(() => {
15    // Log error to Sentry / Datadog
16    console.error('Captured dashboard error:', error);
17  }, [error]);
18
19  return (
20    <div className="error-card">
21      <h2>Failed to load analytics dashboard</h2>
22      <p>Error digest: {error.digest || 'Unknown'}</p>
23      {/* reset() re-renders the segment, attempting recovery */}
24      <button onClick={() => reset()}>Try Again</button>
25    </div>
26  );
27}
28
29// app/global-error.tsx
30// Catches errors in the ROOT layout. Must define <html> and <body>.
31'use client';
32
33export default function GlobalError({
34  error,
35  reset,
36}: {
37  error: Error & { digest?: string };
38  reset: () => void;
39}) {
40  return (
41    <html lang="en">
42      <body>
43        <div className="fatal-error-screen">
44          <h1>Critical System Error</h1>
45          <button onClick={() => reset()}>Restart Application</button>
46        </div>
47      </body>
48    </html>
49  );
50}