How to Detect Crashes in a React Native App

Spencer Carli
Mar 20, 2019 · 2 min read

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!

React Native School

Learn to build great React Native apps.

Spencer Carli

Written by

Student. Teacher. Pizza fiend. I write about React Native, Meteor, and more. http://learn.handlebarlabs.com

React Native School

Learn to build great React Native apps.

More From Medium

More from Spencer Carli

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade