Retry Failed Requests with RxJS and the HttpClient in Angular

So here we have a simple app component, which internally gets people service injected. Here we have a fetch people function, which gets triggered whenever someone clicks that button here which then invokes on the people service that fetch people function. Internally here, we can see that an HTTP call gets made with that HTTP client, which comes from the Angular common HTTP package.

As you can see here, I on purpose commanded out here a working URL and replaced it with one which fails. So whenever I click the button, we can see we get a 404 status code and some error message gets printed out here.

In the ideal case, we would be able to somehow recover automatically from such a failure before even showing something to the user. What we could do for instance is to retry that call a couple of times. Luckily the HTTP client heavily relies on RXJS. So I can here import the RXJS operator and then use it here below and say retry for three times in total before you then show the error to the user.

If we now click the button, we can see that the call gets executed on the server, we get an error, and then here three further calls get made trying to recover now automatically from that failure. In a real world scenario, this might not be the best optimal way, because we would immediately invoke the server URL again. The chance that the server has recovered in the meantime is quite low.

So what we could try instead is to simply introduce a delay, so only retry it after you've maybe an incrementing amount of time. Instead of the retry operator, we could use the retry when operator which gives us here a parameter. Then here we can specify the number of retries, which let's say is three, and then return here the observable to not interrupt the chain.

We introduce here a delay, let's say one second just to make it more visible. Then we again get here flat map and say whenever that retries when its minus is bigger than zero, we return the observable of that value. So we simply continue basically that chain, the repetitions. We're never below our retries. So when retries are finished, we say observable.throw of that value, because we want to throw the error and interrupt that repetition chain.

Now we need to add some imports here for RXJS. Now, if we click that button, we can see that the requests are made, but there's a delay in between. Finally, basically the error again gets shown, because we didn't recover from that error on the server...