DEV Community

Dainy Jose
Dainy Jose

Posted on

Implementing Firebase Crashlytics in React Native

#reactnative #firebase

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
Enter fullscreen mode Exit fullscreen mode

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'
    }
}
Enter fullscreen mode Exit fullscreen mode
  • 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'
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

5. Best Practices

  • Enable crash reporting in production only: 
if (!__DEV__) {
    crashlytics().setCrashlyticsCollectionEnabled(true);
}
Enter fullscreen mode Exit fullscreen mode
  • Log user-specific info for better context: 
crashlytics().setUserId('USER_12345');
crashlytics().setAttributes({ plan: 'premium', region: 'IN' });
Enter fullscreen mode Exit fullscreen mode

  • 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);
Enter fullscreen mode Exit fullscreen mode

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

✍️ 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

Top comments (0)