Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
Menu
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

Firebase Crashlytics Integration in React Native

Published by: Muhammad Umair | March 2, 2022 msaqlain
SCROLL AND BE AMAZED!
Home > App Development • React Native > Firebase Crashlytics Integration in React Native

Applications that are buggy can make your user unhappy and they might uninstall your app. Apps can generate a lot of crashes and manually tracking them is time-consuming. Firebase Crashlytics helps you in collecting these crashes, analyzing them, and organizing the crash reports. It also helps in setting the priority of these crashes so you can fix them as per the priority. With Firebase Crashlytics you can see the crashes at a glance on a dashboard view.

Setup Firebase Project

Go To Firebase console and create a new project

https://console.firebase.google.com/

Write your project name, accept terms & conditions and click on continue

Choose your Google account and create the project.

Install react-native dependencies for Firebase Crashlytics

Install the following react native firebase crashlytics dependencies

yarn add @react-native-firebase/app

Install the Crashlytics module

yarn add @react-native-firebase/crashlytics

If you’re developing your app using iOS, run this command

cd ios/ && pod install

Configure Android with Firebase

  1. Click on the android icon on the firebase dashboard to setup application Write your app name and register

2. Download the google-services.json file and put it on your — projectname/android/app — folder.

3. Add google-service dependency in your android/build.gradle file.

4. Add firebase crashlytics plugin dependency in your android/build.gradle file.

5. Apply the com.google.firebase.crashlytics plugin by adding the following to the top of your android/app/build.gradle file:

Once the above steps have been completed, rebuild your Android project: npx react-native run-android

Configure iOS with Firebase

  1. Click on the iOS icon on the firebase dashboard to setup application Write your app name and register
  2. Download the GoogleService-Info.plist file and move it into your ios project directory
  3. Make sure to import firebase and firebase crashlytics module is imported in App.Delegate.m.
  1. Also, configure the firebase module in App.Delegate.m inside didFinishLaunchingWithOptions

Time to see crashlytics in action

First, import the module into your file.

Crashlytics provide us several useful methods that we can use to track app errors easily. Some are listed below.

log method

We can use the log method throughout our app to accumulate extra context for possible crashes that can happen.

I have placed this method in my component mounting to log app mounted phase on the firebase console.

Now move to the crashlytics window, under the events section you will see the log appearing.

Crash method

To test Crashlytics we can use the crash method to crash the app forcefully.

As an example, I have forcefully crashed my testing app on the login method.

On login, my testing app crashed, firebase crashlytics collect this crash and will send this to the firebase console, so If I open my firebase console, under the crashlytics window I can see the crash reports.

recordError method

With crashlytics, you can also send javascript stack traces to the firebase console to better know where a crash has happened in the stack tree.

setCrashlyticsCollectionEnabled To stop collecting the crashlytics, we can use setCrashlyticsCollectionEnabled to disable the crashlytics.

References

rnfirebase.io
rnfirebase.io/crashlytics/usage


About Muhammad Umair

Newsletter

Search

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • October 2021
  • September 2021
  • May 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019
  • Categories

    • Android App Development
    • App Development
    • App Testing
    • Blog
    • Elasticsearch
    • flutter-app-development
    • IOT
    • React Native
    • Staff Augmentation

Recent Posts

  • Getting started with NgRx
  • Secure Mobile App Credentials in React Native
  • Bugs Count & Test Coverage
  • Introduction to Nessus Vulnerability Scanning Tool
  • Error Boundary in React Native

Tags

  • android
  • Automation
  • cross-platform
  • development
  • firebase
  • ios
  • QA
  • react-native
  • Testing
  • Test Script

Newsletter

Newsletter

Post navigation

Previous Introduction to Jetpack DataStore – Alternative to SharedPreferences
Next How to Patch NPM Packages

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Schedule an appointment with our Mobile App Development Expert

    Footer Menu
    • Company
      • About Us
      • Portfolio
      • Blog
      • Careers
      • Contact Us
    • Solutions
      • Apps Discovery Services
      • Team Augmentation
      • Enterprise App Development
      • AR/VR Application Development
      • IoT Application Development
      • Wearables Apps Development
      • Field Sales
      • On-Demand Apps Development
    • Technologies
      • iOS
      • Android
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • HTML5
      • Sencha
    • Industries
      • Retail
      • Agriculture
      • Healthcare
      • Pharmaceutical
      • Manufacturing
      • Automotive
      • Logistics
      • Education

    US Office

    Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

    Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

    Tel: +1 408 365 4638
    Support: +1 (408) 512 1812

    Mexico Office

    Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

    Bulgaria Office

    49 Bacho Kiro Street, Sofia, 1000, Bulgaria

    Canada Office​

    895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

    UK Office

    Export House, Cawsey Way, Woking Surrey, GU21 6QX

    Tel: +44 (0) 14 8361 6611

    UAE Office

    Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

    Tel: +971-55-6540154
    Tel: +971-04-2505173

    Pakistan Office

    163 Bangalore Town, Main Shahrah-e-Faisal, Karachi –
    75350

    705, Business Center, PECHS Block-6, Shahrah-e-Faisal,
    Karachi – 75350

    First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore

    Tel: +92-21-3432 3721-4 

    © 2021, Folio3 Software Inc., All rights reserved.

    • Privacy policy and terms of use
    • Cookie Policy
    Follow us on
    Facebook-f
    Twitter
    Linkedin-in

    Get a free app audit

      Tired of your app not performing up to the mark?

      Get a free technology and app strategy review.