最強のエラーハンドリング！Angular HttpClientとHttpInterceptorを組み合わせる

2024-04-02

Angular HttpClientでエラーをキャッチする

エラーの種類

HttpClientは、さまざまな種類のエラーを発生させる可能性があります。代表的なエラーは以下の通りです。

ネットワークエラー: サーバーに接続できない、タイムアウトなど
400番台エラー: バッドリクエスト、認証エラーなど
500番台エラー: サーバーエラー
その他: JSON解析エラーなど

エラーハンドリングの基本

HttpClientでエラーをキャッチするには、catchError演算子を使用します。catchErrorは、エラー発生時に実行される関数を指定します。

import { HttpClient } from '@angular/common/http';

const httpClient = new HttpClient();

httpClient.get('/api/data')
  .pipe(
    catchError(error => {
      // エラー処理
      console.error(error);
      return of(null); // エラー発生時はnullを返す
    })
  )
  .subscribe(data => {
    // データ処理
    console.log(data);
  });

上記の例では、catchError内でエラーメッセージを出力し、nullを返しています。

エラーの種類に応じた処理

エラーの種類によって、異なる処理を行う場合があります。以下に、いくつかの例を紹介します。

401エラー: 認証エラーの場合は、ログイン画面へリダイレクトする
404エラー: データが見つからない場合は、エラーメッセージを表示する
500エラー: サーバーエラーの場合は、リトライ処理を行う

catchError(error => {
  if (error.status === 401) {
    // ログイン画面へリダイレクト
    window.location.href = '/login';
  } else if (error.status === 404) {
    // エラーメッセージを表示
    this.errorMessage = 'データが見つかりません';
  } else if (error.status === 500) {
    // リトライ処理
    return this.retry(error);
  } else {
    // その他のエラー
    console.error(error);
    return of(null);
  }
});

エラーオブジェクトの詳細

errorオブジェクトには、エラーに関する詳細情報が含まれています。以下のプロパティを参照することで、より詳細なエラーハンドリングを行うことができます。

status: エラーコード
statusText: エラーメッセージ
error: エラーの詳細情報

catchError(error => {
  console.error(error.status, error.statusText, error.error);
  return of(null);
});

まとめ

Angular HttpClientでエラーをキャッチするには、catchError演算子を使用します。エラーの種類に応じて、適切な処理を行うようにしましょう。

import { HttpClient } from '@angular/common/http';

const httpClient = new HttpClient();

// エラーハンドリングを行うサービス
export class ErrorHandlingService {

  constructor(private httpClient: HttpClient) {}

  getData() {
    return this.httpClient.get('/api/data')
      .pipe(
        catchError(error => this.handleError(error))
      );
  }

  private handleError(error: any) {
    if (error.status === 401) {
      // ログイン画面へリダイレクト
      window.location.href = '/login';
    } else if (error.status === 404) {
      // エラーメッセージを表示
      this.errorMessage = 'データが見つかりません';
    } else if (error.status === 500) {
      // リトライ処理
      return this.retry(error);
    } else {
      // その他のエラー
      console.error(error);
      return of(null);
    }
  }

  private retry(error: any) {
    // リトライ処理
    console.log('リトライ処理を実行します');
    return this.httpClient.get('/api/data')
      .pipe(
        catchError(error => this.handleError(error))
      );
  }
}

// コンポーネント
export class MyComponent {

  constructor(private errorHandlingService: ErrorHandlingService) {}

  ngOnInit() {
    this.errorHandlingService.getData().subscribe(data => {
      // データ処理
      console.log(data);
    });
  }
}

このサンプルコードでは、ErrorHandlingServiceというサービスを作成し、エラーハンドリングを担当させています。

getDataメソッドでは、catchError演算子を使用してエラーをキャッチし、handleErrorメソッドに処理を委譲しています。

handleErrorメソッドでは、エラーコードに応じて異なる処理を行っています。

404エラーの場合は、エラーメッセージを表示
500エラーの場合は、リトライ処理

このサンプルコードを参考に、アプリケーションに合ったエラーハンドリングを実装してください。

Angular HttpClientでエラーをキャッチする他の方法

try {
  const data = await httpClient.get('/api/data').toPromise();
  // データ処理
  console.log(data);
} catch (error) {
  // エラー処理
  console.error(error);
}

try / catch ブロックを使用することで、エラー発生時の処理を記述することができます。

errorイベント

httpClient.get('/api/data').subscribe({
  next: data => {
    // データ処理
    console.log(data);
  },
  error: error => {
    // エラー処理
    console.error(error);
  }
});

subscribeメソッドのerrorコールバックを使用して、エラー発生時の処理を記述することができます。

HttpInterceptorを使用することで、すべてのHTTPリクエストに対して共通のエラーハンドリングを行うことができます。

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // エラー処理
        console.error(error);
        return of(null);
      })
    );
  }
}