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

最新推荐文章于 2024-07-15 14:55:00 发布

置顶只此一生的我

最新推荐文章于 2024-07-15 14:55:00 发布

阅读量858

点赞数

分类专栏：前端开发文章标签：性能监控 fetch拦截 ajax拦截

本文链接：https://blog.csdn.net/wangweianger/article/details/79976384

版权

前端开发专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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?

github.com/wangweiange…

完整的前端性能监控系统

github.com/wangweiange…

使用方式：

1、下载 dist/performance-report.min.js 到本地
使用script标签引入到html的头部（备注：放到所有js资源之前）
3、使用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"
    }
  ]
}