隨記

Week 06 · Day 05 — 全域錯誤處理

學習目標

  • 用 ErrorHandler 建立全域錯誤處理
  • 集中管理錯誤顯示與記錄
  • 與 catchError 的關係

重點

全域錯誤處理 - 覆寫 Angular 的 ErrorHandler - 攔截應用中未處理的錯誤，統一處理

import { ErrorHandler } from '@angular/core';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    console.error('Global error:', error);
    // 顯示錯誤訊息給使用者
    // 或回報到監控系統
  }
}

註冊 

import { ErrorHandler } from '@angular/core';

providers: [
  { provide: ErrorHandler, useClass: GlobalErrorHandler }
]
- 在 providers 用 provide + useClass 置換預設錯誤處理

層級分工 | 層級 | 工具 | 用途 | |------|------|------| | API 呼叫層 | catchError | 處理單一 HTTP 呼叫的錯誤 | | 全域層 | ErrorHandler | 攔截所有未處理錯誤 | | 使用者介面 | 元件 | 顯示友善錯誤訊息 |

實作

  1. 建立 GlobalErrorHandler（implements ErrorHandler）
  2. 在 providers 註冊 { provide: ErrorHandler, useClass: GlobalErrorHandler }
  3. 故意製造一個錯誤，觀察全域處理器被觸發

作業

  • 建立並註冊全域 ErrorHandler
  • 說出 catchError 與 ErrorHandler 的層級差別
  • 用 provide + useClass 完成置換