Tech Media Today
Crashlytics with React Native
Web Development

Integrate Crashlytics with React Native App

In this blog, you will read

  • Getting Started with the help of React Native
  • Add Crashlytics to your React Native app
  • Add Crashlytics SDK to XCode Project of yours
  • Overriding the RN log function (and adding CLS_LOG)

If you are involved in owning or handling a business, you surely might have a social media presence of the same in the form of an app or website.

As important as it is, you might also want to make sure it runs smoothly all the time without any issues, crashes or bugs.

And in order to determine that, Firebase Crashlytics is used. It is a lightweight crash reporter which fixes the stability issues which might come in the way of your good app quality. Not only that but it also helps you track and prioritize any such troubles with the functioning of your app.

Firebase Crashlytics also discovers the various possibilities which might have led to the crashing of your app. You can figure out if a particular crash has an effect over several users or a particular issue escalates in general. 

Now, Crashlytics is a part of Fabric which is an SDK that’s offered by Twitter. It comes with some of the best tools who are going to help you with the development of new mobile apps.

If you want to implement the same into your mobile app, it could be done with some of the easiest methods which we would be mentioned in this post.

Getting Started with the help of React Native

If you want to implement Firebase Crashlytics for your Android or iOS app using React Native, you need a Firebase project which you can create with the help of Firebase console.

  • Start off with the installation of the @react-native-firebase/app package in your project.
  • Link the same into your project, like react-native link @react-native-firebase/app
  • Now install and link the @react-native-firebase/crashlytics into your project.
  • As soon as you have installed and linked both of these elements into your project, follow the ‘Add Firebase to your Project’ guide. You can find it in your Firebase website and download the project credentials into your app.
  • Now, import the package into your JS bundle and you are done. All of the JavaScript exceptions and errors are automatically captured.

In case you are working over a regular native app, the integration is easy. All you have to do is to add the SDK to your project and initialize it in AppDelegate.m file. 

But if you are using the React Native App Development, it might not be enough at times as most of the crashes happen in JavaScript only.

Add Crashlytics to your React Native app

Part 1 – Add Crashlytics SDK to XCode Project

In this part, you are presented with two options. Either you can download the SDK from the Fabric website or you can install the SDK from CocoaPods.

However, most of the React Native apps nowadays don’t have to use CocoaPods because Fabric already has a good working method which comes with a proper guide for newbies as well. So, we would skip the latter. 

1) In the first step, we would be creating our Fabric account.

2) Now, familiarize yourself with its functioning and click on Xcode to download the Fabric Plugin.

3) Unzip and run the app and login with your credentials. Select your Xcode Project from the given list.

4) Now you can install Crashlytics. After that, follow these steps –

  • Add a Run Script Build Phase and paste the command. Then you can launch your app.
  • As soon as it is built, just drag and drop the icon from the Fabric app into your Project Navigator.

5) As the SDK is already set up, you can now initialize Crashlytics into your app code.

In your AppDelegate.m, add the following lines

Now, you can add the following line at the top of the application –

– (BOOL)application:(UIApplication *)applicationdidFinishLaunchingWithOptions:

(NSDictionary *)launchOptions {

[Fabric with:@[[Crashlytics class]]];

Now, build and run the same again. Fabric.app would verify your installation. This would let Crashlytics work with your app. With the help of this setup, you would know when your app crashes. However, if you are using React Native services, you still won’t know where it has crashed. 

PART 2 – Overriding the RN log function (and adding CLS_LOG)

Since we are using React Native, we still have to override the custom logging function which can send the logs from JS to Crashlytics.

To do this, we need to add a few snippets of code to the AppDelegate.m file.

1) Add the RCTLog Header File by the following code

This file manages the Logging related functions from React Native and asl.h could be used in the logging function.

2) Now, we can change the log threshold level and override the logging function

Here, we are lowering the threshold log level and then telling the React Native that we are using our own logging function rather than the default which we would be adding in the next step.

3) Now, we add our own logging function before the AppDelegate.m file’s @end and finally integrate Crashlytics with React Native.

CONCLUSION

You are all set with Crashlytics with the React Native app. Since all of the React Native crashes happen at the same time in native code, Crashlytics thus groups together. However, it might be a cumbersome process to look for a particular type of crash under a single group.

If you want to integrate Crashlytics with React Native app and don’t know where to start, you can start with hiring React Native Developers. The significance of hiring developers is that they can also help you in building native react apps for different platforms. 

Additional Resources:

6 Top Cross-Platform Mobile App Development Tools

Kotlin Vs Java -Which is better for Android App Development

Related posts

Why Migration from Magento 1 to 2 is Important and How to Achieve it?

Abhishek Agarwal

Why Appy Pie’s Design Studio is a software to watch out for!

Vikas Varma

Where to Find The Genuine Uber Clone Script That Works?

Team TMT

What is Agile Project Management Methodology?

Team TMT

What is a Virtual Dedicated Server and Why does a Business need it

Vikas Varma

Understanding the Needs of a Reliable Web Hosting Provider

Rishabh Sinha

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More