Previously, using retryWhen() as suggested in the accepted answer was considered a good practice. However, it has come to light that this operator is now deprecated and will be removed from RxJS versions 9 or 10. Therefore, all solutions involving retryWhen() are also considered deprecated.

Instead, the recommended approach by the RxJS development team and documentation is to utilize the retry() operator, which serves as an error handling operator with the addition of a retryConfig parameter.

To implement the same functionality with reduced code complexity, you can follow this method:

// Custom function to determine if a request should be retried
shouldRetry(error: HttpErrorResponse) {
    // Example for handling specific error codes
    if (error.status === 503) {
      return timer(1000); // Introducing a delay using the RxJS timer function.
    }

    throw error;
  }

// Implementing the retry operator in your code
retry({ count: 2, delay: this.shouldRetry })

By observing the provided example above, it is evident that achieving the desired logic requires fewer lines of code and RxJS operators compared to the previous use of retryWhen(). This highlights the reason behind deprecating the outdated operator, as similar functionality can now be accomplished using the retry() operator along with its config options.

Please adjust the code snippet according to your specific requirements, but consider this an illustration of migrating from retryWhen() to the retry() operator.

In continuation of @JB Nizet's response. If you are working with rxjs version 5 or above and using lettable operators, format it as:

retryWhen(errors => errors.pipe(delay(1000), take(5)))

Attempt the operation 5 times with a delay of 500ms:

RxJS version 6 and above

• Keep track of attempts using an index
• Modify the error Observable in retryWhen to either use timer or throwError

retryWhen(concatMap((err, index) => index < 5 ? timer(500) : throwError(err)))

RxJS version 6.3 and above

• Utilize index for counting attempts
• In the error Observable of retryWhen, apply delayWhen to pause using timer or trigger throwError

retryWhen(delayWhen((err, index) => index < 5 ? timer(500) : throwError(err)))

Alternatively, you could also do this:

const delayFn = (delay = 0, count = Infinity) => {
    return (err, index) => index < count ? timer(delay) : throwError(err);
};

retryWhen(concatMap(delayFn(500, 5))) // RxJS version 6 and above

retryWhen(delayWhen(delayFn(500, 5))) // RxJS version 6.3 and above

RxJS version 7.3 and above

• Simplify by just using retry

retry({ count: 5, delay: 500 })

Everything discussed here pertains to RxJS 6+

In Summary

If you prefer, you can utilize the extensively tested operator from this package. Alternatively, feel free to check out the source code below :)

npm i rxjs-boost

import { retryWithDelay } from 'rxjs-boost/operators';

obs$.pipe(
  // will retry 4 times with a 1s delay before each try:
  retryWithDelay(1000, 4)
);

Requirements

Given that most (or perhaps none) of the other solutions met all my requirements, I'll outline my approach here. Objectives:

• Regular emissions and completion if no errors occur. ✅
• Retry x times in case of an error. ✅
• A time delay of y before each retry. ✅
• Returning the last emitted error. (Many other responses struggled with this.) ✅
• Correct typing with strict: true – although it's unlikely to mess up. ✅

The Plan

Similar to other answers, we will use the retryWhen operator to handle errors. To keep track of retries, the scan operator comes into play. For limiting retries, simply throw an error within a map operator.

In the original code, throwIf was used, but we can opt for retryWithDelay from rxjs-boost instead.

Lastly, employ the delay operator to introduce delays between executions:

import { MonoTypeOperatorFunction } from 'rxjs';
import { delay as delayOperator, map, retryWhen, scan } from 'rxjs/operators';

export function retryWithDelay<T>(
  delay: number,
  count = 1
): MonoTypeOperatorFunction<T> {
  return (input) =>
    input.pipe(
      retryWhen((errors) =>
        errors.pipe(
          scan((acc, error) => ({ count: acc.count + 1, error }), {
            count: 0,
            error: undefined as any,
          }),
          map((current) => {
            if (current.count > count) {
              throw current.error;
            }
            return current;
          }),
          delayOperator(delay)
        )
      )
    );
}

