Firebase Crashlytics : Integration in React Native App
Pradeep
Posted on June 20, 2024
Crashlytics is one of the powerful tool from the Firebase that helps us to track and analyze the crashes in real-time, by enabling the Crashlytics in your App you can determine the root cause of the crash and you can understand the impact on your users hence you can keep your app stable authentic.
In this article you can check the steps for configuration and the sample code to test the crash in real-time
Setting Up Crashlytics in Your React Native App
Step 1 : Install Firebase SDK
npm install @react-native-firebase/app
npm install @react-native-firebase/crashlytics
Step 2 : Setup Firebase Project
Next, you need to go to firebase console and create a new project and follow the instructions to generate a google-services.json file for Android or a GoogleService-Info.plist file for iOS.
if you have already has a project running in firebase you can just download the google-services.json for Android and GoogleService-Info.plist for iOS
Step 3: Integrate Crashlytics in your app
This is one of the important and exciting part of integration
copy the google-services.json fie you downloaded in firebase to the following path
/android/app/.
Next open android/build.gradle file and add the following dependency:
// ..
buildscript {
// ..
dependencies {
// ..
classpath 'com.google.firebase:firebase-crashlytics-gradle:3.0.0'
}
// ..
}
Next open android/app/build.gradle file and add the following plugins
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // apply after this line
apply plugin: 'com.google.firebase.crashlytics'
// ..
Step 4 : Add a file to the base folder of your project with the name firebase.json and copy the following content
{
"react-native": {
"crashlytics_debug_enabled": true
}
}
Step 5 : Rebuild the project
npx react-native run-android
Step 6 : Force a test crash
Add the following code in your app :
`import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import crashlytics from '@react-native-firebase/crashlytics';
async function onSignIn(user) {
crashlytics().log('User signed in.');
await Promise.all([
crashlytics().setUserId(user.uid),
crashlytics().setAttribute('credits', String(user.credits)),
crashlytics().setAttributes({
role: 'admin',
followers: '13',
email: user.email,
username: user.username,
}),
]);
}
export default function App() {
useEffect(() => {
crashlytics().log('App mounted.');
}, []);
return (
title="Sign In"
onPress={() =>
onSignIn({
uid: 'Aa0Bb1Cc2Dd3Ee4Ff5Gg6Hh7Ii8Jj9',
username: 'Pradeep',
email: 'pradeep@example.com',
credits: 42,
})
}
/>
crashlytics().crash()} />
);
}`
Happy Coding !!
Posted on June 20, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.