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

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

这是个严重的问题，了解需求后，赶紧去线上查找问题发生原因，经定位，发现一些特殊的场景不能被正确的录制，联系供应商反馈暂无解决方案。

悲催，只能去线上找找其他方案，功夫不负有心人，终于在npmjs 上找到一款回溯库，可以很好的解决当前数据录制丢失的问题，重点是接入简单、改造成本非常小。

npm库地址： https://www.npmjs.com/package/@zxyf/ztrack

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

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. 其他测试

同时，我们又针对一些其他场景、特性做了调试，发现支持良好
iframe 页面操作行为录制--正常
canvas 页面行为（以echarts图表为例）--正常
不同链接间的页面跳转--正常
页面滚动、输入、选择等操作--正常
视频图像录制--正常
客户敏感信息以*号替换--支持
业务节点展示--支持
回溯码防篡改--支持
替换回溯库后部署上线，跑了一周数据，所有投保数据录制正常，任务完美完成。