解决数据丢失问题--互联网业务可回溯的优化、提升

如果你在金融行业工作过，那么你应该很熟悉“可回溯”这个概念。在金融行业，可回溯通常用于记录用户的所有操作以及交互状态，以便在出现纠纷时进行证据溯源。此外，金融监管部门也要求金融机构必须具备可回溯能力，以确保监管红线的合规性。

最近从领导处接到一个需求，解决当前线上投保项目回溯过程中的“数据丢失”问题：用户投保的相关操作没有没有被记录制下来 ☜(`o´)

这是个严重问题，了解需求后，赶紧去线上查找问题发生原因，经定位，发现一些特殊的场景不能被正确的录制，联系供应商反馈还在解决中，未给出解决方案时间表 (╯°Д°)╯ ┻━┻

悲催，只能自己动手了，去线上找找看是否有案，功夫不复有心人，终于在npmjs 上找到一款回溯库，可以很好的解决当前数据录制丢失的问题，重点是接入简单、改造成本非常小（〃＾∇＾）o

npm库地址： @zxyf/ztrack - npm

参照对接文档，把回溯接入到本地工程做了基础测试，步骤如下:

1. 安装回溯依赖

npm install @zxyf/ztrack
或
yarn add @zxyf/ztrack

2. 录制初始化

// 引入录制库
import ZTrackRecorder from '@zxyf/ztrack';

// 初始化参数
const params = {
  autoStart: true // 是否自动开始
};

// 通过构造函数实例化后再执行初始化
const recorder = new ZTrackRecorder();
recorder.init(params).then(() => {
  console.log('录制初始化成功,开始录制');
});
// 初始化成功后可以通过recorder.bizUuid 获取当前bizUuid
// bizUuid 也可以放到params中作为初始化参数

3 开始录制

// 如果初始化参数 autoStart 为true，则无需调用  
recorder.start().then(() =>{
  console.log('开始录制');
});

4 添加回溯业务节点

// 添加的业务节点可以在回溯视频中直接查看，业务节点KEY值、名称可以在后台进行设置
​
recorder.addBizNode('VIEW_NOTICE').then(() =>{
  console.log('添加“查看须知”业务节点');
});  // 添加业务节点，可以通过 recorder.bizNodes 获取，非必须

5 停止录制

// 停止录制，停止录制后继续调用 recorder.start() 可以继续录制
recorder.stop().then(() => {
  console.log('录制停止');
});

6 完成录制

// 完成录制，表示业务已完成，后续不可继续录制
recorder.finish().then(() => {
  console.log('录制完成');
});

7 回溯效果播放

初始化成功后通过recorder.bizUuid 可以获取当前bizUuid，
回溯完成后通过可以下链接查看,其中XXXX是录制时传入的bizUuid
​
https://dev.helisoft.cn/ztrack-simple-player/?bizUuid=XXXX

8 管理后台播放效果

​

9 其他测试

同时，我们又针对一些其他场景、特性做了调试，发现支持良好

1. iframe 页面操作行为录制--正常

2. canvas 页面行为（以echarts图表为例）--正常

3. 不同链接间的页面跳转--正常

4. 页面滚动、输入、选择等操作--正常

5. 视频图像录制--正常

6. 客户敏感信息以*号替换--支持

7. 业务节点展示--支持

8. 回溯码防篡改--支持

   替换回溯库后部署上线，跑了一周数据，所有投保数据录制正常，任务完美完成，晚饭加个鸡腿ヾ(＾-＾)ノ

   兄弟们开发过程中若遇到回溯相关问题，欢迎留言交流、沟通