Global Error Boundary

Why It Matters

Without a global error boundary, any unhandled exception in any React component crashes the entire application — showing a white screen. Users lose their work, their session, and their trust. AI-generated code rarely includes error boundaries because the prompts focus on happy paths.

Priority: P1 — A missing error boundary turns any bug into a complete application failure.

Affected Stack: React, Next.js

---

The Problem

// ❌ No error boundary — one broken component kills the entire app
// If UserProfile throws, the entire page goes white
export default function DashboardPage() {
  return (
    <div>
      <Header />
      <UserProfile />  {/* If this throws → white screen */}
      <BillingWidget /> {/* Also gone */}
      <Footer />        {/* Also gone */}
    </div>
  );
}

---

The Fix

Option 1: Next.js App Router error.tsx (recommended)

Next.js App Router has built-in error boundary support via error.tsx files:

// ✅ app/error.tsx — catches errors for the entire app
'use client';

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="text-center">
        <h2 className="text-xl font-bold">Something went wrong</h2>
        <p className="mt-2 text-neutral-500">
          {error.message || 'An unexpected error occurred.'}
        </p>
        <button
          onClick={reset}
          className="mt-4 px-4 py-2 bg-black text-white rounded"
        >
          Try again
        </button>
      </div>
    </div>
  );
}

Option 2: React class component ErrorBoundary

For non-Next.js apps or for wrapping specific sections:

// ✅ Classic React error boundary
class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error('Error boundary caught:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong. Please refresh.</div>;
    }
    return this.props.children;
  }
}

Option 3: react-error-boundary package

// ✅ Using react-error-boundary
import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

References

• React: Error Boundaries
• Next.js: Error Handling

---

Related Checks

• TypeScript Strict Mode — CFG-01

---

Is your app safe? Run Free Scan →