Angular / rxJS: combineLatest - how to handle 404 Errors

Question

I need to load multiple Translation files via HTTP and sometimes it can happen, that a file will not be available, so therefore it will return a 404 error. My problem ist, that if one 404 error occours, the complete translation loading fails. How can i load all translation files which are available?

The following code example works, when all files are available:

public getTranslation(lang: string): any {

return Observable.combineLatest(this.resources.map(config => {
    return this.http.get(url);
  })
).map(response => {
  return response.reduce((a, b) => {
    return Object.assign(a, b);
  })
})}

You aren't doing any error handling so how do you expect the stream to continue? — Mike Tung, May 29 '18 at 13:10
How can i do a correct error handling? I tried already with an HTTP-Interceptor. — DirtDiver, May 29 '18 at 13:22
google it, it is clear you haven't made much effort in this yet — Mike Tung, May 29 '18 at 13:25
I have googled it already, before i asked the question. I am not very experienced in this topic and i am not able to make a correct error handling of the http.get, so that it displays basically nothing. — DirtDiver, May 29 '18 at 13:28
I can provide you various approaches, which didn't work out if you want - but i don't think it makes sense to post here approaches which don't work out or refer to "google it". If i would be able to find it somewhere, i wouldn't ask the question. — DirtDiver, May 29 '18 at 13:29
did you try [this](https://stackoverflow.com/questions/46018259/angular-4-observable-catch-error) or [this](https://stackoverflow.com/questions/50067897/angular-5-error-handling-with-observable-issue)? All I did was google `error handling observables angular` Here's one for [http](https://stackoverflow.com/questions/46019771/catching-errors-in-angular-httpclient) — Mike Tung, May 29 '18 at 13:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172004/discussion-between-dirtdiver-and-mike-tung). — DirtDiver, May 29 '18 at 13:50

score 0 · Answer 1 · answered Dec 21 '22 at 08:10

The answer is the rxjs operators retry/ retryWhen

Also, there are many ways to do some error handling. The simplest one, of course is to get the error and console log it in the http call (This can be done in the service or in whatever module you use). One example would be:

In the service:

public getWhatever() {
    let url = `https://route_to_the_endpoint`;
    return this.http.get(url, { headers: this.commonHeaders });
}

Un the component:

this.myservice
    .getWhatever()
    .subscribe(
        (response: any) => {
            /*Do whatever here*/
        },
        (error) => {
            console.log(error);
            /* Prepare some retry code here */
        }
    );

Error can also be processed in the service.

Other way to manage the error is to use rxjs pipes, for instance "catch/ catchError":

https://www.learnrxjs.io/learn-rxjs/operators/error_handling/catch

From what I see in your question, "retry"/ "retryWhen" to make sure the translation files reload when you get an error. The information for these pipes:

https://www.learnrxjs.io/learn-rxjs/operators/error_handling/retry

https://www.learnrxjs.io/learn-rxjs/operators/error_handling/retrywhen

You can use also rxjs "take(1)" in REST, as there is only one response.

Interceptors can be used to process error handling for all calls. But different calls may need different error handling.

score 0 · Answer 2 · answered Dec 21 '22 at 09:07

0

CombineLastest of observables with catchError to return null

return Observable.combineLatest(this.resources.map(config => {
    return this.http.get(url).pipe(
                     catchError(_=>of(null))
    );
  })
)

answered Dec 21 '22 at 09:07

Eliseo

50,109
4
29
67

Angular / rxJS: combineLatest - how to handle 404 Errors

2 Answers2