Fehler: @boundary & ErrorHandler

Wo du welche Art von Fehler behandelst:

  Vorhersehbarer HTTP-Fehler (404, 422)  → im Store/in der Komponente: resource.error(), eine Meldung für die Nutzer
  Übergreifender HTTP-Fehler (401, 500)  → Interceptor (Weiterleitung zum Login, Toast, Retry)
  Rendering-Fehler eines Bereichs        → @boundary (v22.2, Developer Preview)
  Alles andere, was nicht abgefangen wird → globaler ErrorHandler (Log + Telemetrie)
  Formularvalidierung                    → Signal Forms (errors(), keine Exceptions)

<!-- v22.2 (developer preview): isoliert Rendering-Fehler eines Bereichs -->
@boundary {
  <app-price-widget [price]="price()" />
  <app-recommendations />
} @error (let error = $error; let reset = $reset) {
  <app-error-card [message]="error.message" (retry)="reset()" />
}

<!-- Mehrere @error-Blöcke mit `when`-Bedingungen — der erste Treffer gewinnt -->
@boundary {
  <app-report />
} @error (let e = $error; when e instanceof PermissionError) {
  <p>Du hast keinen Zugriff auf diesen Bericht.</p>
} @error (let e = $error; let retry = $reset) {
  <p>Etwas ist schiefgelaufen. <button (click)="retry()">Erneut versuchen</button></p>
}

import { ErrorHandler, inject } from '@angular/core';

export class AppErrorHandler implements ErrorHandler {
  private readonly log = inject(ErrorLog);
  private readonly telemetry = inject(Telemetry);

  handleError(error: unknown): void {
    this.log.add(error);
    this.telemetry.captureException(error); // Sentry, App Insights, dein eigenes Backend
    console.error(error);
  }
}

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),                  // window.onerror + unhandledrejection → ErrorHandler
    { provide: ErrorHandler, useClass: AppErrorHandler },
  ],
};

// Interceptor für übergreifende Fehler
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);
  const toasts = inject(ToastService);

  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      if (err.status === 401) router.navigate(['/login']);
      else if (err.status >= 500) toasts.show('Der Server hat Probleme. Versuche es später erneut.', 'bad');
      return throwError(() => err); // den Aufrufer auch reagieren lassen
    }),
  );
};

// Für dynamisch erzeugte Komponenten (v22.2): onError
const ref = viewContainer.createComponent(Widget, {
  onError: (error, details) => {
    console.warn('Das Widget', details.declarationType.name, 'ist fehlgeschlagen', error);
    this.vcr.clear(); // durch einen Fallback ersetzen
  },
});

readonly user = httpResource<User>(() => `/api/users/${this.id()}`);

// erst der Fehler, dann der Wert: value() wirft im Fehlerzustand
@if (user.error(); as e) {
  <p role="alert">Das Profil konnte nicht geladen werden.</p>
  <button (click)="user.reload()">Erneut versuchen</button>
} @else if (user.hasValue()) {
  <h2>{{ user.value().name }}</h2>
} @else {
  <app-skeleton />
}

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(), // error + unhandledrejection aus window → ErrorHandler
    { provide: ErrorHandler, useClass: AppErrorHandler },
  ],
};

// Rendering: einen Bereich isolieren (v22.2, Developer Preview)
@boundary { <app-widget /> } @error (let e = $error) { <p>Widget nicht verfügbar</p> }

// lokal: neben den Daten, die fehlgeschlagen sind
catchError((e) => { this.error.set(e); return of(null); })

// Resources: der Fehler ist Zustand, keine Exception
res.error()   res.hasValue()   res.status() === 'error'   res.reload()

// global: alles, was durchrutscht, landet hier
provideBrowserGlobalErrorListeners()
{ provide: ErrorHandler, useClass: AppErrorHandler }