详解SkyWalking前端监控的性能指标

SkyWalking 从8.2.0版本开始支持对前端浏览器端的性能进行监控,不仅可以像以前一样监控浏览器发送给后端服务的与请求,还能看到前端的渲染速度、错误日志等信息------这些信息是获取最终用户体验的最有效指标。实现的方式是引入skywalking-client-js库,这是一个 skywalking 官方出品的一个前端埋点上报插件,支持React, Angular, Vue框架。它有如下功能:

  • 提供指标和错误收集到SkyWalking后端。

  • 轻量级的。一个简单的JavaScript库。不需要浏览器插件。

  • 浏览器作为整个分布式跟踪系统的起点。

skywalking-client-js本质

浏览器端的监控其实也是在前端代码里插入一个js的agent,和后台代码的接入一样。Skywalking-client-js 将错误数据跟踪到 OAP 服务器,最终在 UI 端可视化数据。

Browser监控入口

详解Browser-App 监控页面

对于应用程序的错误概述,有几个基本统计信息和错误趋势的指标,包括以下指标。

  • App Error Count, 应用错误计数,所选时间段内的错误总数。

  • App JS Error Rate ,应用JS 错误率,选定时间段内出现 JS 错误的 PV 占总 PV 的比例。

  • All of Apps Error Count, 所有应用错误计数,前 N 个应用错误计数排名。

  • All of Apps JS Error Rate,所有应用JS错误率,前N个应用JS错误率排名。

  • Error Count of Versions in the Selected App,所选应用中版本的错误计数,所选应用排名中版本的前 N 个错误计数。

  • Error Rate of Versions in the Selected App,所选应用中版本的错误率,所选应用中版本排名前 N 名的 JS 错误率。

  • Error Count of the Selected App,所选应用的错误计数,所选应用排名的前 N 个错误计数。

  • Error Rate of the Selected App,所选应用的错误率,所选应用排名的前 N 个 JS 错误率。

详解Browser-App 监控页面

  • Page Error Count Layout:页面不同类型错误统计,包括resource_error_sum、js_error_sum、unknown_error_sum 和ajax_error_sum 这几个指标不多做解释,太简单了。
  • Page Performance :页面性能概要统计,包括res_avg、load_page_avg、trans_avg、fpt_avg、dom_analysis_avg、dns_avg、dom_ready_avg、redirect_avg、tcp_avg、ttfb_avg

|------------------|--------------------------------|-------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Metrics Name | Describe | Calculating Formulae | Note |
| redirectTime | Page redirection time | redirectEnd - redirectStart | If the current document and the document that is redirected to are not from the same origin, set redirectStart, redirectEnd to 0 |
| ttfbTime | Time to First Byte | responseStart - requestStart | According to Google Development |
| dnsTime | Time to DNS query | domainLookupEnd - domainLookupStart | |
| tcpTime | Time to TCP link | connectEnd - connectStart | |
| transTime | Time to content transfer | responseEnd - responseStart | |
| sslTime | Time to SSL secure connection | connectEnd - secureConnectionStart | Only supports HTTPS |
| resTime | Time to resource loading | loadEventStart - domContentLoadedEventEnd | Represents a synchronized load resource in pages |
| fmpTime | Time to First Meaningful Paint | - | Listen for changes in page elements. Traverse each new element, and calculate the total score of these elements. If the element is visible, the score is 1 * weight; if the element is not visible, the score is 0 |
| domAnalysisTime | Time to DOM analysis | domInteractive - responseEnd | |
| fptTime | First Paint Time | responseEnd - fetchStart | |
| domReadyTime | Time to DOM ready | domContentLoadedEventEnd - fetchStart | |
| loadPageTime | Page full load time | loadEventStart - fetchStart | |
| ttlTime | Time to interact | domInteractive - fetchStart | |
| firstPackTime | Time to first package | responseStart - domainLookupStart | |

至于Page FPT Latency、Page TTL Latency、Page DOM Ready Latency、Page Load Latency、Page First Pack Latency、Page FMP Latency 就是具体单独指标的展示

我的每一篇文章都希望帮助读者解决实际工作中遇到的问题!如果文章帮到了您,劳烦点赞、收藏、转发!您的鼓励是我不断更新文章最大的动力!

相关推荐
wordbaby几秒前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
卿·静7 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia21 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
Mintopia23 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub26 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw29 分钟前
hippy的主要原理
前端
子兮曰32 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068832 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97635 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖35 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript