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:

npm 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

1. Download GoogleService-Info.plist from Firebase Console.




2. Add it to ios/YourAppName folder.




3. 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:
  
  

buildscript {

    dependencies {

        classpath 'com.google.gms:google-services:4.3.15'

    }

}

• Modify android/app/build.gradle:
  

apply 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):

import 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:
  

if (!__DEV__) {

    crashlytics().setCrashlyticsCollectionEnabled(true);

}

• 
  Log user-specific info for better context:
  

crashlytics().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:

import { 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.

References

• React Native Firebase Crashlytics




• Firebase Crashlytics Guide

✍️ Written by Dainy Jose — React Native Mobile Application Developer with 3+ years of experience building cross-platform mobile apps using React Native (Expo, TypeScript, Redux).

Currently expanding backend knowledge through the MERN Stack (MongoDB, Express.js, React.js, Node.js) to create more efficient, full-stack mobile experiences.

💼 Tech Stack: React Native · TypeScript · Redux · Expo · Firebase · Node.js · Express.js · MongoDB · REST API · JWT · Jest · Google Maps · Razorpay · PayU · Agile · SDLC · Git · Bitbucket · Jira

📬 Connect with me:

🌐 Portfolio

🔗 LinkedIn

💻 GitHub