Обработка ошибок react native

One of the fundamental skills you need to learn in your development field is to learn how to deal with unthought errors. As a react native developer, shipping a new application with a high percentage bugs-free is a little bit challenging.

Through my experience using react-native, I think using a cross-platform solution to build an Application always comes up with a stability price. And to be honest, having at least 3 different languages to build a framework is not easy to make it bugs-free.

With all these facts, it does not mean that your app should quit or return a white screen whenever an error happened. It’s your responsibility to handle these errors and provide the best experience for the end-users. > I am here to help

This article will guide you through some techniques and tools to catch these unhandled exceptions, perform tasks to provide the best experience for users, and report these errors to make sure you are going to fix them on the next release.

Note to mention that using static typing such as typescript will help you avoid all errors caused by typos and typing errors as you write the code which leads to fewer errors to deal with in the execution.

I also encourage writing higher coverage tests for your app as testing is the only way to ensure everything works as expected.

As I already mentioned React Native has two sides, Javascript and Native, this fact will introduce two types of errors you need to deal with :

• JS Exceptions: Errors produced by Javascript code including React.
• Native Exceptions: Error produced by Native Modules

JS Exception

In general, javascript is not hard regarding error handling, and a try/catch is great but it only works for imperative code. However, React components are declarative (specify what should be rendered) which means you can’t use a try-catch for react components errors.

To solve this problem, React 16 introduced a new concept of an Error boundary.

Error boundaries are React components that catch JavaScript errors anywhere in the child component tree.

Make sure to read about Error boundaries from React official docs

The error boundaries API only works with class Component, and a class component becomes an error boundary if you define one of these lifecycle methods static getDerivedStateFromError() or componentDidCatch().

React-error-boundary is a simple reusable component based on React error boundary API that provides a wrapper around your components and automatically catch-all error from the children’s components hierarchy, and also provides a great way to recover your component tree.

My suggestion is to wrap every navigation screen in your Application with a react-error-boundary component and provide a fullback component to Make sure the user knows what’s happening, and maybe you can recover the screen with a rerender.

The best way to do it is to create an Errorhandler component like the following.

import * as React from "react";
import { ErrorBoundary } from "react-error-boundary";
import { View, StyleSheet, Button } from "react-native";

import { Text } from "components";

const myErrorHandler = (error: Error) => {
  // Do something with the error
  // E.g. reporting errors using sentry ( see part 3)
};

function ErrorFallback({ resetErrorBoundary }) {
  return (
    <View style={[styles.container]}>
      <View>
        <Text> Something went wrong: </Text>
        <Button title="try Again" onPress={resetErrorBoundary} />
      </View>
    </View>
  );
}

export const ErrorHandler = ({ children }: { children: React.ReactNode }) => (
  <ErrorBoundary FallbackComponent={ErrorFallback} onError={myErrorHandler}>
    {children}
  </ErrorBoundary>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    alignContent: "center",
    paddingHorizontal: 12,
  },
});

As you can see I am using an error fullback component to provide more information to the user instead of a white screen.

I also added a try again button to programmatically re-render the screen as a way to recover it and solve the issue. when the user clicks the try again button the error boundary will trigger a rerender for the Screen Component which can help to avoid error and show the correct components.

Read More about Error Recovery

To mention, I am also wrapping the error boundary component for every component that may throw an error.

Is Error Boudry enough for JS Exceptions?

Unfortunately, it’s not, Error boundaries do not catch errors for :

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

These limitations lead us to use a react-native-exception-handler to create a global handler for the App that can catch all uncaught Js errors.

react-native-exception-handler is a react native module that lets you register a global error handler that captures fatal/non-fatal uncaught exceptions.

To make it work you need to install and link the module then you register your global handler for Js exception like the following :

import { setJSExceptionHandler } from "react-native-exception-handler";

setJSExceptionHandler((error, isFatal) => {
  // This is your custom global error handler
  // You do stuff like show an error dialog
  // or hit google analytics to track crashes
  // or hit a custom api to inform the dev team.
});

Native Exception

As I already mention Native Exceptions were produced from Native modules errors and Internal native react native code.

From my experience, we usually face few uncaught Native exceptions compared to Js ones, the good news is that we are going to use the same library( react-native-exception-handler) to handle native exceptions too but you cannot show a JS alert box or do any UI stuff via JS code. The only solution was to show a native alert provided by the library but native code has to be written in case you want to customize the alert.

To create a global handler for Native exception, you only need to register your handler using setNativeExceptionHandler function like the following :

import { setNativeExceptionHandler } from "react-native-exception-handler";

const exceptionhandler = (exceptionString) => {
  // your exception handler code here
};
setNativeExceptionHandler(
  exceptionhandler,
  forceAppQuit,
  executeDefaultHandler
);

Tracking Exceptions

Handling exceptions without tracking them has no sense because all the solutions we discussed only improve the user experience and give more information to the user about the error instead of a white screen or an app crash.

Sentry is a cloud-based error monitoring platform that helps us track all these errors in real-time. By creating a free account and installing react-native-sentry you can use it inside your handler (js and Native) to send the stack errors using captureException like the following:

// ErrorHandler.js
import * as Sentry from "@sentry/react-native";

const myErrorHandler = (error: Error) => {
  Sentry.captureException(error);
};

Now, Make sure to fix your errors 😉

Wrap Up

Libraries we use to handle errors in React Native :

• React-error-boundary
• React-native-exception-handler
• Sentry

I hope you found that interesting, informative, and entertaining. I would be more than happy to hear your remarks and thoughts.

If you think other people should read this post. Tweet, share, and Follow me on twitter for the next articles.

More React Native Guides :

