使用 rrweb 录制和回放用户交互操作

一直以来项目的日志功能只记录了用户的登录和接口请求操作日志,用来辅助我们定位和解决反馈的异常问题。这些日志大多数情况下并不会记录用户是如进行操作的,只记录发起请求时携带的参数信息。大多数情况下这些日志已经足够帮助我们发现和解决问题了。
但在一些非常独特的问题反馈中,我们没有办法了解到用户是如何触发这些异常请求的。还需要去主动联系用户询问当时的操作场步骤去复现,或者按照日志中的参数去猜测用户是如何操作的。

最近正在听 Web Worker 这档播客节目,有一期节目邀请到了 Aryu 大佬,就发现了 rrweb 这个项目。有兴趣的话可以从项目的主页中在线尝试录制和回放功能,预设了3个业务场景的录制体验Demo。

可以看到录制效果非常不错。能录制到鼠标轨迹、滚轮操作、各种元素的聚焦、下拉和光标位置等各种各样的操作记录。

  • 但因为是DOM级别的录制,所以浏览器原生提供的功能,并不会被录制到。比如说 <select> 元素提供的下拉操作和 <input type="file"> 提供的文件选择操作。
  • v1.0.0 开始以插件的形式增加了控制台录制的功能。

而且使用起来非常简单,只需要引入和执行 record 方法就可以启动录制了,然后按照自己的需求去存储即可。

import { record } from 'rrweb'

let events = [];
record({
  emit(event) {
    // 将用户操作的 event 存入 events 数组中
    events.push(event);
  },
});
阅读全文