You need to enable JavaScript to run this app.
导航
新H5监控
最近更新时间:2024.07.04 10:20:41首次发布时间:2024.01.10 14:42:16

本文介绍下新H5监控中JS总览和管理Sourcemap。新H5监控继承了WebPro SDK的采集能力,并且在Web监控的基础功能上新增了白屏监控、页面打分等新功能,在采集能力和产品功能使用上有很大的提升,帮助您更好的进行页面问题的定位和分析。

JS总览

JS总览展示了应用中发生的错误相关信息,并可通过浏览器、设备、系统、地区、用户和访问信息以及错误状态等属性进行过滤。通过此功能,您可以更好地理解和观测发生在运行时的异常并且有效的进行处理。

JS错误趋势图

JS错误趋势展示了筛选条件下JS错误的指标趋势图。指标数据右侧可以查看与上一个周期相比JS错误的数据的变化。
图片
指标说明:

指标

说明

错误数

筛选条件下的JS错误数

影响用户数

筛选条件下的JS错误影响的用户数(UV)

错误率

筛选条件下发生JS错误数/筛选条件下的总launch数

影响用户率

筛选条件下发生JS错误的去重UV数/筛选条件下的去重总UV数

错误及页面列表

错误类型

图示

JS错误列表

图片

  • 错误内容:根据错误类型聚合后的JS错误。单击跳转到JS错误详情页面。
  • 起止时间:JS错误的开始时间和停止时间。
  • 错误数:发生JS错误的次数。鼠标悬停在趋势图中,可以查看JS错误发生的具体时间以及对应的错误数。
  • 影响用户数:JS错误影响的用户数。鼠标悬停在趋势图中,可以查看JS错误影响用户数的具体时间以及对应的影响用户数。
  • 处理人:配置该issue的处理人。
  • issue状态:处理人根据处理进度调整issue状态。包括未修复修复中已修复已忽略重复出现

页面列表

图片

  • PID:发生JS错误的页面ID。
  • 错误数:发生JS错误的次数。鼠标悬停在趋势图中,可以查看JS错误发生的具体时间以及对应的错误数。
  • 影响用户数:JS错误影响的用户数。鼠标悬停在趋势图中,可以查看JS错误影响用户数的具体时间以及对应的影响用户数。

错误信息列表

图片

  • 错误内容:聚合后的JS错误内容。
  • 错误数:发生JS错误的次数。鼠标悬停在趋势图中,可以查看JS错误发生的具体时间以及对应的错误数。
  • 影响用户数:JS错误影响的用户数。鼠标悬停在趋势图中,可以查看JS错误影响用户数的具体时间以及对应的影响用户数。

JS错误详情

摘要

摘要中展示了JS错误类型、JS错误文件、JS错误内容,还包括issue负责人、issue状态以及聚合的错误数和影响用户数。
图片

错误堆栈

图片

  • original:原始代码。
  • minified:打包后的代码。
  • unspecified:支持选择版本。unspecified代表版本号为空。
  • 重新解析:数据上报的过程中平台会对堆栈进行反解,如果反解失败,单击重新解析让平台重新对堆栈进行反解。
    反解失败一般是因为没有上传sourcemap,或者上传了一个错误的sourcemap。您可以单击上传按钮,重新上传一个正确的sourcemap文件。
  • in:函数名。
  • line:代码所在行数。

起止信息

起止时信息展示了最早出现JS错误的PID、对应的时间和版本发布,以及最晚出现JS错误的PID、对应的时间和版本发布。
图片

趋势

趋势展示了该类聚合后的JS错误的指标的趋势图,包括错误数、影响用户数、错误率和影响用户率。

版本分布

版本分布展示了该类聚合后的JS错误所分布的版本。

页面分布

页面分布展示了该类聚合后的JS错误所分布的页面。

管理Sourcemap

SourceMap是存储源代码和编译代码对应位置映射的信息文件,可以将经过压缩、混淆、合并的产物代码还原回未打包的原始形态,帮助您在生产环境中精准定位问题发生的行列位置。

手动上传sourcemap

  1. 登录应用性能监控全链路版控制台

  2. 单击目标应用下的App端监控

  3. 在控制台左上角选择新H5监控 > 管理Sourcemap

  4. sourcemap列表区域,单击上传sourcemap
    图片

  5. 上传sourcemap文件页面,完成以下配置,然后单击确定
    图片
    配置项说明:

    配置项

    说明

    js sourcemap文件名

    自定义sourcemap文件名,用于表示该文件。

    上传sourcemap文件

    单击或拖拽文件即可上传。

    Release

    选择或输入对应版本。

  6. 上传成功后,在sourcemap列表中可以查看该文件。
    图片

请求总览

请求总览中可以查看全部请求和错误请求的趋势图和列表,帮助您更快定位请求错误与慢请求相关的问题。

全部请求趋势图

全部请求趋势图中展示了筛选条件下请求指标的趋势图。指标数据的右侧可以查看与上一周期相比请求数据的变化。
图片
指标说明:

指标

说明

请求数

筛选条件下的请求数

用户数

筛选条件下的去重设备数

慢请求数

筛选条件下的慢请求数

慢请求率

筛选条件下的慢请求数/筛选条件下的总请求数

慢请求影响用户数

筛选条件下的慢请求去重设备数

慢请求影响用户率

筛选条件下的慢请求去重设备数/筛选条件下的总请求去重设备数

慢请求列表

