10

I have been reading a lot of topic about this issue on stackoverflow. Most of the answer saying that this is CORS problem. I am not sure in my case so that's why i ask this question again and need serious help here.

I am developing an Angular app that hit an API every 60 seconds on an Android tablet web browser. The app working perfectly fine. But after couple hours, i started seeing errors:

0-Http failure response for https://theurl.com/api/: 0 Unknown Error

The scary part is that it happens randomly, sometime it will happen after 8,9 or 10 hours, sometimes after a day which is so hard for me to debug it. But if i reload the app, it's back to work normally. of course i dont want to do that eveytime it happens and i cant figure it out what is the root problem to fix it.

I was thinking about put a logic in interceptor. whenever i got error status : 0 then reload the app. But i am not sure its good practice..

Any suggestion will be really appreciate or at least a work around. thanks.

// Edit: i am just going to ignore after 5 times retrying when the error status is 0:

 intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<
    | HttpSentEvent
    | HttpHeaderResponse
    | HttpProgressEvent
    | HttpResponse<any>
    | HttpUserEvent<any>
    | any
  > {
 return next.handle(request).pipe(
        catchError(err => {
          if (err instanceof HttpErrorResponse) {
            switch (err.status) {
              case 401:
                return this.handle401Error(request, next);
              case 0:
                return this.handleUnknownError(request, next);
              default:
                return this.router.navigate(['system-error']);
            }
          } else {
            return throwError(err);
          }
        })
      );
    }
   }

     private handleUnknownError(request: HttpRequest<any>, next: HttpHandler) {
        return next.handle(request).pipe(
          retryWhen(errors => {
            return errors.pipe(delay(2000), take(5));
          })
        );
      }
daniel8x
  • 990
  • 4
  • 16
  • 34
  • 1
    it is a CORS error. the issue is that your server is having intermittent failures and not setting the CORS header properly in these error scenarios. You need to 1. fix the server to always set the right CORS header, even in error scenarios 2. figure out what is causing the intermittent failures and try to fix it and 3. fix your front end to handle HTTP errors gracefully as they will happen... reloading the app on an http error is not graceful. You could just add in a retry or ignore the error since it retries every 60 seconds anyway. – bryan60 Jan 14 '20 at 18:03
  • @bryan60 thanks. Do you know why the CORS not happening in the first place ? this is the part that i dont understand ? – daniel8x Jan 14 '20 at 18:08
  • 1
    `the issue is that your server is having intermittent failures and not setting the CORS header properly in these error scenarios.` which means you're not handling errors properly on your server either. – bryan60 Jan 14 '20 at 18:09
  • @bryan60 Thanks. the sad thing is i am using 3rd party API. I will try to reach out to them to see if they can fix that. In the mean time, please look at my interceptor in the edit section. Thanks. – daniel8x Jan 14 '20 at 18:14
  • @bryan60 so basically, i let it retry for 5 times.then do nothing after that. – daniel8x Jan 14 '20 at 18:18
  • frustrating that a 3rd party API isn't handling errors properly, but should work. – bryan60 Jan 14 '20 at 19:00
  • @bryan60 Thanks. – daniel8x Jan 14 '20 at 19:02
  • 1
    This is CORS issue. But it is not fired from your backend service. It is fired from web server due to wrong content policy for header configuration. So from your browser the status is 200. However, failed to load response. I have same case like this a few days ago, I printed out the status and I saw it is 0 (Zero) even from Chrome it is 200. So I re-configured content policy to fix this issue. Hope this will help if it was your case. – Hoang Subin Jan 15 '20 at 06:05
  • @HoangTranSon How did you re-configured content policy ? Can you give me one example ? Thank you – daniel8x Jan 18 '20 at 02:13
  • @daniel8x you can checkout from here https://stackoverflow.com/questions/21048252/nodejs-where-exactly-can-i-put-the-content-security-policy – Hoang Subin Jan 20 '20 at 06:40

1 Answers1

1

Case 0 is caused by your outbound request not departing. This could be because CORS or some security policy stopped your request from leaving, because a service worker intercepted and failed to process the request, or because the device's internet connection failed or was suspended.

I've seen this behaviour on many of my own projects, and found that it was because the device went to standby or suspended its own connection for power saving. You can test for the event that the internet connection on the device is the problem by enabling and watching the HTTP ProgressEvents coming from the observable (failed internet connection):

These errors have status set to 0 and the error property contains a ProgressEvent object, whose type might provide further information. https://angular.io/guide/http#getting-error-details

I don't know if this necessarily answers your question, but I hope it gives you an extra avenue to investigate. I would love to hear if it helps.

Lawrence Job
  • 56
  • 5
  • iam also facing this issue in my application. i have error handler function that will send these error reports to my db., there i sees lot of these errors , when i turned off the internet i can reproduce these error., but my error handler works and main api is not working on these occasion got confused if you don't mind can you answer my question , i have explained my erro here https://stackoverflow.com/q/75169980/20300178 – sinan Jan 19 '23 at 09:50