Flutter - Firebase Performance and Crashlytics

Flutter - Firebase Performance and Crashlytics

Houston, we have a problem….

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

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 ?

Flutter — Firebase Performance
Flutter — Firebase Performance

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 ?

Trace…
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");
Flutter — Firebase Performance
Flutter — Firebase Performance

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
myTrace

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

Flutter — Firebase Performance
Flutter — Firebase Performance

For the favourite_color : blue , refer the below screenshot :

Performance Metric….
Performance Metric….

How to monitor network request ?…

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

Network trace….
Network trace….

  1. Create a class that extends this BaseClient.
class _MetricHttpClient extends BaseClient {}

2. Override the send method of this class.

@overrideFuture<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)

Url dashboard, under Network tab…
Url dashboard, under Network tab…

On clicking our url, we see some insights :

Type of Network Insights…
Type of Network Insights…
Network insights dashboard….
Network insights dashboard….

Crashlytics….

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…..

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