需求：
生产报错，后端并未接收到接口报错。纯前端报错，复现错误难以复现，问用户说不清楚。
解决方案：
使用web-see插件进行监控前端页面，在页面报错时减少与用户沟通，直接查看日志
解决方案
// 安装核心模块
$ npm i @websee/core
// 安装性能检测插件
$ npm i @websee/performance
// 安装页面录屏插件
$ npm i @websee/recordscreen
vue2引用（main.js内引用）：
import webSee from '@websee/core';
import performance from '@websee/performance';
import recordscreen from '@websee/recordscreen';
Vue.use(webSee, {
dsn: 'http://text.com/reportData', // 上报的地址
apikey: 'project1', // 项目唯一的id
userId: '89757', // 用户id
repeatCodeError: true, // 开启错误上报去重，重复的代码错误只上报一次
silentWhiteScreen: true, // 开启白屏检测
skeletonProject: true, // 项目是否有骨架屏
handleHttpStatus(data) {
// 自定义hook, 根据接口返回的 response 判断请求是否正确
let { url, response } = data;
let { code } = typeof response === 'string' ? JSON.parse(response) : response;
if (url.includes('/getErrorList')) {
return code === 200 ? true : false;
} else {
return true;
}
},
});
// 注册性能检测插件
webSee.use(performance);
// 注册页面录屏插件，设置单次录屏时长为20s，默认是10s
webSee.use(recordscreen, { recordScreentime: 20 });
插件github上还有vue3以及react框架的使用说明
相关地址：
github地址：GitHub - xy-sea/web-see: 前端监控SDK，可用来收集并上报：代码报错、性能数据、页面录屏、用户行为、白屏检测等个性化指标数据
demo的github地址：https://github.com/xy-sea/web-see-demo
引用插件时遇到的一些问题：
demo里面的存储是使用的express实现的，这样就相当于是纯前端实现该功能
由于网络限制等等，我们目前的项目在nginx服务器上安装express很难实现
时间紧迫，选择直接java写接口进行接收前端上报的错误信息
demo中实现的方法说明并没有说的很清楚，例如再上报时并没有breadcrumb(用户行为)数据，但是搜索时却可以搜索出来，导致我们开发时并未理解
根据以上的情况最后决定java将数据保存到服务器的nas盘里面，且只保留最近三个月的数据(视情况而定)。前端上报的内容全部按照recordScreenId来命名保存文件，前端查询时直接查询该文件内容
在以上写完以后还有一个问题就是，demo的上报和项目接入sdk后进行上报并不相同
demo上报只是调用一次上报接口，而项目中接入sdk后上报会分两步进行上报，第一步把breadcrumb(用户行为)上报，第二步才会吧events(rrweb记录的事件)进行上报。
由于前面我们使用的是直接保存文件，这样会导致在上报events时提示文件已存在，而这个解决方案就是将两段数据进行merge保存即可
性能问题
1、由于我们使用的web-see是使用的rrweb来进行实现所谓的“录屏”功能，实际上他并不是纯粹的录屏，而是使用的事件记录各种dom操作，然后通过rrweb来进行播放达到所谓录屏效果。所以不用担心从开始打开页面就录屏会不会导致页面卡顿
2、上报逻辑：上报逻辑使用的是优先使用浏览器的requestIeCallback，利用浏览器空闲时间进行上报。以下是官网对该api方法的说明：
**
window.requestIdleCallback()
** 方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间
timeout
，则有可能为了在超时前执行函数而打乱执行顺序。
其次才会使用微任务进行上报，也就是：Promise.resolve().then(() => this.flushStack());
版权归原作者 qq_46367756 所有， 如有侵权，请联系我们删除。