What is Firebase Crashlytics and how your app can benefit from using this service

By Muhammad Sheraz - january 11,2024
What is Firebase Crashlytics and how your app can benefit from using this service articles

Firebase Crashlytics

Firebase Crashlytics is a powerful, lightweight and real-time crash reporting tool that helps developers track, prioritize, and fix stability issues that can hurt an app’s quality.

Crashlytics groups all the crashes and highlights the paths that lead up to them.

By using Firebase Crashlytics, we can find out exceptions and fix them efficiently to improve user experience.

Firebase Crashlytics records exceptions or errors that occur in the app and sends them to the Firebase console, where you can see crash information in realtime and how and when and on which devices they occur.

This includes both fatal and non-fatal issues:

  • Fatal issues are those that cause the app to crash.
  • Non-fatal issues are exceptions that don’t cause a crash but might lead to one under some conditions.

Benefits of Firebase-Crashlytics

Real-time Reporting: Crashlytics gives us real-time crash reporting When an issue occurs, it’s logged and sent to the Firebase console.

Detailed Reports: Crashlytics provides us with detailed crash reports, that include full stack trace, which helps developers pinpoint the exact line of code that caused the issue in their projects.

Issue Prioritization: It prioritizes the issues based on their impact on users and groups similar issues together and provides information on the number of users affected, which helps developers prioritize issues and decide which ones to tackle first.

Integration: Crashlytics can also be integrated with other Firebase tools like Analytics, which allows developers to get a more understanding of their applications performance and user behavior.

Let’s understand with a simple example.

Things You Need

  • Basic Understanding of Flutter Framework
  • IDE like VSCODE or Android Studio
  • Mobile device for testing
  • Google account for firebase console

Getting Started

Set up your Flutter project:

First, make sure you have Flutter and Dart installed on your machine. If not, you can follow the official Flutter installation guide here: https://docs.flutter.dev/get-started/install

Create a new Flutter project using the following command in your VS code Terminal:

flutter create firebase_crashlytics_example , This will create a project for you, Now follow the rest of the instructions.

Setup your firebase console project

Goto https://console.firebase.google.com/ and create a new project.

Write your project name and keep the analytics enabled on next screen as well:

Now it’s time to add firebase to your local project, using firebase CLI

Goto: Project Settings and add you flutter app:

From there follow a simple step by step process to use Firebase CLI and register your project.

This will add necessary configurations for your project.

Now goto following link to access the analytics dashboard:
https://console.firebase.google.com/u/0/project/fir-fcm-3d9fe/messaging/onboarding//

Add required package

Let’s first add some required packages to our project:

In your terminal run this command ‘flutter pub add firebase_crashlytics’

and  ‘flutter pub add firebase_core’

This will add firebase_analytics and firebase_core packages to your ’pubspec.yaml’ file

You may need to update these packages to the latest versions, as these packages are regularly updated. Find these packages on pub.dev

Now run the following command:

flutterfire configure

And again run firebase configurations, which you did above, this will ensure that Firebase configuration is up-to-date and it adds the required Crashlytics Gradle plugin to the app well.

Build your project

main.dart

				
					import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'package:flutter/material.dart';
import 'package:flutter_firebase_crashlytics_new/crash_test_page.dart';
import 'package:flutter_firebase_crashlytics_new/firebase_options.dart';

void main() async {
 // Ensure that plugin services are initialized
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );
 // Pass all uncaught errors from the framework to Crashlytics
 FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterError;
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});
 @override
 Widget build(BuildContext context) {
   return const MaterialApp(
     title: 'Firebase Crashlytics Demo',
     home: CrashTestPage(title: 'Firebase Crashlytics'),
   );
 }
}

				
			

Update your main.dart file as above, Now let’s understand this code:

Here we are importing firebase_core and firebase_options and then on the app run It initializes a new Firebase application instance and DefaultFirebaseOptions.currentPlatform contains a set of options that are required for the current platform like Android or IOS.

To automatically catch all errors that are thrown within the Flutter framework we added following line:

FlutterError.onError with FirebaseCrashlytics.instance.recordFlutterFatalError:

Now to understand, Let’s make a simple UI for testing.
crash_test_page.dart
				
					import 'package:flutter/material.dart';

class CrashTestPage extends StatefulWidget {
 const CrashTestPage({super.key, required this.title});

 final String title;

 @override
 _CrashTestPageState createState() => _CrashTestPageState();
}

class _CrashTestPageState extends State<CrashTestPage> {
 final TextEditingController _num1Controller = TextEditingController();
 final TextEditingController _num2Controller = TextEditingController();

