背景
1、有时候会遇到，客户说有bug，但是我们复现不出来，复现不出来的原因也多种多样，比如我们的环境、数据和他不一样，那我们就要知道事发时发生了什么事情，就比如一个车祸现场，如果根据事后现场进行分析，很多细节发现不到位，只能通过一些指标进行推断，比如车速是多少？但是有了行车记录仪、路口的监控视频，就能很好的还原这个事情，解决这个问题，一旦客户有bug，我们就可以根据客户的时间，找到对应的时间段，回放客户的操作，知道客户做了什么。
2、我们从事电商和金融行业，想了解客户对某一商品的倾向以及在该商品上进行的操作。过去，我们只是基于一些采集到的指标进行数据统计，这些数据往往比较抽象。如果我们能像录屏一样完整地记录和分析客户的行为，就能够对这些数据进行更深入的分析。
思考
我们想还原用户之前的操作，通常想到的是视频录制，然后在播放器中播放录制内容。但在实际业务中，这种方法有很大的限制。也整体调研了一下行业内的方案：
-
WebRTC视频录制方案
- 用户感知并控制
- 数据无法脱敏
- 存在兼容性问题
- 随着时间的推移，数据量会成正比增长，长时间录制会导致内容过大。
-
页面截图（html2canvas）
- 不支持动画和部分CSS
- 截图资源体积大
- 截图性能开销大，容易导致页面掉帧
- 通过删除DOM等操作进行数据脱敏，可能引起页面布局混乱
-
DOM快照录制
- 对DOM节点进行快照
- 长时间录制会导致资源过大，但可通过技术手段解决，如通过DOM的diff来有效减轻问题
- 代替视频录制
最后，我们采用了第三种方案，即基于DOM快照的录制方式。这三种方案的演示Demo会在后续的博客中展示。
实现
实现整个行为还原，首先需要确定主要流程，主要分为三部分：1、日志收集sdk 2、后台服务 3、用户回放界面
