consdata.com
Blog techniczny Blog biznesowy Dział HR
EN
angular

Czy wiesz, jak obsługiwać błędy w Angular w scentralizowany sposób?

author Dorian Mejer
6 października 2023

W Angularze istnieje ErrorHandler, jest to hook do scentralizowanej obsługi błędów. Domyślny ErrorHandler wyświetla jedynie błędy na konsoli. Jeżeli chcemy wyłapać i obsłużyć nieobsłużone błędy, należy dodać implementację ErrorHandlera. Pokażę, jak to zrobić na prostym przykładzie.

W module należy dodać providera:

providers: [
    {provide: ErrorHandler, useClass: GlobalErrorHandler}
]

Przykładowa implementacja GlobalErrorHandlera z serwisem, który może być używany przez komponenty:

export interface ErrorWrapper {
  sourceModule: string;
  error: Error;
}
 
@Injectable()
export class ErrorService {
  private error$: Subject<ErrorWrapper> = new Subject<ErrorWrapper>();
 
  public publishError(error: ErrorWrapper): void {
    this.error$.next(error);
  }
 
  public takeError$(): Observable<ErrorWrapper> {
    return this.error$.asObservable();
  }
 
}
 
@Injectable({
  providedIn: 'root',
})
export class GlobalErrorHandler implements ErrorHandler {
 
  constructor(private errorService: ErrorService) {
  }
 
  handleError(error: Error): void {
    const wrappedError: ErrorWrapper = {sourceModule: 'application', error: error};
    this.errorService.publishError(wrappedError);
  }
 
}

Użycie w komponencie:

@Component({
  selector: 'app',
  template: `
        <div *ngIf="!(error$ | async) else error">
          <p>Aplikacja działa!</p>
        </div>
        <ng-template #error>
          <p>Błąd!</p>
        </ng-template>
  `
})
export class AppComponent {
 
  error$: Observable<boolean> = this.errorService.takeError$().pipe(
    startWith(false)
  );
 
  // ...
}

Powyższa implementacja jest tylko uproszczonym przykładem, ale pokazuje, jak można obsłużyć niespodziewane wyjątki.

Najnowsze wpisy

  • Dostępność w PDF - dokumenty bez barier
  • Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?
  • Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngSwitch?
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

newsletter

techniczny

Zapisz się

Podobne wpisy

post-image
WCAG

Dostępność w PDF - dokumenty bez barier

author
Kacper Hoffman 28 kwi 2025
post-image
angular

Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?

author
Piotr Tatarski 7 kwi 2025
post-image
angular

Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngSwitch?

author
Dorian Mejer 10 mar 2025
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

Zapisz się na

newsletter

techniczny

consdata.com
  • Kontakt

    • sales@consdata.com
    • +48 61 41 51 000

  • Biuro

    • K9Office
      Krysiewicza 9/14
      61-825 Poznań
      Polska

  • Rozwiązania

    • Eximee
    • Kouncil
  • Blog Dołącz do nas
Copyright © 2024 Consdata. All rights reserved. Privacy Policy & Cookies
Chcemy używać plików cookie oraz skryptów podmiotów trzecich do polepszania funkcjonowania tej strony Zgadzam się