- 当前页面URL (data.page)
- 上一页面URL （data.preUrl）
- 当前浏览器版本信息 （data.appVersion）
- 页面性能数据信息 （data.performance），例如：页面加载时间，白屏时间，dns解析时间等
- 当前页面错误信息 （data.errorList） 包含（js,css,img,ajax,fetch 等错误信息）
- 当前页面所有资源性能数据 （data.resoruceList）,例如ajax,css,img等资源加载性能数据
- 不用担心阻塞页面，压缩资源大小6kb,上报方式为异步上报
完整前端性能监控系统koa+mysql+vue完整源码：https://github.com/wangweianger/web-performance-monitoring-system
- 1、下载 dist/performance-report.min.js 到本地
- 2、使用script标签引入到html的头部（备注：放到所有js资源之前）
- 3、使用performance函数进行数据的监听上报
<html>
<head>
<meta charset="UTF-8">
<title>performance test</title>
<!-- 放到所有资源之前 防止获取不到error信息 -->
<script src="../dist/performance-report.min.js"></script>
<script>
//开始上报数据
Performance({
domain:'http://some.com/api', //更改成你自己的上报地址域名
})
</script>
</head>Performance({
domain:'http://some.com/api',
outtime:500,
isPage:true,
isResource:true,
isError:true,
filterUrl:['http://localhost:35729/livereload.js?snipver=1']
},(data)=>{
fetch('http://some.com/api',{type:'POST',body:JSON.stringify(result)}).then((data)=>{})
})- 同时传入 domain和传入的function ，function优先级更高；
- domain ：上报api接口
- outtime ：上报延迟时间，保证异步数据的加载 （默认：1000ms）
- isPage ：是否上报页面性能数据 （默认：true）
- isResource ：是否上报页面资源性能数据 （默认：true）
- isError ：是否上报页面错误信息数据 （默认：true）
- filterUrl ：不需要上报的ajax请求 （例如开发模式下的livereload链接）
- fn ：自定义上报函数，上报方式可以用ajax可以用fetch (非必填：默认使用fetch)
- 插件会处理所有的error信息并完成上报
- 错误处理分为4种类型
- 1.图片资源，js资源文本资源等资源错误信息 n='resource'
- 2.js报错，代码中的js报错 n='js'
- 3.ajax请求错误 n='ajax'
- 4.fetch请求错误 n='fetch'
- AJAX分为 XMLHttpRequest 和 Fetch的处理
- AJAX兼容老板般与新版本 例如：jq的1.x版本与2.x版本以上需要做兼容处理
- 拦截所有fetch请求信息，遇到错误时收集并上报
- 上报所有资源信息 资源类型以type来区分 type类型有
- script：js脚本资源
- img：图片资源
- fetchrequest：fetch请求资源
- xmlhttprequest：ajax请求资源
- other ：其他
git clone https://github.com/wangweianger/web-performance-report.git
npm install
//开发
npm run dev
//打包
npm run build
http://localhost:8080/test/ 页面测试- 对于单页面应用程序，只有第一次加载的页面性能数据有效，之后的路由跳转不会有页面的性能数据，因为需要的静态资源已经加载完成
- 如果新的路由有ajax请求或者fetch请求，会抓取所有新的请求数据并上报。
- 多页面应用程序不会受影响
| 参数名 | 描述 | 说明 |
|---|---|---|
| appVerfion | 当前浏览器信息 | |
| page | 当前页面 | |
| preUrl | 上一页面 | |
| errorList | 错误资源列表信息 | |
| ->t | 资源时间 | |
| ->n | 资源类型 | resource，js，ajax，fetch,other |
| ->msg | 错误信息 | |
| ->method | 资源请求方式 | GET，POST |
| ->data->resourceUrl | 请求资源路径 | |
| ->data->col | js错误行 | |
| ->data->line | js错误列 | |
| ->data->status | ajax错误状态 | |
| ->data->text | ajax错误信息 | |
| performance | 页面资源性能数据(单位均为毫秒) | |
| ->dnst | DNS解析时间 | |
| ->tcpt | TCP建立时间 | |
| ->wit | 白屏时间 | |
| ->domt | dom渲染完成时间 | |
| ->lodt | 页面onload时间 | |
| ->radt | 页面准备时间 | |
| ->rdit | 页面重定向时间 | |
| ->uodt | unload时间 | |
| ->reqt | request请求耗时 | |
| ->andt | 页面解析dom耗时 | |
| resoruceList | 页面资源性能数据 | |
| ->decodedBodySize | 资源返回数据大小 | |
| ->duration | 资源耗时 | |
| ->method | 请求方式 | GET,POST |
| ->name | 请求资源路径 | |
| ->nextHopProtocol | http协议版本 | |
| ->type | 请求资源类型 | script，img，fetchrequest，xmlhttprequest，other |
{
"page": "http://localhost:8080/test/",
"preUrl": "",
"appVersion": "5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36",
"errorList": [
{
"t": 1524017149094,
"n": "js",
"msg": "ReferenceError: wangwei is not defined
at http://localhost:8080/test/:64:15",
"data": {
"resourceUrl": "http://localhost:8080/test/",
"line": 64,
"col": 15
},
"method": "GET"
},
{
"t": 1524017149102,
"n": "resource",
"msg": "img is load error",
"data": {
"target": "img",
"type": "error",
"resourceUrl": "http://img1.imgtn.bd95510/"
},
"method": "GET"
},
{
"t": 1524017149151,
"n": "fetch",
"msg": "fetch请求错误",
"data": {
"resourceUrl": "http://mock-api.seosiwei.com/guest/order/api/order/getOrde",
"text": "TypeError: Failed to fetch",
"status": 0
},
"method": "POST"
},
{
"t": 1524017149154,
"n": "ajax",
"msg": "ajax请求路径有误",
"data": {
"resourceUrl": "http://mock-api.seosiwei.com/guest/home/api/shop/getHomeInitInf",
"text": "ajax请求路径有误",
"status": 0
},
"method": "GET"
}
],
"performance": {
"dnst": 0,
"tcpt": 2,
"wit": 304,
"domt": 445,
"lodt": 677,
"radt": 7,
"rdit": 0,
"uodt": 0,
"reqt": 294,
"andt": 223
},
"resourceList": [
{
"name": "http://localhost:8080/dist/performance-report.js",
"method": "GET",
"type": "script",
"duration": "81.70",
"decodedBodySize": 17589,
"nextHopProtocol": "http/1.1"
},
{
"name": "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js",
"method": "GET",
"type": "script",
"duration": "0.00",
"decodedBodySize": 0,
"nextHopProtocol": "h2"
},
{
"name": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=295864288,1887240069&fm=27&gp=0.jpg",
"method": "GET",
"type": "img",
"duration": "0.00",
"decodedBodySize": 0,
"nextHopProtocol": "http/1.1"
},
{
"name": "http://localhost:35729/livereload.js?snipver=1",
"method": "GET",
"type": "script",
"duration": "138.60",
"decodedBodySize": 0,
"nextHopProtocol": "http/1.1"
},
{
"name": "http://mock-api.seosiwei.com/guest/home/api/shop/getHomeInitInfo",
"method": "GET",
"type": "fetchrequest",
"duration": "55.80",
"decodedBodySize": 0,
"nextHopProtocol": "http/1.1"
},
{
"name": "http://mock-api.seosiwei.com/guest/order/api/order/getOrder",
"method": "POST",
"type": "xmlhttprequest",
"duration": "43.40",
"decodedBodySize": 0,
"nextHopProtocol": "http/1.1"
}
]
}