8-Dec

Add error boundaries to your app!

React 16 brought us a way to handle errors in a neat, declarative way

1 min read

By Kristofer Giltvedt Selbekk

December 8, 2017

A thing that has bothered me with React (or most declarative frameworks, really) is that dealing with errors is hard. Typically what happens is that some random error corrupts React's internal state, which in turn creates some very cryptic error messages on the following renders.

Cry no more. Error boundaries are here!

An error boundary is a component that catches and handles errors that occurs in its children component trees. It does not handle errors within itself - only its children. However, this leads the developer to wrap error-prone code in reusable error boundary components.

Errors are caught with the componentDidCatch lifecycle method, so what you typically want to do is to set your error boundary component's internal state to symbolize that the children has thrown an error.

Here's a pretty bare bones example, that basically just needs some styling to be a drop-in in your app:

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

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <div>Can't display this component!</div>;
    }
    return this.props.children;
  }
}

Using this is also pretty easy:

const App = () => (
  <ErrorBoundary>
    <ChatBox />
  </ErrorBoundary>
);

Note that you can use this technique wherever you want. You can disable a certain part of the UI in case of trouble, or you can simply redirect the user to an error page. That's all up to you, because React rocks!

Up next...

Loading…

Proudly powered by