什么是WebPro端监控?--应用性能监控全链路版-火山引擎

文档中心

立即注册

导航

什么是WebPro端监控?

最近更新时间：2024.11.06 17:00:07首次发布时间：2022.03.16 11:20:26

WebPro端监控是APMPlus提供的前端监控产品，适于用浏览器页面以及移动App内H5等页面，监控站点性能体验，及时发现异常，帮助追踪和分析问题。

WebPro端监控说明

有前端监控需求的用户一般都有以下痛点：

站点稳定性问题
异常问题导致用户无法正常使用，会给企业带来直接损失。
站点性能问题
首屏性能和页面切换时的性能问题，页面加载和渲染的时间长、交互体验差、有卡帧或者卡顿的感觉、一次操作需要用户等待很久等，可能因体验差导致用户流失。
站点监控数据少
只有常规的监控数据，比如查看用户的浏览量、使用路径等。

WebPro端监控提供PV监控、性能监控、JS错误监控，白屏监控、请求监控、静态资源监控、用户行为监控等一系列监控能力。针对上述用户痛点，提供以下解决方案：

稳定性监控
- 支持白屏监控，监控线上的白屏异常，并且提供归因能力，帮助排查白屏发生的真正原因。
- 支持JS错误监控，采集更多堆栈、用户行为，精准聚合异常问题，帮助您快速感知、定位和处理问题。
- 支持请求异常监控，及时发现不稳定的请求，辅助监控服务端的稳定性。
- 支持资源异常监控，感知用户侧资源失败情况，帮助衡量资源的健康度以及CDN的稳定性。
性能监控
- 页面性能
  - 提供最全的性能指标，不止做指标的展示，还约定各个指标的基准线，能够快速衡量站点的性能满意度和达标率，以及每个页面的满意度。
  - 提供充足的信息帮助分析和定位性能问题、解决问题。
- 接口性能
  - 记录接口花费的时间，同时获取各个阶段的耗时。
- 资源加载性能
  - 监控的数据细粒度到各个阶段。
  - 根据监控数据，分析各个域名的下载速度，帮助优化针对域名的加速。
- 运行时性能
  - 提供LongTask监控和对应的消费
  - 支持用户行为监控，展示耗时的瀑布图和用户行为漏斗，了解行为相关的性能情况，帮助衡量用户在使用站点时的运行时性能体验，指导运行时性能优化。
分析类数据
- 提供常规的监控数据，帮助了解站点的用户数据，还原单一用户的操作路径，了解用户的操作转化。

优势

低成本接入
接入SDK时为非侵入式，添加初始化代码即可接入成功。
灵活的采样方式
支持所有上报字段的采样、各种操作符的过滤以及采样条件的与和或，以节省开支。
全面的场景使用
支持多页面应用、单页面应用、微前端应用以及跨端应用。
更易扩展的SDK
- 多样的生命周期，支持更灵活的改造。
- 支持多实例，同一个页面可以引入多个监控实例互不冲突。
- 监控项插件化，支持可插拔，按需集成，且支持用户自定义。
- 提供全局信息release、env、viewod等标识，比较不同版本间优劣化数据、不同环境数据隔离消费、一次页面生命周期的各类上报数据，为性能优化等排查提供依据。
更高性能
- SDK自身性能优化后，对页面性能的影响小到可以忽略不计。

监控能力概览

使用场景	功能入口	说明
排查JS错误	JS监控总览	观察具体错误详情，检查堆栈详情，观察版本分布和上报走势。跳转到数据探索观察，结合具体用户上下文、面包屑等定位问题触发方式。
	页面列表	通过错误率或错误数筛选出错误较严重的页面，进入页面详情观察该页面的JS指标。观察具体错误详情，检查堆栈详情，观察版本分布和上报走势。跳转到数据探索观察，结合具体用户上下文，面包屑等定位问题触发方式。
	配置JS错误报警	当报警发生时，通过智能归因分析出相关JS错误。观察错误详情，并可以跳转到数据探索观察具体上报。
	指标查询	结合指标查询想分析某些错误指标在某些情况下的宏观分布、走势、分组等信息，可以使用指标查询，产出看板并持续观测。
