Forem: Caleb Jesusegun

How to Integrate Firebase Crashlytics in your Flutter App

Caleb Jesusegun — Tue, 10 Jan 2023 14:42:07 +0000

Firebase Crashlytics is a lightweight, real-time crash reporter that collects, organize and group crash report highlighting the circumstances that led to them. It provides you with a platform to track, monitor, and prioritize these unexpected crash issues that arise in your mobile apps. For more reasons why you need Firebase Crashlytics, visit this article post that explains in detail.

In this article, we’ll be looking at how to integrate Firebase Crashlytics into a sample flutter app. This is a Firebase login authentication app that makes use of the provider state management architecture. To follow up with the integration of Firebase Crashlytics, check out the starter project on Github.

Specifically, we’ll cover:

Setting up Crashlytics on the Firebase Console
Integrating Crashlytics in a Flutter app
Platform Integration for IOS
Configure Crash Handlers
Testing our sample app

Shall we?

Integrating Crashlytics on Firebase Console

First of all, Open the Firebase console to get started with Crashlytics. Then go to the Release & Monitor section in the side panel of the console and click on ‘Crashlytics’. Next, you’ll need to select the application either Android or IOS that you’re building for.

When this is done, click on the Enable Crashlytics button to set up Crashlytics. After it’s been setup, you’ll be navigated to the Crashlytics Dashboard

Integrating Crashlytics in a Flutter app

We have set up Crashlytics in our Firebase console, the next step is to integrate it into our authentication app. Check out the starter project on Github.

The first step is to add the Firebase dependency that is responsible for connecting your Flutter app to your firebase project.

Next, within the main top-level function in our flutter app ensure WidgetsFlutterBinding is initialized and then initialize Firebase

Then we add the firebase_crashlytics dependency in pubspec.yaml file

Next, we add the dependency to the android/app/build.gradle file path using the command below

Then lastly we need to add the classpath in the android/build.gradle file

Platform Integration for IOS

To generate crash reports for IOS apps, Firebase Crashlytics needs to access your project's debug symbol (dSYM) files. You can configure Xcode to automatically produce your dSYMs, process them, and upload the files whenever you build your app through the following steps:

Open your project's Xcode workspace and select its project file in the left navigation.
From the TARGETS list, select your main build target.
Then click on the Build Settings tab, click All and search for debug information format.
Set the Debug Information Format to DWARF with dSYM File for all your build types. This allows Xcode to produce dSYMs for your builds.
Next is to process your dSYMs and upload the files.
Click the Build Phases tab and select + > New Run Script Phase.
Make sure to double-check that the new run script phase is your project's last build phase otherwise Crashlytics won't properly process dSYMs.
Then expand the new Run Script section and add the following script under the Shell label

Then lastly in the input files section, add the paths for the locations of the following files:

The location of your project's dSYM files:

Then the location of your project's built Info.plist file:

For more information on dSYM files and how to manually upload dSYM files, visit Get Deobfuscated Reports

Configure Crash Handlers

Crashlytics is now enabled in our authentication app. You can automatically catch all errors that are thrown within the Flutter framework by overriding FlutterError.onError with FirebaseCrashlytics.instance.recordFlutterFatalError in the main top-level function of the app.

When it comes to asynchronous errors that are not handled by the Flutter framework, you use PlatformDispatcher.instance.onError:

Sometimes not all errors are caught by Flutter, there are zoned errors that can also occur as well. A common use-case where a Flutter error would not be enough is when an exception happens inside of an onPressed button. To catch such errors, you can use runZonedGuarded:

Testing our sample app

In order to check whether the Firebase Crashlytics is active or not in the app, Go to the login_view and comment out the function that authenticates a user that wants to log in. Add this line of code in order to force a crash in our app.

It will make the app crash forcefully. Then you can go to the Crashlytics Dashboard to check the status report of the crash.

Conclusion

We’ve successfully integrated Firebase Crashlytics into our sample authentication app. In this article, you were introduced to Firebase Crashlytics, how to easily integrate it into your mobile apps and how to test for unexpected crashes when they occur.

Check out the complete source code for the sample app. If you have any questions or inquiries, feel free to reach out to me on Twitter: @CalebJ or LinkedIn: @CalebJ.

Why you need Firebase Crashlytics in your Flutter Apps

Caleb Jesusegun — Wed, 21 Dec 2022 09:07:39 +0000

You have just finished building your first mobile app using the Flutter framework and now you’re excited to release it to both stores (play store and app store). But a few questions keep popping up in your mind before or after the release date;

How do you track unexpected crashes that happen while the users make use of the app?
How do you troubleshoot to get detailed information about a crash and its impact on the users of the app?

