The other week I got an email from a developer wondering if I could help them learn more about Error Boundaries within React.
I figured that instead of sharing that information directly to them, I would spend a bit more time writing it up in a blog post so others could learn from the content as well. This post is only meant as a brief introduction to the concept behind Error Boundaries within React, for more advanced information refer to the where can I learn more section at the bottom of the page.
So lets dive in!
Simply put, you can think of Error Boundaries as
try ... catch blocks within a component tree. This is an example of a try catch block:
In that snippet above, the
doSomethingThatMayThrow function can
throw anything (generally an error) and the
will capture this thrown value and continue script execution.
In React this would look like something like the following:
Great, so we have a rough understanding of what they look like in practice, but how do they actually work?
An error boundary can be implemented within any component that uses either the:
lifecycle methods. Both of these methods allow the component to catch an error thrown from its children.
So lets setup a simple generic Error Boundary component.
In this component above, whenever some component anywhere within its children throws an error, React will
propagate that error up to this component, and call its
componentDidCatch lifecycle method with the error
that was thrown.
This component can then setState to change the children returned from render in order to recover from that thrown error.
As with most things, there are some caveats with this workflow. The first and most notable, is that this component
will only catch errors thrown during the
render phase. This means that if an error occurs within a callback that is not
setState updater, the error boundary component will not catch it.
Another caveat, or feature I guess is that if you do want to catch a particular error from an event handler higher up in
the component tree at your error boundary, you can
throw from within a setState:
getDerivedStateFromError lifecycle was introduced later than the
componentDidCatch lifecycle, and operates on a
similar mechanism as the
getDerivedStateFromProps lifecycle method in that it is a single pass handler. This means that React
is able to reconcile the error handling within the same rendering batch as when the error occurs, I think. I don't really understand what
this actually means however, so take this with a grain of salt 🧂 .
As always, the ReactJS first party docs site is hands down one of the best resources out there about React. Here is a great getting started introduction to Error Boundaries on the ReactJS Docs.
Have feedback about this post or questions, don't hesitate to reach out on Twitter (@immatthamlin)!