【背景】 我做了 3 年前端（CRA → Next.js 14 App Router），团队从 8 人扩到 20 人，前端应用 6 个（H5 + 小程序 + 一个 Electron 壳）。后端有 SkyWalking + Jaeger + Grafana 全套 APM，前端呢？说实话，每次线上出"白屏""渲染卡死""交互无响应"，第一反应还是"让用户截图发群里"——这本身就是可观测性的缺失。
去年 Q3 一次发布后，白屏率从 0.02% 飙到 0.35%，持续 40 分钟。排查路径：用户截图 → 复现 → 发现是 React 18 concurrent 渲染下一个 useSyncExternalStore 的 tearing 问题 → 回滚。全程 40 分钟里我们不知道影响了多少用户、哪些页面、哪个地域。这个体验我觉得不该是 2025 年的常态。
【常见分歧 / 几种做法】 我收集了几个团队的做法，发现分歧非常大：
1. "够不够用"的底线分歧
- A 方案（轻量派）：window.onerror + 全局 ErrorBoundary + 少量性能埋点（LCP / FCP / TBT），上报到自建日志服务。零第三方依赖，年成本 ≈ 0。
- B 方案（Sentry 派）：全量接 Sentry（或自研 RUM SDK），源码 map 还原 + 会话回放 + 性能追踪，DAU 50w 级别年费大约 3–8 万。
- C 方案（自研派）：基于 PerformanceObserver + Web Vitals API + 自定义 ErrorBoundary 自建，上报到 ClickHouse，前端团队自己维护 SDK。
2. "前端崩溃"的责任边界分歧
- 后端 5xx / 超时 → 前端渲染失败 → 算前端 bug 还是后端 bug？
- 我见过两种 SLO 写法：
- 合并 SLO：「用户看到可用页面」的 P99 < 2s，前端后端共担；
- 拆分 SLO：前端「JS 执行无异常」P99 < 500ms + 后端「API 200 响应」P99 < 300ms，各自独立。
- 合并 SLO 的问题：后端一次慢查询，前端所有优化白费，但 SLO 是前端背的。拆分 SLO 的问题：用户不关心"谁的锅"，只关心"能不能用"。
3. "采样率"分歧
- 全量上报：数据完整但带宽 + 序列化开销大，低端机（尤其 H5 在 Android 8 以下）可能因为上报本身造成掉帧。
- 5% 采样：成本低，但白屏率 0.02% 的事故可能 100 个样本里只有 1–2 个，统计置信度不够。
- 我的做法：P0（崩溃/白屏）全量 + P1（交互卡顿）10% 采样 + P2（性能微调）离线分析。但说实话，这个分级我自己也拿不准，没有行业基准。
4. "Core Web Vitals 是 KPI 还是参考"分歧
- 有些团队把 LCP < 2.5s / INP < 200ms / CLS < 0.1 直接写进 OKR；
- 有些团队认为"用户说卡"才是真相，CWV 只是代理指标；
- 我的体验：CWV 达标但用户投诉"卡"的情况确实存在（典型场景：列表页 LCP 1.8s 达标，但滚动到第 20 屏时 INP 飙到 400ms，CWV 只记首屏）。
【我的倾向】
- 分级上报：P0 全量（崩溃、白屏、unhandledrejection），P1 采样（长任务 > 200ms、内存泄漏告警），P2 离线（Lighthouse CI、bundle 分析）。
- 责任边界：前端必须有"后端不可用时的兜底 UI"（骨架屏 + 重试按钮），但 SLO 归属应该按"谁控制延迟"来分，而不是按"用户看到谁"来分。
- Sentry 值不值：3 个以下前端应用、DAU < 10w，自建 SDK + ClickHouse 够用；5 个以上应用或多端（H5 / 小程序 / 桌面），Sentry 的"会话回放 + 跨端统一 trace"省下来的开发时间 > 年费。
- 白屏率 0.1%：在我的标准里，0.05% 以下是"正常波动"，0.1% 是"需要 investigate 的 warning"，0.3% 是"事故"。但这个阈值应该和业务的 DAU 挂钩——DAU 10w 和 DAU 1000w 的 0.1% 是完全不同的量级。
【想听大家】
- 你们团队的前端可观测性投入是什么量级？（人天 / 年费 / 自建 vs 第三方）
- 白屏率 0.1% 在你们团队算"及格"还是"事故"？阈值怎么定的？
- 前端和后端的 SLO 是合并定还是分开定？合并的话，后端慢查询导致前端超时，SLO 扣分扣谁？
- 你们有没有遇到过"前端可观测性 SDK 本身导致性能问题"的情况？（比如 Sentry SDK 的 bundle 体积、序列化开销在低端机的影响）
- Core Web Vitals 在你们团队是 OKR 指标还是参考指标？有没有"CWV 达标但用户投诉卡"的案例？
欢迎贴你们的具体配置（SDK 选型、采样策略、上报字段、告警规则），具体 > 抽象。
0赞
0收藏
0楼层