How to setup crashlytics in react native

Crashlytics Setup:

App crashing is a most important part of app development, sometimes we see everything working fine in debug mode but when we generate and install the app, app getting crashed and we didn’t find any relevant reason for crashing, so today I am going discuss the “How to setup crashlytics in react native”.

Crashlytics is a part of Fabric, an SDK offered by Twitter with a set of tools that will help you a lot while developing mobile apps.

Crashlytics is a #1 most implemented performance SDK.

There are 2 important features which we going to use.

Crash Reporting —

It records every crash and maintains its stack trace.

Crash Logs —

when a user crashes your app, all the information will be sent to Crashlyticsʼs servers the next time the user launches your app, including all the content that youʼve logged through CLS_LOG. So if you log information for most of the events of the action in your app, you can read the logs later, and reproducing the crash should be simple.

Before you begin

Before setting up Crashlytics, you need to register your iOS app and configure it to use Firebase, if you didnʼt add your project with firebase then please follow this blog

Click here for firebase setup in iOShttps://www.itechinsiders.com/how-to-integrating-firebase-with-ios-in-react-native/

or If your iOS app already uses Firebase, then it’s already registered and configured for Firebase, then no need to register a new app. after successfully adding project we going further discussion.

Note — adding Firebase to your iOS app involves tasks both in the Firebase console and in your open Xcode project, so open both.

Set up Crashlytics in the Firebase console:

Step 1:

Click Crashlytics in the left sidemen under the quality of the Firebase console, looks like.

https://www.itechinsiders.com/ - react native crashlytics 1
https://www.itechinsiders.com/ – react native crashlytics 1

Step 2:

If you registered more than one app in your Firebase then select the app you just added from the dropdown next to Crashlytics in the top bar of the console, looks like. Select your project here just looks.

https://www.itechinsiders.com/ - react native crashlytics register
Select your registered app name here just looks.
https://www.itechinsiders.com/ - react native crashlytics 2
https://www.itechinsiders.com/ – react native crashlytics 2

Step 3:

Click on Set up Crashlytics.

https://www.itechinsiders.com/ - react native crashlytics 3
https://www.itechinsiders.com/ – react native crashlytics 3

Step 4:

Select the setup of a new firebase app and click next.

https://www.itechinsiders.com/ - react native crashlytics 4
https://www.itechinsiders.com/ – react native crashlytics 4

Add the Crashlytics SDK in your project:

There is a 2 way to add fabric and crashlytics in-app.

1. Adding fabric and crashlytics using cocoa pods.

2. Adding fabric and crashlytics Manually in Xcode.

Step 1: Adding fabric and Crashlytics using cocoa pods:

  • Open a new terminal window, and navigate to your Xcode project’s directory like – myproject->ios.
  • Then open the project in the editor and add these lines ==
  • # Pods for PodTest
  • pod ‘Fabric’, ‘~> 1.10.2’
  • pod ‘Crashlytics’, ‘~> 3.14.0’ –
  • Remove the old pod’s folder and podlock file – From your terminal, install the pod’s dependencies:
  • pod install

Step 2: Adding fabric and crashlytics Manually in Xcode

  • Download the Crashlytics SDK. – Unzip the SDK, then drag Crashlytics.framework and Fabric.framework into your project’s Project navigator.
  • Ensure that Copy item if necessary is selected, then click Finish.
  • Initialize Crashlytics in your Xcode: The frameworks you added to include a run script that initializes Crashlytics. Add it to your project’s build phases.
  • – Open your project in Xcode, then select a project from the navbar.
  • – Select your main build target from the Select a project or target dropdown.
  • – Open the target’s Build Phases tab.
  • – Click + Add a new build phase, then select New Run Script Phase.
  • – Add the following line to the Type a script text box, after all these steps your window is like.
https://www.itechinsiders.com/ - react native crashlytics setup
After this your crashlytics is setup now.

Build or run your project:

First, build the project(cmd+B) the run the project in the device and put some code that crashes the app so you can able to see the crash report.

Setup dSYMs for crashlytics for iOS devices: in quality->crashlytics

you find 2 – different tabs one is dashboard and other is dSYMs, looks like

https://www.itechinsiders.com/ - react native crashlytics load
https://www.itechinsiders.com/ – react native crashlytics load

For this, you find your dSYM files and zip it then upload that files here. Now the question is where you find your dSYM files, so letʼs start to find dSYM, follow these steps.

Step 1:

Go to window -> orgniser-> right-click -> select open in finder, window Is looks like(in xcode -> window -> orgnizer, or xcode – > product -> Archive)

https://www.itechinsiders.com/ - react native crashlytics list
https://www.itechinsiders.com/ – react native crashlytics list

Step 2:

After open project show in finder, window Is looks like

Step 3:

After click show package contents, the window Is looks like.

https://www.itechinsiders.com/ - react native crashlytics package
https://www.itechinsiders.com/ – react native crashlytics package

Step 4:

Make the zip of .dSYM files and upload them on firebase. 

After successfully setup crashlytics you can see your crash report in the dashboard  of firebase crashlytics looks like. 

https://www.itechinsiders.com/ - react native crashlytics
https://www.itechinsiders.com/ – react native crashlytics

And you can find my post on medium as well click here please follow me on medium as well.

So the topic  “How to setup crashlytics in react native” is completed, “you can find the next issue list here.

And if any other issue then please comment.

Happy Coding Guyz


Related Post