2.0.1 • Published 5 years ago
web-performance-timing v2.0.1
页面性能检测,错误信息捕获
html 直接引入
<html>
<head>
<meta charset="UTF-8">
<title>webPerformance</title>
<script src="http://static.yxlblog.com/js/webPerformance.min.js"></script>
<script>
webPerformance({}, function (res) {
//coding 性能检测和错误上报
});
</script>
</head>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 耗时 |