top

How to create error boundaries in your ReactJS application

React 16 introduced a lot of interesting features into the React ecosystem. One of them was handling errors by creating boundaries for only that component. This feature prevents the whole app from crashing if there is an error in only one of the child components by creating boundaries around that component. More information about the announcement here. Introduction Earlier, whenever there was an error in the React component, the whole app would crash and there would be no way to prevent that. With React 16, it’s possible to create boundaries around your app so that if anything within that boundary errors out, you can show a fallback interface in its place and send the report to an online client. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. Example Suppose, we have a component called Ability: <Ability ability={ability} /> Now, we want to create an Error Boundary around that component. We can simply modify our component like: <ErrorBoundary>    <Ability ability={ability} /> </ErrorBoundary> The ErrorBoundary component looks like the following: class ErrorBoundary extends React.Component {   constructor(props) {     super(props);     this.state = {       hasError: false     };   }   componentDidCatch(error, info) {     // Display fallback UI     this.setState({ hasError: true });     // You can also log the error to an error reporting service     // Just logging it in the console for demo purposes     console.error(error, info);   }   render() {     if (this.state.hasError) {       // You can render any custom fallback UI       return (         <div className="error">           <div className="error__title">             Something went wrong! Please refresh the page.           </div>         </div>       );     }     return this.props.children;   } } Let’s take a look at this component and understand what it does. We have the componentDidCatch lifecycle hook, which is responsible for catching any errors for any inbound components during rendering, in lifecycle methods, and in constructors of the whole tree below them. In that hook, we are setting a flag called hasError to true. Also, you can send the error to any online reporting service here. In the render method, we are using the hasError flag to show the fallback interface if we have an error. Otherwise, we will just render the children, which is the Ability component here. Please note that we have the following component structure in our app: <ErrorBoundary>     <Ability ability={ability} /> </ErrorBoundary> Demo Consider the following as the usual interface of our very simple app: See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a data-cke-saved-href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh/pen/opYNmz/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39; href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh/pen/opYNmz/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;React 16 Error Boundary Working App&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Nirmalya Ghosh (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a data-cke-saved-href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39; href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@nirmalyaghosh&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a data-cke-saved-href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39; href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;. Now, let’s look at the situation when we encounter an error in our app. If we don’t create an ErrorBoundary, our app will look something like the following when it crashes: See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a data-cke-saved-href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh/pen/LebYaR/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39; href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh/pen/LebYaR/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;React 16 Error Boundary Not Working App with no Error Boundary&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Nirmalya Ghosh (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a data-cke-saved-href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39; href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@nirmalyaghosh&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a data-cke-saved-href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39; href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;. There is no going back from this state and our users should never encounter a page like this. Whereas, if we use an error boundary, it will look something like the following: See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a data-cke-saved-href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh/pen/jYVOdQ/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39; href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh/pen/jYVOdQ/&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;React 16 Error Boundary Working App with Error Boundary&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Nirmalya Ghosh (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a data-cke-saved-href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39; href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io/nirmalyaghosh&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@nirmalyaghosh&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a data-cke-saved-href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39; href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;https://codepen.io&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;#39;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   This is much better than the previous situation. Here, we could also put some navigation which will take us to our home page or any relevant page. Also, if we are sure that our app will work fine on refresh, we could show a timer and then refresh the page. The fallback interface is much better since it handles an error case in our app and we can send a report to any online client and track it there. The example app is available on Github. Feel free to check it out. The readme of the repository will give you an idea about how to make the example app work on your system.
Rated 4.0/5 based on 20 customer reviews
Normal Mode Dark Mode

How to create error boundaries in your ReactJS application

Nirmalya Ghosh
Blog
09th Jan, 2018
How to create error boundaries in your ReactJS application

React 16 introduced a lot of interesting features into the React ecosystem. One of them was handling errors by creating boundaries for only that component. This feature prevents the whole app from crashing if there is an error in only one of the child components by creating boundaries around that component.
More information about the announcement here.

Introduction

Earlier, whenever there was an error in the React component, the whole app would crash and there would be no way to prevent that. With React 16, it’s possible to create boundaries around your app so that if anything within that boundary errors out, you can show a fallback interface in its place and send the report to an online client.

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Example

Suppose, we have a component called Ability:

<Ability ability={ability} />

Now, we want to create an Error Boundary around that component. We can simply modify our component like:

<ErrorBoundary>
   <Ability ability={ability} />
</ErrorBoundary>

The ErrorBoundary component looks like the following:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }
  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    // Just logging it in the console for demo purposes
    console.error(error, info);
  }
  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div className="error">
          <div className="error__title">
            Something went wrong! Please refresh the page.
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

Let’s take a look at this component and understand what it does. We have the componentDidCatch lifecycle hook, which is responsible for catching any errors for any inbound components during rendering, in lifecycle methods, and in constructors of the whole tree below them. In that hook, we are setting a flag called hasError to true. Also, you can send the error to any online reporting service here.
In the render method, we are using the hasError flag to show the fallback interface if we have an error. Otherwise, we will just render the children, which is the Ability component here. Please note that we have the following component structure in our app:

<ErrorBoundary>
    <Ability ability={ability} />
</ErrorBoundary>

Demo

Consider the following as the usual interface of our very simple app:

reactjs1



Now, let’s look at the situation when we encounter an error in our app.
If we don’t create an ErrorBoundary, our app will look something like the following when it crashes:

reactjs11

There is no going back from this state and our users should never encounter a page like this. Whereas, if we use an error boundary, it will look something like the following:

reactjs111

 

This is much better than the previous situation. Here, we could also put some navigation which will take us to our home page or any relevant page. Also, if we are sure that our app will work fine on refresh, we could show a timer and then refresh the page.
The fallback interface is much better since it handles an error case in our app and we can send a report to any online client and track it there.
The example app is available on Github. Feel free to check it out. The readme of the repository will give you an idea about how to make the example app work on your system.

Nirmalya

Nirmalya Ghosh

Blog Author

Founder at Infismash and Frontend Developer by profession, currently working with ReactJS.

Github: https://github.com/ghoshnirmalya

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount