CH15 · 觀測與錯誤追蹤（Frontend Observability）詳細 ROADMAP
計畫文件，不會被 Quartz 渲染。
回主 roadmap → frontend/ROADMAP.md
章節目標
前端 observability 跟後端不同——使用者是你的 runtime。使用者的瀏覽器是真實環境，你在 DevTools 看到的一切都是理想版本。建立從 RUM 到錯誤追蹤、從 Web Vitals 到 Session Replay、從 Log 策略到 alerting 的完整前端觀測能力。
🌱 基本介紹
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 01 | 前端 Observability 是什麼 | 01-what-is-frontend-observability | 🌱 | Logs / Metrics / Traces 三支柱在前端的意義、跟後端 observability 差在哪、使用者瀏覽器就是你的 runtime |
| 02 | Monitoring vs Observability | 02-monitoring-vs-observability | 🌱 | Known unknowns vs unknown unknowns、為什麼 APM 不夠、前端特有的觀測需求 |
❓ 為什麼需要
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 03 | 為什麼前端需要 Observability（DevTools 不夠嗎） | 03-why-frontend-observability | 🌱 | DevTools 只看自己的機器、使用者瀏覽器各異、bug 報告不完整、沒有 observability = 瞎猜、為什麼「你這邊是好的」不再是答案 |
| 04 | 為什麼 RUM ≠ Synthetic Monitoring | 04-why-rum-not-synthetic | 🌱 | Lighthouse 是 lab data、真實使用者體驗差很多、CWV 的 75 percentile 規則、RUM 無可替代 |
| 05 | 為什麼 Session Replay 值得投資（log 不夠嗎） | 05-why-session-replay | 🌱 | 文字 log 看不到 UX 問題、user 說「按鈕壞了」看 replay 才知道怎麼回事、privacy 考量、錄製時機選擇 |
🕰️ 演進
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 06 | 前端錯誤追蹤演進 | 06-error-tracking-evolution | 🌱 | window.onerror（1999）→ Raven.js → Sentry → LogRocket / Bugsnag / Datadog RUM |
| 07 | Web Vitals 演進 | 07-web-vitals-evolution | 🌱 | TTFB → FCP → LCP → CLS → FID → INP（2024 取代 FID），Google 指標演變 |
| 08 | Session Replay 興起 | 08-session-replay-rise | 🌱 | FullStory / Hotjar / LogRocket、rrweb 開源、privacy-first 方案興起 |
🧠 知識型
錯誤追蹤
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 09 | window.onerror / window.onunhandledrejection | 09-window-error-handlers | 🌱 | 全域錯誤捕捉、限制、CORS 錯誤顯示 “Script error.” |
| 10 | Error Boundary（React / Vue） | 10-error-boundary | 🌱 | 框架錯誤邊界、fallback UI、錯誤上報整合 |
| 11 | Source Map 上傳與反混淆 | 11-source-map-upload | 🌱 | production bundle 混淆後錯誤難 debug、Sentry CLI / Webpack plugin 上傳、Source Map 不該公開 |
| 12 | Error grouping 與去重 | 12-error-grouping | 🌱 | Sentry fingerprinting、相同 error 不同 context、noise reduction |
| 13 | Release tracking & regression detection | 13-release-tracking | 🌱 | 按 release 分組錯誤、新 release 引入的錯誤標記、rollback 決策 |
Web Vitals & RUM
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 14 | Core Web Vitals 2024+ | 14-cwv-2024 | 🌱 | LCP / CLS / INP（2024 取代 FID），每個的測量方式與改善策略 |
| 15 | web-vitals library 整合 | 15-web-vitals-library | 🌱 | web-vitals 套件、handler 設計、beacon API 回傳 |
| 16 | Performance Observer | 16-performance-observer-obs | 🌱 | Long task / paint timing / navigation / resource / event timing，各類 entry 的意義 |
| 17 | RUM（Real User Monitoring）實作 | 17-rum-implementation | 🌱 | 自建 vs SaaS、取樣率、網路條件蒐集、device info、地理分佈 |
| 18 | Custom Metrics（業務指標） | 18-custom-metrics | 🌱 | 時間到第一個有意義的操作、關鍵業務流完成時間、conversion funnel |
Log 與 Trace
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 19 | 前端 Log 策略 | 19-frontend-log-strategy | 🌱 | log level（debug / info / warn / error）、console.log 不該留 production、批次上傳、敏感資料過濾 |
| 20 | Distributed Tracing 前端視角 | 20-distributed-tracing-frontend | 🌱 | OpenTelemetry-JS、trace context 傳到後端、跨服務 trace、span 設計 |
| 21 | Breadcrumbs（事件軌跡） | 21-breadcrumbs | 🌱 | Sentry / LogRocket breadcrumb、自動記錄 navigation / click / network、錯誤前的使用者行為 |
Session Replay
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 22 | Session Replay 原理 | 22-session-replay-basics | 🌱 | rrweb / FullStory 怎麼錄、DOM snapshot + event diff、frame size、privacy 挑戰 |
| 23 | Privacy-first Session Replay | 23-privacy-session-replay | 🌱 | PII 遮蔽、data sanitization、GDPR / CCPA 合規、使用者同意 |
Alerting 與回饋
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 24 | Alerting 設計 | 24-alerting-design | 🌱 | 誰 on-call、哪些該 alert、threshold 設定、avoid alert fatigue、Slack / PagerDuty 整合 |
| 25 | 使用者回饋整合 | 25-user-feedback | 🌱 | 內嵌 feedback widget、跟錯誤 log 對應、bug report 自動帶 session info |
🔧 小實作注意事項
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 26 | Sentry 完整整合（React / Next.js） | 26-sentry-integration | 🌱 | 從安裝到 source map 上傳、Error Boundary 整合、release tracking |
| 27 | Web Vitals 收集與上報 | 27-web-vitals-collection | 🌱 | web-vitals package + beacon + backend、跟 BigQuery / GA4 整合、RUM dashboard |
| 28 | OpenTelemetry-JS 前端 trace | 28-otel-js-frontend | 🌱 | 傳 trace 到後端、browser exporter、跟 Datadog / Honeycomb / SigNoz 整合 |
| 29 | 自建 RUM（小規模） | 29-diy-rum | 🌱 | 取樣、beacon API、後端接收、dashboard（Grafana / Metabase） |
| 30 | Session Replay 導入（LogRocket / Sentry Replay / rrweb） | 30-session-replay-setup | 🌱 | 選型、privacy 配置、CI 整合 |
💣 Anti-pattern
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 31 | 觀測 Anti-patterns | 31-observability-anti-patterns | 🌱 | console.log 上 production、沒 source map、沒取樣率（全蒐集爆量）、alerting fatigue（太多 alert 沒人看）、PII 直接錄 session replay、error swallow 沒上報、只看 synthetic 不看 RUM |
🧰 對應檢查工具
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 32 | 觀測工具生態 | 32-observability-tooling | 🌱 | Sentry / LogRocket / Datadog RUM / New Relic / Dynatrace / Honeycomb / SigNoz / PostHog / Mixpanel，選型考量 |
📎 補充
| # | 主題 | Slug | Stage | 大綱 |
|---|
| S01 | 前端成本管理（monitoring SaaS 費用） | s01-cost-management | 🌱 | 取樣率與費用平衡、alert 爆量代價、DataDog 帳單踩坑 |
| S02 | A/B Test Instrumentation | s02-ab-testing-instrumentation | 🌱 | GrowthBook / LaunchDarkly / Optimizely、曝光追蹤、conversion 測量 |
| S03 | AI-powered Alerting / Anomaly Detection | s03-ai-alerting | 🌱 | 2024+ 的自動異常偵測、減少誤報 |
章節進度統計
- 知識主題：32 + 3 補充 = 35 項
- 🌿 growing：0
- 🌱 seed：35
跨系列連結
- →
frontend/engineering/ CH9 F11（效能優化、RUM）
- →
frontend/application/ CH8 F09（錯誤處理策略）
- →
frontend/browser/ CH4（Performance Observer）
- →
frontend/security/ CH11（log 不能洩漏 PII / secrets）
- →
frontend/testing/ CH10（Performance testing）
- →
seo/10-performance-cwv（CWV 跟 SEO）
- →
ops-notes/（前端部署監控實戰）