前端用户行为记录 rrweb

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

rrweb 官网：Open source web session replay library

rrweb 主要由 3 部分组成：

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

 

// 录制
rrweb.record({
  emit(event, isCheckout) {
    // isCheckout is a flag to tell you the events has been checkout
    if (isCheckout) {
      events.push([]);
    } else {
      events.push(event);
    }
  },
  recordCanvas: true, // 记录 canvas 内容
  checkoutEveryNms: 10 * 1000, // 每10s重新制作快照
  checkoutEveryNth: 200, // 每 200 个 event 重新制作快照
  packFn: rrweb.pack, // 压缩
});
 
 
// 播放
const replayer = new rrweb.Replayer(events);
replayer.play();
 
 
new rrwebPlayer({
  target: videoRef.value, // customizable root element
  props: {
    events,
    // unpackFn: rrweb.unpack,
  },
});

TimeCat

//录制
 const recorder = new Recorder()
       // receive data on callback
        recorder.onData((data: RecordData, next: () => Promise<void>) => {
            // get or modify record data
            console.log(data);
            
            // here just like koa compose middleware
            // await next() // async call

            // get record data after other methods or plugins 
            // see: Recorder Plugin
        })
// 停止录制
recorder.destroy()

// 清除 indexDB 数据
recorder.clearDB()


// 播放

  const player = new Player({
       target: document.body
  })

其他

开源TimeCatOpenReplay(部分)

商业化LogRocketfullstoryReplay.io 运行时