rrweb录制回放如何处理异步资源加载？

Question

在使用 rrweb 进行页面录制时，异步加载的资源（如动态引入的 JavaScript、Ajax 请求数据、延迟加载的图片等）往往不会被完整捕获，导致回放时内容缺失或不一致。常见问题是：当页面依赖异步请求渲染关键内容（如 React/Vue 组件数据），而 rrweb 仅记录 DOM 快照和用户交互，未记录网络请求及响应，回放时因数据未加载而导致视图空白或错误。如何确保异步资源在回放环境中准确还原？是否需要结合代理请求或 mock 数据机制？这成为实现高保真回放的关键挑战。

Answer 1

一、rrweb 异步资源捕获的挑战与高保真回放实现路径

1. 问题背景：rrweb 的录制机制局限性

rrweb 是一个基于 DOM 快照和用户行为记录的前端录制工具，其核心原理是通过 MutationObserver 监听 DOM 变化，并结合鼠标移动、点击、输入等事件进行序列化存储。然而，这种机制仅能捕捉到“结果状态”，无法感知异步加载过程中的网络请求（如 fetch、XMLHttpRequest）及其响应数据。

当现代前端框架（如 React、Vue）依赖 API 请求动态渲染组件时，若这些请求未被记录，回放时将因缺少数据而导致：

• 组件未渲染或显示 loading 状态
• 图片懒加载失败，出现空白占位符
• 动态脚本未执行，功能缺失
• 表单数据为空，交互异常

2. 深层分析：为何异步资源难以被捕获？

从技术栈角度看，rrweb 默认不拦截网络层通信。以下是关键原因：

层面	rrweb 能力范围	实际缺失部分
DOM 结构	✅ 完整记录	-
CSS 样式	✅ 部分内联保留	外部样式延迟加载可能丢失
JavaScript 执行	❌ 仅记录副作用（DOM 变更）	脚本逻辑本身不重放
网络请求	❌ 不监听 fetch/XHR	响应体、头信息均未保存
媒体资源	⚠️ 图片 URL 记录但不缓存内容	跨域或失效链接导致回放缺失

3. 解决方案演进路径

为实现高保真回放，需在录制阶段扩展 rrweb 的能力边界。以下是三种主流策略的对比与发展：

1. 代理请求拦截 + 数据录制：在浏览器环境中通过 Monkey Patch 替换原生 fetch 和 XMLHttpRequest，记录所有请求与响应。
2. Mock 数据注入回放环境：将录制期间捕获的响应数据嵌入回放器，在 replay 时模拟服务器返回。
3. 构建独立资源归档服务：结合代理服务器或中间件，在录制过程中缓存静态资源与 API 响应，供后续回放调用。

4. 技术实现示例：增强 rrweb 的网络层捕获能力

以下代码展示了如何通过 patch 方法拦截 fetch 请求并记录响应：

const originalFetch = window.fetch;
window.fetch = function(...args) {
  return originalFetch.apply(this, args).then(response => {
    // 克隆响应以读取 body
    const clonedResponse = response.clone();
    clonedResponse.json().then(data => {
      recordNetworkData({
        url: args[0],
        method: args[1]?.method || 'GET',
        requestPayload: args[1]?.body,
        response: data,
        status: response.status
      });
    });
    return response;
  });
};

function recordNetworkData(event) {
  // 将事件推送给 rrweb recorder
  emitToRecorder('network', event);
}
    

5. 回放阶段的数据还原机制设计

在 replay 过程中，必须重建原始网络环境。可通过 Service Worker 或代理层实现请求拦截与 mock 返回：

// 在 replay 环境中注册 SW 拦截请求
self.addEventListener('fetch', (event) => {
  const mock = findMockedResponse(event.request.url);
  if (mock) {
    event.respondWith(new Response(JSON.stringify(mock.response), {
      status: mock.status,
      headers: { 'Content-Type': 'application/json' }
    }));
  }
});
    

6. 架构流程图：完整闭环录制系统

下图为包含网络层增强的 rrweb 录制-回放架构：

graph TD
            A[用户访问页面] --> B{是否启用录制?}
            B -- 是 --> C[Monkey Patch XHR/fetch]
            C --> D[rrweb 记录 DOM + 用户行为]
            C --> E[捕获网络请求/响应]
            D --> F[事件序列上传]
            E --> F
            F --> G[存储: IndexedDB/S3]
            H[启动回放] --> I[加载事件序列]
            I --> J[重建 DOM 快照]
            I --> K[注入 Mock Server 规则]
            J --> L[触发用户交互重演]
            K --> M[拦截请求并返回录制数据]
            L --> N[最终视图还原]

7. 实践建议与高级优化方向

针对企业级应用场景，推荐以下最佳实践：

• 使用 rrweb-snapshot 扩展自定义插件系统，封装网络监听模块
• 对敏感数据（如 token、个人信息）做脱敏处理后再存储
• 采用 WebSocket 实时传输录制流，降低本地存储压力
• 结合 Puppeteer 或 Playwright 在无头环境预加载资源，提升首帧一致性
• 利用 WebAssembly 加速大规模事件序列的压缩与解码
• 建立资源指纹库，避免重复录制相同 CDN 资源
• 支持按时间戳索引快速定位异步请求发生点，便于调试
• 引入差量更新机制，减少冗余数据传输