Performance Monitoring

Installation and getting started with Performance Monitoring.

Installation

This module requires that the @react-native-firebase/app module is already setup and installed. To install the "app" module, view the Getting Started documentation.

# Install & setup the app module
yarn add @react-native-firebase/app

# Install the performance monitoring module
yarn add @react-native-firebase/perf

# If you're developing your app using iOS, run this command
cd ios/ && pod install

If you're using an older version of React Native without autolinking support, or wish to integrate into an existing project, you can follow the manual installation steps for iOS and Android.

Add the Performance Monitoring Plugin

If you're using Expo, make sure to add the @react-native-firebase/perf config plugin to your app.json or app.config.js. It handles the below installation steps for you. For instructions on how to do that, view the Expo installation section.

On Android, you need to install the Google Performance Monitoring Plugin which enables automatic HTTPS network request monitoring.

Add the plugin to your /android/build.gradle file as a dependency:

buildscript {
    dependencies {
        // ...
        classpath 'com.google.firebase:perf-plugin:1.4.2'
    }

Apply the plugin via the /android/app/build.gradle file (at the top):

apply plugin: 'com.android.application'
apply plugin: 'com.google.firebase.firebase-perf'

What does it do

Performance Monitoring allows you to gain insight into key performance characteristics within your React Native application. It provides a simple API to track custom trace and HTTP request metrics.

Review and analyze that data in the Firebase console. Performance Monitoring helps you to understand where and when the performance of your app can be improved so that you can use that information to fix performance issues.

Performance Monitoring package automatically traces events and metrics which are sent to Firebase. For more information on the automatic traces, please see the Firebase Performance Monitoring documentation. The package also allows you to performance monitor custom aspects to your application like network requests & task specific app code. All performance metrics are available on your Firebase console performance tab.

Usage

Custom tracing

Below is how you would measure the amount of time it would take to complete a specific task in your app code.

import perf from '@react-native-firebase/perf';

async function customTrace() {
  // Define & start a trace
  const trace = await perf().startTrace('custom_trace');

  // Define trace meta details
  trace.putAttribute('user', 'abcd');
  trace.putMetric('credits', 30);

  // Stop the trace
  await trace.stop();
}

Custom screen traces

Record a custom screen rendering trace (slow frames / frozen frames)

import perf from '@react-native-firebase/perf';

async function screenTrace() {
  // Define & start a screen trace
  try {
    const trace = await perf().startScrenTrace('FooScreen');
    // Stop the trace
    await trace.stop();
  } catch (e) {
    // rejects if iOS or (Android == 8 || Android == 8.1)
    // or if hardware acceleration is off
  }
}

HTTP Request Tracing

Below illustrates you would measure the latency of a HTTP request.

import perf from '@react-native-firebase/perf';

async function getRequest(url) {
  // Define the network metric
  const metric = await perf().newHttpMetric(url, 'GET');

  // Define meta details
  metric.putAttribute('user', 'abcd');

  // Start the metric
  await metric.start();

  // Perform a HTTP request and provide response information
  const response = await fetch(url);
  metric.setHttpResponseCode(response.status);
  metric.setResponseContentType(response.headers.get('Content-Type'));
  metric.setResponsePayloadSize(response.headers.get('Content-Length'));

  // Stop the metric
  await metric.stop();

  return response.json();
}

// Call API
getRequest('https://api.com').then(json => {
  console.log(json);
});

firebase.json

Disable Auto-Initialization

The Performance Monitoring module will automatically start collecting data once it is installed. To disable this behavior, set the perf_auto_collection_enabled flag to false:

// <project-root>/firebase.json
{
  "react-native": {
    "perf_auto_collection_enabled": false
  }
}

To re-enable collection (e.g. once you have the users consent), call the setPerformanceCollectionEnabled method:

import { firebase } from '@react-native-firebase/perf';
// ...
await firebase.perf().setPerformanceCollectionEnabled(true);