@grafana/instrumentation-xhr

Faro instrumentation of the JavaScript XMLHttpRequest (XHR) API

❗️Warning: this package is experimental and may be subject to frequent and breaking changes. Use at your own risk.❗️

Installation and Usage

❗️Warning: This package is not interoperable with @opentelemetry/instrumentation-xml-http-request. Use one or the other❗️

// index.ts
import { XHRInstrumentation } from '@grafana/faro-instrumentation-xhr';
import { getWebInstrumentations, initializeFaro } from '@grafana/faro-react';

initializeFaro({
  // see the full set of options in the @grafana/faro-core README.md
  instrumentations: [
    // Load the default Web instrumentations
    ...getWebInstrumentations(),
    // Add XHR instrumentation
    new XHRInstrumentation({
      // specify ignoredUrls to prevent telemetry data from being sent to Faro when making requests to those URLs
      ignoredUrls: [/^https:\/\/www\.google-analytics\.com\/collect/],
    }),
  ],
});

// myApi.ts
const req = new XMLHttpRequest();
req.open('GET', '...');
req.send(); // use XHR as normal - telemetry data is sent to your Faro endpoint

Backend correlation

In order to prepare backend correlation, this instrumentation adds the following headers to each request that server-side instrumentation can use as context:

• x-faro-session - the client-side session id