17370845950

答案：前端监控需构建完整异常捕获与上报链路。通过 window.onerror 和 unhandledrejection 事件分别捕获运行时错误和 Promise 异常，结合 error 事件监听资源加载失败；采集包含错误详情、用户环境、上下文信息的结构化日志，利用立即上报、批量上报及 sendBeacon 确保传输；设置去重、限流与抽样策略控制频率；建立分级告警机制，按阈值触发多渠道通知，并结合行为日志分析根因；可选用 Sentry、LogRocket 或自研 ELK 方案实现可视化与存储，提升系统稳定性与问题可见性。

前端监控和日志分析在现代 Web 应用中越来越重要，尤其是 JavaScript 层的异常捕获与行为追踪。通过合理的告警机制和日志收集，可以快速定位线上问题，提升用户体验和系统稳定性。

JavaScript 异常监控

前端最常见的问题是运行时错误，比如语法错误、引用未定义变量、网络请求失败等。通过全局监听可以捕获大部分异常。

1. 捕获全局错误

• 能捕获同步错误、资源加载失败（需配合 crossorigin）
• 无法捕获 Promise 异常或异步错误（如 setTimeout 内部报错）

2. 捕获 Promise 异常

• 避免因未 catch 的 Promise 导致静默失败
• 建议记录 reject 原因和堆栈（如果可用）

3. 资源加载错误

• 监听 error 事件，注意跨域资源需设置 CORS 头部
• 可上报资源 URL、类型、页面位置等信息

日志采集与上报策略

采集到异常后，需要高效、低干扰地上报到服务端。

1. 上报时机

• 立即上报：适用于严重错误，确保不丢失
• 批量上报：减少请求次数，适合非关键日志
• 页面卸载前上报：使用 navigator.sendBeacon 确保数据发送

2. 日志内容结构化

• 错误类型、消息、堆栈（stack trace）
• 用户环境：浏览器、操作系统、设备类型
• 上下文：URL、用户ID（匿名）、时间戳
• 自定义标记：如页面模块、操作流程ID

3. 控制上报频率

• 防止刷屏上报，对相同错误做去重或限流
• 按用户抽样上报，降低服务器压力

告警机制设计

仅仅收集日志不够，需要建立有效的告警体系。

1. 错误分类分级

• 分为致命错误、警告、信息等级别
• 根据影响面设定阈值，如“5分钟内同类错误超100次”触发告警

2. 集成通知渠道

• 通过邮件、企业微信、钉钉、Slack 等推送告警
• 严重错误可接入电话/短信提醒

3. 关联上下文分析

• 结合用户行为日志、接口调用状态，辅助定位根因
• 支持错误聚类，识别是否为批量问题

常用工具与方案

可以直接使用成熟方案降低开发成本。

• Sentry：开源错误监控平台，支持 JS、React、Vue 等，提供堆栈还原和版本映射
• LogRocket：录制用户会话，结合控制台日志和 DOM 变化回溯问题
• 自研 + ELK：使用 Kibana 展示日志，Elasticsearch 存储，Logstash 处理
• 性能监控：结合 Performance API 上报 FP、FCP、LCP 等指标

基本上就这些。关键是建立从捕获、上报、存储到告警的完整链路，让前端问题不再“看不见”。