回溯平台的实践

总篇114篇 2021年第5篇1、背景金融的保险业务在配合监管检查时，提出需要对用户线上投保的全流程保存有效凭证。在经过全方面讨论与评估后，确定以视频的形式对用户在页面的操作行为进行保留。回溯平台，在基于对页面性能影响较小的情况下，对用户行为进行无感知的录制操作和数据保存，进而在回溯播放页面根据筛选条件进行录制视频的查询与播放。这一应用对于开发人员查找线上问题也提供了很好的便利。相比于传统上通过模拟用户操作进而跟进分析日志查找问题的方式，视频回溯不仅提供了一个新的问题分析工具，通过视频回放用户操作来定位问题更精准且更高效。平台的应用不仅完成保险业务监管的要求，现如今也已应用在金融的车贷业务中，下一步着手做进一步的推广与使用。?2、技术调研与选型前端采用的是rrweb插件进行录制。之前考虑了webRTC、puppeteer、html2Canvas这三种录制技术，但是都存在我们所不能接受和克服的短板。比如webRTC对于IE等浏览器的支持不是很好，puppeteer太过依赖于Chrome、处理复杂，html2Canvas对于部分的css3属性不支持，在生成canvas图片时占用资源较大。Rrweb主要由三部分组成：（1）? rrweb-snapshot，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的DOM。（2）? rrweb，包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更（mutation）；replay 则是将记录的变更按照对应的时间一一重放。（3）? rrweb-player，为 rrweb 提供一套 UI 控件，提供基于GUI的暂停、快进、拖拽至任意时间点播放等功能。（Rrweb记录、录制数据）?数据的录制，主要分为全量快照和增量快照两部分。（录制的数据格式）（金融的视频查询页面）（回放视频播放页面）后端存储：因为我们需要将页面的dom进行固化存储，而页面的结构千差万别，所以传统的db不能够完美的进行支持，这时就寄托希望于nosql来解决这个痛点。在后端的nosql选型上，我们横向对比了file、redis与mongodb，对于文件存储而言，它对数据格式的支持有着绝对的领先优势，但是缺点也很明显，那就是要命的io，当出现批量数据存储的时候，大量的io会瞬间吃满整个服务的带宽。之后我们又对比了redis与mongodb，在测试环境中，两者虽然有所差异，但总体来讲，差别不是很大，redis略强于mongodb，但是在多键查询功能上redis存在一定劣势，而mongodb存储效率比肩redis，在查询能力上高于redis，虽然redis在大数据量的查询效率要要高于mongodb，但基于我们存多查少的业务场景，redis在大数据量的查询优势也显得不是很重要了，因此，最终我们决定用MongoDb来进行dom的储存操作。针对查询页面仍然采用了传统的mysql来实现，在需要关联相关数据进行数据回放的时候，才根据mysql中的索引数据来查询mongodb，这样的设计有效的解决了分布式mongodb对于分页查询的不友好，而且对于查询的灵活性也有了更多的扩展空间。3、金融回溯平台的设计思路与实现采用前后端分离的模式进行开发。前端将rrweb与业务逻辑封装为一个js文件，对外暴露window.rrwebEvent.start()方法，项目中可直接引用，操作简单；对于录制的数据，通过saveData接口进行后端存储；查询页面有两个版本，一个是以页面维度进行查询，另一个是会话维度（会话指的是该用户操作的一系列页面的集合）。(前端封装的jrRrweb.js录制逻辑图)(后端存储流程图)对于页面录制的数据，通过约定其类型，分为初始化数据与追加数据两种类型。当页面第一次进行数据上报时，会包含页面的所有元素，这种请求数据，我们称之为初始化数据，此类数据不仅需要存入mongodb，还需mysql中进行数据的引导留存，方便后期运维人员进行查询操作。当页面完成初始化数据上报后需要再次上报时，我们将这种上报称之为追加数据，对于追加数据，在落入mongdb的同时，要对mysql里的结尾时间进行一个更新操作，用来记录该页面录制的时长。4、踩坑与优化之路遇到的问题：（1）随着录制时间增大，录制数据会越来越大，因而把录制的数组数据进行固定步长的分割，处理为二维数组。每次请求只上传增量数据，二维数组的下标也可作为数据拼接的标识。（2）保险业务中，三级栏目码和sessionvid获取的时机。m.jiajiabaoxian域名存在跨域跨站，cookie中sessionvid获取不到；start()方法总是在登录态获取到之前执行；(start方法的使用)（3）监听离开页面时停止录制功能。由于离开的方式有多种，没有一个最为全面的方法去监听，所以做了上个页面补录数据的方法，先将未上报的数据存储在本地，进页面先判断是否存在本地数据；优化：（1）查询页面：对单个视频增加分享功能，对于存在问题的视频，可在钉钉群中共享问题；（2）查询页面：根据三级栏目码增加某一产品或者活动的查询条件，产品同学可对产品进行后期分期；（3）由于用户在页面操作频繁，所以会导致mysql更新时间频率较高，造成数据库压力过大，为解决这一问题，我们想到了请求合并处理的思路，那就是将需要更新的数据key维护在redis的set之中，短时间内如果针对相同key有多次请求，那么后续的请求时间将会覆盖掉之前的数据，我们会每过20秒左右进行一次数据清理，这样一来，在20秒内的更新请求就会进行合并，从而减少mysql的压力。5、总结语回溯平台可还原用户的页面操作轨迹，项目接入回溯功能时简单易操作，对已有项目没有任何接入的要求。作者简介：张琪琪：2019年加入汽车之家，任职于汽车金融部-前端开发组姜腾龙：2017年加入汽车之家，任职于汽车金融部-后端开发组樊新新：2018年加入汽车之家，任职于汽车金融部-测试开发组