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

本文链接：https://blog.csdn.net/weixin_47434590/article/details/129238181

rrweb是一个用于记录和回放用户在Web界面操作的工具。它通过捕获初始DOM状态和后续的增量快照来实现记录，减少了存储和传输的数据量。rrweb可用于分析用户行为、复现bug、录制无损演示视频以及自动化测试的记录。在项目中，可以通过RrwebMixins.js进行集成，实现在特定页面的录制和上报功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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}))
	  }
	}
}