How to handle errors in React

When working with a component, when any error happens inside this component code React will unmount the whole React component tree, rendering nothing. This is the React way of handling crashes.

You don’t want errors to show up to your users. React decides to show a blank page.

However, this is just the default. Having a blank page show up is only slightly better than showing cryptic messages to users, but you should have a better way.

If you are in development mode, any error will trigger a detailed stack trace printed to the browser DevTools console. Not in production however, of course, where you don’t really want bugs printed out to your users.

In production you should intercept the errors, and show some kind of helpful message to the person using the app.

This is where error boundaries come into play.

With an error boundary, you isolate parts of the app and handle errors locally.

An error boundary is still a class component in React 19. Hooks cannot catch render errors yet. The modern pattern uses static getDerivedStateFromError() to update state for the fallback UI, and componentDidCatch() to log the error:

class ErrorHandler extends React.Component {
  constructor(props) {
    super(props)
    this.state = { errorOccurred: false }
  }

  static getDerivedStateFromError(error) {
    return { errorOccurred: true }
  }

  componentDidCatch(error, info) {
    logErrorToMyService(error, info)
  }

  render() {
    return this.state.errorOccurred ? <h1>Something went wrong!</h1> : this.props.children
  }
}

and in a component JSX, you use it like this:

<ErrorHandler>
  <SomeOtherComponent />
</ErrorHandler>

When an error happens inside SomeOtherComponent or other child components, and in the whole components subtree that they hold, ErrorHandler is going to intercept it, and you can handle the error gracefully.

getDerivedStateFromError() runs during render and returns the next state, so React can show the fallback UI. componentDidCatch() runs after, and that is where you log to a service like Sentry, Rollbar, Airbrake or others.

The rest of your app can stay on function components and hooks. If you need a refresher, see my React Hooks guide.

Want me to talk about your product? You can sponsor this site.