Detect http 404 responses from server in httpclient

Question

I'm having an issue detecting a 404 response status from an api. If you look at the image you'll see that chrome is correctly logging a 404 response status on the request. The issue is that angular's http client is reporting a status code of "0". What am I doing wrong here...?

code:

checkNameTaken(clientId: string, name: string): Observable<boolean> {
const baseUrl = this.configService.configBs.getValue().apiBaseUrl;
return this.http.get(`${baseUrl}/Rules/${clientId}/${name}`)
  .pipe(
    catchError( error => {
      if ( !(error.error instanceof ErrorEvent)) {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        if (error.status === '404') {
          return of(true);
        }
        console.error(
          `Backend returned code ${error.status}, ` +
          `body was: ${error.error}`);
      }
      return of(false);
    }),
    map(rule => rule ? true : false)
  );

}

This is from chrome's network tab:

Request URL: http://localhost:57067/api/Rules/C7000050/tests
Request Method: GET
Status Code: 404 Not Found
Remote Address: [::1]:57067
Referrer Policy: no-referrer-when-downgrade

Any idea why error.status is always coming back 0 when server returns a 404? Running Angular 7.2.0

updated the code to this:

checkNameTaken(clientId: string, name: string): Observable<boolean> {
    const baseUrl = this.configService.configBs.getValue().apiBaseUrl;
    return this.http.get(`${baseUrl}/Rules/${clientId}/${name}`)
      .pipe(
        catchError( error => {
          if ( !(error.error instanceof ErrorEvent)) {
            // The backend returned an unsuccessful response code.
            // The response body may contain clues as to what went wrong,
            if (error.status === 404) {
              return of(true);
            }
            console.error(
              `Backend returned code ${error.status}, ` +
              `body was: ${error.error}`);
          }
          return of(false);
        }),
        map(rule => rule ? true : false)
      );
  }

error.status is still always 0 when the server returns a 404.

Propbaly coz status code is int not a string. Try: error.status === 404 instead — Ashish Ranjan
– Ashish Ranjan, Commented Mar 4, 2019 at 15:16
if (error.status === '404') you're comparing a number to a string. About the error code zero : you have two types of 404 : the first is when you reach the server but can not find the ressource, the second one is when you can't reach the server. Here, you probably reached the server, but forgot to add the error code. — user4676340
– user4676340, Commented Mar 4, 2019 at 15:17
probably you forgot to add the stackblitz where you can reproduce the issue... Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers — smnbbrv
– smnbbrv, Commented Mar 4, 2019 at 15:19
@trichetriche I'm lost on the sometimes 404's return 0's. Can you provide me more info onthat? — cobolstinks
– cobolstinks, Commented Mar 4, 2019 at 15:42
@smnbbrv I'm not sure how I'd post a plunkr for this because it's specifically only reproduced when the server returns a 404 status code. I would also need to deploy my api to somewhere internet facing, which I just can't do here. — cobolstinks
– cobolstinks, Commented Mar 4, 2019 at 15:48

sadaf2605 · Accepted Answer · 2019-03-04 17:02:28Z

1

The status code is a number not string.

checkNameTaken(clientId: string, name: string): Observable<boolean> {
const baseUrl = this.configService.configBs.getValue().apiBaseUrl;
return this.http.get(`${baseUrl}/Rules/${clientId}/${name}`)
  .pipe(
    catchError( error => {
      if ( !(error.error instanceof ErrorEvent)) {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        if (error.status === 404) {
          return of(true);
        }
        console.error(
          `Backend returned code ${error.status}, ` +
          `body was: ${error.error}`);
      }
      return of(false);
    }),
    map(rule => rule ? true : false)
  );
}

If thats not the case maybe it is an CORS issue as mentioned here: https://github.com/angular/angular/issues/20991

edited Mar 4, 2019 at 17:02

answered Mar 4, 2019 at 15:19

sadaf2605

7,59010 gold badges68 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cobolstinks Over a year ago

ok I did this but error.status is always 0 when the server returns a 404 so it never falls into my if block

sadaf2605 Over a year ago

do you have access to the API that you are consuming? maybe it worths reading: github.com/angular/angular/issues/20991

cobolstinks Over a year ago

Yeah it turns out we had a bogus global exception handler that wasn't sending back CORS response headers when an error occurred. So even though Chrome saw the correct response status of 404 the browser treated it as a failed preflight response.

Collectives™ on Stack Overflow

Detect http 404 responses from server in httpclient

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related