Trying to understand this retryWhen/scan/delay rxjs sequence - rxjs

Question

So I came up with this implementation of a delayed retry for HTTP requests, this works fine and I have a good understanding of it as well.
retryWhen(err => {
let retryCount = 0;
let nextDelay = 0;
backoff = backoff < 0 || backoff === null ? DEFAULT_BACKOFF : backoff;
maxDelay = maxDelay < 0 || maxDelay === null ? DEFAULT_MAX_DELAY : maxDelay;
return err.pipe(
scan(idx => {
if (idx > maxRetries - 1) {
throw err;
} else {
idx++;
retryCount = idx;
nextDelay = Math.min(retryDelay + ((retryCount - 1) * backoff), maxDelay);
return idx;
}
}, 0),
tap(v => console.log(`Waiting ${nextDelay} ms for Retry #${retryCount}...`)),
delay(nextDelay),
tap(v => console.log(`Initiating HTTP Retry for context ${context}`))
)
First issue: The above code works fine when I use a constant value in the delay operator like so delay(3000) but it does not when I use the nextDelay variable. When I use the nextDelay variable there is no delay, it's like the variable is zero.
However the value is output correctly in the tap operator above it so I know it's in scope and the let is within scope of the retryWhen so should be good. I can't figure out why the delay does not work unless I use a value literal.
Second issue: I want to optimize the above code so that I don't use the variables retryCount and nextDelay, I want to compute those on the fly within the delay operator, however this operator takes only the amount of the delay as the input and does not have a reference to the idx emmitted by the scan above. I would like to do something like this:
scan(idx => ... code to either throw the error or emit the index ...),
delay(idx => Math.min(retryDelay + (idx - 1) * backoff), maxDelay)
The scan maps the original err element to the index idx but how exactly do I get that in the delay operator?

Answer 1

First issue: The above code works fine when I use a constant value in the delay operator like so delay(3000) but it does not when I use the nextDelay variable. When I use the nextDelay variable there is no delay, it's like the variable is zero.
The cause of the issue has been already pointed out in fridoo's answer.
However the value is output correctly in the tap operator
This is a hint of you could fix it. The difference is that delay(value) captures the value and in the case of tap(() => ...), the value will be evaluated every time its callback function will be invoked(in this case, on each Next notification).
If we take a look at delay's implementation
export function delay<T>(due: number | Date, scheduler: SchedulerLike = asyncScheduler): MonoTypeOperatorFunction<T> {
const duration = timer(due, scheduler);
return delayWhen(() => duration);
}
we'll see that it first captures the value in a timer observable, which will be then used with a delayWhen.
So, this first issue could be fixed with:
/* ... */
tap(v => console.log(`Waiting ${nextDelay} ms for Retry #${retryCount}...`)),
delayWhen(() => timer(nextDelay)),
tap(v => console.log(`Initiating HTTP Retry for context ${context}`))
/* ... */
Second issue: I want to optimize the above code so that I don't use the variables retryCount and nextDelay
We can use other RxJS operators for this:
retryWhen(err => {
backoff = backoff < 0 || backoff === null ? DEFAULT_BACKOFF : backoff;
maxDelay = maxDelay < 0 || maxDelay === null ? DEFAULT_MAX_DELAY : maxDelay;
return err.pipe(
// replacing `retryCount` with `map`'s index argument
map((err, idx) => {
// you can also throw the error here
if (idx >= maxRetries) { throw err; }
const retryCount = idx + 1;
// returning the `nextDelay`
return Math.min(retryDelay + ((retryCount - 1) * backoff), maxDelay);
})
delayWhen(nextDelay => timer(nextDelay)),
)

Answer 2

The function passed to retryWhen is only called once, on the first error. So delay(nextDelay) is called once when the err.pipe(...) observable is created (not when err emits). At that time nextDelay is still 0. You should put all your logic in an operator that returns a different value depending on values emitted by err.
To return an observable that emits with a changing delay you can mergeMap to a timer. This should get you started:
interface RetryStrategyConfig {
maxRetryAttempts?: number;
scalingDuration?: number;
maxDelay?: number;
excludedStatusCodes?: number[];
}
function genericRetryStrategy({
maxRetryAttempts = 6,
scalingDuration = 1000,
maxDelay = 5000,
excludedStatusCodes = []
}: RetryStrategyConfig = {}) {
return (attempts: Observable<any>) => {
return attempts.pipe(
mergeMap((error, i) => {
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 > maxRetryAttempts ||
excludedStatusCodes.find(e => e === error.status)
) {
return throwError(error);
}
const nextDelay = Math.min(retryAttempt * scalingDuration, maxDelay);
console.log(`Attempt ${retryAttempt}: retrying in ${nextDelay}ms`);
return timer(nextDelay);
}),
finalize(() => console.log("We are done!"))
);
};
}
obs$.pipe(
retryWhen(genericRetryStrategy())
)