使用rrweb悄悄录制用户操作过程
文章目录
- 一、前言
-
- 1.1、难点
- 1.2、调研
- 二、`rrweb`
-
- 2.1、效果展示
- 2.2、基本使用(vue示例)
-
- 2.2.1、`HTML`
- 2.2.2、`JS`
- 2.3、上传 & 优化
- 三、原理
- 四、源码
- 五、最后
一、前言
在做项目监控埋点中，有些时候很不好复现用户操作的步骤。这时就需要做一些用户行为的记录，主要是为了更好地还原用户在某一个时间点的操作过程。
1.1、难点
- 跨框架使用：这些项目有
vue、react，需要都能适用- 能录制用户行为：能把用户在页面上的操作录制下来
- 能回放录制：如果不能回放，那么这个录制就无意义了
- 用户无感知：必须做到用户无感知才行
1.2、调研
说到前端视频的录制，我们会想到 webRTC 这个技术，他能做到录制屏幕的效果，但是通过 webRTC 去完成这个方案的话，有几个缺点：
- 做不到用户无感知，需要用户同意才能录制
- 录制的视频太大了，太占内存了
- 学习成本比较高，这也是原因之一
那怎么才能做到：
- 用户无感知
- 不录制视频
其实只要不录制视频了，那么用户肯定就无感知，因为一旦要录视频，浏览器肯定要询问用户同意不同意。
所以我们选择了另一个方案 rrweb，一个用来录制用户页面行为的库
二、rrweb
rrweb 是 record and replay the web 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作。
2.1、效果展示
2.2、基本使用(vue示例)
2.2.1、HTML
我们先定义好 html 结构，replayer 用来当做回放的容器
<template>
<div class="main">
<el-button
size="mini"
round
type="primary"
icon="el-icon-refresh-left"
@click.native="record"
>
录制
</el-button>
<el-button
size="mini"
round
type="primary"
icon="el-icon-refresh-left"
@click.native="