Aller au contenu principal

24-1 Gérer une erreur localement dans le composant

Une première approche est de faire la gestion d'erreur à la pièce, au niveau du composant.

Pour cela, on peut englober l'appel au service dans un try/catch:

src/app/features/projets/pages/projets-index.ts
async ngOnInit(): Promise<void> {
  try {
    this.projets = await this.projetService.obtenirTous();
  } catch (error) {
    console.error(error);
  }
}

Générer une erreur​

Pour générer une erreur, vous pourriez mettre en commentaire votre jeton d'authentification. Ainsi, les requêtes vont échouer parce que vous n'êtes pas authentifié.

src/app/core/http/api.ts
api.interceptors.request.use((config: any) => {
  //config.headers['apiKey'] = 'VOTRE_CLE';

  return config;
});

Vous pourriez aussi modifier l'URL appelée dans le service pour que l'adresse n'existe pas et ainsi générer une erreur.

Cela devrait générer une erreur et puisque via try/catch on log l'erreur en utilisant console.error, vous aurez l'erreur affichée dans la console.

Img

Afficher un message plutôt que console.error​

Il pourrait être pertinent d'afficher un message d'erreur dans l'éventualité où une erreur survient lors d'un appel au service.

Pour cela, on peut ajouter une propriété msgErreur au composant, liée à une boîte d'erreur dans le HTML et assigner un message à msgErreur dans l'éventualité d'une erreur.

On peut utiliser la classe Bootstrap alert alert-danger afin de facilement afficher une boîte ayant le style d'un message d'erreur.

src/app/features/projets/pages/projets-index.ts
@Component({
  selector: 'app-projets-index',
  imports: [
    ProjetsListe,
    RouterLink
  ],
  template: `
    <div class="row mb-3 mt-3">
      <div class="col-lg-9"><h1>Projets</h1></div>
      <div class="col-lg-3 d-flex align-items-center justify-content-end">
        <a class="btn btn-primary" routerLink="/projets/creer">Nouveau projet</a>
      </div>
    </div>

    @if(msgErreur) {
      <div class="alert alert-danger mb-3">
        {{msgErreur}}
      </div>
    }

    <app-projets-liste [projets]="projets" (projetDeleted)="gestionProjetDeleted($event)"></app-projets-liste>
  `,
  styles: ``
})
export class ProjetsIndex implements OnInit {
  protected projets: Projet[] | null = null
  protected msgErreur?: string;

  constructor(private projetService: ProjetService) {}

  async ngOnInit(): Promise<void> {
    try {
      this.projets = await this.projetService.obtenirTous();
    } catch (error) {
      this.msgErreur = "Une erreur est survenue lors du chargement des projets."
    }
  }


//...

Ce qui vous permettra d'obtenir:

http://localhost:4200

img