最近新上了一个功能，高层非常之关注，毕竟要拿来给投资画饼，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=";/><script src=";></script>

let events = [];rrweb.record({  emit(event) {    // 将 event 存入 events 数组中    events.push(event);  },});// save 函数用于将 events 发送至后端存入，并重置 events 数组function save() {  const body = JSON.stringify({ events });  events = [];  fetch(';, {    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