前端监控体系 (Web Monitoring)

1. 面试题

Q: 如果让你设计一套前端监控系统，你会包含哪些部分？如何实现错误捕获和性能监控？

构建稳健的前端应用，必须具备完备的监控能力。通常分为 错误监控、性能监控 和 行为埋点 三大模块。

JS 运行时错误：使用 window.onerror 或 window.addEventListener('error') 全局捕获。

window.addEventListener('error', (event) => {
    // 记得上报 stack 信息
    console.log('Runtime Error:', event.error);
});

Promise 未捕获异常： window.addEventListener('unhandledrejection')。这是很多新手容易忽略的点 (如 async 函数报错)。
资源加载错误 (img/script 404)：监听 error 事件 (捕获阶段 capture: true，因为资源错误不冒泡)。
框架错误：
- Vue: app.config.errorHandler。
- React: ErrorBoundary 组件 (componentDidCatch)。

SourceMap 还原：线上报错通常是压缩后的代码 (line: 1, column: 12345)。需要把 SourceMap 上传到监控平台 (如 Sentry)，后端利用 source-map 库还原出源码位置。

核心指标 (Web Vitals)：使用 Google 官方提供的 web-vitals 库上报。
- LCP (Largest Contentful Paint): < 2.5s (加载速度)。
- INP (Interaction to Next Paint): < 200ms (交互响应，替代 FID)。
- CLS (Cumulative Layout Shift): < 0.1 (视觉稳定性)。
Resource Timing： performance.getEntriesByType('resource')。监控静态资源加载耗时 (如 CDN 慢)。

PV (Page View) / UV (Unique Visitor)：在路由切换 (history.pushState 或 hashchange) 时上报。
点击埋点 (Click Tracking)：利用 全埋点 (Auto Track) 技术，监听 document.click，获取点击元素的 XPath 或 data-id。
可视化埋点：通过圈选元素生成配置，动态下发 SDK 采集规则。

ON THIS PAGE