rrweb实现页面录制回放

rrweb 是什么

rrweb 是一个实现web页面录制和回放的基础库 ，它可以将⻚⾯中的 DOM 以及⽤户操作保存为可序列化的数据，以实现远程回放。

有时候线上页面出现比较难定位的问题，需要了解客户是怎么操作造成的，但因为web产品是面向全网用户的，无法确保能联系用户复现，这个时候就希望能有一个工具能记录并能回放用户的操作记录。

项目github：github.com/rrweb-io/rr…

官网：www.rrweb.io

适用场景

• 记录⽤户使⽤产品的⽅式并加以分析，进⼀步优化产品。
• 采集⽤户遇到 bug 的操作路径，予以复现。
• 记录 CI 环境中的 E2E 测试的执⾏情况。
• 录制体积更⼩、清晰度⽆损的产品演⽰。
• 实时协同的场景。

使用的方式和效果

在项目中引入

<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>

也可以使用npm 引入

npm install --save rrweb

简单实现录制和回放

// 录制

import rrweb from 'rrweb'
let events = []
const stopFn = rrweb.record({
  emit(event) {
    // 保存获取到的 event 数据，event里面是序列号后的DOM和鼠标事件等
    events.push(event)
  }
})

//回放

var replayer = new rrweb.Replayer(events);
replayer.play();

点击查看 在线录制案例

点击查看 在线回放案例