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. React 16 is here 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 method works like a JavaScript block, but for components. Only can be error boundaries. componentDidCatch() catch {} class components Inside we set the state 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. componentDidCatch() hasError 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 Component is as follows:- ProductList As you can see the Product Component is wrapped inside Error Boundary. And the code for component is:- Product In the above Product.js code we are calling props.product.name.toUpperCase() So whenever a product has no name to it, then the function would be called with and would result in an error which would eventually result in of the entire react app. toUpperCase undefined unmounting 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:- _React-16---Error-Boundaries - Repo to demonstrate the usage of Error Boundaries in React 16_github.com vivek12345/React-16---Error-Boundaries For further reading, please refer to the following links:- Error Handling in React 16 Egghead.io React Error Handling

Error Boundaries in React 16

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

E2E Testing of Excel Downloads with Cypress

28 Creative 404 Pages for Your Inspiration

45 Stories To Learn About Error Handling

7 Most Common Google Chrome Problems and How to Fix Them

A Comprehensive Guide for Handling Errors in Rust

E2E Testing of Excel Downloads with Cypress

28 Creative 404 Pages for Your Inspiration

45 Stories To Learn About Error Handling

7 Most Common Google Chrome Problems and How to Fix Them

A Comprehensive Guide for Handling Errors in Rust

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps