Error Boundaries

Error boundaries catch JavaScript errors in child component trees during render, preventing the entire app from crashing. They display fallback UI and log errors for monitoring.

What Error Boundaries Catch

Error boundaries catch errors in rendering, lifecycle methods, and constructors of child components. They do NOT catch errors in event handlers, async code, or SSR — handle those separately.

Historically only class components could implement getDerivedStateFromError and componentDidCatch. React 19 introduces error boundary capabilities for function components in evolving APIs — check your version.

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

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

  componentDidCatch(error, info) {
    logErrorToService(error, info.componentStack);
  }

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

Wrap route sections or risky widgets in error boundaries for isolation.

Error Boundary Placement

<ErrorBoundary fallback={<ErrorPage />}>
  <Dashboard />
</ErrorBoundary>

Place boundaries at route level and around third-party widgets.
Do not use error boundaries for expected async fetch errors.
Log errors to Sentry/Datadog in componentDidCatch.
Reset boundary state on navigation to retry.

Error Boundary Reference

What boundaries catch and miss.

Caught	Not Caught
Render errors	Event handler errors
Child lifecycle errors	Async/setTimeout errors
Constructor errors	SSR errors (special handling)
	Errors in boundary itself

Granular vs App-Level Boundaries

A top-level boundary prevents white screen of death. Granular boundaries around charts or third-party embeds isolate failures so the rest of the dashboard works.

Resetting Error State

Use key={location.pathname} on boundary or reset method when user navigates away so they can recover without full page reload.

<ErrorBoundary key={location.pathname}>

Common Mistakes

Expecting boundaries to catch onClick handler errors.
Single app boundary with no recovery path.
Not logging errors to monitoring service.
Using error boundaries instead of proper error state for fetch failures.

Key Takeaways

Error boundaries catch render-time errors in child trees.
Use fallback UI and log to monitoring services.
Place at route and feature boundaries for isolation.
Event/async errors need try/catch, not boundaries.

Pro Tip

Libraries like react-error-boundary provide reusable boundaries with reset buttons and fallback render props.