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