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.

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:-

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:-

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