我们( SmartX 前端团队)在去年开源了我们实现的 web 录制与回放库 rrweb,可以将页面中的操作记录为可序列化的日志数据并回放,也在仓库中附上了我们的设计文档。
最近我们在知乎专栏中更新了一篇 博客 ,更详细地介绍了这个项目的演进过程与设计思路,希望能够让对此感兴趣的开发者可以参与其中。
在 rrweb 中我们正在实现的功能包括:
除此之外我们也在基于 rrweb 构建一些有意思的应用,例如:
当然,rrweb 只是我们工作中实际解决的诸多工程问题的一个缩影,以今年为例,我们的工作内容包括:
如果你也是一个善于运用技术解决工程问题、对高质量的严肃企业应用开发有兴趣的工程师,那么非常欢迎私信和我聊聊~
1
azh7138m 2019-03-31 00:09:21 +08:00
老早之前就 star 过了,回放的实现当时惊艳到我了。
> 密集开发了三年的复杂项目渐进式迁移至 typescript 最近在 ts 上面遇到了一些问题,我们项目 ts 大概有 9w 行,打包非常缓慢( [email protected] + [email protected] ),换到 ts-loader 打包时间确实减少很明显(差不多 50%),但是内存吃的非常多( max_old_space_size 得 3G 才不会爆掉),不知道其他人的项目都是怎么处理这些问题的 :( |
2
guyskk0x0 2019-03-31 00:43:06 +08:00 via Android
很赞,尤其是小霸王游戏机那个例子,请问游戏机是 canvas 或者 d3.js 实现还是普通 html ?效果怎么这么好?
我之前做过类似的 record-replay 功能,实现思路和 op log 一样,发现 canvas/d3.js 做的页面基本没法录,还有一些复杂的事件没法回放(event dispatch API 不支持),用户还想要回放结束能继续操作页面,实在是做不到啊 |
3
aryu OP @guyskk0x0 游戏机的例子是借用的一个开源的实现,基于 HTML 的。
canvas 目前没有处理,理论上可以通过 monkey patch 一些 canvas 的 API 来实现一个 canvasObserver,不过对 canvas 不太熟悉不确定是否可行。d3 如果是 SVG 的部分录制起来是没问题的,需要在给元素打快照的时候判断是否需要增加 SVG namespace。 比如哪些事件无法回放呢?我们现在的实现思路是视觉上的逻辑回放,所以只需要回放会对视觉产生影响的事件,其它的 JS 逻辑本身也不会回放,但是对 DOM 的改变会被录制下来。比较特殊的是 hover 没法用 JS 模拟,所以这部分我们通过增加一些 CSS 规则和控制样式类的添加 /移除来模拟。 |
4
guyskk0x0 2019-03-31 12:45:06 +08:00 via Android
@aryu 我当时的实现是录制时记录各种事件,然后回放时 dispatch 事件,没有用 DOM Observer。最后发现 drag 事件 dispatch 之后并没有触发对应的 listener,还有个页面是监听 mousedown 和 mouseup 组合当做点击,dispatch 时 mousedown 和 mouseup 之间的时间间隔过小就触发不了 listener。用 DOM Observer 应该就不会有问题。
|
5
yao978318542 2019-05-09 15:58:54 +08:00
大佬牛逼 特意来点赞
|
6
yao978318542 2019-05-09 16:16:27 +08:00
能导出 MP4 吗?
|
7
xiaowanhashi 2020-07-14 16:18:17 +08:00
@yao978318542 想问下导出 mp4 的问题解决了吗?
|
8
yao978318542 2020-07-14 16:34:51 +08:00
@xiaowanhashi #7 项目不用了
|
9
xiaowanhashi 2020-07-14 22:15:58 +08:00
@yao978318542 除了 MP4 有遇到其他的问题吗?我这边使用过程中发现回放的时候有些样式丢失了
|
10
yao978318542 2020-07-15 08:56:02 +08:00
@xiaowanhashi #9 没,当时就写了一个小 demo 就没用了
|