エラーのグローバル処理
HTTPエラーを一元的に捕捉して変換します
「エラーのグローバル処理」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
エラーを一元的に処理する
すべてのコンポーネントでHTTPエラーを捕捉する代わりに、interceptorでグローバルに処理できます。ログ記録、toastの表示、401時のリダイレクト、エラー形式の統一などが可能です。
interceptor内のcatchError
next(req)のストリームをcatchErrorに通して、失敗を捕捉します。
import { catchError, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
export const errorInterceptor: HttpInterceptorFn = (req, next) =>
next(req).pipe(
catchError((err: HttpErrorResponse) => {
console.error('HTTP error', err.status);
return throwError(() => err);
})
);HttpErrorResponseを調べる
HttpErrorResponseにはstatus、message、サーバーのerrorボディが含まれます。statusに応じて分岐し、ケースごとに処理します。
catchError((err: HttpErrorResponse) => {
if (err.status === 0) console.error('network/CORS error');
else console.error('server error', err.status);
return throwError(() => err);
})401時にリダイレクトする
401は通常、セッションの期限切れを示します。interceptorからログイン画面へリダイレクトします。
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
const router = inject(Router);
return next(req).pipe(
catchError((err: HttpErrorResponse) => {
if (err.status === 401) router.navigate(['/login']);
return throwError(() => err);
})
);
};通知を表示する
toastまたは通知サービスをinjectして、エラーを一貫した方法でユーザーに伝えます。
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
const toast = inject(ToastService);
return next(req).pipe(
catchError((err: HttpErrorResponse) => {
toast.error(err.error?.message ?? 'Something went wrong');
return throwError(() => err);
})
);
};再スローするか握りつぶすか
通常はthrowError(() => err)で再スローし、コンポーネントが引き続き反応できるようにします。呼び出し元からエラーを意図的に隠したい場合にのみ、of(null)のような代替observableを返します。
エラーを統一する
さまざまなサーバーのエラーボディを、一貫したアプリのエラー形式に変換してから再スローすると、後続の処理が簡単になります。
catchError((err: HttpErrorResponse) => {
const appError = {
code: err.status,
message: err.error?.message ?? err.message
};
return throwError(() => appError);
})クライアントエラーとサーバーエラーを区別する
err.error instanceof ErrorEvent（またはerr.status === 0）はクライアントまたはネットワークのエラーを示します。それ以外の場合は、バックエンドがエラーステータスを返しています。両者は別々に処理します。
二重処理を避ける
interceptorですでにtoastを表示した場合、コンポーネントでも同じエラーに対して表示しないようにします。メッセージの重複を避けるため、ユーザー向けの処理を行うレイヤーを1つに決めてください。
監視サービスにログを送る
中央のinterceptorは、リクエストのコンテキストを付けてエラーを監視ツール（Sentryなど）に送るのに最適な場所です。
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
const monitor = inject(MonitoringService);
return next(req).pipe(
catchError((err: HttpErrorResponse) => {
monitor.captureHttpError(req.url, err.status, err.message);
return throwError(() => err);
})
);
};エラーinterceptorの順序
エラーinterceptorがほかのinterceptorを包むように配置し、リトライを含むチェーン全体のエラーを捕捉できるようにします。
provideHttpClient(
withInterceptors([authInterceptor, retryInterceptor, errorInterceptor])
)クイックチェック
グローバルなエラー処理についての理解度を確認しましょう。
まとめ：エラーのグローバル処理
エラーinterceptorは、HTTPの失敗処理を一元化します。
next(req)に対してcatchErrorを使います。HttpErrorResponse.statusに応じて分岐します（たとえば401ならリダイレクトします）。- コンポーネントが反応できるよう再スローし、意図した場合にのみ握りつぶします。
次はリトライとローディングインジケーターです。
よくある質問
「エラーのグローバル処理」レッスンは無料ですか？
はい。「エラーのグローバル処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「エラーのグローバル処理」で何を学びますか？
HTTPエラーを一元的に捕捉して変換します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「エラーのグローバル処理」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 関数型インターセプター
- 認証ヘッダーの追加
- エラーのグローバル処理
- リトライとローディングインジケーター