The most time-consuming and
difficult task in software development is to catch the bug within the app. The reason is when your
app is released to the public, you won't know what device,
OS, setting the user is using. The worse is you won't be able to
know how to replicate the bug. With Firebase Crashlytics, we can know which part of the
code causes the app to crash. We even can have the data the
app is processing during the crash. With all this information, we can speed up the bug fixing process. Fixing the bug quickly is of paramount importance as a buggy app will cause a
negative impression for your app. Welcome to the JustCode channel
to learn coding with me! Your likes, favorites, sharing,
and subscription to this channel are my biggest motivation to create more videos. If you have any questions about this tutorial, please leave a comment below. All our tutorial videos are available
in both English and Mandarin. In the last tutorial, I had shown you
how to add Firestore into our app for data storage and synchronisation. If you have not watched our tutorial 12,
please watch it before proceeding. Today I am going to show you
how to use Crashlytic from Firebase to help developers like you and me to catch the bug in the app quickly! To use the Crashlytics from Firebase, we need to install both the
@react-native-firebase/app and @react-native-firebase/crashlytics module. Let's bring out the terminal screen and make you are in the project root folder. In the previous tutorial, we had already installed the
@react-native-firebase/app module. Therefore we only need to install the
@react-native-firebase/crashlytics module in this tutorial. Just key in yarn add @react-native-firebase/crashlytics
and press enter. After the module is installed, issue the pod install command to install
the required modules for iOS. For the Android platform, we need to modify the build.gradle files
to complete the installation. Open the android/build.gradle file, scroll to the buildscript/repositories section, make sure the google() is there. Next, scroll to the dependencies section, add in the Crashlytics setting as shown. Now, open the android/app/build.gradle file. Scroll to the end of the file and add in the
apply plugin for the crashlytics as shown. Next, scroll up to the
android/buildTypes/release section, add in the nativeSymbolUploadEnabled setting. This allows the android app to upload the
native symbol to Firebase when the app crash. We had completed the install and
setup for the Crashlytics module. Now we are going to add the Crashlytics
feature into our JustCode dictionary app. Before we start coding, please take note that you should prompt your user to allow the app to collect
information for crash analytic. We are going to make the
following changes to the dictionary app. First, we prompt user regarding
the collection of information. Then, store the user response
into the app's local storage. Whenever the app is launch, it should check if the user had allowed
or denied the use of Crashlytics. Next, create the respective actions
and reducer to update the Redux state. Last, create Crashlytics logs within your app to
capture useful information when the app crashed. Let's open the firebase.json file
under the project root folder. Add in the crashlytics auto
collection flag and set it to false. This will instruct the Crashlytics module not to auto collect information when the app started. Next, we will add in the
crashlytics debug enabled flag and set it to true. Without this flag set to true, when we are building the app in debug mode, the Crashlytics will not send
the information to Firebase. Now open the Helper.js under the src/lib folder. We will create two methods to
read and update the user response from and to the app's local storage. Next, open the actionType.js under
the src/redux/actions folder. We will add in the setCrashlytics action type. Next, open the uiActions.js under the same folder. At the end of the file, create the setCrashlytics method to return the
setCrashlytics action type with the payload. Follow by open the uiReducer.js
under the reducers folder. We first add in the new enableCrashlytics state and set the default value to null. Then we will create a method that updates
the enableCrashlytics state as shown. Now, we are going to modify the App.js
file under the project root folder. At the beginning of the file,
we import the crashlytics module. Next, we scroll to the componentDidMount method. In it, we will invoke the
helper getCrashlyticsSetting method. If the result return is not null and is true, then we will invoke the
setCrashlyticsCollectionEnabled method from crashlytics module to
enable the data collection. Once we enable the crashlytics, we will proceed to update the Redux state
by invoking the setCrashlytics action. If the returned result is null, then we will display the alert
dialog box to prompt the user that we are going to collect the data for crashlytics. In the dialog box, we will have two buttons for
the user to allow or deny the data collection. In the Allow button, we will invoke the same
setCrashlyticsCollectionEnabled method to enable the data collection. Once enabled, we will update the Redux state and update the user response to app local storage. In the Deny button,
we will just update the user response. The next file we going to modify for this tutorial is the src/screens/search/index.js file. In this file, we will invoke the crashlytics module to capture
detailed information on the app execution. We will invoke the log, setUserId, setAttributes, and recordError methods from
crashlytics module to capture information. Please take note that the log and recordError
methods are synchronous methods while the setUserId and setAttributes
methods are asynchronous methods. The log method is used to log general information
that helps you to debug the application. The setUserId method
captures the user information while the setAttributes method captures the
attributes related to the user and the app. The recordError method is used to record the
error the app had captured in the try-catch block. It will record the React Native javascript stack trace. As a thumb of rule,
don't overuse the crashlytics module methods. However, you should also capture
enough information to help in debugging. In general, you should capture
enough information on high-risk methods. For example, in methods
that perform complex calculations, storage access, or network access. In this tutorial, we will invoke the crash
method from crashlytics module to simulate the app crash. We had completed the changes. Before running the app in the simulator, we need to enable the
Crashlytics in the Firebase console. Let's bring out the Firebase console. Click on the JustCodeDict project. Then click on the Crashlytics from the left menu. Click on the Enable Crashlytics button to enable the Crashlytics feature in Firebase. From the app dropdown list, select the iOS app as we will be
testing Crashlytics in iOS simulator. Let's bring out the terminal screen again and
run the application in iOS simulator as shown. The app had launched in the simulator.
Let's place some breakpoints in the debugger. Now, click on the Allow button in the simulator. The breakpoint in the
Allow button at App.js will be hit. Press F8 to execute the
setCrashlyticsCollectionEnable method. Now, key in a word in the simulator
to perform a word definition lookup. The breakpoint in the onSearch method will be hit. Let's step through all the breakpoints
until the crash method. Once the crash method is invoked,
the app will crash immediately. After the app crashed, it may take minutes for
the Firebase console to display the captured bug. Click on the new crash report
entry in the Firebase console. It will display the detail of the crash report. From the report, we can see the stack
trace that caused the app to crash. We also can see the attributes
captured in the Keys tab. The log capture by the crashlytics
will be appearing at the Logs tab. With the logs, we can know
where is the cause of the crash. The data tab will display the
device information and the user ID. With Crashlytics, it provides app developers with
details on the crash automatically without manually asking the user
what they have done on the app. It allows us to fix the bug quickly and prevent negative impressions
due to the buggy app. We had come to the end of this tutorial. Today, I had demonstrated using Crashlytics to
capture useful information when the app crashed. If you have any questions regarding this tutorial or any topic related to mobile app
development you wish to know, please leave a comment below. You can follow the link to get the source
code for this tutorial on our Github page. Your likes, favorites, sharing, and subscription are
my biggest motivation to create more videos. Thanks for watching, bye!