观察并改进页面性能	性能总览	选择站点性能指标，观测整站点目前的Web Vitals性能走势和基准线区分。观察当前各指标表现最差的页面和上个时间周期相比劣化程度最高页面。进入页面详情，观察页面具体指标。跳转到数据探索观察。
	页面列表	通过具体性能指标排序筛选出性能问题较严重的页面，进入页面详情观察该页面的性能指标。针对自己感兴趣的指标，跳转到数据探索观察，结合具体用户上下文、timing、longtask信息分析潜在性能瓶颈。
	性能报警	当报警发生时，通过智能归因分析出相关较差性能页面。单击归因链接可直接进入对应页面详情，观察具体指标，并可以跳转到数据探索观察具体上报。
检查请求错误数据	请求总览	查看请求趋势，查看站点请求监控的总体情况。全部请求页面，以排查页面请求整体情况和耗时为主。
检查请求错误数据	请求列表	请求列表以请求的域名+路径作为聚合维度。支持按照不同指标进行排序，选中相应的路径，可以查看当前路径的详细信息。趋势和分布，查看请求耗时Timing信息和耗时分布情况。
检查静态资源错误数据	静态资源总览	查看静态资源请求趋势，查看站点静态资源请求监控的总体情况。全部静态资源请求页面，以排查页面静态资源请求整体情况和耗时为主。
检查静态资源错误数据	静态资源列表	静态资源列表以请求的域名+路径作为聚合维度。支持按照不同指标进行排序，选中相应的路径，可以查看当前路径的详细信息。趋势和分布，查看静态资源请求耗时Timing信息和耗时分布情况。
页面某个状况下挂掉或者非常卡	数据探索	排查具体情况，根据用户的user_id或session_id查看用户的完整上报情况。
定义符合自己实际情况的性能指标	项目设置	针对自己感兴趣的指标配置指标基准线。
通过版本维度过滤数据	-	参照研发流程接入，完成版本和相应研发流程的配置和概念理解。在平台可以直接根据release和env过滤数据。

典型场景

排查JS错误

JS错误往往跟代码执行异常相关，需要及时关注。浏览器提供了异常捕获能力，但是仅捕获到异常是第一步，更重要的是如何迅速定位问题。Webpro端提供了堆栈解析和异常聚合功能，帮助您高效的处理问题并统计处理问题的进度。

观察并改进页面性能

页面性能的优化主要解决的问题是如何优化以用户为中心的关键指标。不同指标计算方式不同、关注的依赖性不同，所以优化的方式不同。只要清楚的了解指标的依赖项，着重优化这些依赖性即可。依赖项的数据逐渐变好，指标就能快速优化。
数据探索

基本概念

WebPro端监控中约定了部分术语，在文档和平台日常使用中频繁提到和使用。

概念	说明
aid	应用ID，是项目的全局唯一标识。在SDK和平台中保持一致，但和常见的APP_ID不同，它不需要去专门申请，只需要保证和现有项目的AID并不重合即可。
pid	您的应用中标志某一个具体页面的ID，在平台中可用于过滤，分组查看数据。同样由您在SDK相关配置中指定，默认情况下，SDK会将PID设置为当前页面的URL，对于活动页或者是带有不重复ID类型的页面，建议您在SDK中配置自己的聚合策略。
user_id	标志当前访问用户的ID，根据user_id计算UV、影响用户数等信息，可以由您自己指定。默认情况下，系统会为您自动生成uuid并存储在localstorage中。
session_id	标志一次会话的ID，"会话"指用户进入页面开始到关闭页面为止的整个阶段。通过session_id来计算整站点PV、错误率等数据，同时用它来进行上报的去重计数。您不需要自行指定 `session_id`，系统会为您生成。
view_id	标志一次页面访问的ID，"页面访问"在SPA等情况下，是session的子集，一次session可能会有多个页面访问，通过它来计算单PID PV，并串联相关的静态资源、请求和Longtask上报。
env	用以区分上报环境的字段，通过在SDK指定不同env，可以对数据进行环境分组，避免线上环境和线下环境的数据相互污染。
指标基准线	WebPro为收集到的所有指标都提供了基准线设置，如性能指标、错误指标等，通过设定good-base-line和bad-base-line可以快速定位您当前的站点、页面处于何种状况，并进一步进行针对性优化。

接入流程

API

WebPro端监控开放了报警、白屏监控、自定义监控等相关业务的OpenAPI接口，详情请参见API概览。