rrweb--vue如何调用rrweb上传回溯

1、rrweb是什么?

rrweb是‘record and replay the web’的简写,用来录制并回放任意web界面中的用户操作

2、rrweb的原理

rrweb原理 —— rrweb 通过记录初始页面的DOM 状态，或者特定某个时刻的DOM 状态，后续收集不同时间点的操作指令 或者 某个时刻某个DOM 的变化作为一个增量快照，在原先快照的基础上，不断加入根据行为解析的DOM 数据，构建了后续的快照，减少大量数据的存储或传输。

3、rrweb的功能

• 记录用户使用产品的方式并加以分析，进一步优化
• 收集用户遇到的bug的操作路径,予以及时复现
• 回溯用户的操作过程,可作为证据存储
• 录制体积更小,清晰度无损的演示视频
• 记录自动化测试的执行情况

4、创建 util/rrweb.sdk-1.2.0.js(文件过大有需要可私)

注: reportUrl要注意区分环境

5、创建 mixins/RrwebMixins.js

import rrwebSDK from '@/util/rrweb.sdk-1.2.0' // 回溯
const Config = {
    goodsName: window.GLOBAL_CONSTANT.PROJECT_NAME, // 产品名称
    goodsCode: window.GLOBAL_CONSTANT.BAOSI_CODE, // 产品编码
    origin: 'HHHH', // 来源，可在后台字典中配置
    goodsVersion: '1.0.1'  // 产品版本（如果是上报版本，非手动定义），每个页面必需
}

export default {
    name: 'RrwebMixins',
    data() {
        return {
            mixRrwebSdk: undefined,
            mixIsRrwebStop: false
        }
    },

    created() {
        this.mixRrwebStart()
    },
    destroyed() {
        !this.mixIsRrwebStop && this.mixRrwebStop()
    },
    methods: {
        // 回溯初始化 开始录制
        mixRrwebStart(param = {}) {
            if (!this.mixRrwebSdk) {
                // 回溯初始化 
                this.mixRrwebSdk = new rrwebSDK()
                // 回溯开始录制
                this.mixRrwebSdk.start({ ...Config, ...param })
            }
        },
        // 上报录制内容
        mixRrwebReport(param = {}) {
            this.mixRrwebSdk.report({ ...Config, ...param })
        },

        mixRrwebOpenUrl(url) {
            this.mixRrwebSdk.open(url)
        },

        // 结束录制
        mixRrwebStop(callback = () => { }) {
            this.mixIsRrwebStop = true
            this.mixRrwebSdk.leaveReport(callback)
            this.mixRrwebSdk = undefined
        }
    },
}

6、在需要录制回溯且上报的页面使用

// 引入mixin
import RrwebMixins from '@/mixins/RrwebMixins'

export default {
   name: 'Home',
   mixins: [RrwebMixins],
   methods: {
    // 表单提交按钮
	submit() {
	  // 回溯上报--需要哪些参数传哪些(定义好)
      const { idCardNo: idNo } = params
      this.mixRrwebReport({idNo, orderNo})
 		
	   // 其他正常支付 携带参数跳转到收银台页面
       const payParam = {money, orderNo, autoYearRenewal}
       const query = { payParams: JSON.stringify(payParam) }
       this.mixRrwebStop(() => this.$router.push({path: '/cashier', query}))
	  }
	}
}