ComponentDidCatch & Error Boundary: Error Handling In React 16

Well, the time is changing and so is react. We have React 16 now and things are changing here. With various new features, there's something which gives us more control over the exceptions. React 16 introduced a new lifecycle method that is componentDidCatch. What is it? and How we can take advantage of it.

Before we get to know about this, let me break a news to you. With React 16, if any JavaScript error occurs in any of the lifecycle methods of a component, whole react application crashes and react framework unmount the whole component tree from the DOM, leaving behind a blank screen. This was not the case with React 15x.

Why did they do that, you might ask?

The reason for doing this is pretty simple. The react team debated and decided that instead of showing the user a corrupted HTML state, let's not show it at all. Let's consider an example of Facebook Messenger, leaving a broken UI might lead to sending a message to the wrong person or consider a case of payment page wherein you could select a wrong payment option.

What Is componentDidCatch?

React has provided a lifecycle method which we can have present in our component. It will catch all the JavaScript errors which occur in the lifecycle of a component. We can declare componentDidCatch method just like other lifecycle methods like shown below

 componentDidCatch(error, info) {
    //write code to log error or other stuff
 }

It comes with two parameters:
error- It gives the error that occurred.
info- It gives a property called componentStack which provides a full stack trace of the component hierarchy where the error occurred.

However there are few limitations, this method can't catch the errors occurred in:

• User generated events like button clicks
• Asynchronous code like setTimeout or requestAnimationFrame callback.

Would this be beneficial?

Yes. You can log errors into your DB and get to know the root cause. Also, having these methods in your component can help to confine your errors in the specific component itself. If not caught, the error will go to the parent component's componentDidCatch method. Thus the error bubbles up until it finds a componentDidCatch method.

Now keeping this componentDidCatch method in every component is cumbersome. Also, experts suggest that this should be kept at the root component or it should be used in HigherOrder Components. To help out with this and make things easier, React has introduced Error Boundary. Let's have a look at it.

Error Boundary

Error boundaries are react component which can be used to confine a component's errors and the errors occurring in the child elements. The syntax is something like this:

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

  componentDidCatch(error, info) {
    // Display fallback UI in case error occurs
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service    
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

These component are inherited from React.Component. Don't get confused by the hasError and setState code, it is added just to render a default UI in case of any error. It is not mandatory. The main part is componentDidCatch method. These components are used as shown below:

   

<ErrorBoundary>
    <App/>
</Errorboundary>

//or you can have a structure like this

<BigComponent>
    <ErrorBoundary>
        <smallcomponent/>
    </ErrorBoundary>
    <MediumComponent>
        <ErrorBoundary>
            <SmallComponent>
            <SmallComponent>
       </ErrorBoundary>
    </MediumComponent>
</BigComponent>

So we can configure these to show a custom UI in case an error occurs, otherwise, these components just render the inner component as its children.
As you can notice we have Error Message shown in render method of the boundary when an error occurred.

There are few points:

• We can have as many error boundaries as we want.
• We can have boundary specified anywhere in our component chain.
• We can name our error boundary as per our wish. The react framework identifies it with the help of componentDidCatch Method.

Having componentDidCatch method helps us to restrict the unmounted tree to a certain level. Like if we have a big application and error occurred only in the header section. We can show the custom message only in the header, the rest of the components will work without any problem. If we don't put any error boundary or componentDidCatch method then the whole application would be unmounted and the user will see a blank page.

So this is it, about ErrorBoundary and componentDidCatch method from React 16.

Let us know if you face any difficulty. To check this functionality, just add some random breaking code in your component's render method. You will notice a blank page, try using an errorboundary to get it fixed.

Also, tell us what who would like to learn in the comments section below.

We will be adding a video explaining this concept with working code example in a few days.

Happy Learning!!! Stay Tuned.