React Error Handling
When we create applications in any technology, it is imperative to handle the errors properly. An error that is thrown anywhere in our component tree will take down the whole application. When a project has a large component tree, developers face difficulty in debugging the code and pinpointing the place where the error has occurred.
React 16 introduced a concept of an error boundary to solve these problems. Error boundaries are React components that catch Javascript errors anywhere in their child component tree and render sensible error messages with a display of fallback UI.
These error boundaries only catch errors in rendering, lifecycle method, and inside hooks like useEffect and in constructors of the whole tree below them. According to the React documentation, Error boundaries do not catch errors for:
- Event handlers
- Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
- Server-side rendering
- Errors thrown in the error boundary itself (rather than its children)
To create an error boundary, we have to create a class component
that will have either or both of the lifecycle methods.
To create an error boundary, we have to create a class component
that will have either or both of the lifecycle methods in addition to the render() method.
- getDerivedStateFromError() — This is a static method that is called when an error occurs anywhere within the children during the render process to update the error boundary’s state and be used to trigger fallback UI.
- componentDidCatch() — This is used to perform operations like logging when our error boundary component catches an error.
According to React documentation, React team has not provided error boundary support for functional components, and yet there are no equivalent hooks to getDerivedStateFromError and componentDidCatch lifecycles.
Where to Place Error Boundaries
We can place the error boundary wherever we need to have it. We can use error boundary at the top level of the application, that is on top of the App component, or wrap it on a single component to handle it individually.
Event handlers — React does not need error boundaries to recover from errors that occur in event handlers. If we want to catch an error inside the event handler, we can use the usual try/catch blog in the event handling function.
Check out this example of declaring and using an error boundary.
“Error boundaries catch the errors occur in the components which are below the in the component tree and also an error boundary can’t catch the errors within itself. In case of failing to render an error message fails trying to render the error message, the error will propagate to the closest error boundary above it”
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.
