Angular Academy · レッスン

エラー処理オペレーター

Q: 「エラー処理オペレーター」で何を学びますか？

catchErrorとretryでエラーから回復します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

catchErrorとretryでエラーから回復します。

「エラー処理オペレーター」はCoddyKit上の無料Angular Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

observableでのエラー

observableがエラーを発行すると、終了します。以降は値を発行せず、エラーハンドラーが実行されます。エラー演算子を使うと、ストリームを中断する代わりに、復旧、再試行、エラーの変換ができます。

エラーの経路

observerで、または演算子を使ってエラーを処理します。処理しない場合、未処理のエラーによってsubscriptionがクラッシュすることがあります。

this.http.get('/api/data').subscribe({
  next: d => console.log(d),
  error: err => console.error('failed', err)
});

catchError

catchErrorはエラーを捕捉して代替のobservableを返し、ストリームを適切に継続できるようにします。

import { catchError, of } from 'rxjs';

this.http.get('/api/data').pipe(
  catchError(err => {
    console.error(err);
    return of([]); // fallback value
  })
).subscribe(data => console.log(data));

選択的な再スロー

catchErrorの内部では、エラーを調べて、復旧するかthrowErrorで再スローするかを判断できます。

import { catchError, throwError, of } from 'rxjs';

source$.pipe(
  catchError(err =>
    err.status === 404 ? of(null) : throwError(() => err)
  )
).subscribe();

retry

retry(n)はエラーが発生したとき、最大n回までソースを再subscribeします。一時的なネットワーク障害に便利です。

import { retry } from 'rxjs';

this.http.get('/api/flaky').pipe(
  retry(2) // try up to 3 times total
).subscribe(d => console.log(d));

設定を指定したretry

オブジェクト形式では試行間に遅延を追加でき、backoff関数にも対応します。これにより、サーバーへ過度にリクエストを送るのを避けられます。

this.http.get('/api/flaky').pipe(
  retry({ count: 3, delay: 1000 })
).subscribe(d => console.log(d));

retryWhen形式のバックオフ

指数バックオフを実現する場合、delayオプションに、試行するたびに遅延時間を段階的に長くするobservableを返す関数を指定できます。

import { timer } from 'rxjs';

source$.pipe(
  retry({
    delay: (err, count) => timer(count * 1000)
  })
).subscribe();

retryの後にcatchError

両者を組み合わせます。一時的な障害は再試行し、再試行回数を使い切ったら適切にフォールバックします。

this.http.get('/api/data').pipe(
  retry({ count: 2, delay: 500 }),
  catchError(() => of([]))
).subscribe(data => console.log(data));

配置が重要

pipe内でのcatchErrorの位置によって、処理の対象範囲が決まります。switchMapの内部に置くと内部リクエストごとにエラーを捕捉し、外側のストリームを維持できます。最後に置くと、すべてのエラーを捕捉します。

term$.pipe(
  switchMap(t => this.http.get('/api?q=' + t).pipe(
    catchError(() => of([])) // outer stream survives
  ))
).subscribe();

何も発行しないフォールバックとしてのEMPTY

catchErrorからEMPTYを返すと、値を発行せずにストリームを完了できます。エラーを握りつぶして何も発行したくない場合に便利です。

import { EMPTY, catchError } from 'rxjs';

source$.pipe(
  catchError(() => EMPTY)
).subscribe();

後片付けのためのfinalize

finalizeは、完了、エラー、unsubscribeなど、どの理由でストリームが終了してもcallbackを実行します。エラーハンドリングと組み合わせると、loading状態を必ずリセットできます。

import { finalize, catchError, of } from 'rxjs';

this.loading = true;
source$.pipe(
  catchError(() => of([])),
  finalize(() => this.loading = false)
).subscribe();

クイックチェック

エラーハンドリングについての理解度を確認しましょう。

振り返り：エラーハンドリング演算子

エラーは処理しない限りストリームを終了させます。

catchError：代替のobservableを返して復旧します。
retry：失敗時に再subscribeします。遅延やバックオフも指定できます。
配置（switchMapの内部か最後か）によって処理の対象範囲が決まります。

RxJS Operators in Depthを完了しました。

よくある質問

「エラー処理オペレーター」レッスンは無料ですか？

はい。「エラー処理オペレーター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「エラー処理オペレーター」で何を学びますか？

catchErrorとretryでエラーから回復します。ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「エラー処理オペレーター」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Angular Academyに戻る