功能

• [√] ✈️ 监听请求错误(包括xhr, fetch)
• [√] 🔨console
• [√] ✈️ 用户行为：页面点击、路由跳转、接口调用、资源加载
• [√] ✈️ 错误捕获：代码报错、资源加载报错、接口请求报错
• [√] ✈️ 性能数据：FP、FCP、LCP、CLS、FID
• [√] ✈️ 自定义上报错误
• [√] ✈️ 个性化指标：Long Task、Memory 页面内存、首屏加载时间
• [√] ✈️ 白屏检测：检测页面打开后是否一直白屏
• [√] ✈️ 视频录制：录制页面报错视频
• [√] 🚀 支持多种配置：自定义 hook 与选项
• [√] 🚀 支持的 Web 框架：vue2、vue3、React

安装

$ npm i -S jh-monitor / yarn add jh-monitor

相关命令

  npm run pkg // 安装node_modules依赖
  npm run build:dev //启动开发环境
  npm run build:rollup // 打包
  npm run format // 格式化代码
  npm run commit // 提交代码

关于测试本地项目的安装

  1. 下载main分支项目，并将其link到本地，即执行npm link 即可
  2. 下载example分支项目，执行npm run link，即可在项目中进行测试
  tip: 两个项目必须同时运行

React

import JhMonitor from 'jh-monitor';

JhMonitor.init({
  dsn: 'http://localhost:3000/reportData',
  apikey: 'project1',
  repeatCodeError: true, // 开启错误上报去重，重复的代码错误只上报一次
  silentRecordScreen: true, // 开启录屏
  silentWhiteScreen: true, // 开启白屏检测
  skeletonProject: true, // 项目是否有骨架屏
  whiteBoxElements: ['html', 'body','#root'], // 白屏检测的容器列表
});

此项目可以作为二次开发使用

常规配置项

| Name | Type | Default | Description | | :--------------------: | ---------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | dsn | string | "" | (必传项) 上报接口的地址，post 方法 | | apikey | string | "" | (必传项) 每个项目对应一个 apikey，唯一标识 | | userId | string | "" | 用户 id | | disabled | boolean | false | 默认是开启 SDK，为 true 时，会将 sdk 禁用 | | silentRecordScreen | boolean | false | 注意：默认不会开启录屏，为 true 时，开启录屏 | | silentWhiteScreen | boolean | true | 注意：默认开启白屏检测，为 false 时，不会开启检测 | | skeletonProject | boolean | false | 有骨架屏的项目建议设为 true，提高白屏检测准确性 | useBeacon | boolean | false | 是否使用beacon上报数据，如果其开启，首先会使用boacon上报，当存在兼容性的时候会使用ajax或者img上报 | | whiteBoxElements | array | ['html', 'body', '#root'] | 白屏检测的容器列表，开启白屏检测后该设置才生效 | | filterXhrUrlRegExp | regExp | null | 默认为空，所有的接口请求都会被监听，不为空时，filterXhrUrlRegExp.test(xhr.url)为 true 时过滤指定的接口 | | useImgUpload | boolean | false | 为 true 时，使用图片打点上报的方式，参数通过 data=encodeURIComponent(reportData) 拼接到 url 上，默认为 false | | | overTime | number | 10 | 设置接口超时时长，默认 10s | | maxBreadcrumbs | number | 20 | 用户行为存放的最大容量，超过 20 条，最早的一条记录会被覆盖掉 | | recordScreentime | number | 10 | 单次录屏时长，silentRecordScreen 设为 true， 开启录屏后该设置才有效 | | recordScreenTypeList | array | ['error', 'unhandledrejection', 'resource', 'fetch', 'xhr'] | 上报录屏的错误列表，默认会上报所有错误发生时的录屏信息，如设置 ['error', 'unhandledrejection'] 则只会上报代码报错时的录屏 | | onRouteChange | function | null | 路由跳转之后的回调函数，会返回from,to两个作为函数参数

jh-monitor 前端监控参考文章

前端监控体系及实现技术详解 字节前端监控实践 前端监控平台 字节的前端监控SDK是怎样设计的

暴露API使用

import JhMonitor from 'jh-monitor';
JhMonitor.init({
  dsn: 'http://localhost:3000/reportData',
  apikey: 'project1',
  repeatCodeError: true, // 开启错误上报去重，重复的代码错误只上报一次
  silentRecordScreen: true, // 开启录屏
  silentWhiteScreen: true, // 开启白屏检测
  skeletonProject: true, // 项目是否有骨架屏
  whiteBoxElements: ['html', 'body','#root'], // 白屏检测的容器列表
});
JhMonitor.log({
  type: 'custom',
  message: '手动报错信息',
  error: new Error('报错'),
});
// JhMonitor._global, JhMonitor._support 为内部全局变量及其所有相关数据存储
// JhMonitor.SDK_NAME JhMonitor.SDK_VERSION SDK版本名字和版本
// 手动上报
 JhMonitor.log({
  type: 'custom',
  message: '手动报错信息',
  error: new Error('报错'),
});
//解密上报的报错视频
JhMonitor.unzip(b64Data) {}
// 上报react错误函数
JhMonitor.errorBoundaryReport(err){};
// 上报Vue错误
JhMonitor.MitoVue

监控测试项目

example