Error boundaries avec @boundary

Les templates Angular prennent en charge les error boundaries pour gérer proprement les erreurs d'exécution qui surviennent pendant l'affichage et la détection de changements.

Les error boundaries empêchent la défaillance d'un seul composant de faire planter toute l'application et permettent d'afficher une interface de repli à l'utilisateur.

Intercepter les erreurs avec @boundary et @error

Le bloc @boundary englobe une section de votre template. Si un composant ou une directive à l'intérieur de cette error boundary lève une erreur pendant l'initialisation ou la détection de changements, le framework intercepte l'erreur et affiche le bloc @error à la place.

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

Accéder à l'objet d'erreur

Vous pouvez accéder à l'erreur interceptée via la variable implicite $error :

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

Réinitialiser l'error boundary

Vous pouvez tenter d'afficher à nouveau le contenu du @boundary en appelant la fonction implicite $reset dans le bloc @error. Lorsqu'elle est appelée, elle réinitialise l'état de l'error boundary et tente d'afficher à nouveau le contenu d'origine.

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

Gestion conditionnelle des erreurs avec when

Vous pouvez utiliser des clauses when pour gérer de manière conditionnelle des types d'erreurs précis, ce qui vous permet de fournir différentes interfaces de repli. Angular évalue cette condition lorsqu'il intercepte une erreur.

@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>
}

Ordonnez vos blocs @error du plus spécifique au moins spécifique, car Angular évalue les clauses when dans l'ordre et utilise la première qui s'évalue à vrai. Un dernier bloc @error sans clause when sert de repli pour toutes les autres erreurs.

Intégration avec le gestionnaire d'erreurs global

Lorsqu'une error boundary intercepte une erreur, Angular peut tout de même notifier l'ErrorHandler global. Vous pouvez implémenter le hook optionnel onViewError dans votre ErrorHandler personnalisé pour journaliser ces erreurs interceptées dans votre service de suivi des erreurs.

@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);
  }
}

Projection de contenu

Si votre composant utilise la projection de contenu, englober <ng-content> dans un @boundary n'intercepte pas les erreurs du contenu projeté. Ce contenu appartient à la vue qui le déclare, et non à la vue du composant qui le reçoit.

Par exemple, un composant conteneur avec le template suivant n'intercepte pas les erreurs des composants qui y sont projetés :

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

Pour intercepter ces erreurs, englobez le composant conteneur et son contenu projeté dans un @boundary dans le template parent :

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

Vues dynamiques et gestion programmatique des erreurs

La gestion des erreurs ne se limite pas à la syntaxe de template. Si vous créez des composants ou des vues intégrées dynamiquement, vous pouvez utiliser l'option onError pour gérer les erreurs. Consultez la section Gérer les erreurs de rendu du guide sur le rendu de composants par programmation pour plus d'informations.