隨記

Week 12 · Day 06 — 上線後維護與監控

學習目標

  • 建立上線後的監控與除錯習慣
  • 設定回報機制與分析
  • 規劃持續演進

重點

上線後要監控什麼 - 錯誤回報：前端未處理錯誤（上一週的 ErrorHandler 派上用場） - 效能：載入時間、LCP、互動延遲 - 使用者行為：流量、點擊、跳出率

常見工具 | 目標 | 工具 | |------|------| | 錯誤回報 | Sentry、Bugsnag | | 效能/行為 | Google Analytics、Chrome UX Report | | 介面監控 | 自訂 ErrorHandler + 上報 API |

整合 Sentry（範例） 

npm install @sentry/angular

import * as Sentry from '@sentry/angular';
Sentry.init({
  dsn: 'https://...',
  environment: 'production'
});
- 與 ErrorHandler 結合，自動上報錯誤與堆疊

延長維護清單 - ✅ 定期 ng update 升級 Angular 與依賴 - ✅ 跑測試 + 建構過 CI - ✅ 用 lint（tslint/eslint）+ format（prettier） - ✅ 監控錯誤與效能 - 🔒 檢查安全性（依賴漏洞，如 npm audit）

後續演進方向 - 加入 PWA（ng add @angular/pwa 離線支援） - 多語言、主題 - 更多功能與報表

實作

  1. 試著導入錯誤回報（Sentry 或自訂上報）
  2. 執行 npm audit 檢查依賴漏洞
  3. 規劃接下來要加的功能之一

作業

  • 建立上線後的錯誤監控
  • 執行 npm audit 與 ng update --next 檢查版
  • 列出 3 個下一步的優化或功能