How To Use Error Boundaries in React ♥

What are Error Boundaries

Error Boundaries were introduced in React v16 as a way to catch tricky errors that occur during the render phase. In the past, this would have caused the app to unmount completely, and the user would just see a blank web page, which is not ideal!

You can learn more about React Error Boundaries via code snippets and interactive demos.

Let's get started

In this article we build a react application from scratch and walk you through Error Boundaries.

Prerequisites

• Node v16.4.2
• npm v7.19.1
• Visual Studio Code

Create react application

Let's create a simple react application using following command. Open terminal in your project directory and run this command.

npx create-react-app client

let's open our project file with visual studio code.

cd client
code .

Cheers! Your folder structure may looks like this at this point.

Encountering Errors without Error Boundaries

Unexpected is expected, We will inevitably occurs unexpected errors in our applications when we develop, test and even in the production. You may trying to loop through an error which doesn't exist or you may trying to access to a nested object property which isn't populated in the moment. Most of the time you have control of the behavior of your application but sometimes you don't.

Simulate the error

Let's create a file name BugDemo.js. The following code snippet will be helped you to understand what normally happens without any Error Boundary in react applications.

If you import the component in App.js file and run the application using npm start or yarn start command you can see the below screen.

When we continuously press plus button the counter value of the component button is getting increased. But what happens when the counter value reaches 5 ?

Yes! A blank screen the end user can be shocked. Sometimes the whole application can be crashed. It is very important to use Error Boundaries because of this.

Solve the problem with Error Boundaries

Create a new file in the component/ directory and paste the below code.

Now, Let's wrap our imported BugDemo component with this newly created Error Boundary in App.js, like this;

The moment of truth

Let's check what happens now when the user reaches counter value 5. No Blank screens anymore.

Likewise you can show the error message to the user or you can re-try the task which was failing before if it is possible.

Conclusion

With the evolution of React 16+. Error Boundaries are generally available to use. The common standard is to use at least a one Error Boundary in the root of your application. This will increase the user-experience (UX) of your application and it will prevent the user seeing a blank or crashed pages throughout your application.