文档说明
本文为前端监控系统使用指引，不含采样率、权限等常规配置，及告警处理、监控上报 SDK 接入相关内容；不赘述系统基础功能，用户可实操熟悉，本指引聚焦最佳实践经验
1. 认识监控
监控通过上报数据，全面、准确反映应用系统业务 / 技术层面实际状态，核心组成为"上报数据"和"系统看板"
1.1 上报数据
上报数据是监控系统的核心，分为指标 Metrics和上下文 Context两类：
1. 指标 Metrics
描述应用系统某个状态的数据指标。常见类型有：
- 数量型 Count：PV/UV、点击数量、异常数量等
- 耗时型 Duration：LCP 性能指标、接口延时、扫描端到端耗时、用户停留时长、网速等
- 日志型 Log：JS Error、API、用户操作的报错信息等
2. 上下文 Context
补充指标的场景信息
- 有助于按特定维度信息进行查询或分组，对于定位排查问题来说、深入的数据分析必不可少
- 常见上下文数据：上报时间、操作用户、用户类型、用户站点名、站点类型、应用版本、地区、URL、页面所属子模块等
1.2 可视化界面
用于高效展示上报数据，核心功能为：
- 数据展示：以表格、时序图为核心，搭配饼图、柱状图、标签等多维度展示
- 数据操作：支持筛选、排序、多指标对比，筛选可缩小数据范围、定位目标指标，排序结合表格可快速查找某一维度的 Top N 数据
此外，各相关看板可组合为整体看板，实现相关信息的一站式查看
2. 重点功能使用技巧
下面分析一些内部使用的监控平台的使用技巧：应用性能监控平台、xxx 看板、业务指标监控平台
2.1 应用性能监控平台
"应用性能监控平台" 是前端监控的核心平台，提供了丰富的监控功能和数据展示能力。
功能 1：核心指标页的筛选项
"应用性能监控平台 " 各核心指标页均设通用筛选区 ，常规默认筛选项不赘述，重点说明应用版本筛选 和Entry Tag 筛选项的使用：
应用版本筛选
应用版本（app-version）为应用上报的 version 信息，用于区分不同应用版本；当前管理系统在发布前会自动将版本升级为版本日期，可通过该筛选项精准查看某一版本的指标情况。
Entry Tag 筛选项
Entry Tag 为系统自定义筛选项，由开发者自行定义并上报，例如管理系统中包含 email、station_type、station_name 及 url_hash 等；其中 url_hash 可筛选特定 URL 页面数据，填写规则为 key 设 url_hash、value 填目标 URL 中的 hash 值（如https://example.com/#/tracking，value 填 tracking）。
功能 2：JSError
JSError 是前端发现系统问题的核心信息，也是应用发布完成后首要观察跟踪的指标，核心包含问题列表页和问题详情页两大页面，同时有相关使用注意事项：
- 问题的列表页：包含筛选项及符合条件的问题列表，列表信息涵盖问题描述、对应文件定位（需上传对应 SourceMap 才可显示精准定位）、最近出现时间、首次出现时间（重点关注），以及筛选时间范围内的问题出现数量等
- 问题的详情页：可查看更深入的问题信息，包括基础错误信息、异常的上下文特征信息，以及错误栈信息（上传对应 SourceMap 后，会显示对应的具体文件和行数）等
注意：若已确认成功上传 SourceMap，但 "已还原" 区域无错误调用栈信息，可点击右侧的「还原」按钮触发 SourceMap 的还原操作，获取精准错误定位
功能 3：自定义指标
点分组归集了应用中各埋点上报的自定义指标，在指标详情页可查看耗时、数量的时序图、分布图等数据，同时支持添加多组指标进行对比分析
监控面板的看板还可通过自定义过滤、分组实现多维度查看，例如对比各地区的网速情况
需区分自定义指标 与 Entry Tag 筛选项的适用范围，二者作用域不同：前者仅对对应的埋点上报数据生效；后者添加后默认对后续所有应用性能监控的上报数据生效
2.2 xxx 看板
"xxx 看板 " 支持有权限开发者自行配置，灵活性和扩展性优于 "应用性能监控平台 "、"业务指标监控平台"，目前主要应用于两大场景：
- "团队内部监控系统"（基于 common/core 上报 SDK、ES 存储）：展示前端稳定性、作业耗时、交互操作、错误提示、行为指标等
- 嵌入到应用性能监控系统 中使用：应用性能监控系统内置 该看板，其配置灵活性和运行性能均优于平台原生自定义看板，适用于"对 API、性能、前端 resource 及上报至应用性能监控系统的自定义指标，有进一步分组、筛选需求"的场景
功能 1：前端 Dashboard 筛选项
所有前端 "xxx 看板" 均含通用时间范围选择，及 Region、Station Name 自定义筛选项，核心使用规则：
- Region：按配置可将数据在图表中集成展示（如各站点排行榜的 Table 表格数据），或独立生成各地区专属数据看板（如收货耗时的时序图）
- Station Name：筛选特定站点数据，支持站点名左匹配搜索
功能 2：看板（以时序图为例）
时序图是最常用的看板组件，功能集成度高，核心特性：
- 集成表格：展示指标汇总信息，可点击单独显示表格指标，或按住 Cmd/Shift 键多选指标
- 双坐标轴设计：左 / 右轴分别对应耗时、数量
- 左上角 icon：鼠标 hover 可查看帮助说明
功能 3：跳转到其他看板
支持在看板中添加链接，实现不同看板间的串联，便于多维度联动分析
2.3 业务指标监控平台
支持 PV/UV、特定事件、访问曝光等业务指标及相关上下文的上报
功能 1：指标的 PV、UV 展示页
- 指标页支持筛选、分组、PV/UV 切换等基础功能，操作方式与常规筛选项一致
- 该页面的导出功能为产品经理、BI 分析员常用能力，平台同时支持 BI 系统直接访问其数据
3. 监控方法
想要高效使用监控系统，需做好明确目的、确认指标、精准定位三大核心步骤，辅以科学的数据分析方法，并重视实操与数据思考，具体要求如下：
3.1 明确监控使用的目的
先确定监控的具体使用场景和核心目标，例如查询页面 PV/UV、巡检系统关键指标状态、排查定位异常问题根因等
3.2 明确目标指标和相关数据
梳理能支撑需求的指标与上下文数据，全面考虑问题的相关影响因素，不遗漏关联指标；例如排查某地区站点扫描操作端到端耗时过长问题，需同步分析接口延时、网络情况、用户操作情况等关联指标
3.3 有效定位到指标，特别是核心指标
通过缩小时间范围、过滤上下文数据、排序列表等方式，精准定位目标指标及关联指标，并开展整体分析；同时需注意两项要点：
- 筛选条件需合理设置，避免过滤掉有效数据
- 若平台数据展示功能不完善，除提需求优化外，可通过数据导出、自定义配置看板等方式实现分析目标
此外，掌握筛选、对比、分组、排除、漏斗分析、指标分析、线性回归等数据分析方法，能有效提升监控分析的效率与深度；多观察、多使用监控系统，多对数据进行思考，是实现监控高效运用的关键
4. 最佳实践
4.1 应用发布完成后 / 大促期间巡检的监控跟踪示例
发布后及大促期间巡检，需同时打开各关键监控页面、统一设置时间范围并行观察，着重跟踪JSError、前端静态资源、后端 API三类核心指标，具体操作如下：
1：前端问题（JSError）
- 筛选配置：进入问题列表页，时间范围设最近 5 / 30 分钟、开启 30s 实时更新，筛选当前新版本（应用版本号随发布更新）；列表设 50 条 / 页，减少翻页操作
- 重点排查：聚焦发布后首次出现的新问题，通过 git blame 工具定位代码改动方，必要时与改动方确认问题风险及影响范围。
- 高风险处理：若发现影响核心业务、或页面白屏 / 不可访问等高风险问题，立即与技术负责人协同定位；若评估无法短时间、低风险修复，通知 QA 执行回滚，降低业务影响。
2：前端静态资源加载（Resource）
- 筛选配置可参考 JSError 部分，先查看资源加载整体趋势，排查明显异常波动
- . 根据加载成功率、耗时信息 等相关指标，定位异常资源；可结合 URL 关键字、地区、站点 等信息精准筛选（如：涉及子应用拆分上线，可以用 URL 匹配子应用关键字 进行筛选；怀疑某个 JS 资源在某个地区、某个站点 的加载存在异常，则可以用地区、站点进行筛选）
- 点击异常资源详情页，查看加载趋势、缓存命中、分布等细节信息
3：后端 API 接口调用（API）
- 筛选配置可参考 JSError 部分，查看接口调用整体趋势，重点关注是否存在调用耗时骤升、HTTP / 逻辑成功率骤降、调用量明显下滑等异常
- 重点监控关键 API 的调用量变化，关键 API 需按实际业务维护，核心包含：核心业务操作、影响用户体验、高频调用、涉及重要业务流程等相关接口
4.2 排查问题示例：某地区的 LCP 指标规律性变慢
针对某地区 LCP 指标每日固定时段规律性飙高的问题，采用对比分析 + 关联指标验证的思路排查，具体步骤如下：
4.2.1 发现问题并初步假设
巡查 LCP 指标时发现某地区指标每日同时间段飙高，进入系统指标 - 页面加载 - web 核心指标，对比其他地区数据，确认仅该地区存在此规律；结合 LCP 影响因素，初步假设问题与该地区整体接口延时、网络情况相关。
4.2.2 验证假设并定位原因
- 进入"系统指标" =》 "API" 筛选该地区数据，发现 API 延时的小时变化规律与 LCP 高度趋同
- 因 API 延时与网速直接相关，进入"性能监控" =》 "点分组" =》 "Network-speed 查看详情"，筛选该地区后发现网速带宽变化也呈现相同规律
- 综合关联指标验证结果，初步推测该问题由当地网络运营商相关因素导致
4.3 观察扫描操作情况和规律示例
基于前端作业类 "xxx 看板 "，按 "地区汇总 =》目标地区时序 =》站点分组" 的层级逐步分析扫描操作，具体步骤及分析维度如下：
1：查看各地区汇总表格
展开 "扫描操作耗时 =》各地区汇总表格 "，查看近 24 小时数据；从上报数量分析各地区作业量分布 ，分析扫描耗时的平均值、分位值等指标 ，从操作间隔时间分析各地区操作频率与效率，初步掌握各地区作业整体表现
2：查看目标地区耗时的时序图
展开 "扫描操作耗时 =》目标地区 "；可清晰识别该地区的作业高峰时段 、作业效率变化趋势 ，以及指标异常的时间段
3：查看按站点分组的扫描操作耗时情况
展开 "扫描操作耗时 =》各站点排行榜 =》目标地区"；支持按平均耗时排序查看站点表现，也可通过station name 筛选特定站点，开展精细化分析
4.4 观察 BFF 监控
核心查看 BFF 层关键监控指标，包括接口调用情况、错误率、响应时间等
可参考 ：面单打印服务的监控检查事项
4.5 观察接入层日志
通过查看接入层日志，重点分析请求情况、错误信息等内容，排查接入层相关问题
可参考 ：SGW 接入层运维实战：配置查看 + 监控分析 + 日志排查
5. 关键要点总结
5.1 监控使用原则
- 明确目的：清楚使用监控系统的目的和场景
- 全面分析：考虑所有相关因素，不遗漏关键指标
- 有效定位：通过筛选、排序等功能快速定位目标数据
- 持续观察：多去观察、使用监控系统，对数据多进行思考
5.2 发布后巡检要点
- 前端问题（JSError）：重点关注首次出现的新问题
- 静态资源加载：观察资源加载成功率和耗时
- API 调用情况：关注关键 API 的成功率和耗时
- 高风险问题：及时定位并制定应对策略
5.3 问题排查思路
- 对比分析：通过对比不同地区、不同时间段的指标来定位问题
- 关联分析：分析相关指标之间的关联关系
- 趋势分析：观察指标的变化趋势，发现规律性问题
- 深入分析：通过筛选、分组等功能深入分析问题
6. 相关监控系统
- 应用性能监控平台：用于查看页面加载性能、JS 加载情况、API 调用情况、前端问题等
- xxx 看板：用于自定义配置监控看板，灵活展示各类指标
- 业务指标监控平台：用于查看业务指标如 PV / UV、特定事件等
- 团队内部监控系统：用于查看团队特定的监控指标
7. 注意事项
- 灵活使用筛选条件：排查过程需要根据实际情况灵活使用地区、时间、站点、URL 等筛选条件
- 多维度综合分析：不要仅依赖单一指标，需要结合多个维度的数据进行综合分析
- 关注趋势变化：建议按分钟粒度查看趋势，关注指标的变化趋势而非单点数据
- 及时更新配置：关键 API 列表、监控看板等需要根据业务变化及时更新
- 结合实际情况：排查指引仅提供思路，具体排查需要结合实际情况灵活调整