Globalna obsługa błędów w Angular

Obsługa błędów to niezbędny element każdej aplikacji. Globalną obsługę zapewnia własna klasa implementująca ErrorHandler. Dzięki niej wyświetlisz komunikat o błędzie lub zalogujesz błąd do zewnętrznych systemów.

Podstawowe działanie

Podstawowym rozwiązaniem, które Angular dostarcza to logowanie błędu w konsoli przeglądarki. Możesz zmienić te zachowanie dodając własną klasę CustomErrorHandler, która będzie implementować metodę handleError.

Własny ErrorHandler

Załóżmy, że gdy wystąpi błąd w aplikacji chcesz wyświetlić użytkownikowi komunikat o błędzie. Do implementacji tej funkcjonalności potrzebujesz serwisu otwierającego dialog z komunikatem, komponentu z komunikatem i klasę CustomErrorHandler, która implementuje interfejs ErrorHandler.

Serwisem, który otwiera dialogi może być MatDialog z biblioteki @angular/material, implementacja komponentu z komunikatem zależy od Ciebie, natomiast przykładową implementacje klasy CustomErrorHandler przedstawia kod poniżej.

import { ErrorHandler } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

export class CustomErrorHandler implements ErrorHandler {
  constructor(private dialog: MatDialog) {}

  public handleError(error: any): void {
    this.dialog.open(ErrorDialogComponent);
  }
}

W głównym module AppModule lub dedykowanym module do obsługi błędów dodaj provider nadpisujący bazowe rozwiązanie.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';

import { AppComponent } from './app.component';
import { ErrorDialogComponent } from './components/error-dialog.component';
import { CustomErrorHandler } from './custom-error-handler';

@NgModule({
  declarations: [
    AppComponent,
    ErrorDialogComponent
  ],
  entryComponents: [ErrorDialogComponent],
  imports: [
    BrowserModule,
    MatDialogModule
  ],
  providers: [
    {
      provide: ErrorHandler,
      useClass: CustomErrorHandler
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Podsumowanie

Implementacja globalnej obsługi błędów to bardzo proste rozwiązanie, które jest dobrym punktem wyjścia przy obsłudze błędów w aplikacji. Komunikat o błędzie pozwoli użytkownikowi zrozumieć, że w aplikacji wystąpił błąd oraz wytłumaczy mu jakie kroki powinien podjąć w przypadku wystąpienia błędu ponownie.