How to handle errors in React
Graceful error handling is an essential aspect of well-designed software. It’s also tricky. This article offers an overview of error handling in React applications and how to use React error boundaries to handle render-time errors.
React error types
We can divide React application errors broadly into two types, and error handling into two aspects.
The two React error types:
- JavaScript errors: These are conventional JavaScript errors that occur in the code portion of a component.
- Render errors: These are errors raised by the rendering engine, emerging from the markup.
Note that the nature of JavaScript UI makes for tricky error handling. Aside from typical runtime errors, there are errors that spring from the “drawing” of the screen components. We are distinguishing these two types of errors here as “JavaScript errors” and “Render errors.”