pf-web-monitor
v1.0.16
Published
监控SDK,一款自研的前端监控SDK,可用来收集并上报:代码报错、性能数据、用户行为、加载资源、个性化指标等数据
Downloads
8
Maintainers
Readme
功能
- [√] ✈️ 错误捕获:代码报错、资源加载报错、接口请求报错
- [√] ✈️ 性能数据:FP、FCP、LCP、CLS、TTFB、FID
- [√] ✈️ 用户行为:页面点击、路由跳转、接口调用、资源加载
- [√] ✈️ 个性化指标:Long Task、Memory 页面内存、首屏加载时间
- [√] ✈️ 白屏检测:检测页面打开后是否一直白屏
- [√] 🚀 手动上报错误
- [√] 🚀 支持多种配置:自定义 hook 与选项
- [√] 🚀 支持的 Web 框架:vue2、vue3、React
安装
$ npm i -S pf-web-monitor
Vue
import webMonitor from 'pf-web-monitor';
Vue.use(webMonitor, {
host: 'http://localhost:8083/reportData', // 上报的地址
apikey: 'project1', // 项目唯一的id
userId: '89757', // 用户id
silentRecordScreen: true, // 开启录屏
silentWhiteScreen: true, // 开启白屏检测
skeletonProject: true, // 项目是否有骨架屏
whiteBoxElements: ['html', 'body', '#app', '#root'] // 白屏检测的容器列表
});
React
import webMonitor from 'pf-web-monitor';
webMonitor.init({
host: 'http://localhost:8083/reportData',
apikey: 'project1',
userId: '89757'
});
配置项
| Name | Type | Default | Description |
| :------------------------: | ---------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| host
| string
| ""
| (必传项) 上报接口的地址,post 方法 |
| apikey
| string
| ""
| (必传项) 每个项目对应一个 apikey,唯一标识 |
| userId
| string
| ""
| 用户 id |
| disabled
| boolean
| false
| 默认是开启状态,为 true 时,会将 sdk 禁用 |
| useImgUpload
| boolean
| false
| 为 true 时,使用图片打点上报的方式,参数通过 data=encodeURIComponent(reportData) 拼接到 url 上,默认为 false |
| throttleDelayTime
| number
| 0
| 默认会收集click
到的标签,该参数可以设置按钮点击节流时间 |
| overTime
| number
| 10
| 设置接口超时时长,默认 10s |
| maxBreadcrumbs
| number
| 20
| 用户行为存放的最大容量,超过 20 条,最早的一条记录会被覆盖掉 |
| recordScreentime
| number
| 10
| 单次录屏时长,silentRecordScreen 设为 true, 开启录屏该设置才有效 |
| silentXhr
| boolean
| false
| 默认会监控 xhr,为 true 时,将不再监控 |
| silentFetch
| boolean
| false
| 默认会监控 fetch,为 true 时,将不再监控 |
| silentClick
| boolean
| false
| 默认会监听 click 事件,当用户点击的标签不是 body 时就会被放入 breadcrumb,为 true,将不在监听 |
| silentHistory
| boolean
| false
| 默认会监控 popstate、pushState、replaceState,为 true 时,将不再监控 |
| silentError
| boolean
| false
| 默认会监控 error,为 true 时,将不在监控 |
| silentUnhandledrejection
| boolean
| false
| 默认会监控 unhandledrejection,为 true 时,将不在监控 |
| silentHashchange
| boolean
| false
| 默认会监控 hashchange,为 true 时,将不在监控 |
| silentPerformance
| boolean
| false
| 默认会上报性能指标,为 true 时,将不在监控 |
| silentRecordScreen
| boolean
| false
| 注意:默认不会开启录屏,为 true 时,开启录屏 |
| silentWhiteScreen
| boolean
| false
| 注意:默认不会开启白屏检测,为 true 时,开启检测 |
| skeletonProject
| boolean
| false
| 有骨架屏的项目建议设为 true,提高白屏检测准确性 |
| whiteBoxElements
| array
| ['html', 'body', '#app', '#root']
| 白屏检测的容器列表,只有 silentWhiteScreen 为 true 时,才生效 |
| filterXhrUrlRegExp
| regExp
| null
| 默认为空,所有的接口请求都会被监听,不为空时,filterXhrUrlRegExp.test(xhr.url)为 true 时过滤指定的接口 |
| beforePushBreadcrumb
| function
| null
| (自定义 hook) 添加到行为列表前的 hook,有值时,所有的用户行为都要经过该 hook 处理,若返回 false,该行为不会添加到列表中 |
| beforeDataReport
| function
| null
| (自定义 hook) 数据上报前的 hook,有值时,所有的上报数据都要经过该 hook 处理,若返回 false,该条数据不会上报 |
白屏检测功能说明
该功能用来检测页面打开后,是否一直处于白屏状态,通过 silentWhiteScreen 设为 true 来开启
白屏检测功能使用:关键点采样对比 + 白屏修正机制,来确保白屏功能的正确性
对于有骨架屏的项目,如果页面一直显示骨架屏,也算是白屏的一种,有骨架屏的项目建议 skeletonProject 设为 true,提高白屏检测准确性
自定义 hook 示例
beforePushBreadcrumb
// 添加用户行为
push(data) {
if (typeof this.beforePushBreadcrumb === 'function') {
/**
* 执行用户自定义的hook,若返回false,则这条数据不添加到列表中
* @param { object } this 当前用户行为的实例
* @param { object } data 要添加到用户行为列表的数据
*/
let result = this.beforePushBreadcrumb(this, data);
if (!result) return;
this.immediatePush(result);
return;
}
this.immediatePush(data);
}
beforeDataReport
// 上报数据前的hook
async beforePost(data) {
let transportData = this.getTransportData(data);
/**
* 执行用户自定义的hook,若返回false,则这条数据不会进行上报
* @param { object } transportData 当前要上报的数据
*/
if (typeof this.beforeDataReport === 'function') {
transportData = this.beforeDataReport(transportData);
if (!transportData) return false;
}
return transportData;
}
手动上报错误示例
import webSee from 'web-monitor';
webSee.log({
type: 'custom',
message: '手动报错信息',
error: new Error('报错'),
});