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('报错'),
});