Copied to Clipboard
- 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
✍️ 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