What is an error boundary and what does it catch?

React needs a way to prevent one broken component from taking down the whole page. An error boundary wraps a subtree, records that an error occurred, and renders a fallback instead. The boundary must be a class component because it relies on getDerivedStateFromError and componentDidCatch.

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

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

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

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

    return this.props.children;
  }
}

What is caught

• Errors thrown during rendering a descendant
• Errors in lifecycle methods of a descendant
• Errors in a descendant's constructor
• Errors in a client component during hydration, if a boundary is above it

What is not caught

• Event handlers, because they run outside React's render phase
• Asynchronous code such as a rejected promise in an effect
• Errors on the server during server rendering
• Errors thrown in the boundary itself

Place boundaries around meaningful regions, such as a route, a widget or a sidebar, rather than around the entire app. A boundary that never resets will keep showing the fallback after the user navigates or retries, so key it by route or by a retry counter.