摘要：只做頁面性能數據的采集和上報，是比較完整和健全的數據上報插件，它可以幫你完成以下功能是比較完整和健全的數據上報插件，它可以幫你完成以下功能當前頁面上一頁面當前瀏覽器版本信息頁面性能數據信息，例如頁面加載時間，白屏時間，解析時間等當前頁面

當前頁面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"
    }
  ]
}