Retry HTTP requests in angular 6

Question

I use an interceptor to show error messages on display based on the HTTP response for every request.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const customReq = request.clone({
        //headers: request.headers.set('app-language', 'en')
    });
    return next
        .handle(customReq).pipe(
            tap((ev: HttpEvent<any>) => {
                if (ev instanceof HttpResponse) {
                    // processing request
                }
            }),
            catchError(response => {
                if (response instanceof HttpErrorResponse) {
                    switch (response.status) {
                        case 0:
                            // server API connection error show
                            break;
                        case 403:
                            // error Token Invalid and Redirect to logout
                            break;
                        case 401:
                            // error Token Invalid and Redirect to logout
                            break;
                        case 502:
                            // Bad gateway error
                            break;
                        case 500:
                            // internal server error
                            break;
                    }
                }
                // return next.handle(request);
                return observableThrowError(response);
            })
        );
}

In my project, the web server could be unavailable for a second in some case and reply a 500 error code. I don't want my web app to show an error message immediately after receiving an error and I want it to retry the request for a couple of times with a delay like one second.

I already tried rxjs retry :

...
.handle(customReq).pipe(retry(5),
...

it's not useful since it has no delay. based on this answer How to create an RXjs RetryWhen with delay and limit on tries

I tried retryWhen like:

.handle(customReq).pipe(
    tap((ev: HttpEvent<any>) => {
        if (ev instanceof HttpResponse) {
            console.log('###processing response', ev, this.location);
        }
    }),
    retryWhen(error => {
        return error
            .flatMap((error: any) => {
                if (error.status  == 400) {
                    return Observable.of(error.status).delay(1000);
                }
                if (error.status  == 0) {
                    return observableThrowError(error).delay(1000);
                }
                return observableThrowError(error);
            })
            .take(5)
            .concat(observableThrowError(error));
    }),

but it doesn't work as expected and it doens't go inside the if conditions.

score 14 · Accepted Answer · answered Aug 18 '18 at 10:17

There are several errors in your code:

You are shadowing error variable - first it's an error stream and then it's an error object.
Using observableThrowError with delay has no effect. Error will bypass every operator except those dealing with error.
You are mixing "pipe(operator())" style operators and prototype style operators .operator().

I have suggested some changes:

.handle(customReq).pipe(
    tap((ev: HttpEvent<any>) => {
        if (ev instanceof HttpResponse) {
            console.log('###processing response', ev, this.location);
        }
    }),
    retryWhen(errors => errors
        .pipe(
            concatMap((error, count) => {
                if (count < 5 && (error.status == 400 || error.status == 0)) {
                    return Observable.of(error.status);
                }

                return observableThrowError(error);
            }),
            delay(1000)
        )
    ),

Main change is tracking error count through second argument of concatMap instead of using take opeator which is mainly useful for unsubscribing the observable and I think you want throw an error instead.

I would say that there are more problems with Amir's code. He's redirecting the user to the login page inside the interceptor (at least that's what the interceptor does according to the comments) and that should be the job of a **guard**. — vamcs, Oct 07 '19 at 14:32

score 0 · Answer 2 · edited Jan 08 '20 at 15:11

You could use retry operator, better to use it on an interceptor

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
        .pipe(retry(RETRY_NUMBER))

It will only retry when the request fails, then to identify errors you could throw an error and then catch it

.pipe(tap(event => {
            // tipo http
            if (event instanceof HttpResponse) {
                if (event.body && event.body.error === true && event.body.errorMessage) {
                    throw new Error(event.body.errorMessage);
                }
            }
        }))


.pipe(catchError((err) => {

      if (err.status === 0) {
          //do something
      }
      // other conditions ...

      return EMPTY;
}));

Don't forget t return EMPTY because the interceptor needs to return an observable

Retry HTTP requests in angular 6

2 Answers2