A user expectation is to have a seamless experience while engaging a mobile app. Bad user experience leads to app uninstalls and negative app reviews that eventually affect the brand image. This fundamentally creates a need for a stable app that is bug-free (crash-free). Although this is feasible, it is not always the case. Some crashes may occur in runtime but not in debug mode, making it difficult to detect and quickly resolve. Therefore a real-time crash reporter is needed to monitor such crashes.

In this article, we will take a deep dive into Firebase Crashlytics and what it entails. Specifically, we’ll cover:

Brief Introduction to Flutter and Firebase
What is Firebase Crashlytics
Benefits of Integrating Firebase Crashlytics in your Flutter app
Conclusion

So…let’s get into it

Brief Introduction to Flutter and Firebase

What is Flutter

Flutter is an open-source UI software development kit created by Google that uses Dart as the programming language. It is used to develop cross-platform applications for Android, iOS, Linux, macOS, Windows, and the web from a single codebase.

Flutter provides many advanced packages to work with databases such as Cloud Firestore provided by Firebase. Check out the Official Flutter Documentation for more information on Flutter.

What is Firebase

Firebase is a Google-backed application development software that enables developers to develop iOS, Android, and Web apps. It provides tools for tracking analytics, reporting and fixing app crashes, creating marketing and product experiments.

Firebase also provides various plugins for pertinent functions such as cloud firestore, firebase analytics, and firebase crashlytics. Check out the Official Firebase Documentation for more information on Firebase.

What is Firebase Crashlytics

Firebase Crashlytics is a lightweight, real-time crash reporter that collects, organize and group crash report highlighting the circumstances that led to them. It provides you with a platform to track, monitor, and prioritize these unexpected crash issues that arise in your mobile apps. This ensures app stability, simplifies debugging, and makes troubleshooting easier by giving you a snapshot of the problem.

A crash report may contain the following information:

The name and version of the local operating system.
The runtime type of the error, for example, StateError or NoSuchMethodError.
The stack trace generated by the crash includes the lines of code causing the crashes.

Firebase Crashlytics also allows you to customize your crash reports by adding logs, keys, etc. It provides real-time alerts when a crash report suddenly increases in severity.

The 3 core aspects of Firebase Crashlytics are:

Logs: Firebase Crashlytics logs each event of an app crash alongside the details.
Crash reports: Firebase Crashlytics gives details on Crash reports whenever a crash occurs in the app.
Stack traces: In the case of the app recovering from an error, Firebase Crashlytics helps to nonetheless report the error with the help of Dart Stack trace.

Benefits of Integrating Firebase Crashlytics in your Flutter app

1. Access to Crash-Free Users (CFU) Metrics to Debug Faster
The Crash-Free Users metric provided by Firebase Crashlytics helps developers monitor and determine the health of their app based on the percentage of users who have not experienced a crash during the entire selected time range. This is made possible and accurate through the Crashlytics Flutter SDK which provides an API for capturing fatal event crashes that a user experiences in your mobile app.

2. Receive Crash Report Notifications in real-time with Crashlytics Alerts
Critical user issues or crash reports may occur at any time and the need to be notified as soon as they occur is very important. With the help of Velocity alerts in Firebase Crashlytics, you can configure real-time alerts by different levels of your app’s stability such as high-priority alerts, regression alerts, and new issue alerts. They are particularly useful in the case of feature flags, when an issue in your app crosses a threshold that has been defined, it is a great signal to turn off the feature and investigate further.

3. Gain user insights with Custom logs and data
Firebase Crashlytics helps you track the state and sequence of your app usage prior to a crash through custom logs. It shows up within the stack trace in your Crashlytics dashboard displaying all the crash report logs in one place.
Custom data gives you an insight into the user’s device information such as the brand name, model, android/ios version, etc, this helps when it comes to grouping various crash reports

4. Reproduce crashes faster with a predefined Google Analytics event
When there is a need to capture every event your user triggers in your app manually, it can be very frustrating. However, through the help of Firebase Crashlytics with Google Analytics, you can automatically capture these events
They also further enhance the data captured with custom logs. It is found within your stack trace in the Crashlytics dashboard and it displays actions a user has taken prior to a crash as well as pertinent parameters within the event.

Conclusion

In Conclusion, the mobile app ecosystem is very competitive therefore ensuring that your app doesn’t crash frequently is integral to the app's success. Firebase Crashlytics provides essential tools that help you debug crashes and get the most out of the crash reports.

This article has explained the core aspects and benefits of integrating Firebase Crashlytics before or after the release of your app. Check out Firebase Crashlytics for further detailed information. In the next article post, we will look at how to integrate Firebase Crashlytics into your Flutter app. Thanks for reading.

If you have any questions or inquiries, feel free to reach out to me on Twitter: @CalebJ or LinkedIn: @CalebJ.