performance-report頁面性能、資源、錯(cuò)誤、ajax，fetch請求上報(bào)插件完善小巧

testbird 發(fā)布于2019-08-22 16:24 / 3150人閱讀

摘要：只做頁面性能數(shù)據(jù)的采集和上報(bào)，是比較完整和健全的數(shù)據(jù)上報(bào)插件，它可以幫你完成以下功能是比較完整和健全的數(shù)據(jù)上報(bào)插件，它可以幫你完成以下功能當(dāng)前頁面上一頁面當(dāng)前瀏覽器版本信息頁面性能數(shù)據(jù)信息，例如頁面加載時(shí)間，白屏?xí)r間，解析時(shí)間等當(dāng)前頁面

performance-report只做頁面性能數(shù)據(jù)的采集和上報(bào)，是比較完整和健全的數(shù)據(jù)上報(bào)插件，它可以幫你完成以下功能： performance-report 是比較完整和健全的數(shù)據(jù)上報(bào)插件，它可以幫你完成以下功能：

當(dāng)前頁面URL  (data.page)
上一頁面URL （data.preUrl）
當(dāng)前瀏覽器版本信息 （data.appVersion）
頁面性能數(shù)據(jù)信息   （data.performance），例如：頁面加載時(shí)間，白屏?xí)r間，dns解析時(shí)間等
當(dāng)前頁面錯(cuò)誤信息  （data.errorList） 包含（js,css,img,ajax,fetch 等錯(cuò)誤信息）
當(dāng)前頁面所有資源性能數(shù)據(jù) （data.resoruceList）,例如ajax,css,img等資源加載性能數(shù)據(jù)
不用擔(dān)心阻塞頁面，壓縮資源大小6kb,上報(bào)方式為異步上報(bào)

github地址，如果你覺得對你有用的話歡迎給個(gè)star

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

完整前端性能監(jiān)控系統(tǒng)：https://github.com/wangweiang... 使用方式

1、下載 dist/performance-report.min.js 到本地
2、使用script標(biāo)簽引入到html的頭部（備注：放到所有js資源之前）
3、使用performance函數(shù)進(jìn)行數(shù)據(jù)的監(jiān)聽上報(bào)



    
    performance test

參數(shù)說明

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)=>{})
})

同時(shí)傳入 domain和傳入的function ，function優(yōu)先級更高；

domain ：上報(bào)api接口

outtime ：上報(bào)延遲時(shí)間，保證異步數(shù)據(jù)的加載（默認(rèn)：1000ms）

isPage ：是否上報(bào)頁面性能數(shù)據(jù) （默認(rèn)：true）

isResource ：是否上報(bào)頁面資源性能數(shù)據(jù) （默認(rèn)：true）

isError ：是否上報(bào)頁面錯(cuò)誤信息數(shù)據(jù) （默認(rèn)：true）

filterUrl ：不需要上報(bào)的ajax請求（例如開發(fā)模式下的livereload鏈接）

fn ：自定義上報(bào)函數(shù)，上報(bào)方式可以用ajax可以用fetch (非必填：默認(rèn)使用fetch)

錯(cuò)誤處理：

插件會(huì)處理所有的error信息并完成上報(bào)

錯(cuò)誤處理分為4種類型

1.圖片資源，js資源文本資源等資源錯(cuò)誤信息 n="resource"

2.js報(bào)錯(cuò)，代碼中的js報(bào)錯(cuò) n="js"

3.ajax請求錯(cuò)誤 n="ajax"

4.fetch請求錯(cuò)誤 n="fetch"

AJAX處理：

AJAX分為 XMLHttpRequest 和 Fetch的處理

AJAX兼容老板般與新版本例如：jq的1.x版本與2.x版本以上需要做兼容處理

攔截所有fetch請求信息，遇到錯(cuò)誤時(shí)收集并上報(bào)

所有資源信息處理：

上報(bào)所有資源信息資源類型以type來區(qū)分 type類型有

script：js腳本資源

img：圖片資源

fetchrequest：fetch請求資源

xmlhttprequest：ajax請求資源

other ：其他

運(yùn)行方式

git clone https://github.com/wangweianger/web-performance-report.git
npm install
//開發(fā)
npm run dev
//打包
npm run build

http://localhost:8080/test/ 頁面測試

單頁面程序處理說明

對于單頁面應(yīng)用程序，只有第一次加載的頁面性能數(shù)據(jù)有效，之后的路由跳轉(zhuǎn)不會(huì)有頁面的性能數(shù)據(jù)，因?yàn)樾枰撵o態(tài)資源已經(jīng)加載完成

如果新的路由有ajax請求或者fetch請求，會(huì)抓取所有新的請求數(shù)據(jù)并上報(bào)。

多頁面應(yīng)用程序不會(huì)受影響

返回參數(shù)說明

參數(shù)名	描述	說明
appVerfion	當(dāng)前瀏覽器信息
page	當(dāng)前頁面
preUrl	上一頁面