 // Function to divide two numbers
 double divide(int a, int b) {
   if (b == 0) {
     throw Exception('You cannot divide by zero.');
   }
   return a / b;
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Padding(
         padding: const EdgeInsets.all(28.0),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             TextField(
               controller: _num1Controller,
               keyboardType: TextInputType.number,
               decoration:
                   const InputDecoration(hintText: 'Enter first number'),
             ),
             TextField(
               controller: _num2Controller,
               keyboardType: TextInputType.number,
               decoration:
                   const InputDecoration(hintText: 'Enter second number'),
             ),
             SizedBox(height: 20), // ignore: prefer_const_constructors
             const Text(
               'if you divide by zero, the app will crash',
             ),
             ElevatedButton(
               style: ElevatedButton.styleFrom(
                 backgroundColor: Colors.black,
               ),
               onPressed: () {
                 try {
                   // Let's say we have a function that divides two numbers
                   var result = divide(int.parse(_num1Controller.text),
                       int.parse(_num2Controller.text));
                   ScaffoldMessenger.of(context).showSnackBar(
                     SnackBar(content: Text('Result: $result')),
                   );
                 } catch (e) {
                   // If an error occurs (like trying to divide by zero), it will be caught here
                   ScaffoldMessenger.of(context).showSnackBar(
                     SnackBar(content: Text(e.toString())),
                   );
                 }
               },
               child: const Text(
                 'Divide',
                 style: TextStyle(color: Colors.white),
               ),
             ),
           ],
         ),
       ),
     ),
   );
 }
}
				
			

In the above code, we created two fields, where we get the numbers from the user and save them in their respective controllers.

Then we created an elevated button,and when pressed, it tries to divide the numbers inputted by the user. If the division is successful, it displays the result in a SnackBar.

If an exception is thrown (like trying to divide by zero), it catches the exception and displays it in a SnackBar also this exception is caught and reported to Firebase Crashlytics using FirebaseCrashlytics.instance.recordError(e, e.stackTrace);

Finally,we can view and analyze this exception in the Firebase console.



Crashlytics Dashboard

From here you can see further various details about your application and as it logs all the crash events gives you a nice overview of users and actions as you described.

You can press a certain issue and see more details about it.

It gives you all the details of the error occurrence and how many times it has occurred.

Once fixed, we can mark it close, or if you want you can mute an issue as well to come back to it later on.

Want to learn how to use Firebase CloudFirestore?

Follow this next article where we teach you how to use firebase cloudFirestore and learn how to perform CRUD operations..

ARTICLE LINK:  HERE

Conclusion

Today you learned how easy it is to build your very own Flutter Application and fix issues in  it for free using Firebase Crashlytics.

You first started out with a default flutter project, then you learned about initializing the basic firebase project and finally we learned how to add Firebase Crashlytics package.

If this article has helped in any way and you have learned something new today, Kindly consider sharing the article so others can also benefit and learn how to build simple AI applications.

Subscribe to our website for more interesting articles on AI and other interesting fields of IT.

You can find the code for this here:

Repository Link:

Written By
Muhammad Sheraz

By Muhammad Sheraz - january 11,2024
What is Firebase Crashlytics and how your app can benefit from using this service articles

Firebase Crashlytics

Firebase Crashlytics is a powerful, lightweight and real-time crash reporting tool that helps developers track, prioritize, and fix stability issues that can hurt an app’s quality.

Crashlytics groups all the crashes and highlights the paths that lead up to them.

By using Firebase Crashlytics, we can find out exceptions and fix them efficiently to improve user experience.

Firebase Crashlytics records exceptions or errors that occur in the app and sends them to the Firebase console, where you can see crash information in realtime and how and when and on which devices they occur.

This includes both fatal and non-fatal issues:

  • Fatal issues are those that cause the app to crash.
  • Non-fatal issues are exceptions that don’t cause a crash but might lead to one under some conditions.

Benefits of Firebase-Crashlytics

Real-time Reporting: Crashlytics gives us real-time crash reporting When an issue occurs, it’s logged and sent to the Firebase console.

Detailed Reports: Crashlytics provides us with detailed crash reports, that include full stack trace, which helps developers pinpoint the exact line of code that caused the issue in their projects.

Issue Prioritization: It prioritizes the issues based on their impact on users and groups similar issues together and provides information on the number of users affected, which helps developers prioritize issues and decide which ones to tackle first.

Integration: Crashlytics can also be integrated with other Firebase tools like Analytics, which allows developers to get a more understanding of their applications performance and user behavior.

Let’s understand with a simple example.

Things You Need

  • Basic Understanding of Flutter Framework
  • IDE like VSCODE or Android Studio
  • Mobile device for testing
  • Google account for firebase console

Getting Started

Set up your Flutter project:

First, make sure you have Flutter and Dart installed on your machine. If not, you can follow the official Flutter installation guide here: https://docs.flutter.dev/get-started/install

Create a new Flutter project using the following command in your VS code Terminal:

flutter create firebase_crashlytics_example , This will create a project for you, Now follow the rest of the instructions.

Setup your firebase console project

Goto https://console.firebase.google.com/ and create a new project.

Write your project name and keep the analytics enabled on next screen as well:

Now it’s time to add firebase to your local project, using firebase CLI

Goto: Project Settings and add you flutter app:

From there follow a simple step by step process to use Firebase CLI and register your project.

This will add necessary configurations for your project.

Now goto following link to access the analytics dashboard:
https://console.firebase.google.com/u/0/project/fir-fcm-3d9fe/messaging/onboarding//

Add required package

Let’s first add some required packages to our project:

