Recoverable Error Boundaries with RxJS catchError Chains

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError, of } from 'rxjs';
import { catchError, retry, timeout } from 'rxjs/operators';
 
class RecoverableApiError extends Error {
  constructor(message: string, public readonly statusCode: number, public readonly fallbackUsed: boolean) {
    super(message);
    this.name = 'RecoverableApiError';
  }
}
 
@Injectable({ providedIn: 'root' })
export class ResilientConfigService {
  constructor(private http: HttpClient) {}
 
  loadConfig(): Observable<Record<string, unknown>> {
    return this.http.get<Record<string, unknown>>('/api/config').pipe(
      timeout(3000),
      retry({ count: 2, delay: 500 }),
      catchError((err: HttpErrorResponse) => {
        if (err.status >= 500) {
          console.error(new RecoverableApiError('Server unavailable, using defaults', err.status, true));
          return of({ theme: 'default', locale: 'en' });
        }
        return throwError(() => new RecoverableApiError('Config fetch failed', err.status, false));
      }),
    );
  }
}