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 componentDidCatch().

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:

“In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.”

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.

Conclusion

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

Dávid Lévai