It's not something we like but app crashing is part and parcel of our job as a developer. This situation can always cause huge stress to the developer if the app is in production as users may instantly make a negative judgement on the app quality and leave a negative rating.
So any tool that makes handling this process convenient is always welcome and there is such a tool in Firebase Crashlytics.
Firebase Crashlytics is a lightweight, realtime crash reporter that helps you track, prioritize, and fix stability issues that erode your app quality.
Crashlytics saves you troubleshooting time by intelligently grouping crashes and highlighting the circumstances that lead up to them. For example you can figure out if a particular crash is impacting a lot of usersand get alerts when the issue suddenly increases in severity. You can even find out which lines of code are causing the crashes.
Firebase Crashlytics Example
We will look at a simple firebase crashlytics example. Here is the demo of the created project:
Step 1: Connect Your App
Start by adding Firebase to your app in the Firebase console.
Step 2: Install it
Install Firebase Crashlytics into your project. For us because we are using Flutter, this is very easy. Go to your pubspec.yaml
and add both Firebase core and Firebase crashlytics under the dependencies, as follows:
dependencies:
firebase_core: "0.5.0"
firebase_crashlytics: "^0.2.1"
Step 3: Write Code
Start by adding imports:
import 'dart:async';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'package:flutter/material.dart';
Create a CrashApp as a stateless widget:
class CrashApp extends StatelessWidget {
Override the build method and build a centalized column containing an elevated button:
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
When this button is pressed instantiate the FirebaseCrashlytics using the instance
property then invoke thelog()
function, passing in the message:
onPressed: () {
//custom Crashlytics log message
FirebaseCrashlytics.instance.log("It's a bug");
Then add anothe elevated button that when pressed causes the app to intentionally crash:
},
child: Text("Custom Log")),
const SizedBox(height: 10),
ElevatedButton(
child: Text('Crash the app'),
onPressed: () {
FirebaseCrashlytics.instance.crash();
},
),
],
),
);
}
Now create an app class as a statelesswidget:
class App extends StatelessWidget {
Here define an async method that will first initialize the firebase using the initializeApp()
function, then subsequently the crashlytics using the setCrashlyticsCollectionEnabled(true)
method:
//initialise firebase and crashlytics
Future<void> _initializeFirebase() async {
await Firebase.initializeApp();
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
Now build and return a MaterialApp, setting the appbar and the title:
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Crash App"),
),
In the body of the MaterialApp, assign a FutureBuilder:
body: FutureBuilder(
Initialize the Firebase by assigning the _initializeFirebase()
function to the future
:
future: _initializeFirebase(),
If an error occurs show it in the textfield:
if (snapshot.hasError) {
return Center(
child: Text("Unable to initialise Firebase"),
);
}
Otherwise deliberately crash the app:
//firebase and crashlytics initialise complete
if (snapshot.connectionState == ConnectionState.done) {
return CrashApp();
}
Here is the full code:
main.dart
import 'dart:async';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'package:flutter/material.dart';
main() {
WidgetsFlutterBinding.ensureInitialized();
runZonedGuarded(() {
runApp(App());
}, (error, stackTrace) {
// Pass all uncaught errors from the framework to Crashlytics.
FirebaseCrashlytics.instance.recordError(error, stackTrace);
});
}
class App extends StatelessWidget {
//initialise firebase and crashlytics
Future<void> _initializeFirebase() async {
await Firebase.initializeApp();
await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Crash App"),
),
body: FutureBuilder(
future: _initializeFirebase(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Center(
child: Text("Unable to initialise Firebase"),
);
}
//firebase and crashlytics initialise complete
if (snapshot.connectionState == ConnectionState.done) {
return CrashApp();
}
return Center(
child: Column(
children: [
CircularProgressIndicator(),
Text("Initialising Firebase")
],
),
);
},
),
),
);
}
}
class CrashApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
//custom Crashlytics log message
FirebaseCrashlytics.instance.log("It's a bug");
},
child: Text("Custom Log")),
const SizedBox(height: 10),
ElevatedButton(
child: Text('Crash the app'),
onPressed: () {
FirebaseCrashlytics.instance.crash();
},
),
],
),
);
}
}
Step 4: Check reports
Go check the reporst in the Firebase console
You can Visit the Firebase console to track, prioritize, and fix issues in your app.
Reference
No. | Link |
---|---|
1. | Read more about Firebase Crashlytics |
2. | Download code |
3. | Follow code author |