Search This Blog

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

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:

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:

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.

Post a Comment

Popular posts from this blog

Great android apps require great design. For great design you need to master layouts. Layout is one of the basic building block of Android User Interface. Lets jump right in and try designing layout for our app - Just Maths.

Just Maths has 3 screens - Main Menu Screen, Game Screen and Score Screen. Each of the screen is designed using Relative Layout and Linear Layout. There are other layouts as well like Frame Layout, Table Layout and Grid Layout. But you can design anything using only Relative Layout and Linear Layout. These layouts are nothing but View Groups.

Want to build Android Apps really fast?
With Android Studio and a blend of Java and XML, you will be up and running and coding Great Android Apps in no time.
Let's get started. We will be creating a very simple app named Just Maths that will ask user a Maths question. User either presses (✔) or (X) to answer the question. This is going to be a project based learning wherein you will have something concrete in the end.

Here's is a quick way of implementing Auto-Complete in your webpage. Auto-Complete dropdowns are some textbox type looking elements on webpage. When you type on these textboxes you will be prompted with value options just like in dropdowns. The good part of using this method is you need not to using any jQuery for this. The bad part is this will only work in modern browsers which support HTML5.