Managing React-Native crashes with Error Boundaries and Sentry

Managing React-Native crashes with Error Boundaries and Sentry

Managing React-Native crashes with Error Boundaries

React 16 released a new concept called Error Boundary. This concept introduces a new way to catch JavaScript errors🐛 in a React project.

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.

1. Visit the Sentry website and create an account or login if you already have one.

2. Click onProjectsin the left navigation. Then, click onCreate Projectto start a new project.

   code here