DEV Community

Cover image for Firebase Crashlytics : Integration in React Native App
Pradeep
Pradeep

Posted on

4

Firebase Crashlytics : Integration in React Native App

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 !!

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay