HttpInterceptor in Angular not retrying failed requests

Question

This problem, is very common and many solutions are provided in stackoverflow. However, I could not get this to work. "My Failed http requests cannot be retried".

Below is the code for interceptor

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse, HttpResponse } from 
'@angular/common/http';
import { Observable, throwError, BehaviorSubject } from 'rxjs';
import { catchError, filter, take, switchMap, map, retryWhen, delay } from 'rxjs/operators';
import { AuthenticateService } from '../services/authenticate.service';
import { ErrordialogService } from '../@hrms/services/errordialog.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

private isRefreshing = false;
private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);

constructor(
  private _authService: AuthenticateService,
  private _errorDialogService: ErrordialogService
 ) { }

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  let token: string = '';

/**
 * Pass the parsed token
 * If token present clone the request to add token to every requests
 */
if(this._authService.getTokens() !== null || this._authService.getTokens() !== undefined) {
    let extractedToken = JSON.parse(this._authService.getTokens());
    token = extractedToken;
}

if (token) {
  request = this.addToken(request, token);
}

/**
 * This is app specific
 * Need to pass @Apiversion as header
 */
if (!request.headers.has('Api-version')) {
    request = request.clone({ headers: request.headers.set('Api-version', '1') });
}

/**
 * Return the Observable
 */
return next.handle(request).pipe(
    map((event: HttpEvent<any>) => {
        if(event instanceof HttpResponse) {
            console.log('event---->>>', event);
        }
        return event;
    }),
    catchError((error: HttpErrorResponse) => {
        console.log(error);
        if(error.status === 401) {
            this.handle401Error(request, next);
        }
        else if(error.status === 500 || error.statusText === 'Unknown Error') {
          this.handleServerError(request, next, token);
        }
        else {
            return throwError(error);
        }
        return throwError(error)
    })
)

}

private addToken(request: HttpRequest<any>, token: string) {
 return request.clone({ setHeaders: { 'Authorization': `Bearer ${token}` } });
}

private handleServerError = (request, next, token) => {
 this._errorDialogService.showErrorDialog();
 console.log(request);
 return next.handle(request).pipe(retryWhen(errors => errors.pipe(delay(2000))))
}

private handle401Error(request: HttpRequest<any>, next: HttpHandler) {
  // console.log("Handling 401");
  }
 }

As it can been seen, the function handleServerError is responsible for showing an error dialog(which it shows) and should retry the failed request as indicated the return statement.

What exactly, i am doing wrong, i could not identify. Help appreciated.

refer https://stackoverflow.com/a/46773408/6777125 hope it helps! — Krunal Shah, Dec 11 '20 at 06:42
Thanks for the response. I viewed the solution before, but to no help. Thanks anyways — Subhajit Syam Choudhury, Dec 11 '20 at 06:51

score 0 · Accepted Answer · answered Dec 11 '20 at 08:11

I use retry(1) in this case

Retry an observable sequence a specific number of times should an error occur.

/**
 * Return the Observable
 */
return next.handle(request).pipe(
    retry(1), // <-- add this to repeat
    map((event: HttpEvent<any>) => {
        if(event instanceof HttpResponse) {
            console.log('event---->>>', event);
        }
        return event;
    }),
    catchError((error: HttpErrorResponse) => {
        console.log(error);
        if(error.status === 401) {
            this.handle401Error(request, next);
        }
        else if(error.status === 500 || error.statusText === 'Unknown Error') {
          this.handleServerError(request, next, token);
        }
        else {
            return throwError(error);
        }
        return throwError(error)
    })
)

It works. But I wanted in handleServerError function, so it makes it more manageble. — Subhajit Syam Choudhury, Dec 12 '20 at 03:32

HttpInterceptor in Angular not retrying failed requests

1 Answers1