认识
2024年04月24日
一、认识
多数场景下，定位到具体的源码，就可以定位 bug，但如果是用户做了异常操作，或者是在某些复杂操作下才出现的 bug，仅仅通过定位源码，还是不能还原错误.要是能把用户的操作都录制下来，然后通过回放来还原错误就好了.监控平台通过 rrweb 可以实现该功能.前端录屏确实是件很酷的事情，但是不能走极端，如果把用户的所有操作都录制下来，是没有意义的.我们更关注的是，页面报错的时候用户做了哪些操作，所以监控平台只把报错前 10s 的视频保存下来（单次录屏时长也可以自定义）
SDK 基于 rrweb 实现了错误录制功能，更快的帮助开发者定位错误。rrweb 大致的流程是: 首先保存一个一开始完整的dom的快照，然后为每一个节点生成一个唯一的id。当dom变化的时候通过MutationObserver来监听具体是哪个DOM的哪个属性发生了什么变化，保存起来。监听页面的鼠标和键盘的交互事件来记录位置和交互信息，最后用来模拟实现用户的操作。然后通过内部写的解析方法来解析（我理解的这一步是最难的）。通过渲染dom，并用RAF来播放，就好像在看一个视频一样。