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:
