One thing React does well ( among other things ) is to show console error and warning messages, they point out meaningful stuff: bad practices, bugs ( or potential bugs), and recommendations. If we don't pay attention to them, they will somehow follow us to soon or later make their point, however, during my career, I have work in several React apps where opening the console means looking at a long list of yellow and red messages left by previous tasks.
One error message I confess had not paid the necessary attention to, it is the one bellow saying:
Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries
This error can appear at different, hard to predict circumstances like data fetch error, bad rerender of a component, a throw newError exception coming from somewhere, among others. We sometimes don't know how our app is going to behave when unexpected events like this happen, that's why React offers this type of messages with even a link included that can guide us to offer a better UI experience for our users.
Let's see the following code
I have this simple component called Title that throws an error exception if the props argument has not been included.
I'm planning to now pass it inside another component as a child:
As we can see, the title prop was not passed over to the Title component which is going to make our app break as soon we hover on the element, but the worst part is the user experience, the user won't see anything on the screen, like literally.
To communicate this much better, we are going to grab the error boundaries example component from the React Js documentation which works perfectly for this problem.
It is a simple wrapper class component that updates a state error depending on if something doesn't work as expected by making an error state change from false to true, if indeed something has gone wrong, we can then display something to the screen like a text message for example. We can also console some error details which will help us tackle the issue better thanks to the componentDidCatch lifecycle method
Note: There is no version of hooks for this one because the getDerivedStateFromError and componentDidCatch "old school" lifecycle do not have an equivalent effect yet, more info here
We will wrap it on top of our App component.
Now when the user hovers, we can show something to the screen instead of leaving them blank.
But this could be even better, notice the Title component is the one that can potentially bring issues, we do not need to wrap the whole App component with the error boundary, we can move it closer down like:
We now have a part of the app displaying content while the other it's not, which might be better than showing one big error.
Full code example here
Conclusion
When building software, some unexpected things could happen in our apps, it is our responsibility to give users the best experience by providing minimal information about these events, an error boundary component could help us achieve this with not a lot of effort. Be also mindful of other React errors and warning displaying in the console, as they usually point at problems or potential ones.
Follow me on Twitter for more content
Top comments (0)