In this tutorial, you will learn about the error boundary pattern. The error boundary pattern is a technique you can apply to a ReactJS application that will prevent random exceptions from taking down the whole page. Speaking from experience, there is nothing worse than a customer reporting that a page within your website keeps crashing. After some diagnosis, you realize it's over some tiny bug. An example of this happening occurred on a project that I recently worked on, an end-point was updated with a breaking change. The new data format returned by the API broke a part of the code, an exception was generated and the page crashed. Without a proper way of dealing with these unexpected errors, it will not be possible to give your customers a great experience. If a customer is prevented from doing something on the site, a sale could be lost!
Error Boundaries
The error boundary pattern will help you to better manage unexpected errors thrown within your application. As of React v16, any unhandled errors will unmount the entire application. An error boundary component will prevent that from happening. Imagine an error gets thrown somewhere in the component hierarchy. If an exception is not handled within the component that threw it, the execution will bubble up. If the parent component does not handle the exception, again the exception will be bubbled up. This process will repeat until the root of the application is reached. If nothing is done to resolve the situation, the application will unmount.
An error boundary is a component that sits at the top of your application component hierarchy. An error boundary will help you to process these unhandled exceptions gracefully. Let's look at a very basic example of an error-boundary component:
An important thing to note is within componentDidCatch(). If this function is triggered,hasErrors is set to true. When this happens the component will be re-rendered. In this example, a very crappy error message will be displayed. Catching and error this way is a lot more desirable than having the application break. The ErrorBoundary can then be used as a regular component:
Handling Unexpected Error
Another point to consider is that ReactJS will only catch exceptions thrown by a component. If you need to make API/async calls within your application, these exceptions may not be caught using componentDidCatch(). Take this crude example:
If mockFetch is used within a component, an error will be thrown 9 seconds after it is called. Even if you use an error boundary when this exception is thrown componentDidCatch() will not catch it and the application will still crash despite the error boundary. This is expected behavior by the framework. ReactJS will only catch errors that occur within a component. As this error is occurred outside of the normal life-cycle request it will not get handled. To get around this issue you can use window.onerror, like so:
Adding this additional error-handling means the error boundary will capture all exceptions thrown by your application. You will no longer have to worry that your whole application will crash over some stupid bug. Happy Coding!
