前端如何静悄悄录制用户的操作过程，上传到服务器。。。

今天我们来聊一个看似简单、却能为产品开发和用户行为分析带来极大帮助的技术：如何在前端静悄悄地记录用户的操作过程，并将这些数据上传到服务器。

大家都知道，现在很多公司有不同的项目，有些项目是备受重视的，尤其是那些可能影响生产环境的关键项目。这些项目中，用户的行为数据常常是解锁问题解决和优化的关键。

最近，老板给了我们一个任务：记录和回放用户在某些页面的操作过程，以便更好地还原问题、分析用户行为。为了避免引起用户的注意，我们要做得尽可能无感知。那么，如何高效且无感知地完成这项任务呢？

首先，想要在不同的框架（如 Vue、Angular 和 React）中都能适用，技术方案就需要具有跨框架的兼容性。

接着，录制用户行为的技术不仅要能捕捉到每一次的点击、输入等动作，还要能够回放这些操作——如果不能回放，那录制又有什么意义呢？而最关键的是，整个过程一定要做到用户无感知，不能让用户察觉到我们正在“监视”他们的操作。

如果你跟我一样是开发者，可能第一反应是“我可以用 WebRTC 来录制屏幕”，因为它确实能录制用户操作的屏幕画面。但是，WebRTC 并不符合我们无感知的要求。

首先，WebRTC 会弹出权限请求，让用户同意录制，这已经让我们失去了“无感知”的初衷。其次，WebRTC 录制的视频数据量庞大，对性能的影响不言而喻，尤其在浏览器中进行录制，用户体验和性能可能会大打折扣。所以，我们得换一个思路。

经过一番思考，我找到了一个非常适合的方案——rrweb。这是一款可以记录和回放网页用户行为的开源库，它无需涉及视频录制，因此完全避免了 WebRTC 的那些问题。

rrweb（Record and Replay the Web）是一个用来记录和回放用户行为的工具，它通过现代浏览器提供的强大 API，能够记录并重现用户在网页中的每一个交互动作。通过它，我们可以轻松地捕捉到点击、滚动、输入框变化等用户操作，同时以无感知的方式上传和回放这些操作。

想象一下，用户在页面上做的一切操作，包括鼠标点击、键盘输入、元素滚动等，都能被我们记录下来，然后在需要的时候将这些操作回放。简直就是在“重播”用户的操作过程，而用户完全察觉不到！下面是一个简单的例子，演示了如何使用 rrweb 来完成这项操作。

我们首先定义了一个简单的页面结构，包含几个按钮用于控制录制和回放：

<template>
  <div class="main">
    <div >
      <el-button @click="record">录制</el-button>
      <el-button @click="replay">回放</el-button>
      <el-button @click="reset">返回</el-button>
    </div>
    <div v-if="!showReplay">
      <div>
        <el-input style="width: 300px" v-model="value" />
      </div>
      <div>
        <el-button>按钮1</el-button>
      </div>
      <div>
        <el-button>按钮2</el-button>
      </div>
      <div>
        <el-button>按钮3</el-button>
      </div>
    </div>
    <div ref="replayer"></div>
  </div>
</template>

接下来，我们需要安装两个依赖：

npm i rrweb rrwebPlayer

• rrweb：用于录制用户的操作。
• rrwebPlayer：用于回放这些录制的操作。

我们通过 rrweb 提供的 record 函数来进行录制操作，并使用 rrwebPlayer 来回放录制的数据。以下是简单的实现代码：

const rrweb = require("rrweb");
import rrwebPlayer from "rrweb-player";

const events = ref([]);
const stopFn = ref(null);
const showReplay = ref(false);
const replayer = ref(null)

const record = () => {
  console.log("开始录制");
  stopFn.value = rrweb.record({
    emit: (event) => {
      events.value.push(event);
    },
    recordCanvas: true,
    collectFonts: true,
  });
};

const replay = () => {
  stopFn.value();
  showReplay.value = true;
  new rrwebPlayer({
    target: replayer.value,
    props: {
      events: events.value,
    },
  });
};

const reset = () => {
  showReplay.value = false;
  events.value = [];
};

在我们使用 rrweb 进行录制时，并没有录制屏幕视频，而是捕获了页面的 DOM 结构和用户的每个交互事件。

每次用户执行操作时，rrweb 会记录当前页面的 DOM 变化，例如节点的创建、销毁，节点属性变化，甚至是文本输入、鼠标点击等行为。这些变化会以对象的形式存储，并通过 emit 函数回调给我们，最终将这些数据传给 rrwebPlayer 进行回放。

通过这种方式，虽然我们看起来是在播放“视频”，但实际上我们是把 DOM 数据流按时间顺序展现出来，这样就能完美模拟用户的操作过程。

虽然通过 rrweb 录制的 DOM 数据比视频文件小很多，但如果每次操作都上传数据，还是可能会影响性能。因此，我们可以设置一个合适的上传频率，比如每隔 20 秒上传一次数据，避免频繁上传造成浏览器性能下降。

const report = async () => {
  await reportRequest(events.value);
  events.value = [];
}

setInterval(report, 20000);  // 每20秒上传一次数据

通过使用 rrweb，我们不仅可以实现用户操作的录制和回放，而且避免了使用视频录制带来的种种问题。

它无需用户同意录制，且可以轻松在不同的框架中使用，做到真正的无感知录制。此外，通过合理的上传策略，我们能够高效地将这些操作数据上传到服务器，供后续分析和回放使用。

对于那些需要追踪用户行为、还原用户操作过程的项目，rrweb 是一个非常值得考虑的工具。简直就是开发者的“救命稻草”，而且操作起来也不复杂，技术门槛较低。最后，大家在使用时可以根据实际情况优化上传频率，避免对用户体验造成影响。

希望这个小技巧能帮到你们！如果你们也有类似的需求，赶紧试试 rrweb，一定会让你的项目更加精细化管理，提升用户体验！