How to retry with delay an Observable inside pipe in RxJS?

Question

I have the following code:

notificationsWsSubject.pipe(
    filter((socket): socket is Socket => !!socket),
    switchMap(socket => fromEvent<Socket.DisconnectReason>(socket, 'disconnect')),
    tap(() => wsConnectedSubject.next(false)),
    filter(reason => (['ping timeout', 'transport close', 'transport error'] as Socket.DisconnectReason[]).includes(reason)),
    switchMap(() => signedInObservable),
    switchMap(user => forkJoin([of(user), from(getNotificationsWebsocketTicket())])),
).subscribe(values => {
    // Connect with websocket
}, error  => {
    // Throw error to user
})

The general flow:

• Listen to the disconnect event in socket.io-client
• Proceed if the disconnection cause is due to network error
• Get the currently signed in user from signedInObservable
• Generate a ticket in the server by calling getNotificationsWebsocketTicket() (and creating an Observable from it using from()
• Do stuff in subscribe(value => ... )

My problem is that I would like to retry the from(getNotificationsWebsocketTicket()) in case it fails, with a delay of 5 seconds between each failure.
Only after 3 retries I want the entire main observable to fail.

something like:

from(getNotificationsWebsocketTicket()).pipe(delayedRetry(3, 5000))

Is that possible?

Answer 1

Yeah, you can do this:

from(getNotificationsWebsocketTicket()).pipe(
  retryWhen(e$ => e$.pipe(
    take(3),
    delay(5000)
  ))
);

retryWhen can be a bit of an interesting operator to get your head around. e$ is an observable that is managed by the retryWhen operator. Anytime the source errors, retryWhen emits that error to e$ .

What happens next is up to the observable your lambda returns:

Errors are errors,
Completes are completes,
BUT emissions ( next ) are a cue to retry