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

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分位。

错误请求趋势图

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

指标说明：

错误请求列表

错误请求列表可以查看同一类错误请求的聚合后的数据，包括请求路径、异常状态码分布、错误数、影响用户数、处理人和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默认指标与基准值的关系，右侧展示了筛选时间范围内指标的耗时分布。

指标计算方式：

页面列表

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

数据概览

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

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

页面列表

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

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