performance-report頁面性能、資源、錯誤、ajax，fetch請求上報插件 完善小巧

時間  2019-11-17
標籤 performance report 頁面 性能 資源 錯誤 ajax fetch 請求 上報 插件 完善 小巧 欄目 系統性能 简体版
原文   原文鏈接

performance-report只作頁面性能數據的採集和上報，是比較完整和健全的數據上報插件，它能夠幫你完成如下功能：

  • 當前頁面URL (data.page)css

  • 上一頁面URL （data.preUrl）html

  • 當前瀏覽器版本信息 （data.appVersion）前端

  • 頁面性能數據信息 （data.performance），例如：頁面加載時間，白屏時間，dns解析時間等vue

  • 當前頁面錯誤信息 （data.errorList） 包含（js,css,img,ajax,fetch 等錯誤信息）react

  • 當前頁面全部資源性能數據 （data.resoruceList）,例如ajax,css,img等資源加載性能數據jquery

  • 不用擔憂阻塞頁面，壓縮資源大小6kb,上報方式爲異步上報webpack

github地址，若是你以爲對你有用的話歡迎給個star

github.com/wangweiange…
git

npm地址：

www.npmjs.com/package/per…
github

完整的前端性能監控系統

github.com/wangweiange…
web


html頁面直接引用：

  • 一、下載 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>複製代碼

webpack使用

npm install performance-report --save-dev複製代碼
//New performance.js file
//The contents are as follows

import Performance from 'performance-report'
Performance({ 
  domain:'http://some.com/api' 
})複製代碼
//Change webpack configuration

entry: {
    //add performance entry
    'performance':path.resolve(__dirname, '../src/performance.js'),
},

//change htmlWebpackPlugin config like this
//Attention to dependence
new htmlWebpackPlugin({
    ...
    chunks: ['performance','vendors','main'],
    chunksSortMode: 'manual',
}),複製代碼

框架使用

如今流行的nvvm框架都有本身的錯誤捕捉機制，所以不能直接使用window.onerror來捕獲異常。

解決方式：vue,react負責錯誤攔截、解析，調用插件提供的方法插入到errorlist中進行上報


VUE使用方式

If you use the Vue framework, you can do it like this.

一、Introduce Performance
二、Copy the following code

import Performance from 'performance-report'

Vue.config.errorHandler = function (err, vm, info) {
    let { message, stack } = err;

    // Processing error
    let resourceUrl,col,line;
    let errs = stack.match(/(.+?)/)
    if(errs&&errs.length) errs = errs[0]
    errs=errs.replace(/w.+js/g,$1=>{resourceUrl=$1;return '';})
    errs=errs.split(':')
    if(errs&&errs.length>1)line=parseInt(errs[1]||0);col=parseInt(errs[2]||0)

    // Fixed parameters
    // Call the Performance.addError method
    Performance.addError({
      msg:message,
      col:col,
      line:line,
      resourceUrl:resourceUrl
    })
}複製代碼


React使用方式

If you use the React framework, you can do it like this.

一、Introduce Performance

二、Error Handling in React 16.

If you don't know Error Handling.Go to the official website to understand

reactjs.org/blog/2017/0…

react16以後提供Error Handling處理報錯機制，父組件新增componentDidCatch鉤子函數，父組件只能監聽子組件的異常信息

//Top reference
import Performance from 'performance-report'

//Parent component listens for subcomponent error information
componentDidCatch(error, info) {
    let {message,stack} = error  

    // Processing error
    let resourceUrl,col,line;
    let errs = stack.match(/(.+?)/)
    if(errs&&errs.length) errs = errs[0]
    errs=errs.replace(/w.+js/g,$1=>{resourceUrl=$1;return '';})
    errs=errs.split(':')
    if(errs&&errs.length>1)line=parseInt(errs[1]||0);col=parseInt(errs[2]||0)

    // Fixed parameters
    // Call the Performance.addError method
    Performance.addError({
      msg:message,
      col:col,
      line:line,
      resourceUrl:resourceUrl
    })
}複製代碼


參數說明：

完整調用方式

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)

對外方法：

一：addError ：此方法向插件中自定義上報錯誤信息，vue,react，try{}catch 的報錯信息都可採用此方法上報

案例：

let message = 'js add error'
let col = 20
let line = 20
let resourceUrl = 'http://www.xxx.com/01.js'

Performance.addError({
      msg:message,
      col:col,
      line:line,
      resourceUrl:resourceUrl
})複製代碼


二：addData ：上報時自定義的數據

案例：

Performance.addData((data)=>{
	data.name = 'wangwei'
	data.some = {
		name:'wangwie',
		age:20
	}
})複製代碼


錯誤處理：

插件會處理全部的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": 1524050060518, 
      "n": "resource", 
      "msg": "img is load error", 
      "data": {
        "target": "img", 
        "type": "error", 
        "resourceUrl": "http://img1.imgtn.bd95510/"
      }, 
      "method": "GET"
    }, 
    {
      "t": 1524050060674, 
      "n": "js", 
      "msg": "ReferenceError: wangwei is not defined at http://localhost:8080/test/:73:15", 
      "data": {
        "resourceUrl": "http://localhost:8080/test/", 
        "line": 73, 
        "col": 15
      }, 
      "method": "GET"
    }, 
    {
      "t": 1524050060707, 
      "n": "ajax", 
      "msg": "ajax請求路徑有誤", 
      "data": {
        "resourceUrl": "http://mock-api.seosiwei.com/guest/home/api/shop/getHomeInitInf", 
        "text": "ajax請求路徑有誤", 
        "status": 0
      }, 
      "method": "GET"
    }, 
    {
      "t": 1524050060714, 
      "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": 1, 
    "wit": 17, 
    "domt": 165, 
    "lodt": 379, 
    "radt": 6, 
    "rdit": 0, 
    "uodt": 0, 
    "reqt": 16, 
    "andt": 210
  }, 
  "resourceList": [
    {
      "name": "http://localhost:8080/dist/performance-report.js", 
      "method": "GET", 
      "type": "script", 
      "duration": "71.60", 
      "decodedBodySize": 18592, 
      "nextHopProtocol": "http/1.1"
    }, 
    {
      "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://localhost:35729/livereload.js?snipver=1", 
      "method": "GET", 
      "type": "script", 
      "duration": "149.20", 
      "decodedBodySize": 0, 
      "nextHopProtocol": "http/1.1"
    }, 
    {
      "name": "http://mock-api.seosiwei.com/guest/home/api/shop/getHomeInitInfo", 
      "method": "GET", 
      "type": "fetchrequest", 
      "duration": "38.30", 
      "decodedBodySize": 0, 
      "nextHopProtocol": "http/1.1"
    }, 
    {
      "name": "http://mock-api.seosiwei.com/guest/order/api/order/getOrder", 
      "method": "POST", 
      "type": "xmlhttprequest", 
      "duration": "42.30", 
      "decodedBodySize": 0, 
      "nextHopProtocol": "http/1.1"
    }
  ], 
  "addData": {
    "name": "wangwei", 
    "some": {
      "name": "wangwie", 
      "age": 20
    }
  }
}複製代碼


原文地址：blog.seosiwei.com/detail/30

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程