Cette page décrit l’espace de noms network des options du SDK JavaScript d’OpenReplay. Elle concerne la capture des requêtes réseau telles que fetch et XHR, y compris les payloads si nécessaire, et leur inspection ultérieure lors de la relecture des enregistrements de sessions. Cela est très utile pour comprendre et corriger les problèmes.

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 : Fait passer le tracker du patch de window.fetch/window.XMLRequest à l’utilisation d’objets proxy. Par défaut : true.
• failuresOnly : Capture les requêtes ayant un code de statut HTTP 4xx-5xx. Par défaut : false.
• sessionTokenHeader : Au cas où vous auriez activé certaines de nos intégrations backend (c.-à-d. Sentry), vous pouvez utiliser cette option pour spécifier le nom de l’en-tête (ou activer celui par défaut ‘X-OpenReplay-SessionToken’ en définissant l’option sur true). Ce dernier est automatiquement ajouté à chaque requête fetch/XHR pour contenir la valeur du sessionToken d’OpenReplay. Par défaut : false.
• tokenUrlMatcher : Reçoit l’url de la requête actuelle du tracker et renvoie un boolean. S’il est présent, sessionTokenHeader ne sera appliqué que lorsque cette fonction renvoie true. Par défaut : undefined.
• ignoreHeaders : Aide à définir une liste d’en-têtes que vous ne souhaitez pas capturer. Définissez sa valeur sur false pour tous les capturer (true pour aucun). Par défaut : ['Cookie', 'Set-Cookie', 'Authorization'] afin que les en-têtes sensibles ne soient pas capturés.
• capturePayload : Stocke les payloads du corps des requêtes/réponses. Cela peut être très utile à des fins de dépannage, mais peut devenir lourd en termes d’utilisation du réseau si votre application utilise abondamment les requêtes Fetch/XHR. Par défaut : false.

• captureInIframes : Pour désactiver le suivi réseau à l’intérieur des iFrames. Par défaut : true.
• axiosInstances : Utile dans des situations spécifiques pour suivre des instances axios personnalisées, si la configuration habituelle (proxy api) ne fonctionne pas. Par défaut : undefined.
• sanitizer : Assainit les données sensibles des requêtes/réponses Fetch/XHR ou ignore complètement la requête. Vous pouvez expurger des champs de l’objet de requête en le modifiant puis en le renvoyant depuis la fonction (voir les exemples ci-dessous). L’assainissement est appliqué après tout le filtrage et les modifications induites par les autres options (c’est-à-dire que l’argument ne contiendra pas le payload body si capturePayload n’a pas été explicitement défini sur 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 payloads for calls that start with /secure
  if (data.url.startsWith("/secure")) {
    data.request.body = null;
    data.response.body = null;
  }
  return data
}

// OR

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

Vous trouverez ci-dessous des exemples sur la façon d’utiliser l’option network.

tracker.configure({
  projectKey: PROJECT_KEY,
  network: {
    capturePayload: true // Capture HTTP payload
  }
});

Notez la variable/ligne initOpts pour définir l’option network.

<!-- 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>

Vous rencontrez des difficultés pour configurer ces options ? Connectez-vous à notre Slack ou consultez notre Forum et obtenez de l’aide de notre communauté.