На этой странице описывается пространство имён network в параметрах JavaScript SDK OpenReplay. Оно относится к захвату сетевых запросов, таких как fetch и XHR, включая полезную нагрузку при необходимости, и их последующему изучению при воспроизведении записей сессий. Это очень полезно для понимания и устранения проблем.

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: Переключает трекер с патчинга window.fetch/window.XMLRequest на использование прокси-объектов. По умолчанию: true.
• failuresOnly: Захватывает запросы с HTTP-кодом состояния 4xx-5xx. По умолчанию: false.
• sessionTokenHeader: Если вы включили какие-либо из наших backend-интеграций (например, Sentry), вы можете использовать этот параметр для указания имени заголовка (или активировать заголовок по умолчанию ‘X-OpenReplay-SessionToken’, установив параметр в true). Последний автоматически добавляется к каждому запросу fetch/XHR для передачи значения sessionToken OpenReplay. По умолчанию: false.
• tokenUrlMatcher: Получает url текущего запроса трекера и возвращает boolean. Если этот параметр задан, sessionTokenHeader будет применяться только тогда, когда эта функция возвращает true. По умолчанию: undefined.
• ignoreHeaders: Помогает определить список заголовков, которые вы не хотите захватывать. Установите значение false, чтобы захватывать их все (true, чтобы не захватывать ни одного). По умолчанию: ['Cookie', 'Set-Cookie', 'Authorization'], чтобы конфиденциальные заголовки не захватывались.
• capturePayload: Сохраняет полезную нагрузку тела запросов/ответов. Это может быть весьма полезно для целей устранения неполадок, но может стать тяжёлым для использования сети, если ваше приложение интенсивно использует запросы Fetch/XHR. По умолчанию: false.

• captureInIframes: Для отключения отслеживания сети внутри iFrame. По умолчанию: true.
• axiosInstances: Полезно в определённых ситуациях для отслеживания пользовательских экземпляров axios, если обычная конфигурация (proxy api) не работает. По умолчанию: undefined.
• sanitizer: Очищает конфиденциальные данные из запросов/ответов Fetch/XHR или полностью игнорирует запрос. Вы можете скрыть поля объекта запроса, изменив его и затем вернув из функции (см. примеры ниже). Очистка применяется после всей фильтрации и изменений, вызванных другими параметрами (то есть аргумент не будет содержать полезную нагрузку body, если capturePayload не был явно установлен в 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
}

Ниже приведены примеры использования параметра network.

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

Обратите внимание на переменную/строку initOpts для установки параметра 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>

Возникли трудности с настройкой этих параметров? Присоединяйтесь к нашему Slack или загляните на наш Форум и получите помощь от нашего сообщества.