Handle errors like a rockstar in React 16+
A basic error boundary
In September 2017 React 16 finally came out of beta bringing us some 🔥 exciting new features, like Fiber, DOM attributes, etc. Now, we are taking a look at a new component lifecycle event, called
Why should I use it? I already use try/catch….
Nice question. You really got to the point. 👍 It seems crazy to learn why to handle errors in a different way? Yeah, kinda. But what if I tell you that every time an error has been thrown in any previous version of React, you broke its state and it stays in that broken state until you refresh the page. I bet you saw lots of
TypeError: cannot read property XY of undefined... etc.
This is solved in React 16 thanks to the Fiber rewrite. Now, if any error has been thrown inside a component’s render or lifecycle methods, the whole component tree gets unmounted. So, it’s basically a try/catch for React components. According to the official documentation:
Say hello to Error Boundaries
Just wrap your component. This easy 🔝
As I said before, now by default, if an error is thrown inside a component’s render or lifecycle methods, the whole component tree is unmounted from the root. This way your user will see nothing. No corrupted data, but nothing else. Not the best UX, eh? 🤔 Let’s work on it!
Gotta catch ’em all!
So what you should do? Use Error boundaries! These components responsible for capturing errors in their children. Basically, an error boundary is nothing but a simple React component class implementing
componentDidCatch(err, info) lifecycle method. This method will catch errors inside their component tree so when something goes wrong, you could show a fallback component (an apology, a feedback form, a cat video, anything you want) and/or do some error reporting. It gets more interesting now! 😅
A really simple (and very basic) error boundary implementation
Multiple boundaries FTW
So, you wrapped your entire application inside your nice ErrorBoundary. Now, if anything fails, your whole app gets unmounted and shows the fallback component.
But, what if this app is — for example — a music player and only the album art fails? It’s not the best UX decision to stop the player. Thanks, there’s an easy solution. Use multiple boundaries.
Multiple boundaries, one universal component.
With the release of React 16 and Fiber, now we have a nice and easy tool to catch errors and render different components, log/report errors, so start using it today!
Example code repo: https://github.com/benestudio/react-16-error-handling-example