performance-report页面性能、资源、错误、ajax,fetch请求上报插件

原创 wangweianger 随笔 前端 115阅读 2018-04-17 16:07:16 举报

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/wangweianger/web-performance-report

完整前端性能监控系统:https://github.com/wangweianger/web-performance-monitoring-system

使用方式

  • 1、下载 dist/performance-report.min.js 到本地
  • 2、使用script标签引入到html的头部(备注:放到所有js资源之前)
  • 3、使用performance函数进行数据的监听上报

参数说明

  • 同时传入 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 :其他

运行方式

单页面程序处理说明

  • 对于单页面应用程序,只有第一次加载的页面性能数据有效,之后的路由跳转不会有页面的性能数据,因为需要的静态资源已经加载完成
  • 如果新的路由有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

一份完整的上报数据看起来像这样:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复