We as developers one thing we hate the most is that error screen. But hey, the good thing is we have developed some skills to debug over the past few years so it won’t bother you at the start (if you can’t solve it for few hours, it’s a completely different story, right?) Anyways that’s a topic of discussion for some other time.  

For now, let’s assume you did all your things right, you checked all possible scenarios you can think of, and you proudly launch your mobile application. Now multiple users are using your app, everything is running well, but suddenly one of your users faces an issue. Now they don’t have debugger (or debugging skill like you). So, they won’t understand what is going on. So, what do you do now? 

Well, here is a solution and that is Firebase Crashlytics. So, the question is what Crashlytics really is? According to their website, “Firebase Crashlytics, a real time crash reporting tool, helps you prioritize and fix your most pervasive crashes based on the impact on real users. Crashlytics also easily integrates into your Android, iOS, macOS, tvOS, and watchOS apps.” 

Now that we know what Firebase Crashlytics is, let’s see how can we use it in Flutter. For that we are going to use library named firebase_crashlytics developed by Google Firebase. To install, simply add firebase_crashlytics: ^2.0.2 and firebase_core: ^0.5.2 (version may vary with time) to your dependency and run flutter pub get. Standard procedure that we all are used to. Easy right? But you will need to connect your app to Firebase. Go to https://console.firebase.google.com if you have previous projects, you can see them here. But if you are using for the first time, go ahead and click on “Add Project” button. Now on the next screen, give your project a name (best if you keep both local project that you created name and this name the same) and click continue. If you want to use analytics click on switch and click next. Here if you have selected to analytics add an account, Firebase provide you with default account so if you don’t have one just use that and click on create project.  

Because we are using Flutter with Firebase, we need to configure our project for both Android and iOS. Let’s start with Android first. Click on that Android icon and Firebase will take you to configuration screen. Now on registration screen, it will ask you to add package name. If you don’t know your package name don’t worry. In your project go to android > app > build.gradle file, here scroll down and find application copy that name and paste in your console. Next 2 details are optional you can give them if you want to or just skip them and click register. On next screen click on download google-service.json. Download that file and paste it to you project in android > app folder, next to your gradle file. Click next and it will suggest you make some change in gradle file, the thing to keep in mind is you need to do these changes in your app level gradle file and not in the folder previously shown (Don’t go to android > app, just do changes in android > build.gradle). Copy the lines shown in console and paste them in your app as shown. Follow the instruction on console to make changes in your app level gradle file. Run flutter pub get just to be sure. Click on Continue to project and your setup for android is done.  

Now let’s setup for iOS, click on iOS button on your project. On first screen it will ask for bundle id, here make sure bundle id is not same as package name in most cases. So, if you are using android studio click on tools > Flutter > Open iOS module on XCode. In XCode click on Runner, in that screen Runner Target on that screen you will find bundle identifier. Copy paste id in your console, now next 2 field are optional same as Android, fill them if you want to or jut skip and click Register app. Download google-service file and make user to remove extension that your browser adds for same name. Drag your file to Runner folder of your project which is already open in XCode (You can do it in android studio as well but experts recommend to do it in XCode). Click ok and you are good to go. Next you don’t have to do anything just keep clicking next in console and atlas Continue to Console, and you are done with setup.  

Now replace your main method with this code: 

Future<void> main() async { 

 

  await Firebase.initializeApp(); 

  await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true); 

  await AppConfig.configure((result) { 

    if (result == true) { 

      startApp(); 

  }); 

}

 And you are ready to use Firebase Crashlytics for Flutter! But we are not really interested in using Firebase for its other functionality in this particular article, are we? The very basic thing Firebase Crashlytics does is send a report when it crashes. To do that, wrap you runApp(MyApp) with runZoned() function like this: 

runZoned(() { 

    runApp(MyApp()); 

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

What this will do is the app Crashlytics will send instance of the crash to the console which will contain all the useful information you will need to find out the error. But for that to work you will need to relaunch the application so that Crashlytics in your machine can sync with Crashlytics consol. Now log in to your account go to Crashlytics tab and debug the error. Now you have access to error your app was causing when it was live and you can fix it in your next version of your app. 

But the problem in real world is all errors might not be app crashing errors or in Crashlytics term fatal errors. Sometimes error occurs and app won’t even crash—what to do then? Well, Firebase Crashlytics has that part covered as well, as developers we have a little intuition that what part of the app can cause the problem that why we are so much used to write try-catch blocks. So, if you want to non-fatal errors you can record them in Crashlytics. Just write the following code in your app in catch block:

FirebaseCrashlytics.instance.recordError( 

              exception, 

              stackTrace, 

              reason: "Name of screen that cused the error", 

            );

This is all just about errors; let’s say you just want to check which functionality is most popular among users you can just log the instances. To do that you can use log provided by Crashlytics. Add this code to your functionality and Crashlytics will keep record of how may time that even has occurred: 

FirebaseCrashlytics.instance.log("Name of functionality");

Now you have record of non-fatal error as well. But there is a slight set-back: you won’t have access to no-fatal error till user restarts the application. Why do you think that is? Well, because “Crashlytics processes exceptions on a dedicated background thread, so the performance impact to your app is minimal. To reduce your users’ network traffic, Crashlytics catches logged exceptions together and sends them the next time the app launches.” 

Hey we are doing good, but let’s imagine how good it will be if users themselves can help you elaborate the error. Like what they were doing when crash happened, what scene caused the problem etc. Well, we have covered that part as well just copy following code in your project where you want some input from users.   

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 ? "No input from user" : textFieldController.text, 

            ); 

            reportSent = true; 

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

          }, 

        ), 

      ],–– 

    ), 

  ); 

} 

Every time you catch an error pass error and stack at that time do this method and it will pop open a box for user to give their valuable feedback. In this way, users will feel more attached to your app and your work will be easy.  

In conclusion, Firebase Crashlytics for Flutter is a great tool that will help you record large amount of essential data during development, testing or even live phase of your application. You will be more in touch with your users and users will have a more satisfying experience because you know what is causing them trouble and can quickly fix it. Give Crashlytics a shot, it may be the next big thing you need to improve user experience of your app! 

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.