作者：winty原文出处：https://juejin.cn/post/6844903902005952520
链接：https://juejin.cn/post/6844903902005952520
来源：掘金
-----------------------------------------------------------------------------------------------------------------------
关键点
首先，每一次会话都有一个唯一的session ID，这是串联起所有行为的纽带。
其次，用户行为又分成两个部分，其一是用户的操作，比如鼠标滑动，点击，页面滚动等，其二是页面的变化。这两者我们都统称为用户行为，记录在同一个队列中。
一开始的时候，系统会记录下初始的页面作为第一帧，这是唯一的一次完整页面记录。
针对用户操作，我们会记录事件的类型，鼠标位置等关键信息，保存到队列中。
针对页面变动，我们会起一个mutationObserve侦听页面的改动，每次只记录改动的部分，保存到队列中。
无论是事件还是页面改动，都是对等的一帧，每一帧都会有当前时间，与上一帧间隔时间等基本信息用户还原
一旦出错，SDK就把队列发送到监控系统，并清空当前队列。
还原端根据记录的行为队列，根据时间逐一播放出来。最终形成一个类似于视频的效果。
初步思路
方式一：
前端收集信息，首先，初始化的时候记录一个页面的初始状态，然后利用 MutationObserver 监听dom的改变事件，然后监听所有的鼠标事件、滚动事件等等所有的页面变化。
在合理的时机把这些信息队列上传到服务器，如页面出错时等。
后台分析前端收集到的信息，转为图片，然后形成"视频"，或者用户行为栈。提供对应的调用 api。
前端需要查找问题时，根据用户id等信息找到对应的出错栈。
方式二：
前端根据 html 转为对应的图片(可以转为 base64 格式)
将图片发送给后台
后台将图片按序组成"视频"
现有SDK
fundebug
录屏(截图)
html2canvas
puppeteer
rrweb+rrweb-player+rrweb-snapshot
html2canvas介绍
html2canvas 是通过分析页面中已加载好的 DOM 元素，然后 canvas 将生成的 DOM 节点绘制在画布上，最后转换为图片。它不是真正的截屏，只是根据页面元素信息还原出图片，所以并不是 100% 和页面相同的。
局限性
页面中的图片不能跨域
不是所有的 css 特性都支持，如不支持 box-shadow、filter 等
不支持截取插件内容,如 Flash
不支持 iframe 内容
浏览器支持
Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Edge
Safari 6+
puppeteer介绍
Puppeteer 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具，它是一个 Node 库，提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。
局限性
Puppeteer 需要 Chromium。其主要应用在自动化测试上。
功能
生成页面的截图和PDF。
抓取SPA并生成预先呈现的内容（即"SSR"）。
从网站抓取你需要的内容。
自动表单提交，UI测试，键盘输入等
创建一个最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome中运行测试。
捕获您的网站的时间线跟踪，以帮助诊断性能问题。
结论html2canvas 更适合于 C 端的用户行为截图跟踪，而 Puppeteer 适用于自动化测试。
rrweb介绍
rrweb 主要由 3 部分组成：
rrweb-snapshot，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
rrweb，包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更（mutation）；replay 则是将记录的变更按照对应的时间一一重放。
rrweb-player，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
rrweb适用场景：
用户行为分析；
远程debug；
录制操作；
实时协作；
局限性
社区资源较少
部分代码用较旧的模式写的，有未知坑
最终结论
综合来看，结合思路一，基于 rrweb 来开发是最可行最快捷的。