References

• rxjs-boost
• Original Source Code
• Spec File with Testing – definitely useful

After careful consideration, I have reached the decision to attempt other operations in the http pipeline.

import {delay as _delay, map, retryWhen} from 'rxjs/operators';

export const delayedRetry = (delay, retries = 1) => retryWhen(result => {
    let _retries = 0;
    return result.pipe(
      _delay(delay),
      map(error => {
        if (_retries++ === retries) {
          throw error;
        }
        return error;
      }),
    );
  },
);

How to Use:

    http.pipe(
      delayedRetry(1500, 2),
      catchError((err) => {
        this.toasterService.error($localize`:@@not-saved:Could not save`);
        return of(false);
      }),
      finalize(() => this.sending = false),
    ).subscribe((success: boolean) => {
        if (success === true) {
           this.toasterService.success($localize`:@@saved:Saved`);
        }
      }
    });

To adapt ngrx5+ we have the option of developing a custom operator:

function retryRequest(constructor: () => Observable, count: number, delayTime: number) {
  let index = 0;
  return of(1) // Rather than repeating the result of constructor(), repeat the call itself
    .pipe(
      switchMap(constructor),
      retryWhen(errors => errors.pipe(
        delay(delayTime),
        mergeMap(error => {
          if (++index > count) {
            return throwError(error);
          }
          return of(error);
        })
      ))
    );
}

Recently encountering a similar issue, I discovered room for improvement in the proposed solution.

Observable.pipe(
     retryWhen(errors => errors.pipe(
      delay(1000),
      take(10))),
    first(v => true),
    timeout(10000))

This code essentially retries with specified intervals, but abruptly ends without adding any erroneous value using the 'first' operator.

If no value is found within the established timeout period, an error will be triggered.

Compatible with rxjs version 6.3.3

Check out the code on StackBlitz

Open the Console to view retry attempts

Example Code snippet:

import { map, catchError, retryWhen, take, delay, concat } from 'rxjs/operators';
import { throwError } from 'rxjs';


export class ApiEXT {

    static get apiURL(): string { return 'http://localhost:57886/api'; };
    static httpCLIENT: HttpClient;

 static POST(postOBJ: any, retryCOUNT: number = 0, retryINTERVAL: number = 1000) {
        return this.httpCLIENT
            .post(this.apiURL, JSON.stringify(postOBJ))
            .pipe(
                map(this.handleSUCCESS),
                retryWhen(errors => errors.pipe(delay(retryINTERVAL), take(retryCOUNT), concat(throwError("Giving up Retry.!")))),
                catchError(this.handleERROR));
    }


  private static handleSUCCESS(json_response: string): any {
        //TODO: cast_and_return    
        return JSON.parse(json_response);

    }

 private static handleERROR(error: Response) {
        let errorMSG: string;
        switch (error.status) {
            case -1: errorMSG = "(" + error.status + "/" + error.statusText + ")" + " Server Not Reachable.!"; break;
            default: errorMSG = "(" + error.status + "/" + error.statusText + ")" + " Unknown Error while connecting with server.!"; break;
        }
        console.error(errorMSG);
        return throwError(errorMSG);
    }

}

Here is a helpful code snippet for you:

let values$ = Rx.Observable.interval(1000).take(5);
let errorFixed = false;

values$
.map((val) => {
   if(errorFixed) { return val; }
   else if( val > 0 && val % 2 === 0) {
      errorFixed = true;
      throw { error : 'error' };

   } else {
      return val;
   }
})
.retryWhen((err) => {
    console.log('retrying again');
    return err.delay(1000).take(3); // Retrying 3 times
})
.subscribe((val) => { console.log('value',val) });

