[React 16 is here](https://reactjs.org/blog/2017/09/26/react-v16.0.html) and it brings lots of exciting changes. One of the features that got me excited is better error handling. Previously, runtime errors during rendering could put React in a broken state.

With React 16, instead of unmounting the whole app every time there’s an error, you can use error boundaries. Think of error boundaries like try-catch statements, but for React components.

> Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the crashed component tree.

A class component becomes an error boundary if it defines a new lifecycle method called `componentDidCatch(error, info).`

With error boundaries, even if one of your component’s results in an error, the entire react app would not get unmounted and instead only the erroneous component would display a fallback UI and the entire app would still be fully functional.

To demonstrate the usage of an error boundary in a React App, we would be taking an example of an e-commerce website which has a product listing page to display what all products are available for sale.

The final page would look something like this:-

**_If you were to notice the last product card, it shows a kind of an error template. Because of Error Boundaries in React 16, we were able to place a fallback UI template for that particular component and still render the entire app._**

An Error Boundary class component can be created in the following manner:-

And we can then wrap any of our component’s inside Error Boundary component to catch error’s and display a fallback UI.

For example:-

    <ErrorBoundary>  <ProductCard /></ErrorBoundary>

The `componentDidCatch()` method works like a JavaScript `catch {}` block, but for components. Only **_class components_** can be error boundaries.

Inside `componentDidCatch()` we set the state **hasError** to true and then inside our render method based on whether hasError is true or false we render either the fallback UI or the React Component’s that we wanted to render as children’s.

For our app we have primarily three components:-

*   ProductList Component ( Smart Component)
*   Product Component (Presentational Component)
*   Header Component (Presentational Component)

For styling I am using [**React Toolbox**](http://react-toolbox.com/)**.**

The code for the **ProductList** Component is as follows:-

**_As you can see the Product Component is wrapped inside Error Boundary._**

And the code for **Product** component is:-

In the above Product.js code we are calling **_props.product.name.toUpperCase()_**

So whenever a product has no name to it, then the **toUpperCase** function would be called with **undefined** and would result in an error which would eventually result in **unmounting** of the entire react app.

But with Error Boundary in place, we can catch these error’s and render a fallback UI like the one below:-

![](https://hackernoon.com/hn-images/1*6tNN02g5qaI7-QSTSkcAMw.png)

I hope this demo helps in understanding Error Boundaries of React 16.

React 16 has many more great features shipped in and I would be discussing more about them in my next article.

The entire code for the above demo app can be found on my github repo, the link for the same is:-

[**vivek12345/React-16---Error-Boundaries**  
_React-16---Error-Boundaries - Repo to demonstrate the usage of Error Boundaries in React 16_github.com](https://github.com/vivek12345/React-16---Error-Boundaries "https://github.com/vivek12345/React-16---Error-Boundaries")[](https://github.com/vivek12345/React-16---Error-Boundaries)

For further reading, please refer to the following links:-

*   [Error Handling in React 16](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html)
*   [Egghead.io React Error Handling](https://egghead.io/lessons/react-error-handling-using-error-boundaries-in-react-16)

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - REACT.

2020 - Hacker Noon Contributor of the Year in REACT

Read My Stories

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Error Boundaries in React 16

Too Long; Didn't Read

@vivek-nayyar

RELATED STORIES