Don't Let Your React App Crash

In the real world, nothing is perfect. Everything has its pros & cons, special features & shortcomings, any software on this planet is no different. Every software has its own special and unique features which make it a favorite and trendsetter. Similarly, every software has its own shortcomings which impact their selection.

Any software can be as good as the team behind it, the technical stack used for the development. Still, there exist bugs and crashes in the software. Every software development team's main emphasis goes on the fact that software or application (either SPA or Mobile App) must not crash during usage. So to save the day development teams employ various techniques or tactics for this purpose like using try-catch blocks, showing various alerts, and notifications, asking users to restart the software or application, etc.

React app development is no different, tons of web applications are generated & launched in the market based on the React library daily. Tons of react components are available on the internet for free usage and can be easily integrated into any desired react application. But as every penny in your wallet can not shine, similarly every React module can not be a perfect match to your requirements and conditions. It may crash or throw errors in some conditions which will lead to a nasty crash. So to safeguard the apps from crashing and catching the errors in a dignified manner React library introduced the concept of "Error Boundaries".

Hello, Error Boundaries

Error boundaries were introduced in React 16. Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. Think of error boundaries as a try-catch block for react components.

Limitations of Error Boundaries

Everything has some limitations, and so do "Error Boundaries.", they do not catch errors for:

• Event handlers
• Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
• Server-side rendering
• Errors are thrown in the error boundary itself (rather than its children)

Error Boundaries in Action

It is quite easy to setup error boundaries in any react application. Error Boundaries are nothing special, they just react components with special error handling associated with them.

Error Boundary React Component

Error boundaries work as a JavaScript catch {} block, only class components can be error boundaries. Once the component is created, it is quite easy to use.

Error Boundary Usage

It's important to specify that error boundaries only catch errors in the components below them in the tree. An error boundary can’t catch an error within itself. If an error boundary fails to try to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how the catch {} block works in JavaScript.

Your react app is safe now from crashing :)

Conclusion

As it is always a good idea to wrap our fragile decorative items in bubble wrap to keep them safe from crashing, similarly it's always a good idea to wrap the fragile components in "Error Boundaries", to safeguard your apps from crashing.

Thanks :)

Happy Coding :)