We all want our apps to be stable, to work perfectly, and cater to every edge case imaginable, isn’t it? But the sad reality is we are all humans (at least that is my assumption), we all make mistakes, and there is no such thing as a bug-free code. By Nadia Makarevich.
So let’s take a look at error handling in React. What we can do if an error happens, what are the caveats of different approaches to error catching, and how to mitigate them:
- Why we should catch errors in React
- Remembering how to catch errors in javascript
- Simple try/catch in React: how to and caveats
- React ErrorBoundary component
- ErrorBoundary component: limitations
- Catching async errors with ErrorBoundary
- Can I just use react-error-boundary instead?
Starting from version 16, an error thrown during React lifecycle will cause the entire app to unmount itself if not stopped. Before that, components would be preserved on the screen, even if malformed and misbehaved. Now, an unfortunate uncaught error in some insignificant part of the UI, or even some external library that you have no control over, can destroy the entire page and render an empty screen for everyone. Good read!
[Read More]