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 {
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: [
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:
- Repo link: github
Written By
Muhammad Sheraz
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 {
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: [
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:
- Repo link: github