React Error Boundary: 3 ways to catch errors in 2026.

components/error-boundary.tsx

"use client"; // Required if used in Next.js App Router

import { Component, type ReactNode } from "react";

interface ErrorBoundaryProps {
  children: ReactNode;
  fallback?: ReactNode;
  fallbackRender?: (props: { error: Error; reset: () => void }) => ReactNode;
  onError?: (error: Error, info: { componentStack: string }) => void;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
}

export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  // Called during render when an error is thrown below
  // Return value updates state — triggers fallback render
  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error };
  }

  // Called after the component tree has "committed" the error
  // Use for logging to Sentry / PostHog / etc.
  componentDidCatch(error: Error, info: { componentStack: string }) {
    this.props.onError?.(error, info);
    console.error("Error Boundary caught:", error, info.componentStack);
  }

  reset = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError && this.state.error) {
      // Custom render function takes priority
      if (this.props.fallbackRender) {
        return this.props.fallbackRender({
          error: this.state.error,
          reset: this.reset,
        });
      }

      // Static fallback node
      if (this.props.fallback) {
        return this.props.fallback;
      }

      // Default fallback
      return (
        <div className="p-4 text-center">
          <p className="text-sm font-medium text-destructive">Something went wrong.</p>
          <button
            onClick={this.reset}
            className="mt-2 text-xs text-muted-foreground underline"
          >
            Try again
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

Usage examples

// 1. Simple fallback node
<ErrorBoundary fallback={<p>Widget failed to load.</p>}>
  <ExpensiveWidget />
</ErrorBoundary>

// 2. Custom fallback with reset button
<ErrorBoundary
  fallbackRender={({ error, reset }) => (
    <div className="rounded border border-destructive p-4">
      <p className="text-sm font-medium">Chart failed: {error.message}</p>
      <button onClick={reset} className="mt-2 text-xs underline">
        Retry
      </button>
    </div>
  )}
  onError={(error) => Sentry.captureException(error)}
>
  <AnalyticsChart />
</ErrorBoundary>

// 3. Wrap entire sections independently
<>
  <ErrorBoundary fallback={<SidebarError />}>
    <Sidebar />
  </ErrorBoundary>
  <ErrorBoundary fallback={<ContentError />}>
    <MainContent />
  </ErrorBoundary>
</>

Wrapping sections independently means a crash in the Sidebar doesn't kill the MainContent — and vice versa. This is the main benefit of granular Error Boundary placement.

How error.tsx works

app/dashboard/error.tsx

"use client"; // error.tsx MUST be a Client Component

import { useEffect } from "react";

export default function DashboardError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to your error tracking service
    console.error("Dashboard error:", error);
    // Sentry.captureException(error);
  }, [error]);

  return (
    <div className="flex min-h-100 flex-col items-center justify-center gap-4 p-8 text-center">
      <div className="rounded-full bg-destructive/10 p-4">
        <svg className="h-8 w-8 text-destructive" /* ... */ />
      </div>
      <div>
        <h2 className="text-lg font-semibold">Something went wrong</h2>
        <p className="mt-1 text-sm text-muted-foreground">
          {error.message || "An unexpected error occurred."}
        </p>
        {error.digest && (
          <p className="mt-1 text-xs text-muted-foreground/60">
            Error ID: {error.digest}
          </p>
        )}
      </div>
      <button
        onClick={reset}
        className="rounded bg-primary text-primary-foreground px-4 py-2 text-sm font-medium"
      >
        Try again
      </button>
    </div>
  );
}

app/global-error.tsx — catch errors in the root layout

"use client";

// Catches errors in app/layout.tsx
// Must include <html> and <body> — it replaces the root layout
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html>
      <body>
        <div className="flex min-h-screen items-center justify-center">
          <div className="text-center">
            <h2 className="text-xl font-bold">Something went critically wrong</h2>
            <button onClick={reset} className="mt-4 underline text-sm">
              Try to recover
            </button>
          </div>
        </div>
      </body>
    </html>
  );
}

File structure for granular error boundaries

app/
├── global-error.tsx       ← catches root layout errors
├── error.tsx              ← catches root page errors
├── dashboard/
│   ├── error.tsx          ← catches dashboard only
│   ├── page.tsx
│   └── analytics/
│       ├── error.tsx      ← catches analytics route only
│       └── page.tsx
└── settings/
    ├── error.tsx          ← independent from dashboard errors
    └── page.tsx

Each error.tsx only catches errors in the same directory and its descendants — not siblings. A crash in analytics/ shows analytics/error.tsx, not the root dashboard/error.tsx.

Using componentDidCatch with Sentry

import * as Sentry from "@sentry/nextjs";
import { ErrorBoundary } from "react-error-boundary";

// react-error-boundary: pass onError prop
<ErrorBoundary
  onError={(error, info) => {
    Sentry.captureException(error, {
      extra: { componentStack: info.componentStack },
    });
  }}
  FallbackComponent={ErrorFallback}
>
  <App />
</ErrorBoundary>

// Or use Sentry's own Sentry.ErrorBoundary:
import { ErrorBoundary as SentryErrorBoundary } from "@sentry/react";

<SentryErrorBoundary fallback={<p>An error occurred</p>} showDialog>
  <App />
</SentryErrorBoundary>

In Next.js error.tsx with Sentry

"use client";

import * as Sentry from "@sentry/nextjs";
import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Sentry captures with the error.digest as the error ID
    Sentry.captureException(error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

The error.digest field is a short hash identifying the underlying server error. Useful for correlating client-side error.tsx renders with server-side logs without leaking production error details to the UI.