腾讯云前端监控功能说明

概览页面主要显示WEB应用的性能概况信息,包括APDEX、PV(PageView)、整体性能、页面渲染、JS错误率、HTML加载时间等信息。
 
应用拓扑
应用拓扑为您提供应用总体信息,通过拓扑图可以直观分析,从客户端来源到页面组成过程的性能以及错误概况。

页面分析
Web应用的页面包含了很多元素,如JS脚本、CSS样式表、PNG图片等,页面也需要加载许多资源,如第三方的插件、广告、跨域的资源,这些资源的加载缓慢或是加载是否成功都会影响到用户体验。为此,如何更加精准的去衡量前端端真实用户的性能体验?前端监控服务提供了丰富的图表、技术指标以及详细的快照信息,方便页面开发者定位问题原因。
页面分析模块从页面概况到页面快照与资源分析,提供了页面元素级的性能分析。
 
页面概况信息
点击某个页面URL后,展示该页面的页面概况信息,以时序分解图以及各步骤指标趋势图丰富的展现了页面性能信息:
 
页面快照分析
点击“快照”后,进入快照概况,页面的快照中可以详细查看一次页面访问,概况中显示该访问页面的一些信息与资源加载详情。
点击“资源”后,展示该次缓慢请求的页面资源加载详情。

AJAX分析
AJAX分析模块中主要内容为AJAX请求的性能概况、快照列表以及快照概况。AJAX请求性能概况主要是一个AJAX请求的总结,快照概况为某个AJAX请求一次的快照总结,快照详情为慢的AJAX请求性能详细。

关键元素
关键元素模块,可以对关键业务接口进行独立监控。您可以将关键业务添加到该模块,查看总体性能或是慢的性能快照。
 
1. 添加关键元素
 
您可以在应用设置中添加、管理关键元素,点击“添加”按键进行添加。
 
匹配模式分为三种:完全匹配、通配符和正则表达式。

2. 分析关键元素
 
查看关键元素中出现性能问题,单次访问采集到快照的关键元素从慢请求列表中可以进行查看,①可以检索某个关键元素,②为关键元素列表。
 
关键元素中慢请求快照详情,当关键元素中请求符合快照捕捉规则时,快照被采集。您可以通过快照中获取信息,排查问题。
基础信息:您可以通过基础信息知道该请求属于哪个关键元素,具体的请求URL,以及请求捕捉快照的时间。
指标详情:该请求的重要指标数据,通过指标可以发现拖累环节。
详细信息:该次请求用户访问的详细信息,通过信息排查具体问题。

性能统计
前端Web应用使用的真实用户遍布世界各地,用户使用环境千差万别。Browser平台通过地域、域名、前端、运营商和操作系统五个维度,客户端类型:全部、移动端、微信端、PC端,以及性能指标的切换:整体性能、页面渲染等页面性能重要指标深层分析前端页面的性能瓶颈,追踪受损页面。
 
地域维度
地域维度具体分为国家、省份两级。在地域的维度下,同时可以切换指标查看地域的性能分布以及各项指标的性能趋势图。

页面功能如下:
 
①      维度筛选:地域、域名、前端、运营商和操作系统五个维度切换选择。
 
②      客户端筛选项:全部、移动端、微信端、PC端的筛选。
 
③      按性能排序或按吞吐率排序
 
④      指标选择:切换选择页面性能重要指标,如整体性能、页面渲染等
 
⑤      页面分析按键:通过维度、客户端、指标等筛选项筛选出受损页面,点击“页面分析”按钮进入受损分析页面,深层剖析页面性能瓶颈。受损页面如图4-28所示。
 
⑥      图表切换:地域性能可以从地图上查看,同时也可以切换成表格进行查看。点击表格中的国家或省份可以进行筛选,页面如图4-27所示。
 
⑦      地图:地图分为两层,第一层为国家,第二层为省份。地图用颜色的深浅表示各地区的性能指标差异(颜色越深表示性能指标越差,相反,颜色越浅表示性能指标越好,灰色表示该地区没有用户访问数据)。
 
⑧      下载:点击“下载”按键,可以将地图和地域列表下载到本地,您可以到本地进行查看。
 
⑨      Apdex性能分布:Apdex分布图与趋势图为您选择的地域、指标、客户端等条件筛选出的页面平均性能分布。根据您筛选条件的变化,Apdex分布趋势图也会跟着改变。
 
⑩      设备类型访问量趋势:根据您选择的设备访问类型,显示出访问量随时间的变化趋势。
 
⑪      性能分解堆叠图:根据您选择的性能指标,平台将该指标拆分为几个过程指标,方便用户排查拖累环节。
 
⑫      TOP5性能趋势:通过您选择的地域以及性能指标,用时间趋势图表示该指标性能最差的五个地域,图中每根曲线代表一个地域。
 
⑬      TOP5 PV趋势:选择时间范围内排出访问量前五的地域,如果选择的为二级地域,趋势图中只有选中的地域趋势。

域名维度
 在域名的维度下,可以切换指标查看域名的性能分布以及各项指标的性能趋势图。
 
前端维度
前端维度具体分为前端、版本两级。在前端的维度下,可以切换指标查看前端的性能分布以及各项指标的性能趋势图。
 
运营商维度
运营商维度具体分为运营商、地域运营商两级。在运营商的维度下,可以切换指标查看运营商的性能分布以及各项指标的性能趋势图。
 
操作系统维度
具体分为操作系统、操作系统版本两级。在操作系统的维度下,可以切换指标查看操作系统的性能分布以及各项指标的性能趋势图。

错误分析
Web应用中经常出现Javascript错误和AJAX错误,由于错误原因导致业务受损问题可以通过错误分析模块解决。Browser平台采集用户端脚本错误详情,通过查看错误堆栈信息、响应头等分析错误原因,分析受损页面。
 
JS错误
JS模块可以通过错误类型、前端版本、页面等维度排查受影响页面,解决页面错误问题。
 
AJAX错误
AJAX错误模块可以通过错误类型、前端版本、页面等维度排查受影响页面,解决页面错误问题。