Crashlytics in React Native

What is Crashlytics?

Crashlytics is a real-time crash reporting tool that can be helpful for your mobile app to find crashes while it’s already published or underdeveloped. This way you can easily find bugs in your application. Now many platforms are available to bind Crashlytics in your application. for example sentry.io, firebase, Instabug, bugsnag, and many more.

Why should we use Crashlytics?

Let’s just say you have recently published your app but you haven’t integrated Crashlytics so how you are going to know the crashes which are happening at the end-user. They are not going to report each and everyone crashes right? Instead, if we have this feature we can easily identify the details of crashes right away.

Integrate Firebase Crashlytics in React Native

• First of all, you should have a firebase account. You can register yourself with this link: https://firebase.google.com/ it will register you with your existing email.
• Now, go to the firebase console to create your project.

• Now you will get this window to write down the name of the project, After this just click on continue.

• After there will be the window to configure google analytics. just checkmark their terms and condition and you are good to go.

• You will get many more features in your created project but here we are going to highlight only the Crashlytics. So, go to Release & Monitor section and select Crashlytics from there you will find the entry point to create an app for ios, android, and unity. We need to register our apps in this project to utilize Crashlytics.

• Create your iOS app by clicking on the iOS and entering the following details like add bundle id from your iOS application and then give the name of this app and app store Id which is optional so if you don’t enter this will be okay.

• The second step would be to download the config file and place this GoogleService-Info.list to your /ios/{projectName}. xcworkspace if you are using pods else place it under /ios/{projectName}.xcodeproj.
• Now we will create an android app for the same. click on android to create and add a package name. Here, app nickname and signing certificate SHA-1 is an option but you can add it as well.
• This is how you can get SHA-1 Key from your android application.

• Now add a google-service.json file to your android/app folder.
• Install react native firebase module to your react native application using yarn or npm:
  • npm install –save @react-native-firebase/app or yarn add @react-native-firebase/app
• Install Crashlytics module with npm or yarn:
  • yarn add @react-native-firebase/Crashlytics or npm install –save @react-native-firebase/Crashlytics
• pen your /ios/{projectName}/AppDelegate.m file, and add the following:
  • import firebase SDK:

• #import <Firebase.h>
  
  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  
  // Add me --- \/
  
  [FIRApp configure];
  
  // Add me --- /\
  
  }

• Run command cd ios && pod install
• To Configure at the android side you have to do the following steps:
  • Add the following dependencies to your /android/build.gradle file:

  •  buildscript {
    dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.10'
    }
    }

  • Add the following plugins to your /android/app/build.gradle file.
• apply plugin: ‘com.android.application’
  apply plugin: ‘com.google.gms.google-services’ // <- Add this
• Enable your android and iOS application from the firebase console in the Crashlytics section.

Till now I’ve only talked about how to configure it in react native. Now, We will see how to test it.

Crashlytics Testing

We can test Crashlytics by forcing a crash with the crash() method and use log() method to get details of the crash.

Example:

import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import Crashlytics from '@react-native-firebase/Crashlytics';

const App=()=>{
useEffect(() => {
Crashlytics().log('App mounted.');
}, []);

return (
<View>
<Button title="Test Crash" onPress={() => Crashlytics().crash()} />
</View>
);
}
export default App;

Enable debug crash logs

If you want to check your crashes in your debug mode then you can enable it by creating a firebase.json file at the root of your project. Crashlytics is disabled by default for debug mode.

// <project-root>/firebase.json
{
"react-native": {
"Crashlytics_debug_enabled": true
}
}

After a successful crash, you can see results on the Crashlytics section in the firebase console.