React框架使用 rrweb 进行回放

什么是 rrweb？

rrweb 是一个非常强大的开源 JavaScript 库，专注于记录和回放用户在网站上的行为。以下是 rrweb 的一些优势：

• 开源性质: rrweb 是一个开源项目，任何人都可以免费使用并对其进行修改和定制。这意味着你可以根据自己的需求对其进行扩展和改进，而不受商业软件的限制。

• 轻量级和高效性: rrweb 设计精巧，轻量级且高效。它使用了一种精巧的算法来记录用户行为，以尽可能减少对页面性能的影响。这使得它非常适合用于生产环境，即使在流量较大的网站上也可以稳定运行。

• 精确的记录和回放功能: rrweb 能够准确地记录用户在网站上的每一个交互行为，包括点击、滚动、输入等。它还能够高效地回放这些行为，以便开发人员能够清晰地了解用户的操作路径和体验过程。

• 易于集成: rrweb 提供了简单易用的 API，可以轻松地集成到现有的网站项目中。只需几行代码，就可以开始记录和回放用户行为，而无需复杂的配置或依赖。

• 社区支持和活跃度: rrweb 拥有一个活跃的社区和开发团队，持续地对其进行维护和改进。你可以通过 GitHub 等平台与其他开发者交流和分享经验，获得帮助和支持。

使用 React 设置 rrweb

npm install rrweb rrweb-player

建议将保存事件块的变量放在组件外部，以避免受到重新渲染的影响。

在这里，我们收集事件并将它们推送到包含所有事件的数组中，然后我们调用我们的函数将事件集合发送回后端，但我们每隔 10 秒调用一次该函数，以避免重复调用后端，成功上传事件后，我们将事件变量重置为空数组，然后准备收集新事件。

在使用 React 初始化 rrweb 时要避免的事情

首先，最重要的是，建议在自己的 useEffect 中使用 rrweb，该 useEffect 不依赖于另一个变量或事件，该事件必须等待来自后端的数据。

避免以这种方式初始化 rrweb，因为在页面加载时，rrweb 会立即开始记录，当来自后端的数据变得可用时，它会创建一个新的 rrweb 记录实例，从而使重放视频闪烁并显示所有内容两次。

上述截图修复了我提到的创建多个 rrweb 记录实例的问题，因此在实例化 rrweb 记录之前检查数据是否可用，这样 rrweb 就不会在页面加载时开始记录，直到数据可用为止。注意：您可以通过调用分配给记录实例的 stopFn 在代码的任何行停止记录。

使用 rrweb-player 重放记录的数据

对于视频重放部分，我建议将记录的事件块保存在一个数据库或者文件中，然后前端可以向 URL 发送 GET 请求获取指定的文件。

然后将一个 div 作为目标来显示其中的视频。