最近新上了一个功能，高层非常之关注，毕竟要拿来给投资画饼，CEO李总试用了一番，结果流程被block住，拉住小胖的领导满嘴芬芳，看来年底的绩效危矣…搞不定还要N+1,怎么办？…

用户操作录制

在一些关键性操作时需要录制用户的操作情况，作为日志查询或客户纠纷佐证，这里李总的操作block，需要小胖来复现一下，咱推荐下下面的这个库，大家可以打样试试

rrweb

rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作 。

rrweb 主要由 3 部分组成：

• rrweb-snapshot ，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
• rrweb ，包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更（mutation）；replay 则是将记录的变更按照对应的时间一一重放。
• rrweb-player ，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点*放播**等功能。

支持cdn和npm安装方式使用

npm install --save rrweb

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>

let events = [];

rrweb.record({
  emit(event) {
    // 将 event 存入 events 数组中
    events.push(event);
  },
});

// save 函数用于将 events 发送至后端存入，并重置 events 数组
function save() {
  const body = JSON.stringify({ events });
  events = [];
  fetch('http://YOUR_BACKEND_API', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body,
  });
}

// 每 10 秒调用一次 save 方法，避免请求过多
setInterval(save, 10 * 1000);

开源地址：rrweb/README.zh_CN.md at master · rrweb-io/rrweb · GitHub