react-native-firebase/docs/perf/quick-start.md

title, description

title	description
Quick Start	Getting started with Performance Monitoring in React Native Firebase

Performance Monitoring Quick Start

Installation

This module depends on the @react-native-firebase/app module. To get started and install app, visit the projects quick start guide.

Install this module with Yarn:

yarn add @react-native-firebase/perf

Integrating manually and not via React Native auto-linking? Check the setup instructions for Android & iOS.

Module usage

Once installed, the Performance Monitoring package automatically traces events and metrics which are sent to Firebase. For more information on the automatic traces, please see the Firebase documentation.

The Performance Monitoring package also allows for custom tracing of events via the JavaScript API.

Import the Performance Monitoring package into your project:

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

The package also provides access to the firebase instance:

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

Custom Tracing

Defining a custom trace provides greater insight into actions a user may carry out with your application.

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();
}

HTTP Request Tracing

Performance Monitoring provides an API to trace HTTP network requests.

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');

  // 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 trace
  await metric.stop();

  return response.json();
}

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