web性能检测、错误捕获(Web performance detection, error capture)
npm install web-performance-timing#### html 直接引入
```
#### npm 引入
`
import {
webPerformance
} from 'web-performance-timing'
//性能查看
webPerformance({}, (res) => {
console.log(res);
})
//vue 使用
Vue.config.errorHandler = function (err, vm, info) {
//其他的操作自己编辑
webPerformance.addError({
msg:err,
})
}
//react 使用
componentDidCatch(error, info) {
webPerformance.addError({
msg:error,
})
}
``
> - url 上报页面地址
> - preUrl 来访上一页面 URL
> - performance 页面性能数据详情,字段含义详情请参考后面内容
> - errorList 页面错误信息详情,包含 js,img,ajax,fetch 等所有错误信息,字段含义详情请参考后面内容
> - resoruceList 页面性能数据详情,当前页面所有资源性能详情信息,字段含义详情请参考后面内容
> - markUv 统计 uv 标识
> - markUser 从用户进入网站开始标识,直到用户离开销毁,可以用来做用户漏斗分析
> - time 当前上报时间
> - screenwidth 屏幕宽度
> - screenheight 屏幕高度
> - isFristIn 是否是某次会话的第一次进入
> - type 上报类型 1:页面级性能上报 2:页面 ajax 性能上报 3:页面内错误信息上报
| parameter name | describe | explain |
| -------------- | ------------------------------ | ------------------------------- |
| url | 上报页面地址 | |
| isFristIn | 是否是每次会话的第一次渲染 | 可以用来做首屏渲染性能统计分类 |
| screenwidth | 屏幕宽度 | |
| screenheight | 屏幕高度 | |
| preUrl | 上一页面 | |
| | | |
| errorList | 错误资源列表信息 | |
| t | 资源时间 | |
| n | 资源类型 | resource,js,ajax,fetch,other |
| msg | 错误信息 | |
| method | 资源请求方式 | GET,POST |
| resourceUrl | 请求资源路径 | |
| col | js 错误行 | |
| line | js 错误列 | |
| status | ajax 错误状态 | |
| text | ajax 错误信息 | |
| | | |
| performance | 页面资源性能数据(单位均为毫秒) | |
| dnst | DNS 解析时间 | |
| tcpt | TCP 建立时间 | |
| wit | 白屏时间 | |
| domt | dom 渲染完成时间 | |
| lodt | 页面 onload 时间 | |
| radt | 页面准备时间 | |
| rdit | 页面重定向时间 | |
| uodt | unload 时间 | |
| reqt | request 请求耗时 | |
| andt | 页面解析 dom 耗时 | |