网络请求录制器与回放器

该功能旨在为开发者提供关于 bug 现场的更多信息。录制和回放网络输出均提供了一些选项。

启用网络请求录制

你可以像这样使用默认选项启用：

import { record } from '@rrweb/record';
import { getRecordNetworkPlugin } from '@rrweb/rrweb-plugin-network-record';

record({
  emit: function emit(event) {
    events.push(event);
  },
  // to use default record option
  plugins: [getRecordNetworkPlugin()],
});

你也可以像这样自定义记录器的行为：

import { record } from '@rrweb/record';
import { getRecordNetworkPlugin } from '@rrweb/rrweb-plugin-network-record';

const recordingId = crypto.randomUUID();

record({
  emit: function emit(event) {
    fetch(`https://api.rrweb.com/recordings/${recordingId}/events`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        events: [event],
      }),
    });
  },
  // customized record options
  plugins: [
    getRecordNetworkPlugin({
      initiatorTypes: ['fetch', 'xmlhttprequest'],
      // mask/block recording event for request
      transformRequestFn: (request) => {
        // request.name is url
        if (request.name.includes('api.rrweb.com')) return; // skip request
        delete request.requestHeaders?.Authorization; // remove sensitive data
        request.responseBody = maskTextFn(request.responseBody);
        return request;
      },
      recordHeaders: true,
      recordBody: true,
      recordInitialRequests: false,
    }),
  ],
});

警告：如果你要将事件上传到服务器，你应该始终使用 transformRequestFn 对这些请求的录制事件进行脱敏/阻止，否则会引发死循环。

所有选项如下所述：

选项	默认值	说明
initiatorTypes	['fetch','xmlhttprequest','img',...]	默认值包含所有 initiator types 的名称。你可以通过设置需要的类型来覆盖它。
transformRequestFn	(request) => request	转换请求的录制事件，以阻止（跳过）请求或对请求进行脱敏/转换（例如隐藏敏感数据）
recordHeaders	false	录制 fetch 和 xmlhttprequest 请求的请求与响应头
recordBody	false	录制 fetch 和 xmlhttprequest 请求的请求与响应体
recordInitialRequests	false	为 record() 被调用之前的所有请求录制事件

回放网络请求

如何使用 onNetworkData 回调以最佳方式回放你的网络事件，由你决定。

import rrweb from 'rrweb';
import { getReplayNetworkPlugin } from '@rrweb/rrweb-plugin-network-replay';

const replayer = new rrweb.Replayer(events, {
  plugins: [
    getReplayNetworkPlugin({
      onNetworkData: ({ requests }) => {
        for (const request of requests) {
          const name = request.name; // url
          const method = request.method;
          const status = request.status;
          console.log(`${method} ${name} ${status}`);
        }
      },
    }),
  ],
});
replayer.play();

回放选项说明如下：

选项	默认值	说明
onNetworkData	undefined	你可以使用此接口在模拟的浏览器控制台中回放网络请求

技术实现

此实现通过补丁（patching）fetch 和 XMLHttpRequest 的对象与方法来进行录制。我们使用 PerformanceNavigationTiming 录制文档导航，并通过 PerformanceObserver API 使用 PerformanceResourceTiming 录制其他所有资源（script、img、link 等）。

更多信息请参见 PR [network-plugin] Feat: Capture network events #1105。