Implementing Firebase Crashlytics in React Native

Firebase Crashlytics is a lightweight, real-time crash reporting tool that helps developers monitor, track, and fix app crashes. Integrating Crashlytics in a React Native app improves app stability and ensures you can react quickly to issues in production.

1. Prerequisites

Before implementing Crashlytics, ensure you have:

A React Native project (bare or Expo managed workflow).
Firebase project created in Firebase Console.
@react-native-firebase/app and @react-native-firebase/crashlytics installed (for bare workflow).

2. Install Dependencies

For React Native bare workflow, install Firebase packages:

bashnpm i @react-native-firebase/app @react-native-firebase/crashlytics

For Expo managed workflow, you can use the bare workflow or expo-firebase-crashlytics (currently requires ejecting to bare workflow for full support).

3. Configure Firebase in Your Project

iOS Setup

Download GoogleService-Info.plist from Firebase Console.
Add it to ios/YourAppName folder.
In Xcode, select your project → Build Phases → Copy Bundle Resources, and ensure GoogleService-Info.plist is included.

Android Setup

Download google-services.json from Firebase Console.
Place it under android/app/.
Modify android/build.gradle:

bashbuildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.3.15'
    }
}

Modify android/app/build.gradle:

bashapply plugin: 'com.google.gms.google-services'

dependencies {
    implementation platform('com.google.firebase:firebase-bom:32.1.0')
    implementation 'com.google.firebase:firebase-crashlytics'
}

4. Initialize Firebase Crashlytics

In your app’s entry file (App.tsx or index.js):

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

export default function App() {
  useEffect(() => {
    // Enable Crashlytics collection
    crashlytics().setCrashlyticsCollectionEnabled(true);

    // Log app start
    crashlytics().log('App mounted');
  }, []);

  const testCrash = () => {
    // This will trigger a test crash
    crashlytics().crash();
  };

  const logCustomError = () => {
    crashlytics().recordError(new Error('Custom handled error'));
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Firebase Crashlytics Demo</Text>
      <Button title="Test Crash" onPress={testCrash} />
      <Button title="Log Custom Error" onPress={logCustomError} />
    </View>
  );
}

5. Best Practices

Enable crash reporting in production only:

bashif (!__DEV__) {
    crashlytics().setCrashlyticsCollectionEnabled(true);
}

Log user-specific info for better context:

bashcrashlytics().setUserId('USER_12345');
crashlytics().setAttributes({ plan: 'premium', region: 'IN' });

Use recordError for handled errors: Avoid throwing errors for non-critical events; instead, log them for debugging.
Test integration using the crash() method to ensure crashes are visible in Firebase Console.

6. Optional: Handling Unhandled JS Exceptions

React Native allows capturing unhandled JS exceptions and forwarding them to Crashlytics:

bashimport { setJSExceptionHandler } from 'react-native-exception-handler';
import crashlytics from '@react-native-firebase/crashlytics';

const errorHandler = (error, isFatal) => {
  crashlytics().recordError(error);
};

setJSExceptionHandler(errorHandler, true);

7. Monitoring & Analytics

Go to Firebase Console → Crashlytics.
View real-time crash reports.
Identify affected users, device types, OS versions.
Track errors by severity and frequency.

8. Conclusion

Integrating Firebase Crashlytics in React Native is straightforward but highly valuable. It helps:

Quickly identify and fix critical bugs.
Improve app stability for real users.
Track both fatal crashes and handled exceptions.

Implementing Firebase Crashlytics in React Native