How to Setup Fabric’s Crashlytics with React Native For Android

Fabric.io’s Crashliytics is a free crash reporting solution that is easy to integrate with react native and works for both IOS and Android platforms. As a bonus, it comes with real-time analytics if you want to track your users and app.

Setting up Crashliytics is a straightforward process, but it might be a little confusing at first.  You can find the official installation details for android here.

Steps For Integrating Crashliytics with React Native

  1. Visit this sign up page and create an account for fabric.io
  2. Open “android/build.gradle” file, and add the highlighted 2 lines to this file.
    Final build.gradle file looks like below. We have updated the Gradle version to 1.25.1 as this was the last version at the time of this guide was written. You can find the latest Fabric Gradle Plugin version from the changelog here.
    buildscript {
        repositories {
            jcenter()
            maven { url 'https://maven.fabric.io/public' }
            
        }
        dependencies {
            classpath 'com.android.tools.build:gradle:2.2.3'
            classpath 'io.fabric.tools:gradle:1.25.1'
    
            // NOTE: Do not place your application dependencies here; they belong
            // in the individual module build.gradle files
        }
    }
  3. Next, open the build.gradle file under the “android\app”, add the highlighted 2 line to the beginning.
    apply plugin: "com.android.application"
    apply plugin: "io.fabric"
    
    repositories {
      maven { url 'https://maven.fabric.io/public' }
    }

    Add the compile command to the dependencies section

    dependencies {
    	.
    	.
    	.
    		compile("com.crashlytics.sdk.android:crashlytics:2.8.0@aar") {
    			transitive = true;
    		}
    	}
  4. Open “android\app\src\main\AndroidManifest.xml” file and add the meta-data details within application tag.
    <application
    		<meta-data
    			android:name="io.fabric.ApiKey"
    			android:value="<FABRIC_API_KEY>"
    		/>
    </application><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

    You will find your FABRIC_API_KEY in Organizations under Settings page of  your fabric.io account.   Replace FABRIC_API_KEY with your API key.

  5. Create file named  fabric.properties under android\app directory and add your API and secret keys to this file
  6. Initializing the Kit – Open the “android\app\src\main\java\com\yourapp\MainActivity.java” and add the following lines to the imports.
    package com.yourapp;
    
    import com.facebook.react.ReactActivity;
    
    
    import android.os.Bundle;
    
    import com.crashlytics.android.Crashlytics;
    import io.fabric.sdk.android.Fabric;<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

    It is not mentioned  to add  “import android.os.Bundle;” in official guide. Therefore check if it is already included in your file before inserting. I was using react-native version 0.50+ and it wasn’t there.

    Add Fabric to onCreate function.

    @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            // Fabrics
            Fabric.with(this, new Crashlytics());
    
        }<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

    Note: If you don’t have onCreate function in the MainActivity.java, add the function.

  7. Build your app. You can use “react-native run-android” command to build the app, and after the build process is over, the app must be available on your fabric.io account.

First Crash

The app is now ready to report crashes. Let’s create our first crash and check our dashboard if it works.  Add a throw exception line as shown below to OnCreate function in MainActivity.java file.

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Fabrics
        Fabric.with(this, new Crashlytics());
	// Throw and exception to test
	throw new RuntimeException("Let's crash");
    }

Although the app is ready to report crashes, it only sends Java exceptions at this stage.  For this, we can use react-native-fabric to send JS errors and logs to Crashliytcs,