Angular - HTTP interceptor to retry requests with specific error status?

Question

I am trying to use an interceptor to handle http errors and retry for a special error status, in my case the status code 502.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        retryWhen(errors => {
          return errors
            .pipe(
              mergeMap(error => (error.status === 502) ? throwError(error) : of(error)),
              take(2)
            )
        })
      )
  }

But it's not working, whereas when I am using retry() in this fashion, it's working perfectly

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        retry(2),
        catchError((error: HttpErrorResponse) => {
          return throwError(error);
        })
      )
  }

you want to retry one every other code except 502?

Fan Cheung
– Fan Cheung

2019-02-17 12:17:14 +00:00
Commented Feb 17, 2019 at 12:17 — Fan Cheung
– Fan Cheung, Commented Feb 17, 2019 at 12:17
No, I want to retry only if status is 502

Debojyoti
– Debojyoti

2019-02-17 12:18:26 +00:00
Commented Feb 17, 2019 at 12:18 — Debojyoti
– Debojyoti, Commented Feb 17, 2019 at 12:18

Jota.Toledo · Accepted Answer · 2019-02-17 15:21:53Z

I took your approach and expanded it a little, out of own interest.

The first would be to create a sort of custom operator:

import { timer, throwError, Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

export interface RetryParams {
  maxAttempts?: number;
  scalingDuration?: number;
  shouldRetry?: ({ status: number }) => boolean;
}

const defaultParams: RetryParams = {
  maxAttempts: 3,
  scalingDuration: 1000,
  shouldRetry: ({ status }) => status >= 400
}

export const genericRetryStrategy = (params: RetryParams = {}) => (attempts: Observable<any>) => attempts.pipe(
  mergeMap((error, i) => {
    const { maxAttempts, scalingDuration, shouldRetry } = { ...defaultParams, ...params }
    const retryAttempt = i + 1;
    // if maximum number of retries have been met
    // or response is a status code we don't wish to retry, throw error
    if (retryAttempt > maxAttempts || !shouldRetry(error)) {
      return throwError(error);
    }
    console.log(`Attempt ${retryAttempt}: retrying in ${retryAttempt * scalingDuration}ms`);
    // retry after 1s, 2s, etc...
    return timer(retryAttempt * scalingDuration);
  })
);

You can then construct an interceptor based on this operator as follows:

@Injectable()
export class RetryInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const { shouldRetry } = this;
    return next.handle(request)
      .pipe(retryWhen(genericRetryStrategy({
        shouldRetry
      })));
  }

  private shouldRetry = (error) => error.status === 502;
}

You can see it working in this blitz

Tonio · Accepted Answer · 2023-11-17 08:26:57Z

I was trying to use Jota's response but retryWhen is now deprecated. So I've adapted his reponse using retry.

This is what I got:

  private readonly MAX_NUMBER_OF_RETRY_NO_CONNECTION: number = 5;
  private readonly RETRY_DELAY: number = 500;


  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      retry({
        count: this.MAX_NUMBER_OF_RETRY_NO_CONNECTION,
        delay: (error: HttpErrorResponse, retryAttempt: number): Observable<number> => {
          // if maximum number of retries have been met
          // or response is a status code we don't wish to retry, throw error
          if (retryAttempt > this.MAX_NUMBER_OF_RETRY_NO_CONNECTION || error.status !== 404) {
            return throwError(() => error);
          }
          console.log(`Attempt ${retryAttempt}: retrying in ${retryAttempt * this.RETRY_DELAY}ms`);
          // retry after 1s, 2s, etc...
          return timer(retryAttempt * this.RETRY_DELAY);
        },
      }),
      catchError((error) => this.errorHandler(request, error))
    );
  }


  private errorHandler(request: HttpRequest<any>, error: HttpErrorResponse): Observable<HttpEvent<any>> {
    // Your usual error handler here....
  }

Fan Cheung · Accepted Answer · 2019-02-17 12:45:11Z

0

Try the below code. You should do it the other way round.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        retryWhen(errors => {
          return errors
            .pipe(
              mergeMap(error=>error.status === 502?timer(0):throwError(error)),
              take(2)
            )
        }),
        catchError((error: HttpErrorResponse) => {
          return throwError(error);
        })
      )
  }

edited Feb 17, 2019 at 12:45

answered Feb 17, 2019 at 12:22

Fan Cheung

11.5k3 gold badges21 silver badges42 bronze badges

2 Comments

Debojyoti Over a year ago

Still not working. What is the purpose of timer? I guess the problem is the error in mergeMap() is type of observable, not httpErrorResponse. So status is not a property of it and that's why it's always returning the error

Fan Cheung Over a year ago

Try use tap(console.log) to narrow down the problem. The code surely works as I have tried

Collectives™ on Stack Overflow

Angular - HTTP interceptor to retry requests with specific error status?

3 Answers 3

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Linked

Related