vue+web-see实现前端监控

需求：

生产报错，后端并未接收到接口报错。纯前端报错，复现错误难以复现，问用户说不清楚。

解决方案：

使用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

插件介绍以及实现原理地址：https://github.com/xy-sea/blog/blob/main/markdown/%E4%BB%8E0%E5%88%B01%E6%90%AD%E5%BB%BA%E5%89%8D%E7%AB%AF%E7%9B%91%E6%8E%A7%E5%B9%B3%E5%8F%B0%EF%BC%8C%E9%9D%A2%E8%AF%95%E5%BF%85%E5%A4%87%E7%9A%84%E4%BA%AE%E7%82%B9%E9%A1%B9%E7%9B%AE.md

引用插件时遇到的一些问题：

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());