`@boundary`によるエラーバウンダリ

IMPORTANT: @boundaryは開発者プレビューです。

Angularテンプレートは、レンダリングや変更検知中に発生するランタイムエラーを適切に処理するためのエラーバウンダリをサポートしています。

エラーバウンダリは、単一のコンポーネントの障害によってアプリケーション全体がクラッシュするのを防ぎ、ユーザーにフォールバックUIを表示する方法を提供します。

`@boundary`と`@error`によるエラーの捕捉

@boundaryブロックはテンプレートの一部をラップします。このバウンダリ内のコンポーネントやディレクティブが初期化または変更検知中にエラーをスローした場合、フレームワークはそのエラーを捕捉し、代わりに@errorブロックをレンダリングします。

@boundary {
  <app-risky-component />
} @error {
  <p>Something went wrong!</p>
}

エラーオブジェクトへのアクセス

暗黙の$error変数を参照すると、捕捉されたエラーにアクセスできます:

@boundary {
  <app-risky-component />
} @error {
  <p>Error occurred: {{ $error.message }}</p>
}

バウンダリのリセット

@errorブロック内で暗黙の$reset関数を呼び出すことで、@boundaryのコンテンツの再レンダリングを試みることができます。呼び出されると、バウンダリの状態をリセットし、元のコンテンツのレンダリングを再試行します。

@boundary {
  <app-flaky-component />
} @error {
  <p>Loading failed.</p>
  <button (click)="$reset()">Try again</button>
}

`when`による条件付きエラーハンドリング

when句を使用すると、特定の種類のエラーを条件付きで処理し、異なるフォールバックUIを提供できます。Angularはエラーを捕捉したときにこの条件を評価します。

@boundary {
  <app-chart-dashboard />
} @error (let err; reset = $reset; when isRenderError(err)) {
  <p>Network issue. Check your connection.</p>
  <button (click)="reset()">Retry</button>
} @error {
  <p>An unexpected error occurred: {{ $error.message }}</p>
}

Angularはwhen句を順番に評価し、最初にtrueと評価されたものを使用するため、@errorブロックは条件が具体的なものから一般的なものの順に配置してください。when句のない最後の@errorブロックは、すべてのエラーを捕捉するフォールバックとして機能します。

グローバルエラーハンドラーの統合

バウンダリがエラーを捕捉した場合でも、AngularはグローバルなErrorHandlerに通知できます。カスタムErrorHandlerにオプションのonViewErrorフックを実装することで、捕捉されたこれらのエラーをエラー追跡サービスに記録できます。

@Injectable()
export class MyErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    // Handle uncaught errors
  }

  onViewError(error: Error, details: ErrorDetails): void {
    // Handle errors caught by a @boundary
    console.warn('Caught by boundary:', details.boundary);
    myErrorTrackingService.log(error);
  }
}

IMPORTANT: @errorブロック自体がエラーをスローした場合、そのエラーは1つ外側の@boundaryに伝播します。外側に@boundaryがなければ、Angularはそれを未処理のアプリケーションエラーとして扱います。

コンテンツプロジェクション

コンポーネントがコンテンツプロジェクションを使用している場合、<ng-content>を@boundaryでラップしても、投影されたコンテンツのエラーは捕捉されません。投影されたコンテンツが属するのは、受け取る側のコンポーネントのビューではなく、コンテンツを宣言した側のビューです。

例えば、以下のテンプレートを持つラッパーコンポーネントは、そこに投影されたコンポーネントのエラーを捕捉しません。

Avoid

@boundary {
  <ng-content />
} @error {
  <p>Something went wrong!</p>
}

これらのエラーを捕捉するには、親テンプレートの@boundaryでラッパーコンポーネントとその投影されたコンテンツをラップします。

Prefer

@boundary {
  <app-wrapper>
    <app-risky-component />
  </app-wrapper>
} @error {
  <p>Something went wrong!</p>
}

動的ビューとプログラムによるエラー処理

エラー処理はテンプレート構文に限定されません。コンポーネントや埋め込みビューを動的に作成している場合は、onErrorオプションを使用してエラーを処理できます。詳細については、プログラムによるレンダリングガイドのレンダリングエラーの処理セクションを参照してください。

@boundaryと@errorによるエラーの捕捉