bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
Handle errors like a rockstar in React 16+
At bene : studio we love knowledge sharing to help the community of professionals. With 10+ years and over 100 projects behind us, we have a vast amount of experience. This is why we have launched a knowledge base on our blog with regular updates of tutorials, best practices, and open source solutions.
These materials come from our internal workshops with our team of developers and engineers.
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
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! 😅
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.
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 | Bene Studio
Did you like this? Join us!
Want to ask some questions? Share them with us via e-mail to firstname.lastname@example.org and we can set up a talk with our engineers.
Fancy working for the studio where you can work on international projects and write articles like this? Check out our open positions!
Looking for a partner for your next project? Check out our services page to see what we do and let’s set up a free consultation.
Read moreSee all software engineering
Build your own Christmas chat tree
Or should we say Chat-mas tree?😜 Create a working chat application in 2 hours using React, SSE (Server-Sent Events) and OneSignal on Heroku.
5 Ways to Connect Redux Actions
This article provides 5 ways of defining mapDispatchToProps with explanations. Great introduction to our Redux Saga Workshop!
Bene Studio Serverless Workshop - Calorie Counter App
Kickstart your React Native app with Firebase – Cloud Firestore (Tutorial #2)
In this series we will create an iOS and Android application — called Fakestagram — with React Native, using some of Firebase services....
Redux-Saga To The Rescue
In this blog post, we are checking back to our 25. September Redux Saga Workshop. On 19. October we are trying out a new JS Framework for cross-platform...
Let bene : studio enhance
your digital product!