Integrate Fabric.io’s Crashlytics to a React Native Android App

Recently we had to implement crash logging for a mobile app written in react-native. After looking at different solutions, we decided to settle with Fabric.io’s Crashlytics. It offers it’s own SDK for both Android and iOS which makes it really easy to integrate with apps written in react-native.
We will be using react-native-fabric package for the javascript part of the code. But before we can start capturing logs and crashes from our app, we need to perform an one time setup to get our secret API key from Crashlytics on the native side.
React Native uses Gradle to build apps on it’s android part. So we need to make the following changes to our android code.
In our android/app/build.gradle file make the following changes,

apply plugin: “com.android.application”
apply plugin: ‘io.fabric’
….
android {
repositories {
maven { url “https://jitpack.io” }
maven { url ‘https://maven.fabric.io/public’ }
}
….
….
dependencies {
compile(‘com.crashlytics.sdk.android:crashlytics:2.5.5@aar’) {
transitive = true;
}
….
}

Next in our android/build.gradle file make the following changes,

buildscript {
repositories {
jcenter()
maven { url ‘https://maven.fabric.io/public’ }
}
dependencies {
classpath ‘com.android.tools.build:gradle:1.3.1’
classpath ‘io.fabric.tools:gradle:1.+’
….
}

Finally, in our MainActivity.java make the following changes,

import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactPackage;
import io.fabric.sdk.android.Fabric;
import com.crashlytics.android.Crashlytics;
public class MainActivity extends ReactActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Fabric.with(this, new Crashlytics());
}

Now the first time when we run the app, the Fabric.io will detect the app details and generate the dashboard with our details. It will also create the API secret which we will need to make sure in present in android/app/fabric.properties

#Contains API Secret used to validate your application. Commit to internal source control; avoid making secret public.
#Fri Feb 15 15:26:05 IST 2016
apiSecret=xxxxxxx

The API key should also be included in our android/app/src/main/AndroidManifest.xml like

<meta-data
android:name=”io.fabric.ApiKey”
android:value=”xxxxxxx” />
</application>

Both these values will be available in your organization page. Once these steps are done, we can force our first crash and record it in the dashboard. To do so, make the following changes to the MainActivity.java file

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Fabric.with(this, new Crashlytics());
throw new RuntimeException(“This is a crash”);
}

Once we build the app with this change, the app will crash on launch. Next time the app is started, Crashlytics sends the exception logs to the dashboard. Then we can remove this line and continue building the app normally.

This finishes the native code setup for integrating Crashlytics in a react-native android app. We can now follow the steps listed on react-native-fabric to setup the Crashlytics javascript code.