In your terminal run this command ‘flutter pub add firebase_crashlytics’

and  ‘flutter pub add firebase_core’

This will add firebase_analytics and firebase_core packages to your ’pubspec.yaml’ file

You may need to update these packages to the latest versions, as these packages are regularly updated. Find these packages on pub.dev

Now run the following command:

flutterfire configure

And again run firebase configurations, which you did above, this will ensure that Firebase configuration is up-to-date and it adds the required Crashlytics Gradle plugin to the app well.

Build your project

main.dart

				
					import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'package:flutter/material.dart';
import 'package:flutter_firebase_crashlytics_new/crash_test_page.dart';
import 'package:flutter_firebase_crashlytics_new/firebase_options.dart';

void main() async {
 // Ensure that plugin services are initialized
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );
 // Pass all uncaught errors from the framework to Crashlytics
 FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterError;
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});
 @override
 Widget build(BuildContext context) {
   return const MaterialApp(
     title: 'Firebase Crashlytics Demo',
     home: CrashTestPage(title: 'Firebase Crashlytics'),
   );
 }
}

				
			

Update your main.dart file as above, Now let’s understand this code:

Here we are importing firebase_core and firebase_options and then on the app run It initializes a new Firebase application instance and DefaultFirebaseOptions.currentPlatform contains a set of options that are required for the current platform like Android or IOS.

To automatically catch all errors that are thrown within the Flutter framework we added following line:

FlutterError.onError with FirebaseCrashlytics.instance.recordFlutterFatalError:

Now to understand, Let’s make a simple UI for testing.
crash_test_page.dart
				
					import 'package:flutter/material.dart';

class CrashTestPage extends StatefulWidget {
 const CrashTestPage({super.key, required this.title});

 final String title;

 @override
 _CrashTestPageState createState() => _CrashTestPageState();
}

class _CrashTestPageState extends State<CrashTestPage> {
 final TextEditingController _num1Controller = TextEditingController();
 final TextEditingController _num2Controller = TextEditingController();

 // Function to divide two numbers
 double divide(int a, int b) {
   if (b == 0) {
     throw Exception('You cannot divide by zero.');
   }
   return a / b;
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Padding(
         padding: const EdgeInsets.all(28.0),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             TextField(
               controller: _num1Controller,
               keyboardType: TextInputType.number,
               decoration:
                   const InputDecoration(hintText: 'Enter first number'),
             ),
             TextField(
               controller: _num2Controller,
               keyboardType: TextInputType.number,
               decoration:
                   const InputDecoration(hintText: 'Enter second number'),
             ),
             SizedBox(height: 20), // ignore: prefer_const_constructors
             const Text(
               'if you divide by zero, the app will crash',
             ),
             ElevatedButton(
               style: ElevatedButton.styleFrom(
                 backgroundColor: Colors.black,
               ),
               onPressed: () {
                 try {
                   // Let's say we have a function that divides two numbers
                   var result = divide(int.parse(_num1Controller.text),
                       int.parse(_num2Controller.text));
                   ScaffoldMessenger.of(context).showSnackBar(
                     SnackBar(content: Text('Result: $result')),
                   );
                 } catch (e) {
                   // If an error occurs (like trying to divide by zero), it will be caught here
                   ScaffoldMessenger.of(context).showSnackBar(
                     SnackBar(content: Text(e.toString())),
                   );
                 }
               },
               child: const Text(
                 'Divide',
                 style: TextStyle(color: Colors.white),
               ),
             ),
           ],
         ),
       ),
     ),
   );
 }
}
				
			

In the above code, we created two fields, where we get the numbers from the user and save them in their respective controllers.

Then we created an elevated button,and when pressed, it tries to divide the numbers inputted by the user. If the division is successful, it displays the result in a SnackBar.

If an exception is thrown (like trying to divide by zero), it catches the exception and displays it in a SnackBar also this exception is caught and reported to Firebase Crashlytics using FirebaseCrashlytics.instance.recordError(e, e.stackTrace);

Finally,we can view and analyze this exception in the Firebase console.



Crashlytics Dashboard

From here you can see further various details about your application and as it logs all the crash events gives you a nice overview of users and actions as you described.

You can press a certain issue and see more details about it.

It gives you all the details of the error occurrence and how many times it has occurred.

Once fixed, we can mark it close, or if you want you can mute an issue as well to come back to it later on.

Want to learn how to use Firebase CloudFirestore?

Follow this next article where we teach you how to use firebase cloudFirestore and learn how to perform CRUD operations..

ARTICLE LINK:  HERE

Conclusion

Today you learned how easy it is to build your very own Flutter Application and fix issues in  it for free using Firebase Crashlytics.

You first started out with a default flutter project, then you learned about initializing the basic firebase project and finally we learned how to add Firebase Crashlytics package.

If this article has helped in any way and you have learned something new today, Kindly consider sharing the article so others can also benefit and learn how to build simple AI applications.

Subscribe to our website for more interesting articles on AI and other interesting fields of IT.

You can find the code for this here:

Repository Link:

Written By
Muhammad Sheraz


wpChatIcon
wpChatIcon