Network Options (Web)

This page describes the network namespace of the OpenReplay javascript SDK options. It relates to capturing network requests such as fetch and XHR, including payloads if necesssary, and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.

network?: {
  failuresOnly: boolean;
  sessionTokenHeader: string | boolean;
  ignoreHeaders: Array<string> | boolean;
  capturePayload: boolean;
  sanitizer: (RequestResponseData) => RequestResponseData | null;
  captureInIframes: boolean;
  axiosInstances: AxiosInstance[];
  useProxy?: boolean;
  tokenUrlMatcher?: (url: string) => boolean;
}

• useProxy: Switches tracker from patching window.fetch/window.XMLRequest to using proxy objects. Default: true.
• failuresOnly: Captures requests having 4xx-5xx HTTP status code. Default: false.
• sessionTokenHeader: In case you have enabled some of our backend integrations (i.e. Sentry), you can use this option to specify the header name (or activate default one ‘X-OpenReplay-SessionToken’ by putting option to true). This latter gets appended automatically to each fetch/XHR request to contain the OpenReplay sessionToken’s value. Default: false.
• tokenUrlMatcher: Gets current tracker request’s url and returns boolean. If present, sessionTokenHeader will only be applied when this function returns true. Default: undefined.
• ignoreHeaders: Helps define a list of headers you don’t wish to capture. Set its value to false to capture all of them (true if none). Default: ['Cookie', 'Set-Cookie', 'Authorization'] so sensitive headers won’t be captured.
• capturePayload: Stores request/response body payloads. This might be quite useful for troubleshooting purposes, but can become heavy on the network usage if your application extensively uses Fetch/XHR requests. Default: false.

• captureInIframes: To disable network tracking inside iFrames. Default: true.
• axiosInstances: Useful in specific situations to track custom axios instances, if the regular configuration (proxy api) isn’t working. Default: undefined.
• sanitizer: Sanitize sensitive data from Fetch/XHR request/response or ignore request completely. You can redact fields on the request object by modifying then returning it from the function (see examples below). Sanitization is applied after all the filtering and modifications induced by other options (that is, argument won’t contain body payload if capturePayload was not explicitly set to true).

interface RequestData {
  body: BodyInit | null | undefined; // whatewer you've put in the init.body in fetch(url, init) or xhr.send(body)
  headers: Record<string, string>;
}

interface ResponseData {
  body: string | Object | null;  // Object if response is of JSON type
  headers: Record<string, string>;
}

interface RequestResponseData {
  readonly status: number;
  readonly method: string;
  url: string;
  request: RequestData;
  response: ResponseData;
}

sanitizer: (data: RequestResponseData) => { // sanitise the body or headers
  if (data.url === "/auth") {
    data.request.body = null
  }

  if (data.request.headers['x-auth-token']) { // can also use ignoreHeaders option instead
    data.request.headers['x-auth-token'] = 'SANITISED';
  }

  // Sanitize response
  if (data.status < 400 && data.response.body.token) {
    data.response.body.token = "<TOKEN>"  
  }

  return data
}

// OR

sanitizer: data => { // ignore requests that start with /secure
  if (data.url.startsWith("/secure")) {
    return null
  }
  return data
}

// OR

sanitizer: data => { // sanitize request url: replace all numbers
  data.url = data.url.replace(/\d/g, "*")
  return data
}

Below are examples on how to use the network option.

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  network: {
    capturePayload: true // Capture HTTP payload
  }
});

Note the initOpts variable/line to set the network option.

<!-- OpenReplay Tracking Code -->
<script>
var initOpts = { 
  projectKey: "GxPpaDARdn2345fgt321", 
  network: { // Enable HTTP payload capture in the network option
    capturePayload: true
  } 
};

(function(A,s,a,y,e,r){
  r=window.OpenReplay=[e,r,y,[s-1, e]];
  s=document.createElement('script');s.src=A;s.async=!a;
  ...
})("//static.openreplay.com/latest/openreplay.js", 1, 0, initOpts, startOpts);
</script>

Having trouble configuring these options? Please connect to our Slack or check out our Forum and get help from our community.