[Flutter] Firebase Performance

Table of Contents
Overview
Blog Series
Creating and Setting Up Firebase Project
Installing firebase_performance
Auto-Collected Data
Custom Traces
- Adding Custom Attributes
HTTP Request Monitoring
Viewing in Firebase Console
Conclusion

Overview

In this blog post, we will learn how to set up Firebase’s Performance to monitor the performance of apps developed with Flutter.

firebase_performance

Blog Series

This blog is part of a series. Please check out other blog posts through the following links.

Creating and Setting Up Firebase Project

To use Firebase in Flutter, you need to create a Firebase project and install the firebase_core package. Please check the details through the link below.

[Flutter] Firebase Core

Installing firebase_performance

To use Firebase Performance in a Flutter project, you need to install the firebase_performance package. Run the following command to install the firebase_performance package.

flutter pub add firebase_performance

Then run the following command to configure Firebase Performance.

flutterfire configure

Once you install and configure Firebase Performance like this, it will automatically measure your app’s performance, which you can view in the Firebase Console.

Auto-Collected Data

Firebase Performance automatically collects the following data without any additional code.

App start time: The time it takes from when the app starts until the user can interact with it
Screen rendering: The time it takes to render each screen, and the number of slow frames and frozen frames
HTTP/S network requests: Response time, payload size, and success rate of network requests

Custom Traces

In addition to auto-collected data, you can use Custom Traces if you want to measure the performance of specific operations.

import 'package:firebase_performance/firebase_performance.dart';

Future<void> fetchData() async {
  // Create and start trace
  final Trace trace = FirebasePerformance.instance.newTrace('fetch_data_trace');
  await trace.start();

  try {
    // Perform the operation you want to measure
    final response = await api.fetchData();

    // Record metric on success
    trace.setMetric('data_count', response.data.length);
  } catch (e) {
    // Record attribute on error
    trace.putAttribute('error', e.toString());
  } finally {
    // Stop trace
    await trace.stop();
  }
}

Adding Custom Attributes

You can add custom attributes to traces to record more detailed information.

final Trace trace = FirebasePerformance.instance.newTrace('user_action_trace');
await trace.start();

// Add custom attributes (string)
trace.putAttribute('user_type', 'premium');
trace.putAttribute('screen_name', 'home');

// Add custom metrics (number)
trace.setMetric('item_count', 10);
trace.incrementMetric('tap_count', 1);

await trace.stop();

HTTP Request Monitoring

If you want to monitor HTTP request performance in more detail, you can use HttpMetric.

import 'package:firebase_performance/firebase_performance.dart';

Future<void> fetchUserData() async {
  final HttpMetric metric = FirebasePerformance.instance.newHttpMetric(
    'https://api.example.com/users',
    HttpMethod.Get,
  );

  await metric.start();

  try {
    final response = await http.get(Uri.parse('https://api.example.com/users'));

    // Set response information
    metric.responsePayloadSize = response.contentLength ?? 0;
    metric.responseContentType = response.headers['content-type'];
    metric.httpResponseCode = response.statusCode;
  } finally {
    await metric.stop();
  }
}

Viewing in Firebase Console

Performance data can be viewed in the Performance menu of the Firebase Console.

Access Firebase Console.
Select your project, then select Performance from the left menu.
You can view data such as app start time, screen rendering, and network requests on the dashboard.
Custom traces can be viewed in the Custom traces tab.

It may take up to 24 hours for data to appear.

Conclusion

This concludes our guide on how to set up firebase_performance in a Flutter project to use Firebase Performance. By using Firebase Performance, you can monitor app startup time, screen rendering performance, and network request performance to improve the user experience.

Github Sponsor

Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.