React Error Boundaries

React Error Boundaries: Isolating UI Crashes Gracefully

By default, an uncaught JavaScript error inside a single React component unmounts the entire application and leaves users staring at a blank screen. React Error Boundaries catch runtime errors during rendering, inside lifecycle methods, and in constructors of child trees, displaying a clean fallback UI instead.

Implementing an Error Boundary Component

Error Boundaries must still be written as class components because React has not added a built-in hook equivalent for getDerivedStateFromError and componentDidCatch. You can write one reusable boundary class or install the popular react-error-boundary package.

import { Component } from 'react';

export class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidCatch(error, info) {
    console.error('Widget crash:', error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div role="alert" className="error-fallback">
          <h3>Unable to load this section.</h3>
          <button type="button" onClick={() => this.setState({ hasError: false })}>
            Retry
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

Granular Placement Around Widgets

Wrap risky widgets—like charts, third-party embeds, or markdown previewers—in their own <ErrorBoundary>. If the chart throws an exception, the navigation bar and sidebar keep working normally.

What Error Boundaries Do NOT Catch

• Event Handlers (onClick, onSubmit): React does not catch errors inside click handlers; use normal try / catch blocks there.
• Asynchronous Code: Rejected promises, setTimeout callbacks, and fetch failures must be handled with try / catch or state error flags.
• Errors Inside the Boundary Itself: An Error Boundary only catches crashes in child components below it.

Frequently Asked Questions

Can I add a "Try Again" reset button inside an Error Boundary?

Yes. Resetting { hasError: false } inside state re-renders the children, letting users recover from transient rendering glitches.

Does React 19 change how uncaught errors behave?

React 19 improves error reporting with onCaughtError and onUncaughtError root options in createRoot, deduplicating noisy console stacks in development.

Should I wrap my whole app in a single Error Boundary?

Include one top-level boundary as a safety net, plus smaller boundaries around independent panels so one broken widget never hides the entire page.