Error Handling

1@Injectable()
2export class AppErrorHandler implements ErrorHandler {
3  handleError(error: unknown) { /* log + toast */ }
4}
5providers: [{ provide: ErrorHandler, useClass: AppErrorHandler }]

1import { Component, ErrorHandler, Injectable, inject, signal } from '@angular/core';
2import { HttpClient, HttpErrorResponse } from '@angular/common/http';
3import { retry, timer } from 'rxjs';
4

5@Injectable({ providedIn: 'root' })
6export class ToastService {
7  readonly messages = signal<{ id: number; text: string }[]>([]);
8  private next = 1;
9  show(text: string) {
10    const id = this.next++;
11    this.messages.update(m => [...m, { id, text }]);
12    setTimeout(() => this.dismiss(id), 5000);
13  }
14  dismiss(id: number) { this.messages.update(m => m.filter(x => x.id !== id)); }
15}
16

17export function toUserMessage(err: unknown): string {
18  if (err instanceof HttpErrorResponse) {
19    switch (true) {
20      case err.status === 0: return 'You seem to be offline. Check your connection.';
21      case err.status === 400: return err.error?.title ?? 'Some details are not valid.';
22      case err.status === 401: return 'Please sign in again.';
23      case err.status === 403: return 'You do not have permission to do that.';
24      case err.status === 404: return 'We could not find what you were looking for.';
25      case err.status >= 500: return 'Something went wrong on our side. Please try again.';
26    }
27  }
28  return 'Unexpected error. Please try again.';
29}
30

31@Injectable()
32export class AppErrorHandler implements ErrorHandler {
33  private toasts = inject(ToastService);
34  handleError(error: unknown): void {
35    console.error('[AppErrorHandler]', error);             // send to Sentry/App Insights here
36    this.toasts.show(toUserMessage(error));
37  }
38}
39

40@Component({
41  selector: 'app-toasts',
42  template: `
43    <div aria-live="polite">
44      @for (t of toasts.messages(); track t.id) {
45        <p class="toast">{{ t.text }} <button (click)="toasts.dismiss(t.id)" aria-label="Dismiss">✕</button></p>
46      }
47    </div>
48  `,
49  styles: `.toast { background: #fee2e2; padding: 6px 10px; border-radius: 6px; }`,
50})
51export class Toasts {
52  protected toasts = inject(ToastService);
53}
54

55@Component({
56  selector: 'app-error-demo',
57  imports: [Toasts],
58  template: `
59    <button (click)="loadMissing()">Load missing item</button>
60    <button (click)="crash()">Trigger a bug</button>
61    <app-toasts />
62  `,
63})
64export class ErrorDemo {
65  private http = inject(HttpClient);
66  private toasts = inject(ToastService);
67

68  loadMissing() {
69    this.http.get('https://jsonplaceholder.typicode.com/posts/999999')
70      .pipe(retry({ count: 2, delay: (err: HttpErrorResponse) => (err.status >= 500 || err.status === 0 ? timer(1000) : Promise.reject(err)) }))
71      .subscribe({ error: err => this.toasts.show(toUserMessage(err)) });
72  }
73

74  crash() {
75    throw new Error('Oops: undefined is not a function');   // goes to AppErrorHandler
76  }
77}
78// app.config.ts:
79// providers: [provideBrowserGlobalErrorListeners(), provideHttpClient(), { provide: ErrorHandler, useClass: AppErrorHandler }]

“Load missing item” gets a 404 (not retried, because it is not transient) and shows the toast “We could not find what you were looking for.”. “Trigger a bug” throws; AppErrorHandler logs the stack trace to the console and shows “Unexpected error. Please try again.”. Toasts disappear after 5 seconds or when dismissed.