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

最新推荐文章于 2023-03-03 12:31:06 发布
最新推荐文章于 2023-03-03 12:31:06 发布
阅读量197 收藏
点赞数
文章标签： webpack 运维 git ViewUI
原文链接：https://juejin.im/post/5ad5a5bcf265da237e0a38f3
版权

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…

npm地址：

www.npmjs.com/package/per…

完整的前端性能监控系统

github.com/wangweiange…


html页面直接引用：

  • 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>复制代码

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.

1、Introduce Performance
2、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.

1、Introduce Performance

2、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->coljs错误行
->data->linejs错误列
->data->statusajax错误状态
->data->textajax错误信息
performance页面资源性能数据(单位均为毫秒)
->dnstDNS解析时间
->tcptTCP建立时间
->wit白屏时间
->domtdom渲染完成时间
->lodt页面onload时间
->radt页面准备时间
->rdit页面重定向时间
->uodtunload时间
->reqtrequest请求耗时
->andt页面解析dom耗时
resoruceList页面资源性能数据
->decodedBodySize资源返回数据大小
->duration资源耗时
->method请求方式GET,POST
->name请求资源路径
->nextHopProtocolhttp协议版本
->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


weixin_34195364
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
3、Chrome之前端性能指标
LetsStudy的博客
08-04 1613
a、RAIL 模型 ​RAIL​ 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以不同的方式影响着性能。 1.响应：输入延迟时间（从点按到绘制）小于 100 毫秒。 一般指的是用户输入网页快速给出结果的过程，比如点击按钮，切换表单，启动动画之类的。 2.动画：每个帧的工作（从 JS 到绘制）完成时间小于 16 毫秒。 指的是涉及style，layout，paint，composite过程的行为。比如：用户滚动页面，拖动刷新，页面动画等 3.空.
import { performance } from ‘node:perf_hooks‘
最新发布
Xiaochen1239的博客
08-19 2426
错误代码出现原因的话可能是node版本问题，要求node版本要大于16的解决。
import { performance } from ‘node:perf_hookSyntaxError: Cannot use import statement outside a module
热门推荐
qq_39750019的博客
10-09 1万+
新建TS项目运行时出现的错误 import { performance } from 'node:perf_hookSyntaxError: Cannot use import statement outside a module
web-report-sdk:web-report-sdk性能及错误监控二进制解释
04-01
web-report是一种浏览器端页面性能，ajax，fetch，错误信息，资源性能上报SDK，资源小巧，性能强悍 上报sdk有五种 一：所有类型通用的上报SDK即：web-report-default.js 二：针对于使用Jquery ajax的上报SDK即：web-...
xe-ajax3.4.13.js 封装 fetch 异步请求 javascript 库
11-26
**xe-ajax 3.4.13.js：封装 fetch 的异步请求库** `xe-ajax` 是一个专门用于处理 HTTP 请求的 JavaScript 库，版本号为 3.4.13。它基于现代的 `Promise` API 进行设计，确保了在处理异步操作时的流畅性和可维护性。...
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
本文将对比分析四种常见的异步请求方式：XMLHttpRequest（xhr）、jQuery的$.ajax、axios以及fetch，以便理解它们各自的特点和适用场景。 1. XMLHttpRequest（xhr） XMLHttpRequest对象是最早的异步请求手段，它...
ember-ajax-fetch：与ember-ajax API兼容的提取服务
01-30
ember-ajax-fetch 该插件提供了fetch服务，该服务具有与相同的API。 完成后应该是替换品，已经处理了很多事情！兼容性Ember.js v3.16或更高版本Ember CLI v2.13或更高版本Node.js v10或更高版本安装ember install ...
Fetch-GitHub-Graphql：GitHub Graphql-使用Fetch API发送请求
02-04
const gh = require ( 'fetch-github-graphq' ) gh ( token , `query` , { variables } ) 安装 这是通过提供的模块。 可以使用或命令行工具进行安装。 npm install fetch-github-graphql --save 执照 麻省理工学院
【Vue3】vue3.0运行npm run dev 报错Cannot find module ‘node:url或者import { performance } from ‘node:perf_hoo
SunPeng的博客
02-01 1358
【Vue3】vue3.0运行npm run dev 报错Cannot find module ‘node:url；import { performance } from ‘node:perf_hook’，SyntaxError: Cannot use import statement outside a module
Performance前端性能监控利器
zhxh0376的专栏
03-29 905
Performance前端性能监控利器,前端性能监
如何使用 Performance API 让您的网站更快
前端劝退师
06-24 596
本教程介绍了如何使用 Performance API 记录来自访问您的应用程序的真实用户的类似 DevTool 的统计信息。使用浏览器 DevTools 评估 Web 应用程序性能很有用，...
Vue项目报错import { performance } from ‘node:perf_hooks‘ ^^^^^^ SyntaxError: Cannot use import statemen
爱吃雪糕的小布丁的博客
03-03 5003
这个问题一般出现在Vue3项目中，是因为Vue3要求node版本要大于16，我们的的node版本太低了导致出现这个问题，解决方法就是换一个16版本以上的node。
（一）performance初识
雨墨轩痕
03-16 3064
测试
performance 查看页面性能
weixin_33889665的博客
07-26 504
我们都知道浏览器从打开 url 到整个页面渲染完成，中间的过程，大致是 DOM 解析，CSSOM 解析，JS 解析，渲染。网上关于这些内容的文章也很多了，本文不再赘述。 今天主要介绍 performance 这个衡量页面加载性能的工具。 performance 有好几个属性，但是由于浏览器支持程度不同，我们主要用到的是支持最广泛，最常用的...
pyhton 总提示 name 'XXX' is not defined 的解决办法
weixin_45903952的博客
01-04 6534
pyhton 总提示 name ‘XXX’ is not defined 的解决办法 language_survey.py #-*-coding:GBK -*- #11.5 from survey import AnonymousSurvey #定义一个问题，并创建一个表示调查的AnonymousSurvey对象 question = "What language did you first...
js中的错误监控（二）【网络+资源加载】的错误捕获与上报
敲敲的博客
04-21 5522
文章目录一、错误类型 一、错误类型
js实现前端性能监控与错误监控
吴纯玲的博客
03-10 1531
前端监控一般包括：1.性能监控；2.错误监控 1.前端性能 这里引用他人文章对前端性能的描述：通常前端性能可以认为是用户获取所需要页面数据或执行某个页面动作的一个实时性指标，一般以用户希望获取数据的操作到用户实际获得数据的时间间隔来衡量。 简单的总结一下，就是一般用时间来衡量前端性能。比如一些耳熟能详的：白屏时间、首屏时间等 那么当我们打开一个网页，如果获取跟网页性能相关的时间呢？ 2.性能数据采集 打开控制台，输入window.performance可以看到performan...
页面请求头Sec-Fetch-*的作用
07-24
2. Sec-Fetch-Mode：指示请求的模式，即请求是正常的页面导航请求、预取（prefetch）、预加载（preload）还是其他类型。常见的取值有 "navigate"、"cors"、"nested-navigate"、"no-cors" 等。它可以告诉服务器是否...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值