个人开发学习资料库

Appearance

前端线上环境录制用户操作 ​

使用 rrweb 库可以在前端线上环境中录制用户操作。

安装 rrweb 库 ​

rrweb 库是一个用于录制用户操作的库，它可以在前端线上环境中录制用户操作，并将这些操作记录下来。

但是这只是录制用户操作，并不会监控错误上报。

所以错误上报需要在前端代码中手动监听。

rrweb 库 GitHub 仓库

bash
npm install rrweb

录制操作并监控错误上报 ​

使用方式 ​

假如是在vue3项目中，在 main.js 中引入 rrweb 库。

javascript
// main.js
import { onMounted } from 'vue';
// 引入 rrweb 库
import { record } from 'rrweb';

let events = [];
const recordEvents = (event) => {
    if(events.length > 500){
        events.slice(-250);
    }
    events.push(event);
}
const reportEvents = (msg) => {
    // 上报事件
    fetch('/api/setEvents', {
        method: 'POST',
        body: JSON.stringify({
            events,
            error: msg,
        }),
    }).then((res) => {
        console.log("上传成功");
        events = [];
    }).catch((err) => {
        console.error("上传失败");
    });
}

// 在组件挂载时开始录制用户操作
onMounted(() => {
  record({
    emit(event) {
        recordEvents(event);
    },
    recordAfter: 'DOMContentLoaded',
  });
});

// 监听全局错误事件(如：js错误、promise错误、异步错误，但是不包括网络错误)
window.onError = function (msg) {
    reportEvents(msg);
}
// 监听全局 Promise 错误事件
window.addEventListener('unhandledrejection', function (event) {
    reportEvents(event.reason);
});
// 监听网络错误事件（需要在axios或者其他请求库中配置）
axios.interceptors.response.use(
    function (response) {
        return response;
    },
    function (error) {
        reportEvents(error);
        return Promise.reject(error);
    }
);

后端接收上报信息接口 ​

后端接收上报信息接口只需要将前端上报的 events 数组和 error 信息保存到数据库即可。

回放用户操作 ​

后端接口直接返回之前线上环境前端上报的 events 数组和 error 信息。

使用方式 ​

回放还是会用到的rrweb库。

因为录制的用户操作数据是通过rrweb库记录的格式，所以回放时也需要使用rrweb库去解析这些格式的数据。

html
<div id="replay-container"></div>
javascript
// 引入 rrweb 库
import { Replayer } from 'rrweb';

axios.get('/api/getEvents').then((res) => {
    const { events, error } = JSON.parse(res.data);
    document.getElementById('replay-container').innerHTML = "";
    const replayer = new Replayer(events,{
        root: document.getElementById('replay-container'),
        liveMode: false,
        // 其他配置项...
    });
    replayer.play();
    // replayer.pause();暂停回放
});

rrweb原理 ​

实际上rrweb库的原理就是将用户操作记录到一个数组中，然后在回放时，将这个数组中的事件按照顺序播放出来。

原理核心思想很简单，把页面上状态都变成json数据，然后拿着这个json数据再去转化为页面。

image.png