How can I not retry on error 400 and just console.log the error?

Question

@Injectable()
export class RetryInterceptor implements HttpInterceptor {
  private keycloakService = inject(KeycloakService);

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // console.log(this.keycloakService.getKeycloakInstance()?.tokenParsed);
    // console.log(request);

    return next.handle(request).pipe(
      retry({
        count: 3,
        delay: (error, retryCount) => {
          if (error.status === 503 || error.status === 504) {
            return timer(1000); // retry every 1 second for 503 and 504
          }
          return timer(retryCount * 1000); // Retry with increasing delay
        }
      }),
      catchError((error) => {
        if (error.status === 401) {
          return this.handleUnauthorized(request, next);
        }
        if (error.status === 503 || error.status === 504) {
        //   message that will redirect to the local UI URL if it comes back 503/504.
        }

        if (!noDisplayError) {

        }
        throw error;
      })
    );
  }

Answer 1

Add a condition in the retry delay function to check for status 400. You need it to add it at the top of the delay function to skip retry.

delay: (error, retryCount) => {
     if (error.status === 400) {
            console.log('Bad Request Error:', error);
            throw error; // This will pass the error directly to catchError
     }
   // rest of the code
}

In the catchError, you can do anything you want with it.

catchError((error) => {
        if (error.status === 400) {
          console.error('400 error', error)
        }

       // the rest of your code
  })

Full code

@Injectable()
export class RetryInterceptor implements HttpInterceptor {
  private keycloakService = inject(KeycloakService);

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // console.log(this.keycloakService.getKeycloakInstance()?.tokenParsed);
    // console.log(request);
 
    return next.handle(request).pipe(
      retry({
        count: 3,
        delay: (error, retryCount) => {
          // Skip retry for 400 errors
          if (error.status === 400) {
            console.log('Bad Request Error:', error);
            throw error; // This will pass the error directly to catchError
          }
          
          if (error.status === 503 || error.status === 504) {
            return timer(1000); // retry every 1 second for 503 and 504
          }
          return timer(retryCount * 1000); // Retry with increasing delay
        }
      }),
      catchError((error) => {
        if (error.status === 400) {
          console.log('Bad Request Error in catchError:', error);
          throw error;
        }
        
        if (error.status === 401) {
          return this.handleUnauthorized(request, next);
        }
        if (error.status === 503 || error.status === 504) {
          // message that will redirect to the local UI URL if it comes back 503/504.
        }

        if (!noDisplayError) {
          // Your error handling logic
        }
        throw error;
      })
    );
  }
}

Answer 2

You can use the new retryWhen replacement with delay and retry, where we throw an error when 400 occours, then throw the error. Which we catch using catchError and log the console message, finally we return an observable, so that the stream does not error out.

@Injectable()
export class RetryInterceptor implements HttpInterceptor {
  private keycloakService = inject(KeycloakService);

  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    // console.log(this.keycloakService.getKeycloakInstance()?.tokenParsed);
    // console.log(request);

    return next.handle(request).pipe(
      retry({
        count: 3,
        delay: (error, retryCount) => {
          if (error.status === 503 || error.status === 504) {
            return timer(1000); // retry every 1 second for 503 and 504
          }
          if (error.status === 400) {
            return throwError(() => error); // just return an observable with the error.
          }
          return timer(retryCount * 1000); // Retry with increasing delay
        },
      }),
      catchError((error) => {
        if (error.status === 401) {
          return this.handleUnauthorized(request, next);
        }
        if (error.status === 503 || error.status === 504) {
          //   message that will redirect to the local UI URL if it comes back 503/504.
        }
        if (error.status === 400) {
          console.log('400 error occoured');
          return of({});
        }
        throw error;
      })
    );
  }
}