How To Use Error Boundaries in React ♥
Tags: react, errorboundaries, javascript, programming
Published: 2022-10-09 15:17:40

## 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](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-react-js) 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](https://code.visualstudio.com)

**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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xh0l1gwhlxnilgkbspy.png)

**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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9b3xfh43nz0pxxjf1ym.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu7bdlg7xozm2se3p80j.png)

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 ?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6swe4xlc9uvlnrmvlzd.gif)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8yj1wthvjnvjlhlambt.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqwa8raj4zo2y09iqkd8.png)

**The moment of truth**

Let's check what happens now when the user reaches counter value `5`. No Blank screens anymore. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znalyv17swhe7vb4gnwv.gif)

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.