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

本文介绍了如何使用 rrweb 库在前端悄无声息地录制用户操作,并进行回放。针对不同框架的兼容性、用户无感知的录制、数据优化及上传等难点,提供了实现方案和源码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、前言

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

1.1、难点

  • 跨框架使用:这些项目有vuereact,需要都能适用
  • 能录制用户行为:能把用户在页面上的操作录制下来
  • 能回放录制:如果不能回放,那么这个录制就无意义了
  • 用户无感知:必须做到用户无感知才行

1.2、调研

说到前端视频的录制,我们会想到 webRTC 这个技术,他能做到录制屏幕的效果,但是通过 webRTC 去完成这个方案的话,有几个缺点:

  • 做不到用户无感知,需要用户同意才能录制
  • 录制的视频太大了,太占内存了
  • 学习成本比较高,这也是原因之一

那怎么才能做到:

  • 用户无感知
  • 不录制视频

其实只要不录制视频了,那么用户肯定就无感知,因为一旦要录视频,浏览器肯定要询问用户同意不同意。

所以我们选择了另一个方案 rrweb,一个用来录制用户页面行为的库

二、rrweb

rrwebrecord 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="replay"
      >
        回放
      </el-button>
    <div id="replayer" v-show="showReplay" @click
rrweb 是一个用于录制回放网页操作的强大工具,它可以帮助开发者记录用户在网页上的所有交互行为,并能够在之后的时间点重现这些操作。这对于调试、用户体验分析以及安全审计等方面都非常有用。 ### 安装与配置 要开始使用 rrweb,首先需要将其安装到项目中。可以通过 npm 或 yarn 来安装相关的库: ```bash npm install --save rrweb # 或者 yarn add rrweb ``` 同样地,如果还需要使用 rrweb 提供的播放器和快照功能,则也需要安装 `rrweb-player` 和 `rrweb-snapshot`: ```bash npm install --save rrweb-player rrweb-snapshot # 或者 yarn add rrweb-player rrweb-snapshot ``` ### 录制网页操作 一旦安装完成,就可以开始录制用户的网页操作了。下面是一个简单的示例代码来展示如何使用 rrweb 进行录制: ```javascript import { record } from 'rrweb'; // 开始录制 const stop = record({ emit(event) { // 在这里处理录制的数据事件 console.log('Recorded event:', event); }, }); // 假设我们想要停止录制一段时间后 setTimeout(() => { // 停止录制 stop(); }, 10000); // 10秒后停止 ``` 在这个例子中,`record` 函数会返回一个函数 `stop`,调用它可以停止录制过程。`emit` 回调会在每次有新的事件被录制时触发[^2]。 ### 回放录制的操作 为了回放之前录制的操作,可以使用 `rrweb` 的 `replay` 方法或者利用 `rrweb-player` 提供的图形界面来进行更直观的回放。以下是如何使用 `replay` 方法的一个基本示例: ```javascript import { replay } from 'rrweb'; import events from './path-to-your-recorded-events'; // 导入录制的事件数据 // 开始回放 replay(events, { speed: 1, // 设置回放速度 root: document.body, // 指定回放的目标容器 }); ``` 此外,如果你想要提供给用户一个更加友好的回放体验,那么你可以考虑集成 `rrweb-player` 到你的应用中,这样用户就可以通过 GUI 控制回放过程,比如暂停、快进等。 ### 使用场景 rrweb 可以应用于多种场景,例如在线教育平台中的教学演示、网站性能监控用户行为分析等。特别是在 WebSSH 会话中,rrweb 能够帮助记录用户的命令行操作历史,使得后续的问题排查变得更加容易[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小马甲丫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值