Firebase Crashlytics is a tool provided by Google which can help us to trace the errors we receive during different phases of application development. Most commonly, Crashlytics is used for reporting a fatal error, which means an error which will crash your application. It is easy to report fatal error to Crashlytics, let’s have a look. 

First of all, we have to include firebase_crashlytics library to our Flutter project. To do that just go to project’s pubspec.yaml file and add this in to dependencies section: 

  firebase_core: ^0.5.0+1 

  firebase_analytics: ^6.0.2 

  firebase_crashlytics: ^0.2.1+1

This is the Flutter Firebase integration and use guide for flutter side. On Firebase Crashlytics console, we have to create a project and perform some actions which we have discussed in a separate article.  

Now, it is very simple to report fatal errors in Firebase Crashlytics. Just add the following line to your main.dart file:

Future<void> main() async { 

  await Firebase.initializeApp(); 

  await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true); 

  startApp(); 

}

 
void startApp() async { 

  FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true); 

  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterError; 

 

  runZoned(() { 

    runApp(MyApp()); 

  }, onError: FirebaseCrashlytics.instance.recordError()); 

} 

What this will do is whenever our app crashes, it will generate a report and store it locally. So next time you launch your app, it will send report to firebase Crashlytics and we can analyze it on firebase console. This is one of the setbacks with Crashlytics that you have to relaunch your application if you want to send reports to firebase.  

This was easy, but the tricky part comes when you want to report a non-fatal error, which means errors which will stop app from working but will not crash it. So, this is easy if you just want to get a pre-defined message on your Crashlytics console. Just add following line wherever you feel things might get errors–for example while receiving the data from API–while sending data to API etc. You can log your error with following line:

FirebaseCrashlytics.instance.log(“Your message here”);

But keep in mind this will not have any additional information that you might want to solve the error, so for that we will need information about error as well as stackTrace. The best way to get stackTrace is in catch block. I think most of the programmers would have try catch as their basic line of defense against errors. So, what can we do is in our catch block add following lines:

 FirebaseCrashlytics.instance.recordError( 

              exception, 

              stackTrace, 

              reason: “add some message here” 

            );

Catch will provide you both exception and stackTrace. Now on the console, you don’t just have a log of your message but also some information to go with it, to make your life easy.  

All these things are very good, but what if you want some kind of input from your users, like what were they trying to do when error occurred or even some non-technical person in your team wants to help? Won’t it be very good if we can have input from them regarding issue that they are facing? This will make debugging easier. For that, lets give them an alert-box with a text input where they can give their additional inputs about issue they have faced. We have designed this function as below which anyone can modify according to their needs:

Future<bool> _displayTextInputDialog({Object exception, StackTrace stackTrace}) async { 

  final textFieldController = TextEditingController(); 

  final context = _contextMap.values.last; 

  bool reportSent; 

  return showDialog( 

    context: context, 

    builder: (context) => AlertDialog( 

      title: Text(SFLStrings.message.kDoyouWantToSendReport), 

      content: TextField( 

        controller: textFieldController, 

        decoration: InputDecoration(hintText: SFLStrings.message.kHelpUsUnderstandError), 

      ), 

      actions: <Widget>[ 

        FlatButton( 

          color: Colors.white, 

          textColor: Theme.of(context).primaryColor, 

          child: Text(SFLStrings.button.kCancel), 

          onPressed: () { 

            reportSent = false; 

            Navigator.of(context).pop(reportSent); 

          }, 

        ), 

        FlatButton( 

          color: Theme.of(context).primaryColor, 

          textColor: Colors.white, 

          child: Text(SFLStrings.button.kSend), 

          onPressed: () { 

            FirebaseCrashlytics.instance.recordError( 

              exception, 

              stackTrace, 

              reason: textFieldController.text == null ? “Some Message”: textFieldController.text, 

            ); 

            reportSent = true; 

            Navigator.of(context).pop(reportSent); 

          }, 

        ), 

      ], 

    ), 

  ); 

}

But, keep in mind we will still have to relaunch the application to reflect reported logs to firebase Crashlytics console.  

So, this is how we can integrate Firebase Crashlytics on Flutter application side and make use of AlertDialog to get extra information from user about the issues they are facing during the application testing. In upcoming article we’ll be digging in logs that we’re receiving on Firebase console and will analyze the information.