Esta página describe el espacio de nombres network de las opciones del SDK de JavaScript de OpenReplay. Está relacionado con la captura de solicitudes de red como fetch y XHR, incluyendo las cargas útiles si es necesario, e inspeccionarlas posteriormente al reproducir las grabaciones de sesiones. Esto es muy útil para comprender y solucionar problemas.

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: Cambia el tracker de parchear window.fetch/window.XMLRequest a usar objetos proxy. Predeterminado: true.
• failuresOnly: Captura las solicitudes que tienen un código de estado HTTP 4xx-5xx. Predeterminado: false.
• sessionTokenHeader: En caso de que hayas habilitado alguna de nuestras integraciones de backend (es decir, Sentry), puedes usar esta opción para especificar el nombre del encabezado (o activar el predeterminado ‘X-OpenReplay-SessionToken’ estableciendo la opción en true). Este último se añade automáticamente a cada solicitud fetch/XHR para contener el valor del sessionToken de OpenReplay. Predeterminado: false.
• tokenUrlMatcher: Obtiene la url de la solicitud actual del tracker y devuelve un boolean. Si está presente, sessionTokenHeader solo se aplicará cuando esta función devuelva true. Predeterminado: undefined.
• ignoreHeaders: Ayuda a definir una lista de encabezados que no deseas capturar. Establece su valor en false para capturarlos todos (true para no capturar ninguno). Predeterminado: ['Cookie', 'Set-Cookie', 'Authorization'] para que no se capturen los encabezados sensibles.
• capturePayload: Almacena las cargas útiles del cuerpo de la solicitud/respuesta. Esto puede ser bastante útil para fines de resolución de problemas, pero puede volverse pesado en el uso de la red si tu aplicación utiliza ampliamente solicitudes Fetch/XHR. Predeterminado: false.

• captureInIframes: Para deshabilitar el seguimiento de red dentro de los iFrames. Predeterminado: true.
• axiosInstances: Útil en situaciones específicas para rastrear instancias de axios personalizadas, si la configuración habitual (api de proxy) no funciona. Predeterminado: undefined.
• sanitizer: Sanea datos sensibles de la solicitud/respuesta Fetch/XHR o ignora la solicitud por completo. Puedes redactar campos en el objeto de la solicitud modificándolo y luego devolviéndolo desde la función (ver los ejemplos a continuación). El saneamiento se aplica después de todo el filtrado y las modificaciones inducidas por otras opciones (es decir, el argumento no contendrá la carga útil body si capturePayload no se estableció explícitamente en 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
}

A continuación se muestran ejemplos de cómo usar la opción network.

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

Observa la variable/línea initOpts para establecer la opción 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>

¿Tienes problemas para configurar estas opciones? Conéctate a nuestro Slack o consulta nuestro Foro y obtén ayuda de nuestra comunidad.