👉 17 React Native libraries you should use in 2020
👉 Authentication in React Native, Easy, Secure, and Reusable solution 💪.
👉 Forms in React Native, The right way
👉 Spotify Login Animation With React Navigation V5

There are a few approaches which people use.

1: One way is to use hoc’s(Higher Order components) with global handlers using interceptors in axios.

2: Another way is to create an action creator for error and store errors in Reducer store, Fire the one action creator which is responsible for catching errors from the catch block. Currently, in most places, we have unhandled promise rejection.

Please let me know if there is any other approach to error handling, we want to show different error messages to the user for different errors. Example: Error can occur while accepting the order.

If you have built a React app at any point in your programming career, you probably have experienced an error at some point that was cryptic and did not provide any meaningful context on what actually happened.

This probably means the error occurred at some point in the application and our React component did not handle the error gracefully, well mostly because it was none of its business to make sure the entire app holds.

A common problem in React JS is that if a part of a component breaks, the whole application is broken. A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.

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.

Error screens

Before we dig deeper let’s have a look at some error screens of some famous applications. These are the error screens(fallback UI) of some applications, which will be displayed when something goes wrong in their application.

Developers spend 50% of their time finding errors and fixing them. And errors in your application will naturally lead to unhappy customers, which in turn leads to unhappy management and which in turn makes the developer unhappy. So we need a better approach to find errors, track them and solve them. If we can’t solve them, show some fallback UI which will not disrupt the user experience.

What is the problem in React till now?

• White Screen of death ⚰️(Error in one small component renders a blank page)
• Whole React component tree is crashed 🌲.
• Very difficult to track the issue and debug the code in production 😥

Traditional Ways of capturing errors

1.window.onerror

A window has a callback function called onerror, which will get called if something goes wrong in the browser’s window.

Cons:

• Not supported by all the browsers
• Does not capture Cryptic “Script error”

“Script error”: Happens in Firefox, Safari, and Chrome when an exception violates the browser’s same-origin policy – i.e. when the error occurs in a script that’s hosted on a domain other than the domain of the current page.

1. try-catch

Enclose the part of the code in try-catch block.

Cons:

• It only works with imperative code
• Doesn’t capture error due to the state change in react component

1. Promise-Catch

Every guarantee Ought to Be followed closely by a grab to Allow You to handle the exceptions.

1. ComponentDidCatch

ComponentDidCatch became a part of this React 16 lifecycles. It means that once an error happens on a child’s part, the parent could catch & handle it gracefully. The good news is that by componentDidCatch, you can get the gorgeous Error Boundaries. But the bad news is that it just can capture the error which is going on in the respond lifecycles(constructor, componentDidCatch, render). Here is a good example. If the child component has a button and then pressing on the button throws an exception, that exception will not be captured inside its parent element. You don’t have to mention that this consists of the events like setTimeout & setInterval or some other occasions.

1. International Error Handling

For other cases, the above methods do not work correctly; there is another way in which we’re able to utilize the global handler to catch the uncaught exceptions.

6.Others

There are a lot of other methods to capture logs like below

• react-transform-catch-errors
• react-guard
• react-component-errors
• react-safe-render

React 16 (Super Dad)

I call React 16 as Super Dad because what it does to child components.

componentDidCatch() a new life cycle method does the above same thing to its child component.

The componentDidCatch() method works like a JavaScript catch {} block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.

A class component becomes an error boundary if it defines a new life cycle method called componentDidCatch(error, info)

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}

render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}

Then you can use it as a regular component:

<ErrorBoundary>
<MyWidget />
</ErrorBoundary>

Where to use ErrorBoundary ?

• Root Component (must)
• Main Sections of the page like Header, Footer and Middle Content
• Stand-alone components like Chat Window, Search Bar
• Wherever you suspect that the error might occur

The granularity of error boundaries is up to you. You can wrap top-level route components, you might also wrap components that might contain obscure code. It’s up to you how to best handle protecting against application crashes.

Note 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 when trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript.

Let me show you some examples of how error boundary works

In the above example, there is one <Parent />component which has a <Child />. <Child/> has three sub childrens <Child1/>,<Child2/> and <Child3/>.

<Child3> is throwing some error, which will be thrown to its successive parent <Child>, as the <Child/> does not implement componentDidCatch() it will be thrown to its successive parent which is <Parent/>

Output:

And console logs this

If the componentDidCatch() would have implemented in the <Child/> it would have been more granular

Output:

When does error boundary catch errors?

• When there is an error in the render
• In lifecycle methods
• In Constructor
• The whole tree below them

When will  it won’t catch?

• Errors in the same component
• On event handlers, unless the error is due to a state change
• Error in try catch block unless an error is due to state change
• Error in asynchronous code unless the error is due to state change
• Server-side rendering

Capturing errors

Error monitoring and crash reporting is a vital part of building a high-quality customer centric application.

A release isn’t the end… Errors are your first chance to iterate.

There are various tools for capturing errors

1. Sentry
2. Bugsnag
3. Firebase
4. Visual Studio App Center

One of the most popular crash reporting tools for mobile applications is Firebase Crashlytics. But Crashlytics cannot be used in React Native apps because it won’t capture javascript errors. There are other very good crash reporting tools for React Native like Sentry, Bugsnag etc.

One of the most important features of Bugsnag which made the developers life easy was tagging users who got crashes. When a user reports a crash in our app, we can easily search their email id and search for crashes for that particular users.

Conclusion

Building an error-free application is a vital part of product development. React 16 helps us in making React web applications and React Native apps to capture errors and give enough insights to rectify those errors. Especially, here at Groww we use React 16 and using some advanced tools we manage to  avoid most of the errors and give a better user experience to our  end users.