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

摘要：只做页面性能数据的采集和上报，是比较完整和健全的数据上报插件，它可以帮你完成以下功能是比较完整和健全的数据上报插件，它可以帮你完成以下功能当前页面上一页面当前浏览器版本信息页面性能数据信息，例如页面加载时间，白屏时间，解析时间等当前页面

当前页面URL  (data.page)
上一页面URL （data.preUrl）
当前浏览器版本信息 （data.appVersion）
页面性能数据信息   （data.performance），例如：页面加载时间，白屏时间，dns解析时间等
当前页面错误信息  （data.errorList） 包含（js,css,img,ajax,fetch 等错误信息）
当前页面所有资源性能数据 （data.resoruceList）,例如ajax,css,img等资源加载性能数据
不用担心阻塞页面，压缩资源大小6kb,上报方式为异步上报

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

1、下载 dist/performance-report.min.js 到本地
2、使用script标签引入到html的头部（备注：放到所有js资源之前）
3、使用performance函数进行数据的监听上报

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请求，会抓取所有新的请求数据并上报。

多页面应用程序不会受影响

{
  "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"
    }
  ]
}