聊聊我们开源的 web 录制与回放库： rrweb

我们（ SmartX 前端团队）在去年开源了我们实现的 web 录制与回放库 rrweb，可以将页面中的操作记录为可序列化的日志数据并回放，也在仓库中附上了我们的设计文档。

最近我们在知乎专栏中更新了一篇博客，更详细地介绍了这个项目的演进过程与设计思路，希望能够让对此感兴趣的开发者可以参与其中。

在 rrweb 中我们正在实现的功能包括：

对 iframe 和 shadow DOM 的嵌套录制
对 CSS in JS 的实现
网络请求和异常捕获的插件

除此之外我们也在基于 rrweb 构建一些有意思的应用，例如：

一套用户行为收集与分析的 SaaS 化工具
面向非开发者的 Demo 录制与编辑工具

当然，rrweb 只是我们工作中实际解决的诸多工程问题的一个缩影，以今年为例，我们的工作内容包括：

将一个密集开发了三年的复杂项目渐进式迁移至 typescript，并应用 state chart, UI pattern 等我们认为对于高质量前端开发有极大帮助的理论，甩掉历史包袱，提高代码质量与可维护性。
沉淀出一套强类型的 Web 全栈开发技术栈，并且基于强类型定义自动生成大量基础代码，从而把人工开发时间降至最低，快速承接多个内部系统的全栈开发需求。
完成一个可以灵活运行在浏览器内或后端服务中的 data layer，让后端情况极为复杂的已有项目也能享受到 GraphQL 对前端开发带来的便利性，并且对于缓存、异步、异常等问题有更加严谨的处理。

如果你也是一个善于运用技术解决工程问题、对高质量的严肃企业应用开发有兴趣的工程师，那么非常欢迎私信和我聊聊～

azh7138m

2019-03-31 00:09:21 +08:00

老早之前就 star 过了，回放的实现当时惊艳到我了。

> 密集开发了三年的复杂项目渐进式迁移至 typescript

最近在 ts 上面遇到了一些问题，我们项目 ts 大概有 9w 行，打包非常缓慢（ webpack@4.29 + at-loader@5.2.1 ）,换到 ts-loader 打包时间确实减少很明显（差不多 50%），但是内存吃的非常多（ max_old_space_size 得 3G 才不会爆掉），不知道其他人的项目都是怎么处理这些问题的 :(

guyskk0x0

2019-03-31 00:43:06 +08:00

很赞，尤其是小霸王游戏机那个例子，请问游戏机是 canvas 或者 d3.js 实现还是普通 html ？效果怎么这么好？
我之前做过类似的 record-replay 功能，实现思路和 op log 一样，发现 canvas/d3.js 做的页面基本没法录，还有一些复杂的事件没法回放(event dispatch API 不支持)，用户还想要回放结束能继续操作页面，实在是做不到啊

aryu

2019-03-31 10:34:18 +08:00

@guyskk0x0 游戏机的例子是借用的一个开源的实现，基于 HTML 的。

canvas 目前没有处理，理论上可以通过 monkey patch 一些 canvas 的 API 来实现一个 canvasObserver，不过对 canvas 不太熟悉不确定是否可行。d3 如果是 SVG 的部分录制起来是没问题的，需要在给元素打快照的时候判断是否需要增加 SVG namespace。

比如哪些事件无法回放呢？我们现在的实现思路是视觉上的逻辑回放，所以只需要回放会对视觉产生影响的事件，其它的 JS 逻辑本身也不会回放，但是对 DOM 的改变会被录制下来。比较特殊的是 hover 没法用 JS 模拟，所以这部分我们通过增加一些 CSS 规则和控制样式类的添加 /移除来模拟。

guyskk0x0

2019-03-31 12:45:06 +08:00

@aryu 我当时的实现是录制时记录各种事件，然后回放时 dispatch 事件，没有用 DOM Observer。最后发现 drag 事件 dispatch 之后并没有触发对应的 listener，还有个页面是监听 mousedown 和 mouseup 组合当做点击，dispatch 时 mousedown 和 mouseup 之间的时间间隔过小就触发不了 listener。用 DOM Observer 应该就不会有问题。