How to Detect Crashes in a React Native App

Crashes are going to happen. We can try to minimize them but they’ll still happen. When they happen in production what can we do about them? In this tutorial we’ll learn how to detect crashes in React Native and what to do about them.

In this lesson we learn how to handle errors in production. I would suggest checking out react-native-exception-handler as a way to get started with capture errors in all runtimes of React Native.

If you’re ready to go one step further I highly suggest taking a look at Instabug. Instabug provides a platform and tooling to capture and analyze errors in your React Native app, in addition to other things (like capturing user feedback).

They’ve gratuitously sponsored the production of an entire class about debugging React Native apps so everyone can access it. You can access the course, How to Debug React Native Apps in Development and Production here on React Native School.

Commands and code from the lesson:

yarn add react-native-exception-handler
react-native link react-native-exception-handler

App.js

import React from 'react';
import { View, Button } from 'react-native';
import {
  setJSExceptionHandler,
  setNativeExceptionHandler,
} from 'react-native-exception-handler';

const handleError = (error, isFatal) => {
  // fetch
  console.log(error, isFatal);
  alert(error.name);
};

setJSExceptionHandler((error, isFatal) => {
  console.log('caught global error');
  handleError(error, isFatal);
}, true);

setNativeExceptionHandler(errorString => {
  // do the things
});

export default class App extends React.Component {
  state = {
    number: 0,
  };

  makeRequest = () => {
    fetch('asdf')
      .then(res => res.json())
      .then(res => {
        alert(res);
      })
      .catch(error => {
        handleError(error, false);
      });
  };

  badStateChange = () => {
    this.setState(state => ({
      number: state.data.number + 1,
    }));
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Button title="Make an invalid request" onPress={this.makeRequest} />
        <Button title="Bad state change" onPress={this.badStateChange} />
      </View>
    );
  }
}

Originally published at www.reactnativeschool.comhow-to-detect-crashes-in-a-react-native-app. If you’re interested in learning more about React Native visit the site for 75+ tutorials!