11 · 前端监控

字数: 0 字 时长: 0 分钟

一句话

线上出问题用户不说你也得知道 → 采集 JS 错误、接口失败、性能指标、用户行为，上报到平台（Sentry、自研等）。

和你日常工作的关系

try/catch 接不住 Promise、资源加载失败、Vue 全局 errorHandler。监控是 体系化 的：采样、sourceMap 反解、告警。

常见采集类型

类型	手段
JS 运行时错误	window.onerror、unhandledrejection
资源错误	捕获阶段监听 error（img/script）
接口	封装 axios 拦截器上报 4xx/5xx、超时
性能	Performance API、web-vitals（LCP、FID、CLS）
行为	埋点 click、PV、路由变化

上报注意

• 批量 + 节流，别拖垮业务
• 脱敏：不带密码 token
• sourceMap 只放内网，线上用映射服务反解堆栈
• 采样率：高流量项目 1%～10%

演示

无 HTML demo。可在控制台手动 throw new Error('test') 看是否被你们平台收到。

面试 STAR

• 项目接入 xxx 监控；自定义上报业务错误码；配合发布版本号定位。
• 和「难点」关系：defer/DNS 优化的是指标，监控是 度量 优化效果。

课程资料

11.前端监控/11-技术讲解.md（含时间线类图示）