How to Implement Error Boundaries in React

In React, if an uncaught JavaScript error occurs during rendering inside a component, the entire component tree unmounts and the user sees a blank screen. Error Boundaries are React components that catch errors in their child component tree, log those errors, and display a fallback UI instead of crashing the whole application.

Error Boundaries must currently be written as class components. There is no hook equivalent for the two lifecycle methods that make Error Boundaries work. You typically write one Error Boundary class component and use it throughout your application rather than writing multiple.

Add the static getDerivedStateFromError method to your class component. This method receives the error that was thrown and returns a state update. Typically you return an object like hasError: true. React calls this during the render phase, so it must be a pure function with no side effects.

Add the componentDidCatch lifecycle method which receives the error and an info object containing the component stack trace. This is the correct place to log errors to an external error monitoring service like Sentry or LogRocket. Unlike getDerivedStateFromError, this runs during the commit phase and can have side effects.

In the render method, check the hasError state. If it is true, render a user-friendly fallback UI instead of the children. This could be a simple message, a retry button, or a styled error page. If hasError is false, render the children prop normally, which allows all nested components to display as usual.

Place Error Boundary components around sections of your UI that can fail independently. Wrap entire routes so one page's error does not break other pages. Wrap third-party widgets or data-heavy components that are more likely to throw errors. The granularity depends on how much of the UI should be affected by a localized error.

Allow users to recover from errors by adding a reset button to your fallback UI. When clicked, call setState to set hasError back to false. This triggers a re-render of the children which gives the failed component another chance to render successfully. This is especially useful for transient errors caused by network issues.

Error Boundaries only catch errors during rendering, in lifecycle methods, and in constructors of child components. They do not catch errors inside event handlers, asynchronous code like setTimeout or fetch callbacks, or errors in the Error Boundary component itself. For event handlers, use regular try-catch blocks. For async errors, use error state in your data fetching logic.