1.web-see

前端监控SDK，可用来收集并上报：代码报错、性能数据、页面录屏、用户行为、白屏检测等个性化指标数据

作者：海阔天空 仓库地址

功能

• [√] ✈️ 错误捕获：代码报错、资源加载报错、接口请求报错
• [√] ✈️ 性能数据：FP、FCP、LCP、CLS、TTFB、FID
• [√] ✈️ 用户行为：页面点击、路由跳转、接口调用、资源加载
• [√] ✈️ 个性化指标：Long Task、Memory 页面内存、首屏加载时间
• [√] ✈️ 白屏检测：检测页面打开后是否一直白屏
• [√] ✈️ 错误去重：开启缓存队列，存储报错信息，重复的错误只上报一次
• [√] 🚀 手动上报错误
• [√] 🚀 支持多种配置：自定义 hook 与选项
• [√] 🚀 支持的 Web 框架：vue2、vue3、React

安装方式

// 安装核心模块
$ npm i @websee/core

// 安装性能检测插件
$ npm i @websee/performance

// 安装页面录屏插件
$ npm i @websee/recordscreen

vue2使用

import webSee from '@websee/core';
import performance from '@websee/performance';
import recordscreen from '@websee/recordscreen';

Vue.use(webSee, {
  dsn: 'xxxxxxxx', // 上报的地址
  apikey: 'xxxx', // 项目唯一的id
  userId: 'xxxx', // 用户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 });

vue3使用

import webSee from '@websee/core';
import performance from '@websee/performance';
import recordscreen from '@websee/recordscreen';

const app = createApp(App);
app.use(webSee, {
  dsn: '',// 上报地址
  apikey: 'project1', // 项目唯一的id
  userId: '89757', // 用户id
});

webSee.use(performance);
webSee.use(recordscreen);

React使用

import webSee from '@websee/core';
import performance from '@websee/performance';
import recordscreen from '@websee/recordscreen';

webSee.init({
  dsn: 'http://text.com/reportData',
  apikey: 'project1',
  userId: '89757',
});

webSee.use(performance);
webSee.use(recordscreen);
// ps: 如果在 React 项目中使用了 ErrorBoundary，要在 componentDidCatch 中将报错上报给服务器

手动上报错误示例

import webSee from 'web-see';

webSee.log({
  type: 'custom',
  message: '手动报错信息',
  error: new Error('报错'),
});