performance-report页面性能、资源、错误、ajax，fetch请求上报插件完善小巧

时间 2019-12-09

标签 performance report 页面性能资源错误 ajax fetch 请求上报插件完善小巧栏目系统性能繁體版

原文原文链接

performance-report只作页面性能数据的采集和上报，是比较完整和健全的数据上报插件，它能够帮你完成如下功能：

performance-report 是比较完整和健全的数据上报插件，它能够帮你完成如下功能：

当前页面URL (data.page)

上一页面URL （data.preUrl）

当前浏览器版本信息（data.appVersion）

页面性能数据信息（data.performance），例如：页面加载时间，白屏时间，dns解析时间等

当前页面错误信息（data.errorList）包含（js,css,img,ajax,fetch 等错误信息）

当前页面全部资源性能数据（data.resoruceList）,例如ajax,css,img等资源加载性能数据

不用担忧阻塞页面，压缩资源大小6kb,上报方式为异步上报

github地址，若是你以为对你有用的话欢迎给个star

https://github.com/wangweiang...css

完整前端性能监控系统：https://github.com/wangweiang...

使用方式

一、下载 dist/performance-report.min.js 到本地

二、使用script标签引入到html的头部（备注：放到全部js资源以前）

三、使用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处理：

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": 1523948635259, 
      "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": 1523948635330, 
      "n": "resource", 
      "msg": "img is load error", 
      "data": {
        "target": "img", 
        "type": "error", 
        "resourceUrl": "http://img1.imgtn.bd95510/"
      }, 
      "method": "GET"
    }, 
    {
      "t": 1523948635405, 
      "n": "ajax", 
      "msg": "ajax请求错误", 
      "data": {
        "resourceUrl": "", 
        "text": "", 
        "status": 0
      }
    }, 
    {
      "t": 1523948635425, 
      "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"
    }
  ], 
  "performance": {
    "dnst": 0, 
    "tcpt": 0, 
    "wit": 17, 
    "domt": 239, 
    "lodt": 904, 
    "radt": 8, 
    "rdit": 0, 
    "uodt": 0, 
    "reqt": 23, 
    "andt": 645
  }, 
  "resourceList": [
    {
      "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://mock-api.seosiwei.com/guest/home/api/shop/getHomeInitInfo", 
      "method": "GET", 
      "type": "fetchrequest", 
      "duration": "157.10", 
      "decodedBodySize": 0, 
      "nextHopProtocol": "http/1.1"
    }, 
    {
      "name": "http://mock-api.seosiwei.com/guest/order/api/order/getOrder", 
      "method": "POST", 
      "type": "xmlhttprequest", 
      "duration": "148.40", 
      "decodedBodySize": 0, 
      "nextHopProtocol": "http/1.1"
    }
  ]
}

performance-report页面性能、资源、错误、ajax，fetch请求上报插件 完善小巧

performance-report只作页面性能数据的采集和上报，是比较完整和健全的数据上报插件，它能够帮你完成如下功能：

performance-report 是比较完整和健全的数据上报插件，它能够帮你完成如下功能：

github地址，若是你以为对你有用的话欢迎给个star

完整前端性能监控系统：https://github.com/wangweiang...

使用方式

参数说明

错误处理：

AJAX处理：

全部资源信息处理：

运行方式

单页面程序处理说明

返回参数说明

一份完整的上报数据看起来像这样：

performance-report页面性能、资源、错误、ajax，fetch请求上报插件完善小巧