Returning caught error observable from catchError in HttpInterceptor causes error loop

Question

I have a simple interceptor that handles requests and catches any http error using RXJS catchError. The second argument received in catchError is the caught observable. I want to, in some cases, return this error and let it propagate up to the error handler in the subscribe function. The problem is that returning th caught error causes an infinite loop (as seen in the example: https://stackblitz.com/edit/angular-u4gakr)

The intercept function in the interceptor where the catchError is stuck in a loop when reciving an HTTP error, like 404:

return next.handle(request)
  .pipe(
    catchError((error, caught$) => {
      console.log('Returning caught observable'); 
      return caught$;
    })
  );

I have probably misunderstood something about the interceptor or RxJS catchError. Any suggestion?

Answer 1

Turns out I needed to use return throwError(error) as returning the caught observable, or of(error) both failed to return it properly to the subscribe functions error handler.

The final code is then:

return next.handle(request)
  .pipe(
    catchError((error) => {
      console.log('Returning caught observable'); 
      return throwError(() => new Error('The Error'));
    })
  );

Answer 2

You can change the return to just be this and the subscribe will handle the error.

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<any> {
    const requestCopy = request.clone();
    return next.handle(request).pipe(catchError(error => {
      if (error.status === 404) {
        return throwError(error)
      } else {
        return of()
      }
    }))
  }

https://stackblitz.com/edit/angular-zz3glp