When working with RxJS, you have access to the retry operator which allows you to resubscribe to an Observable a specified number of times when an error occurs. This can be particularly useful when dealing with network requests, as sometimes a URL may not return data successfully on the first try due to issues like network bandwidth. By using the retry operator, you give the Observable multiple chances to retrieve the data before ultimately throwing an error if unsuccessful. In situations where retries still result in errors, you can utilize the catchError method to handle the error and return the Observable with user-defined default data.

getBook(id: number): Observable<Book> {
  return this.http.get<Book>(this.bookUrl + "/" + id).pipe(
     retry(3),
     catchError(err => {
      console.log(err);
      return of(null);
     })
  );
}

After discovering that the accepted answer rethrow method didn't work in my case, I came up with a different solution:

Attempt to retry 3 times with a 2-second delay, and if no success is achieved, throw an error.

Observable.pipe(
  retryWhen(errors => errors.pipe(
    mergeMap((error, i) =>
      iif(() => i >= 3, throwError(() => error), timer(2000))
    )
  ))
);

After some experimentation, I was able to devise a solution that utilizes retryWhen along with Observable.Interval. However, one issue I encountered with this approach is that the error function within the subscribe method never actually gets triggered.

this.branchService.getCanCreate()
  .do((value) => {
    this.cCreate = value;
  }, (error) => {
    console.log('do', error + new Date().toTimeString());
  })
  .retryWhen(errors => {
    return Observable.interval(1000).take(3).concat(Observable.throw('error')));
  })
  .subscribe(
    value => {
      this.cCreate = !!value
      console.log('success', new Date().toTimeString());
    },
    error => {
      console.log('subscribe', error + new Date().toTimeString());
      this.cCreate = false;
    },
    () => {
      console.log('finally', new Date().toTimeString());
    }
  );

1. Utilizing Concat Method

retrievePosts()
      {
        return this.httpClient
        .get<any[]>('https://jsonplaceholder.typicode.com/postss')
        .pipe(
          retryWhen(errors =>{
            return concat(
              errors.pipe(
                delay(2000),
                take(2),
              ),
              throwError("Max Retries Exceeded!")
            )
          }),
          catchError(()=>of(["Angular","Rxjs"])))
      }

2. Leveraging ConcatMap Function

return this.httpClient
    .get<any[]>('https://jsonplaceholder.typicode.com/postss')
    .pipe(
      retryWhen(errors =>{
        return errors.pipe(
          concatMap((error,index)=> {
            if(index>=2) return throwError(error);
            else return of(error).pipe(delay(2000))
          })
        )
      }),
      catchError(()=>of("Angular","Rxjs"])))

3. Applying Scan Technique

return this.httpClient
    .get<any[]>('https://jsonplaceholder.typicode.com/postss')
    .pipe(
      retryWhen(errors =>{
        return errors.pipe(
         scan( (acc, error) => {
           if(acc>2) throw error;
           return acc+1;
         }, 1),
          delayWhen(val => timer(val * 1000)),
        )
      }),
      catchError(()=>of("Angular","Rxjs"])))
    }

After some investigation, I managed to come up with a solution to filter out certain errors, implement a waiting period before retrying, and set a limit on the number of retries.

Additionally, it is simple to incrementally increase the time-out duration.

import {
  HttpErrorResponse,
  HttpEvent,
  HttpHandlerFn,
  HttpRequest,
} from '@angular/common/http';
import { Observable, retry, throwError, timer } from 'rxjs';

const count = 2;
const timeout = 1000;
const resetOnSuccess = false;

function delay(error: HttpErrorResponse, retries: number): Observable<number> {
  const canRetryStatus = error.status === 0 || error.status >= 500;
  const canRetryCounter = retries < count;
  const shouldRetry = canRetryStatus && canRetryCounter;
  return shouldRetry ? timer(timeout) : throwError(() => error);
}

export function ErrorInterceptor(
  req: HttpRequest<unknown>,
  next: HttpHandlerFn
): Observable<HttpEvent<unknown>> {
  return next(req).pipe(retry({ count, delay, resetOnSuccess }));
}