errorList	錯(cuò)誤資源列表信息
->t	資源時(shí)間
->n	資源類型	resource，js，ajax，fetch,other
->msg	錯(cuò)誤信息
->method	資源請求方式	GET，POST
->data->resourceUrl	請求資源路徑
->data->col	js錯(cuò)誤行
->data->line	js錯(cuò)誤列
->data->status	ajax錯(cuò)誤狀態(tài)
->data->text	ajax錯(cuò)誤信息

performance	頁面資源性能數(shù)據(jù)(單位均為毫秒)
->dnst	DNS解析時(shí)間
->tcpt	TCP建立時(shí)間
->wit	白屏?xí)r間
->domt	dom渲染完成時(shí)間
->lodt	頁面onload時(shí)間
->radt	頁面準(zhǔn)備時(shí)間
->rdit	頁面重定向時(shí)間
->uodt	unload時(shí)間
->reqt	request請求耗時(shí)
->andt	頁面解析dom耗時(shí)

resoruceList	頁面資源性能數(shù)據(jù)
->decodedBodySize	資源返回?cái)?shù)據(jù)大小
->duration	資源耗時(shí)
->method	請求方式	GET,POST
->name	請求資源路徑
->nextHopProtocol	http協(xié)議版本
->type	請求資源類型	script，img，fetchrequest，xmlhttprequest，other

一份完整的上報(bào)數(shù)據(jù)看起來像這樣：

{
  "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請求錯(cuò)誤", 
      "data": {
        "resourceUrl": "", 
        "text": "", 
        "status": 0
      }
    }, 
    {
      "t": 1523948635425, 
      "n": "fetch", 
      "msg": "fetch請求錯(cuò)誤", 
      "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"
    }
  ]
}

GPU云服務(wù)器云服務(wù)器服務(wù)器上報(bào)404錯(cuò)誤 ajax請求 ajax請求數(shù)據(jù) 停止ajax請求

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94328.html

發(fā)表評論

登陸后可評論

0條評論

testbird

男|高級講師

我要關(guān)注我要私信

TA的文章

分析師指出 iPhone 13訂單量比iPhone 12高約20%，因中國需求強(qiáng)勁

閱讀 1653·2021-09-26 09:55
開源網(wǎng)絡(luò)攻擊增加了650%，熱門項(xiàng)目更容易受到攻擊

閱讀 1386·2021-09-23 11:22
Cpp Primer | 第7章 : 類（筆記+練習(xí)）

閱讀 2749·2021-09-06 15:02
hostyun：美國三網(wǎng)廉價(jià)版cn2 gia vps，低至15元/月，1G內(nèi)存/1核/10gSSD/

閱讀 2658·2021-09-01 11:43
最新Namecom優(yōu)惠碼和技巧心得（新注冊/續(xù)費(fèi)優(yōu)惠/免費(fèi)隱私保護(hù)）

閱讀 3977·2021-08-27 13:10
GreenCloudVPS：56周年新加坡國慶/綠云新加坡機(jī)房全線44折優(yōu)惠/1G[email pr

閱讀 3693·2021-08-12 13:24
【CSS】隱藏元素總結(jié)

閱讀 2080·2019-08-30 12:56
從master拉取新分支并push到遠(yuǎn)端

閱讀 3009·2019-08-30 11:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

performance-report頁面性能、資源、錯(cuò)誤、ajax，fetch請求上報(bào)插件完善小巧

相關(guān)文章

讓前端監(jiān)控?cái)?shù)據(jù)采集更高效

一步一步搭建前端監(jiān)控系統(tǒng)：接口請求異常監(jiān)控篇

談?wù)勄岸水惓２东@與上報(bào)

一步一步搭建前端監(jiān)控系統(tǒng)：如何記錄用戶行為？

**在單頁應(yīng)用中，如何優(yōu)雅的上報(bào)前端性能數(shù)據(jù)**

發(fā)表評論

0條評論

testbird

男|高級講師

TA的文章

分析師指出 iPhone 13訂單量比iPhone 12高約20%，因中國需求強(qiáng)勁

開源網(wǎng)絡(luò)攻擊增加了650%，熱門項(xiàng)目更容易受到攻擊

Cpp Primer | 第7章 : 類（筆記+練習(xí)）

hostyun：美國三網(wǎng)廉價(jià)版cn2 gia vps，低至15元/月，1G內(nèi)存/1核/10gSSD/

最新Namecom優(yōu)惠碼和技巧心得（新注冊/續(xù)費(fèi)優(yōu)惠/免費(fèi)隱私保護(hù)）

GreenCloudVPS：56周年新加坡國慶/綠云新加坡機(jī)房全線44折優(yōu)惠/1G[email pr

【CSS】隱藏元素總結(jié)

從master拉取新分支并push到遠(yuǎn)端

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

performance-report頁面性能、資源、錯(cuò)誤、ajax，fetch請求上報(bào)插件 完善小巧

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

performance-report頁面性能、資源、錯(cuò)誤、ajax，fetch請求上報(bào)插件完善小巧