rrweb 是用来录制并回放用户动作的一个插件。
安装
jsdelivr
// 包含回放
<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>
其他资源
# 包含录制、回放、压缩数据、解压缩数据
rrweb-all.js
rrweb-all.min.js
# 包含录制、回放
rrweb.js
rrweb.min.js
# 回放所需的样式文件
rrweb.min.css
# 录制
record/rrweb-record.js
record/rrweb-record.min.js
# 压缩数据
record/rrweb-record-pack.js
record/rrweb-record-pack.min.js
# 回放
replay/rrweb-replay.js
replay/rrweb-replay.min.js
# 解压缩数据
replay/rrweb-replay-unpack.js
replay/rrweb-replay-unpack.min.js
npm
npm i rrweb rrweb-player -D
开始
录制部分代码
this.stopFn = rrweb.record({
checkoutEveryNth: 200, // 每 200 个 event 重新制作快照
emit(event, isCheckout) {
// isCheckout 是一个标识，告诉你重新制作了快照
if (isCheckout) {
self.eventsMatrix.push([]);
}
const lastEvents = self.eventsMatrix[self.eventsMatrix.length - 1];
lastEvents.push(event);
},
// 定制的选项
plugins: [rrweb.getRecordConsolePlugin({
level: ["info", "log", "warn", "error"],
lengthThreshold: 10000,
stringifyOptions: {
stringLengthLimit: 1000,
numOfKeysLimit: 100,
depthOfLimit: 1
},
logger: window.console,
})],
});
回放部分代码
this.stopFn();
this.showReplay = true
new rrwebPlayer({
target: this.$refs.replayer, // 可以自定义 DOM 元素
// 配置项
props: {
logConfig: true,
events: this.eventsMatrix[this.eventsMatrix.length - 1],
plugins: [
rrweb.getReplayConsolePlugin({
level: ['info', 'log', 'warn', 'error'],
}),
],
},
});
