React Error Boundaries: Handling Errors Gracefully

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  // Called during render when a descendant throws.
  // Return new state to trigger fallback UI.
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  // Called after render when a descendant threw.
  // Use for side-effects: logging, reporting.
  componentDidCatch(error, errorInfo) {
    console.error('ErrorBoundary caught:', error, errorInfo);
    // logErrorToService(error, errorInfo.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-fallback">
          <h2>Something went wrong.</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            Try again
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

import ErrorBoundary from './ErrorBoundary';
import UserProfile from './UserProfile';
import Dashboard from './Dashboard';

function App() {
  return (
    <div>
      <Navigation />

      {/* Wrap only the part that might fail */}
      <ErrorBoundary>
        <UserProfile userId={userId} />
      </ErrorBoundary>

      {/* Different boundary for a different section */}
      <ErrorBoundary fallback={<p>Dashboard unavailable</p>}>
        <Dashboard />
      </ErrorBoundary>

      <Footer />
    </div>
  );
}

// Error Boundaries do NOT catch this:
function DeleteButton({ id }) {
  const handleClick = () => {
    // This error won't reach the Error Boundary
    throw new Error('Oops');
  };
  return <button onClick={handleClick}>Delete</button>;
}

// You must use try/catch in event handlers:
function DeleteButton({ id }) {
  const [error, setError] = React.useState(null);

  const handleClick = async () => {
    try {
      await deleteItem(id);
    } catch (err) {
      setError(err.message);
    }
  };

  if (error) return <p className="error">{error}</p>;
  return <button onClick={handleClick}>Delete</button>;
}

class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

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

  componentDidCatch(error, info) {
    this.props.onError?.(error, info);
  }

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

  render() {
    if (this.state.hasError) {
      // Accept a render prop, a fallback element, or use a default
      if (typeof this.props.fallback === 'function') {
        return this.props.fallback({
          error: this.state.error,
          reset: this.reset,
        });
      }
      return this.props.fallback ?? <DefaultErrorFallback />;
    }
    return this.props.children;
  }
}

// Usage with render prop:
<ErrorBoundary
  fallback={({ error, reset }) => (
    <div>
      <p>Widget failed: {error.message}</p>
      <button onClick={reset}>Retry</button>
    </div>
  )}
  onError={(err, info) => Sentry.captureException(err, { extra: info })}
>
  <ComplexWidget />
</ErrorBoundary>

import { ErrorBoundary, useErrorBoundary } from 'react-error-boundary';

// A proper fallback component
function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert" className="error-container">
      <h2>Something went wrong</h2>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

// Using useErrorBoundary in an async context
function DataFetcher({ url }) {
  const { showBoundary } = useErrorBoundary();
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(setData)
      .catch(showBoundary); // Delegates to nearest ErrorBoundary
  }, [url, showBoundary]);

  return data ? <Display data={data} /> : <Spinner />;
}

// Wiring it all together
function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => window.location.reload()}
      onError={(error, info) => console.error(error, info)}
    >
      <DataFetcher url="/api/users" />
    </ErrorBoundary>
  );
}

import * as Sentry from '@sentry/react';

class ErrorBoundary extends React.Component {
  state = { hasError: false, eventId: null };

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

  componentDidCatch(error, { componentStack }) {
    const eventId = Sentry.captureException(error, {
      contexts: {
        react: { componentStack },
      },
    });
    this.setState({ eventId });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>An error occurred.</h2>
          <button
            onClick={() =>
              Sentry.showReportDialog({ eventId: this.state.eventId })
            }
          >
            Report this issue
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Sentry also ships its own ErrorBoundary with the same API:
// import { ErrorBoundary } from '@sentry/react';
// It does all of the above automatically.

import { createBrowserRouter, RouterProvider, useRouteError } from 'react-router-dom';

// A route-error component (receives the thrown value via useRouteError)
function RouteErrorPage() {
  const error = useRouteError();
  return (
    <div>
      <h1>Page Error</h1>
      <p>{error.statusText || error.message}</p>
    </div>
  );
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <RouteErrorPage />,  // Catches loader/action errors
    children: [
      {
        path: 'dashboard',
        element: (
          // Still use your own ErrorBoundary for component-level errors
          <ErrorBoundary>
            <Dashboard />
          </ErrorBoundary>
        ),
        loader: dashboardLoader,
        errorElement: <RouteErrorPage />,  // Catches loader errors
      },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}