Flutter — Firebase Performance and Crashlytics

Flutter — Firebase Performance and Crashlytics

How is your app behaving in the user’s device ? Hmmm….

All in one Flutter resource: https://flatteredwithflutter.com/how-to-know-the-crashes-and-performance-of-the-app/

Begin…

This post assumes, your app is already inside the Firebase environment and using the cloud_firestore plugin…

Sometimes, the logs aren’t enough. You need something special.

This is exactly what Firebase Performance does…

As per the doc, it

Diagnoses app performance issues occurring on your users’ devices. Use traces to monitor the performance of specific parts of your app and see a summarized view in the Firebase console. Stay on top of your app’s start-up time and monitor HTTP requests without writing any code.

Ok. but how should we use it ?

Introducing firebase_performance, package from flutter.

Disclaimer : Results of crashyltics/ firebase performance will appear within 12 hours.

You can define your own traces and monitor network requests……

Wait, what is a trace ?

A trace records data between two performance points in your app…

How to use in Flutter ?

This is how you initialize a trace…

final Trace myTrace = FirebasePerformance.instance.newTrace("test");

Next, you need to start the trace…

myTrace.start();

Finally, you need to stop the trace…

myTrace.stop();

In between, the traces you can implement your logic, say

myTrace.incrementMetric("metric1", 16);

myTrace.putAttribute("favorite_color", "blue");

Note : This is the data which you will see in the Firebase performance dashboard…

For the favourite_color : blue , refer the below screenshot :

How to monitor network request ?…

We need to use the feature of the plugin, called BaseClient..

1. Create a class that extends this BaseClient.

class _MetricHttpClient extends BaseClient {}

2. Override the send method of this class.

@override
Future<StreamedResponse> send(BaseRequest request) async {
}

3. Create the HttpMetric,

final HttpMetric metric = FirebasePerformance.instance
        .newHttpMetric('YOUR URL', HttpMethod.Get);

This requires :

— Url,

— Type of Http Request (Get, post etc)

4.Start the Http Metric

await metric.start();

5. Finally, stop….

await metric.stop();

Complete snippet :

class _MetricHttpClient extends BaseClient {
  _MetricHttpClient(this._inner);

  final Client _inner;

  @override
  Future<StreamedResponse> send(BaseRequest request) async {
    final HttpMetric metric = FirebasePerformance.instance
        .newHttpMetric(request.url.toString(), HttpMethod.Get);

    await metric.start();

    StreamedResponse response;
    try {
      response = await _inner.send(request);
      metric
        ..responsePayloadSize = response.contentLength
        ..responseContentType = response.headers['Content-Type']
        ..requestPayloadSize = request.contentLength
        ..httpResponseCode = response.statusCode;
    } finally {
      await metric.stop();
    }

    return response;
  }
}

In the Dashboard, you see like this : (in our case url is google.com)

On clicking our url, we see some insights :

Crashlytics….

To make Crashlytics Work…

https://github.com/flutter/flutter/issues/30387

As per the docs,

Crashlytics is the primary crash reporter for Firebase.

Now its possible for us, to integrate it for Flutter using firebase_crashlytics..

Step 1 : Integrating it for iOS and Android….

Refer the plugin docs….(its crystal clear… :)

Step 2 : Initialize Crashlytics in the app….

// Set `enableInDevMode` to true to see reports while in debug mode
  // This is only to be used for confirming that reports are being
  // submitted as expected. It is not intended to be used for everyday
  // development.

Crashlytics.instance.enableInDevMode = true;

Otherwise, use

Crashlytics.instance.log('YOUR LOG COMES HERE');

For all uncaught errors, do

// Pass all uncaught errors to Crashlytics.
  FlutterError.onError = (FlutterErrorDetails details) {
    Crashlytics.instance.onError(details);
  };

Step 3 : Get notified for the errors by setting :

Crashlytics.instance.setUserEmail('YOUR EMAIL');

Crashlytics.instance.setUserName('YOUR USER NAME');

Crashlytics.instance.setUserIdentifier('YOUR USER IDENTIFIER')

See the errors under Firebase -> Quality -> Crashlytics

Happy building…..

Articles related to Flutter:

Source code: https://github.com/AseemWangoo/flutter_programs/blob/master/crashlytics%20and%20perf.zip