使用rrweb悄悄录制用户操作过程

文章目录

一、前言

在做项目监控埋点中，有些时候很不好复现用户操作的步骤。这时就需要做一些用户行为的记录，主要是为了更好地还原用户在某一个时间点的操作过程。

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><divclass="main"><el-buttonsize="mini"roundtype="primary"icon="el-icon-refresh-left"@click.native="record">
        录制
      </el-button><el-buttonsize="mini"roundtype="primary"icon="el-icon-refresh-left"@click.native="