Network Metrics

Frontend JS library to track network request data in the browser.

Note that for all data to be available, the timing-allow-origin header must be included in the response. We have already added this header in the responses from our API and CDNs.

Sniffer

A sniffer provides a simplified interface to track and listen for network requests made in the browser. Note that using this logic may make irreversible changes to the provided performance object, so only create one sniffer per performance object.

const performance = window.performance;
const frameURL = window.location.href;

if (NetworkMetrics.isSniffingAllowed(performance)) {
  const sniffer = new NetworkMetrics.NetworkSniffer(performance, frameURL);

  const frameTiming = sniffer.getFrameTiming();
  const currentResourceTimings = sniffer.getAvailableResourceTimings();
  sniffer.addResourceListener((resourceTiming) => { /* Do stuff */ });
}

Logger

A logger listens for network requests, parses them, and sends the sanitized data to the provided track function.

const trackFunc = (event, data) => { /* Do stuff */ };
const logger = new NetworkMetrics.NetworkLogger(sniffers, trackFunc);