Crashlytics In React Native - How to Integrate Firebase Crashlytics In Your React Native Apps

July 02, 2021 Publish By : EXPERT APP DEVS 3 min read Viewed By : 521
Crashlytics In React Native

To move forward we must know about firebase and crashlytics, so let’s discuss these topics.

 

Firebase Crashlytics in React Native

What is Crashlytics - 

Firebase Crashlytics helps you to prioritize, track, and fix stability issues that reduce the app quality in real-time. 

Crashlytics is made by 2 - words Crash + Analytics which means you can collect analytics details about your app crashes and errors. It happens through these three aspects, which are - 

  • Crash Logs: Crash logs event shows the crashes reports of your app.
  • Crash reports: Crash report shows every crash of an app which is automatically turned on and sent.
  • Stack traces: JavaScript stack traces can be sent and recovers the error

What is Firebase - 

Firebase is a BaaS means Backend as a Service that provides the advantage to develop mobile apps by using React Native. Firebase is a platform which was acquired by Google and has a  very large and active community. Firebase offers the following features - 

  1. Machine Learning Kit
  2. Hosting
  3. Cloud Database Store
  4. Authentication
  5. Storage
  6. Performance
  7. Crashlytics
  8. Cloud Messaging
  9. In-App messaging
  10. Test lab

So now we know more about firebase as well as crashlytics too, so let’s start setting up the firebase console and project.

Setup The Firebase Console - 

First, we need to open the firebase console then we register our application on it, for console-setup - https://console.firebase.google.com/ , open this link and register the project, for doing this correctly follow these steps carefully.

Step 1 -  

When you open this link you see the window like in the image below and here you choose the option - create a project.

Setup The Firebase Console

Step 2 - 

After clicking the create a project you redirect to the next screen where you need to insert the name of your project and click on agree for terms and conditions and then click on continue,

Here is the main dashboard of firebase which looks like - 

 

create a project on Firebase Console

 

Step 3 - 

Here is what the next screen looks like, see here the options and then click on the continue button.

Enable Google Analytics for Firebase Console Data 

Here your project creation is ready for firebase crashlytics.

Step 4 - 

In the left side menu, you find the option crashlytics under the quality of the Firebase console, looks like.

left side menu of Firebase Console

Step 5 - 

Select the app you just added from the dropdown next to Crashlytics. Select your project here just looks like.

Select project from dropdown

Step 6 - 

Select the name of your project and click on the setup crashlytics option.

setup crashlytics option

Step 7 - 

After click on setup crashlytics you see the screen which is looks like - 

Fabric user migrating a Crashlytics app

After clicking next you see the crashlytics are set up. Now the firebase console side setup is completed and we move to the app side.

Firebase Setup - 

Now we are going to setup the firebase plugin in react native app.

npm install react-native-fabric

npm i @react-native-firebase/crashlytics

npm i @react-native-firebase/app

Import the plugin - 

import crashlytics from '@react-native-firebase/crashlytics';

Force the crash - 

crashlytics().crash()

CocoaPods Installation - 

Now we are going to set up the cocoa pods for crashlytics.

cd ios/ && pod install
 

So we completed the react-native crashlytics setup in this tutorial, if you have any query then please contact us.mail

Need a consultation?

Drop us a line! We are here to answer your questions 24/7.