本页介绍 OpenReplay JavaScript SDK 选项的 network 命名空间。它涉及捕获诸如 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：将 tracker 从修补 window.fetch/window.XMLRequest 切换为使用代理对象。默认值：true。
• failuresOnly：捕获 HTTP 状态码为 4xx-5xx 的请求。默认值：false。
• sessionTokenHeader：如果你启用了我们的某些后端集成（即 Sentry），你可以使用此选项指定标头名称（或通过将选项设置为 true 来激活默认标头 ‘X-OpenReplay-SessionToken’）。后者会自动附加到每个 fetch/XHR 请求中，以包含 OpenReplay sessionToken 的值。默认值：false。
• tokenUrlMatcher：获取当前 tracker 请求的 url 并返回 boolean。如果存在该函数，则只有当此函数返回 true 时才会应用 sessionTokenHeader。默认值：undefined。
• ignoreHeaders：帮助定义你不希望捕获的标头列表。将其值设置为 false 以捕获所有标头（设置为 true 则不捕获任何标头）。默认值：['Cookie', 'Set-Cookie', 'Authorization']，以便不捕获敏感标头。
• capturePayload：存储请求/响应正文负载。这对于故障排除目的可能非常有用，但如果你的应用程序大量使用 Fetch/XHR 请求，则可能会对网络使用造成较大负担。默认值：false。

• captureInIframes：用于禁用 iFrame 内部的网络跟踪。默认值：true。
• axiosInstances：在常规配置（proxy api）无法工作时，可用于在特定情况下跟踪自定义的 axios 实例。默认值：undefined。
• sanitizer：对 Fetch/XHR 请求/响应中的敏感数据进行脱敏处理，或完全忽略该请求。你可以通过修改请求对象然后从函数中将其返回来编辑其字段（参见下面的示例）。脱敏处理会在所有由其他选项引发的过滤和修改之后应用（也就是说，如果 capturePayload 未显式设置为 true，则参数将不包含 body 负载）。

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
  }
});

请注意用于设置 network 选项的 initOpts 变量/行。

<!-- 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 或查看我们的论坛，从我们的社区获得帮助。