慢请求列表中默认按照慢请求的请求数排序展示Top10的列表数据,可以查看不同请求URL下的耗时和慢请求情况。慢请求阈值默认为3000毫秒,如果需要修改可以在平台参数配置为当前站点设置慢请求阈值。
图片

  • 请求数:支持按照慢请求的其他指标进行排序,支持的指标有慢请求率、慢请求数、请求时间avg、请求时间25分位、请求时间50分位、请求时间70分位、请求时间90分位、请求时间99分位。
  • 列表中可以查看慢请求的请求路径,还有请求时间、慢请求率和影响用户率指标数据和趋势图。
  • 请求时间:默认查看请求时间的平均值。您也可以查看请求时间的25分位、50分位、70分位、90分位、95分位、99分位。

错误请求趋势图

错误请求趋势展示了筛选条件下错误请求的趋势图。指标的右侧可以查看与上一周期相比错误请求数据的变化。
图片
指标说明:

指标

说明

请求错误数

筛选条件下状态码非200的请求数

错误率

筛选条件下状态码非200的请求数/筛选条件下总请求数

请求错误影响用户数

筛选条件下状态码非200的请求去重设备数

影响用户率

筛选条件下状态码非200的请求去重设备数/筛选条件下总请求去重设备数

错误请求列表

错误请求列表可以查看同一类错误请求的聚合后的数据,包括请求路径、异常状态码分布、错误数、影响用户数、处理人和issue状态。
图片

站点性能总览

性能监控页面包括PID聚合和指标总览两大模块,可以辅助您更快的发现性能问题,作为页面性能优化的依据。

PID聚合

指标达标率

平台参数配置为当前站点设置各个性能指标的达标率后,就可以看到当前达标的PID个数。
达标率计算方式:筛选时间内符合基准线要求的PID数/总PID数。
图片

  • 页面默认展示FP达标率、FCP达标率、LCP达标率、FMP达标率、TTI达标率和LOAD达标率。
  • 默认的性能指标和自定义的性能指标,支持在平台参数配置页面配置性能指标基准线。

性能最差页面

性能最差页面默认根据avg(平均值)按照FCP排序,展示整个站点所有页面里性能最差Top5的页面,帮助您了解性能问题,进行性能优化。
图片

  • avg:默认根据avg(平均值)排序,支持按照分位值排序,包括pct50、pct75、pct90、pct95。
  • FCP:默认按照FCP排序,支持按照其他指标排序,包括FP、FMP、TTI、LOAD、LCP。
  • 列表里是整站点所有页面里根据筛选条件筛选出来的性能最差的TOP 5页面。如果根据FP升序排列,可以查看性能最差的TOP 5页面中,FP最长的页面。
  • 性能最差页面以PID为聚合维度,展示当前样本量阈值下所选指标性能最差的PID。
  • 展开PID信息,可以查看该PID的多指标性能趋势图。
  • 单击PID内容,进入页面详情查看该页面各指标的趋势图、分布和跳出率情况。

页面耗时区间分布

页面耗时区间分布可以查看所选页面指标耗时的分布情况。
图片

  • 拖动下方的滑动条,可以自定义耗时的显示范围。同时可以在右上角查看所包含的耗时范围内上报占比的情况。
  • 悬停在柱体,可以查看不同区间段的柱体的耗时范围、上报量和占比。

性能优化/劣化Top5

性能优劣化页面以PID为聚合维度,可以查看当前所选时间性能优化/劣化最严重的PID信息。
图片

  • 趋势图中把当前所选范围一分为二进行对比。例如,图中当前的时间范围是2天,所以demo页面的FP的均值在后1天比前1天少1398ms。
  • 单击相应PID,进入页面详情查看该页面的性能总览。

指标总览

指标总览展示了整站点筛选条件下默认性能指标的总览详情,包括趋势图、分布和跳出率,作为性能优化的数据依据。如果想修改各个指标的基准线,可以在平台参数配置页面修改。根据基准线设置用不同颜色展示不同的性能指标。蓝色:符合预期,黄色:略低于预期,红色:严重低于预期。
趋势图中,左侧展示了筛选条件下该PID的默认指标与基准值的关系,右侧展示了筛选条件范围内指标的趋势图。
图片
耗时分布中,左侧展示了筛选条件下该PID默认指标与基准值的关系,右侧展示了筛选时间范围内指标的耗时分布。
图片
跳出率中,左侧展示了筛选条件下该PID默认指标与基准值的关系,右侧展示了筛选时间范围内指标的耗时分布。
图片
指标计算方式:

指标

计算方式

FP跳出率

在FP上报前跳出页面的会话数 / 总会话数

FCP跳出率

在FCP上报前跳出页面的会话数 / 总会话数

LCP跳出率

在LCP上报前跳出页面的会话数 / 总会话数

FMP跳出率

在FMP上报前跳出页面的会话数 / 总会话数

CLS跳出率

在CLS上报前跳出页面的会话数 / 总会话数

LOAD跳出率

在LOAD上报前跳出页面的会话数 / 总会话数

TTI跳出率

在TTI上报前跳出页面的会话数 / 总会话数

页面列表

页面列表提供了以页面为维度的页面错误、性能、请求等数据,可以依据具体页面的数据进行针对性分析。

数据概览

数据概览可以查看当前站点的总页面数、访问量最高的页面、JS错误数最高的页面、性能FP最差的页面。
图片

  • JS错误数最高的页面:单击URL可以跳转到JS错误页面详情,查看JS错误趋势图和错误列表。
  • 性能FP最差的页面:单击URL可以跳转到性能总览页面,查看页面指标的趋势图、分布和跳出率。

页面列表

页面列表从页面维度展示了页面的具体数据。
图片

  • PID:单击PID可以跳转到页面详情查看JS错误趋势图和错误列表。
  • 单击选框可以将该页面置顶。
  • 支持关键字搜索和自定义列。自定义列包括的指标类别如下:用户分析、JS错误、性能、请求数据。
  • 下载:支持下载前1000条数据,以.xlsx的文件格式展示列表中的数据。