{"name":"前端监控","id":"软件工程-架构-系统设计-前端监控","content":"# 前端监控体系设计\n\n## 一、前端监控的本质\n\n### 1. 核心命题\n\n前端监控的本质并不是“收集日志”，而是：\n\n> 构建面向用户体验与系统稳定性的可观测性体系\n\n其目标可以抽象为三层价值：\n\n* **体验可观测**：页面性能是否健康\n* **问题可追踪**：异常是否可定位\n* **行为可分析**：用户行为是否可理解\n\n---\n\n### 2. 前端监控的三个基本维度\n\n任何前端监控系统，本质上都围绕三类数据展开：\n\n| 类型          | 本质     | 目的     |\n| ----------- | ------ | ------ |\n| Metrics（指标） | 可量化的数值 | 衡量体验质量 |\n| Logs（日志）    | 事件记录   | 还原问题现场 |\n| Traces（链路）  | 过程追踪   | 定位因果关系 |\n\n---\n\n### 3. 监控体系的核心能力\n\n一个完整的前端监控体系，需要同时具备：\n\n* 采集能力\n* 上报能力\n* 分析能力\n* 归因能力\n* 告警能力\n\n这些能力共同构成“前端可观测性闭环”。\n\n---\n\n# 二、前端监控的体系架构\n\n## 1. 整体分层模型\n\n从系统设计角度，前端监控可抽象为四层结构：\n\n```\n┌──────────────────────────┐\n│        展示分析层         │\n│  Dashboard / 告警 / 报表  │\n└──────────▲───────────────┘\n           │\n┌──────────┴───────────────┐\n│        数据处理层         │\n│  聚合 / 清洗 / 归因 / 存储│\n└──────────▲───────────────┘\n           │\n┌──────────┴───────────────┐\n│        上报网关层         │\n│  接收 / 限流 / 缓存       │\n└──────────▲───────────────┘\n           │\n┌──────────┴───────────────┐\n│        SDK采集层          │\n│  浏览器端数据收集         │\n└──────────────────────────┘\n```\n\n---\n\n## 2. 核心数据流\n\n监控数据的生命周期可以概括为：\n\n```\n事件发生 → SDK采集 → 本地处理 → 上报 → 聚合分析 → 展示告警\n```\n\n这是前端监控系统的“第一性原理流程”。\n\n---\n\n# 三、数据模型设计\n\n## 1. 基础数据模型\n\n所有前端监控日志，都可以抽象为一个统一的基础结构：\n\n```\n基础信息 + 环境信息 + 业务信息 + 扩展信息\n```\n\n### （1）全局基础字段\n\n| 字段        | 作用      |\n| --------- | ------- |\n| traceId   | 全链路唯一标识 |\n| type      | 日志类型    |\n| createAt  | 日志产生时间  |\n| updatedAt | 日志更新时间  |\n| level     | 日志级别    |\n\n---\n\n### （2）环境信息\n\n| 分类    | 字段                    |\n| ----- | --------------------- |\n| 浏览器信息 | userAgent、browserType |\n| 页面信息  | url、pageId、title      |\n| 用户信息  | userId、fingerprintId  |\n| 设备信息  | clientType            |\n| 业务信息  | appId、appName         |\n\n这些字段解决的是：\n\n> “这条日志发生在什么环境中”\n\n---\n\n## 2. 事件级数据模型\n\n在基础模型之上，不同类型事件拥有各自的专属字段：\n\n### （1）异常日志\n\n| 字段      | 含义     |\n| ------- | ------ |\n| message | 错误信息   |\n| stack   | 调用栈    |\n| dataId  | 问题唯一ID |\n| type    | 异常类型   |\n\n---\n\n### （2）网络请求日志\n\n| 字段          | 含义     |\n| ----------- | ------ |\n| url         | 接口地址   |\n| method      | 请求方法   |\n| status      | HTTP状态 |\n| elapsedTime | 耗时     |\n| body        | 请求参数   |\n\n---\n\n### （3）性能指标日志\n\n| 字段     | 含义   |\n| ------ | ---- |\n| name   | 指标名称 |\n| value  | 当前值  |\n| delta  | 差值   |\n| rating | 等级   |\n\n---\n\n### （4）用户行为日志\n\n| 字段       | 含义   |\n| -------- | ---- |\n| name     | 行为名称 |\n| type     | 行为类型 |\n| category | 行为分类 |\n| time     | 发生时间 |\n\n---\n\n# 四、指标体系设计\n\n## 1. 性能指标（WebVitals）\n\n前端性能监控的核心是围绕用户体验的量化指标。\n\n### 核心体验指标\n\n| 指标   | 关注点   |\n| ---- | ----- |\n| LCP  | 加载速度  |\n| FID  | 交互响应  |\n| CLS  | 视觉稳定  |\n| INP  | 综合交互  |\n| FCP  | 首次渲染  |\n| TTI  | 可交互时间 |\n| TBT  | 主线程阻塞 |\n| TTFB | 网络响应  |\n\n---\n\n### 指标分级标准\n\n| 指标   | 优秀     | 需要改进       | 较差      |\n| ---- | ------ | ---------- | ------- |\n| LCP  | <2.5s  | 2.5s~4s    | >4s     |\n| FID  | <100ms | 100~300ms  | >300ms  |\n| CLS  | <0.1   | 0.1~0.25   | >0.25   |\n| FCP  | <1.8s  | 1.8~3s     | >3s     |\n| INP  | <200ms | 200~500ms  | >500ms  |\n| TTFB | <800ms | 800~1800ms | >1800ms |\n\n---\n\n### 时间线关系\n\n```\nTTFB → FP → FCP → LCP\n```\n\n这条时间线反映了：\n\n> 页面从“开始加载”到“核心内容可见”的完整过程\n\n---\n\n# 五、采集层设计\n\n采集层是监控体系的入口，其本质是：\n\n> 将浏览器运行时的各种信号转化为结构化事件\n\n---\n\n## 1. 异常采集\n\n### （1）接口异常监听\n\n通过拦截网络请求，实现对：\n\n* HTTP 错误码\n* 请求超时\n* 请求中断\n\n的统一监控。\n\n---\n\n### （2）脚本与资源异常\n\n通过全局异常捕获：\n\n* `window.onerror`\n* `unhandledrejection`\n* 框架级 errorHandler\n\n实现：\n\n* JS 运行异常\n* 资源加载异常\n\n的统一感知。\n\n---\n\n## 2. 用户行为采集\n\n通过全局事件监听，采集用户行为轨迹：\n\n* 鼠标点击\n* 键盘输入\n* 触摸事件\n* 路由跳转\n\n形成：\n\n> 行为 breadcrumbs（行为面包屑）\n\n用于问题归因。\n\n---\n\n# 六、上报层设计\n\n## 1. 上报方式\n\n常见三种方案：\n\n| 方式         | 特点     |\n| ---------- | ------ |\n| fetch/xhr  | 通用可靠   |\n| Beacon API | 页面卸载安全 |\n| 图片打点       | 最轻量    |\n\n不同场景选择不同策略：\n\n* 常规日志：fetch/xhr\n* 页面关闭：beacon\n* 兼容降级：图片打点\n\n---\n\n## 2. 工程策略\n\n在上报层通常需要：\n\n* 合并上报\n* 节流限流\n* 本地缓存\n* 离线重试\n\n这些策略决定了系统的稳定性。\n\n---\n\n# 七、治理与分析\n\n监控的终极目标不是“数据收集”，而是“问题治理”。\n\n## 1. 核心分析场景\n\n* 性能趋势分析\n* 异常聚合归因\n* 用户行为路径\n* 版本对比\n\n---\n\n## 2. 告警策略\n\n* 阈值告警\n* 同比告警\n* 环比告警\n* 错误突增告警\n\n---\n\n# 八、工程实践原则\n\n一个成熟的前端监控系统应遵循：\n\n1. 错误全量，性能抽样\n2. 尽量不影响业务\n3. 可降级、可兜底\n4. 数据可回溯\n5. 指标可解释\n\n---\n\n# 九、总结\n\n## 前端监控的本质公式\n\n```\n前端监控 = 体验可观测 + 问题可追踪 + 行为可分析\n```\n\n## 核心闭环\n\n```\n采集 → 上报 → 分析 → 告警 → 治理 → 优化\n```\n\n---\n\n通过以上体系化设计，前端监控从：\n\n> “日志收集工具”\n\n升级为：\n\n> “面向用户体验的可观测平台”\n\n## 关联内容（自动生成）\n\n- [/软件工程/架构/系统设计/可观测性.md](/软件工程/架构/系统设计/可观测性.md) 前端监控是系统可观测性的重要组成部分，与日志、指标、追踪等核心技术密切相关\n- [/中间件/浏览器/前端性能优化.md](/中间件/浏览器/前端性能优化.md) 前端监控与性能优化相辅相成，监控数据为性能优化提供依据，性能指标是监控体系的核心内容\n- [/软件工程/架构/Web前端/Web前端.md](/软件工程/架构/Web前端/Web前端.md) 前端监控是前端可观测性体系的重要实现，与前端整体架构和开发实践密切相关\n- [/软件工程/架构/系统设计/监控系统设计.md](/软件工程/架构/系统设计/监控系统设计.md) 前端监控是监控系统的一个专门领域，遵循通用的监控系统设计原则和架构模式\n- [/数据技术/数据分析.md](/数据技术/数据分析.md) 前端监控产生的数据需要通过数据分析方法进行处理和洞察，指标体系与数据分析的维度建模相关\n- [/软件工程/架构/Web前端/前端工程化.md](/软件工程/架构/Web前端/前端工程化.md) 前端监控是前端工程化治理体系的重要组成部分，涉及质量、性能、可观测性等方面\n- [/数据技术/数据治理.md](/数据技术/数据治理.md) 前端监控数据的管理和使用需要遵循数据治理的原则，特别是指标体系的标准化\n- [/软件工程/架构/系统设计/日志.md](/软件工程/架构/系统设计/日志.md) 前端监控中的异常日志、行为日志等与系统日志的设计和管理原则相通\n- [/软件工程/微服务/微服务.md](/软件工程/微服务/微服务.md) 前端监控与后端微服务的监控体系需要打通，形成端到端的可观测性\n","metadata":"tags: ['前端', '性能', '数据技术']","hasMoreCommit":false,"totalCommits":1,"commitList":[{"date":"2026-06-13T10:28:21+08:00","author":"MY","message":"docs(JAVA): 更新JUC并发工具类文档完善问题空间和构建分层理论","hash":"adf7ede8730e8082e4e5a13d5c6926883cf4ae26"}],"createTime":"2026-06-13T10:28:21+08:00"}