Angular Http error not mapped with Micronaut HttpResponse.serverError()

Question

I have a below HTTP client to talk to the Micronaut API

this.httpClient.request<T>(new HttpRequest(method, destinationUrl, options)).subscribe(
    (response: any) => {
      const responsTye = response as HttpEvent<any>
      switch (responsTye.type) {
        case HttpEventType.Sent:
          this.logger.info('Http Client : Sent ->', 'Request sent!');
          break;
        case HttpEventType.ResponseHeader:
          this.logger.info('Http Client : ResponseHeader ->', 'Response header received!');
          break;
        case HttpEventType.DownloadProgress:
          const kbLoaded = Math.round(responsTye.loaded / 1024);
          this.logger.info('Http Client : DownloadProgress ->', `Download in progress! ${kbLoaded}Kb loaded`);
          break;
        case HttpEventType.Response:
          observer.next(response.body);
          this.logger.info('Http Client : Response -> 😺 Done!', responsTye.body);
      }
    },
    (error) => {
      switch (error.status) {
        case HttpStatusCode.FORBIDDEN:
          this.isHttpError = true;
          break;
        case HttpStatusCode.BAD_REQUEST:
          this.isHttpError = true;
          break;
        case HttpStatusCode.UNAUTHORIZED:
          this.isHttpError = true;
          break;
        case HttpStatusCode.INTERNAL_SERVER_ERROR:
          this.isHttpError = true;
          break;
      }
      observer.error(error);
    }

Now from the backend the server response the 500 internal server error if something is broken in the back

@Fallback
@Retryable(attempts = "3")
public class CategoryClientFallback implements ICategoryOperation{
    @Override
    public Maybe<?> get(CategorySearchCriteria searchCriteria) {
        return Maybe.just(HttpResponse.serverError(ConstantValues.TAG_FALLBACK));
    }
}

The server is responding 500 internal server error as we can see in the POSTMAN as well

The front-end debugging, the response is same as from the POSTMAN

However, on 500 internal server error, the HTTP client should redirect to the error section instead of (response: any) section.

What wrong I am not able to understand, it is the error from the backend or angular HTTP client ?

I do have an interceptor as well, but the error is not handled in the interceptor

export class HttpFalconInterceptor implements HttpInterceptor {
    constructor(public authService: AuthService, private logger: LoggerService) { }
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // Get the auth token from the service.
        const authToken = this.authService.getAuthorizationHeaderValue();
        this.logger.info("Auth bearer token ", authToken);

        if (authToken) {
            request = request.clone({
                setHeaders: {
                    'Content-Type':  'application/json',
                    Authorization: authToken
                }
            });
        }

        /**
            * continues request execution
        */
        return next.handle(request).pipe(catchError((error, caught) => {
            //intercept the respons error and displace it to the console
            this.logger.error(error);
            return of(error);
        }) as any);
    }
}

Answer 1

I have an issue with the interceptor

This was the issue

return next.handle(request).pipe(catchError((error, caught) => {
            //intercept the respons error and displace it to the console
            this.logger.error(error);
            return of(error);
        }) as any);

Changed to

return next.handle(request)