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).

firebase-perf-axios.js

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

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

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

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

how to watch these network metrics on firebase console ?

Where are these data visible?

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

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).

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