How to Detect Crashes in a React Native App
Tags: reactnative, react, mobiledevelopment, javascript
Published: 2019-03-06 16:07:11

---
title: How to Detect Crashes in a React Native App
published: true
description: 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.
tags: React Native, React, Mobile Development, JavaScript
canonical_url: https://www.reactnativeschool.com/how-to-detect-crashes-in-a-react-native-app
---

{% youtube 2jMcmEsWlm0 %}

> Originally published at [www.reactnativeschool.com/how-to-detect-crashes-in-a-react-native-app](www.reactnativeschool.com/how-to-detect-crashes-in-a-react-native-app). If you're interested in learning more about React Native visit the site for 75+ tutorials!

In this lesson we learn how to handle errors in production. I would suggest checking out [`react-native-exception-handler`](https://github.com/master-atul/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](https://instabug.com/). [Instabug](https://instabug.com/) 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](https://www.reactnativeschool.com/debugging-in-development-and-production) here on React Native School.

Commands and code from the lesson:

<p class="code-header">Terminal</p>

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

<p class="code-header">App.js</p>

```jsx
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>
    );
  }
}
```