Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner Author

@Salakar 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

This comment has been minimized.

Copy link

@Thyoity 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

This comment has been minimized.

Copy link

@geniuscva geniuscva commented Sep 26, 2020

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

@shabhi1997

This comment has been minimized.

Copy link

@shabhi1997 shabhi1997 commented Nov 3, 2020

how to watch these network metrics on firebase console ?

@matteodanelli

This comment has been minimized.

Copy link

@matteodanelli matteodanelli commented Apr 19, 2021

Where are these data visible?

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