Managing React-Native crashes with Error Boundaries and Sentry
Managing React-Native crashes with Error Boundaries
In this post I’m going to explain why it’s important and how you can use error boundaries in a React-Native application to improve error resiliency, so let’s get into it! 👨💻
#Why you should use them ?
According to the official React docs📘:
As ofReact 16,errorsthat werenot caughtby anyerror boundarywillresultinunmountingof thewholeReactcomponent tree😱.
Unmounting the whole React component tree,means that if you don’t catch errors at all the user will see an empty white screen💥. Most of the time without having any feedback. This is not a great UX ❌, fortunately you can fixthis byusing Error Boundaries ✅.
How to use Error Boundaries
To benefit from Error Boundaries, we’ll have to create a stateful component that will use the following lifecycle methods ♻️:
getDerivedStateFromError: This method is going to update the component state to display a fallback UI.
componentDidCatch: This method should be used to log the error to an external service.
So let’s create the component that will catch errors in our application:
code here for error boundary
Integrating With Sentry #
As I opened the Sentry homepage while writing this line, I was greeted by this message.
Software errors are inevitable. Chaos is not.
Sentry provides self-hosted and cloud-based error monitoring that helps all software teams discover, triage, and prioritize errors in real-time.
Sentry is a commercial error reporting service. There are many other companies that provide similar services. My choice of Sentry for this article is because it has a free developer plan that lets me log up to 5,000 events per month across all my projects (pricing docs). An event is a crash report (also known as an exception or error). For this tutorial, we will be making use of the free developer plan.
You can integrate Sentry with a lot of web frameworks. Let’s go over the steps to integrate it into our React project.
- Visit the Sentry website and create an account or login if you already have one.
Projectsin the left navigation. Then, click on
Create Projectto start a new project.