Crashlytics in React Native

Crashlytics in React Native

Hello fellow geeks, welcome to my blog. I’m going to talk about Crashlytics. Now, many of you have already heard of it or you might don’t have a clue. The word itself can tell you its meaning. Well, Crashlytics is a software company owned by Google but it’s just not about the company. what we are going to talk about is how we can use it in our react native application.

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.

Hire-React-Native-Developers - Bigscal

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.

image5

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

image6

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

image1

  • 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.

image2

  • 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.

image7

  • 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.

cross plartform crashlytics in React-Native

  • 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.

crashlytics in React-Native

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.