I’m having trouble catching errors.

It correctly catches the error in interceptor.

Error caught in interceptor

{
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null
    },
    "status": 409,
    "statusText": "Conflict",
    "url": "myurl.com/url",
    "ok": false,
    "name": "HttpErrorResponse",
    "message": "Http failure response for myurl.com/url: 409 Conflict",
    "error": {
        "status": 409,
        "message": "Email already exists"
    }
}

But in the subscribe, the error has this value as string :

Unknown error [object Object]

Interceptor

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    catchError(e => {
      return throwError(() => e);
    })
  );
};

Service

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private readonly _http = inject(HttpClient);

  exists$(email: string): Observable<UserExistsResponse> {
    return this._http.post<UserExistsResponse>(myurl.com/url, {
      email,
    });
  }
}

Component

 this._userService
      .exists$(this.accountFormGroup.controls.email.value)
      .subscribe({
        next: res => {
          // Do some stuff
        },
        error: e => {
          console.log(e); // Prints : Unknown error [object Object]
          this.setError(e);
        },
      });

app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(APP_ROUTES, withViewTransitions(), withPreloading(PreloadAllModules)),
    provideHttpClient(
      withXsrfConfiguration(environment.xsrf),
      withInterceptors([authenticationInterceptor, errorInterceptor])
    ),
    provideAnimationsAsync('animations'),
  ],
};