Skip to content

Instantly share code, notes, and snippets.

@Salakar
Last active May 29, 2024 12:26
Show Gist options
  • Save Salakar/f4f8ec1ba44c3fa4776a56f264b33a56 to your computer and use it in GitHub Desktop.
Save Salakar/f4f8ec1ba44c3fa4776a56f264b33a56 to your computer and use it in GitHub Desktop.
Add Firebase Performance Monitoring HTTP Metrics to all Axios requests (RNFB v5). This is taken from a guide on the new React Native Firebase website (not yet ready for public use).
import axios from 'axios';
import firebase from 'react-native-firebase';
axios.interceptors.request.use(async function (config) {
const httpMetric = firebase.perf().newHttpMetric(config.url, config.method);
config.metadata = { httpMetric };
// add any extra metric attributes if needed
// await httpMetric.putAttribute('userId', '12345678');
await httpMetric.start();
return config;
});
axios.interceptors.response.use(async function (response) {
const { httpMetric } = response.config.metadata;
// add any extra metric attributes if needed
// await httpMetric.putAttribute('userId', '12345678');
await httpMetric.setHttpResponseCode(response.status);
await httpMetric.setResponseContentType(response.headers['content-type']);
await httpMetric.stop();
return response;
}, async function (error) {
const { httpMetric } = error.config.metadata;
// add any extra metric attributes if needed
// await httpMetric.putAttribute('userId', '12345678');
await httpMetric.setHttpResponseCode(error.response.status);
await httpMetric.setResponseContentType(error.response.headers['content-type']);
await httpMetric.stop();
return Promise.reject(error);
});
@Salakar
Copy link
Author

Salakar commented Feb 20, 2019

Note that in v6.0.0 of React Native Firebase; all methods except for start/stop become synchronous JS only methods. e.g. the above example becomes:

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

axios.interceptors.request.use(async function (config) {
  const httpMetric = firebase.perf().newHttpMetric(config.url, config.method);
  config.metadata = { httpMetric };

  // add any extra metric attributes if needed
  // httpMetric.putAttribute('userId', '12345678');

  await httpMetric.start();
  return config;
});

axios.interceptors.response.use(async function (response) {
  const { httpMetric } = response.config.metadata;

  // add any extra metric attributes if needed
  // httpMetric.putAttribute('userId', '12345678');

  httpMetric.setHttpResponseCode(response.status);
  httpMetric.setResponseContentType(response.headers['content-type']);
  await httpMetric.stop();

  return response;
}, async function (error) {
  const { httpMetric } = error.config.metadata;

  // add any extra metric attributes if needed
  // httpMetric.putAttribute('userId', '12345678');

  httpMetric.setHttpResponseCode(error.response.status);
  httpMetric.setResponseContentType(error.response.headers['content-type']);
  await httpMetric.stop();

  return Promise.reject(error);
});

@Thyoity
Copy link

Thyoity commented Jun 9, 2020

Ohh, great snippet, exactly what I needed!! Just an another note:
I was getting an error here config.method, so I put these inside a try catch block just for debug purpose:

try{
const httpMetric = firebase.perf().newHttpMetric(config.url, config.method);
config.metadata = { httpMetric };
} catch(err){
console.log(err)
}

Then I have found that my config.method was reaching there as "get", instead of "GET" (Performance Monitor checks sensitive).

So, just replace config.method to config.method.toUpperCase()

@geniuscva
Copy link

I was getting an error here config.metadata as the AxiosRequestConfig doesnt have metadata property.
I'm using the latest axios v0.20

@SabarishChungath
Copy link

how to watch these network metrics on firebase console ?

@matteodanelli
Copy link

Where are these data visible?

@Kailash23
Copy link

Please update the documentation with image.
I am not able to see the metrics for each api call as done in the above snippets. @Salakar

@mithunintervest
Copy link

I need to record the performance by screen wise.
Example

Home Screen >
A api called responseCode: 200, responseTime: 428.8650ms,
B api called responseCode: 200, responseTime: 118.8650ms

is this possible to track on the firebase. Currently api name passing through the headers
--header 'domain:''
--header 'product:''
--header 'business-flow: ''
--header 'exalt-api: USER_CREATE'
--header 'operation-flow: CREATE_FLOW'
--header 'Content-Type: application/json

currently im getting the api name. with below code.
const apiName = response.config.headers['exalt-api'].toLowerCase();

  1. Need to know how i can pass the apiName according to the screen wise
  2. How to show api name as a custom attribute on the firebase performance (Network).

@ys-sherzad
Copy link

@SabarishChungath @matteodanelli
Any luck? can't seem to have each of the API calls logged

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment