V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
aryu
V2EX  ›  分享创造

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

  •  
  •   aryu ·
    Yuyz0112 · 2019-03-30 22:06:26 +08:00 · 6088 次点击
    这是一个创建于 2044 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

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

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

    10 条回复    2020-07-15 08:56:02 +08:00
    azh7138m
        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 才不会爆掉),不知道其他人的项目都是怎么处理这些问题的 :(
    guyskk0x0
        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 不支持),用户还想要回放结束能继续操作页面,实在是做不到啊
    aryu
        3
    aryu  
    OP
       2019-03-31 10:34:18 +08:00   ❤️ 1
    @guyskk0x0 游戏机的例子是借用的一个开源的实现,基于 HTML 的。

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

    比如哪些事件无法回放呢?我们现在的实现思路是视觉上的逻辑回放,所以只需要回放会对视觉产生影响的事件,其它的 JS 逻辑本身也不会回放,但是对 DOM 的改变会被录制下来。比较特殊的是 hover 没法用 JS 模拟,所以这部分我们通过增加一些 CSS 规则和控制样式类的添加 /移除来模拟。
    guyskk0x0
        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 应该就不会有问题。
    yao978318542
        5
    yao978318542  
       2019-05-09 15:58:54 +08:00
    大佬牛逼 特意来点赞
    yao978318542
        6
    yao978318542  
       2019-05-09 16:16:27 +08:00
    能导出 MP4 吗?
    xiaowanhashi
        7
    xiaowanhashi  
       2020-07-14 16:18:17 +08:00
    @yao978318542 想问下导出 mp4 的问题解决了吗?
    yao978318542
        8
    yao978318542  
       2020-07-14 16:34:51 +08:00
    @xiaowanhashi #7 项目不用了
    xiaowanhashi
        9
    xiaowanhashi  
       2020-07-14 22:15:58 +08:00
    @yao978318542 除了 MP4 有遇到其他的问题吗?我这边使用过程中发现回放的时候有些样式丢失了
    yao978318542
        10
    yao978318542  
       2020-07-15 08:56:02 +08:00
    @xiaowanhashi #9 没,当时就写了一个小 demo 就没用了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2770 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 14:37 · PVG 22:37 · LAX 07:37 · JFK 10:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.