.catch() in http.get not catching HTTP 500 error code

Question

In my Angular 2 app, I have a Service with an http.get method that returns an Observable.

campaign.service.ts

public getCampaign(campaignId: string): Observable<Campaign> {
  return this.http.get(this.campaignsUrl + '/' + campaignId, options)
    .map(this.extractData)
    .catch(this.handleError);
}

private extractData(res: Response) {
  let body = res.json();
  return body.data || body || {};
}

private handleError(error: Response | any) {
  // In a real world app, we might use a remote logging infrastructure
  let errMsg: string;
  if (error instanceof Response) {
    const body = error.json() || '';
    const err = body.error || JSON.stringify(body);
    errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
  } else {
    errMsg = error.message ? error.message : error.toString();
  }
  console.error(errMsg);
  return Observable.throw(errMsg);
}

I then call it in my Component, like so:

campaign.component.ts

this.campaignService.getCampaign(paramId)
  .subscribe(
    obj => {
      // do something
    },
    () => {
      // handle error here
    }
  });

However, if the http.get call returns a HTTP 500, I never hit my .catch(...) section in my Service class. Console outputs an uncaught exception.

GET http://localhost:9001/api/v1/campaigns/4175edc4 500 (Internal Server Error)
EXCEPTION: Response with status: 500 Internal Server Error for URL: http://localhost:9001/api/v1/campaigns/4175edc4
Uncaught Response {_body: "{"message":"invalid input syntax for uuid: \"4175edc4\""}", status: 500, ok: false, statusText: "Internal Server Error", headers: Headers…}

What could I be doing wrong here?

In debug mode, which one is hitted; this.extractData or this.handleError or none of them? Can you also provide these two methods in question? — ulubeyn
– ulubeyn, Commented Nov 20, 2016 at 19:43
@ulubeyn, in debug, none are hit. I've also added details about the two methods. — OptiPessiProgrammer
– OptiPessiProgrammer, Commented Nov 21, 2016 at 4:55
What is the console output of error? And when you return 200, does this work? — ulubeyn
– ulubeyn, Commented Nov 21, 2016 at 7:35
I added the console error messages above. And yes, 200s are handled correctly. — OptiPessiProgrammer
– OptiPessiProgrammer, Commented Nov 21, 2016 at 16:22
I have the same exact problem with a POST request. Did you come to any good solution ? — Blablalux
– Blablalux, Commented Dec 16, 2016 at 8:29

Jon · Accepted Answer · 2017-01-07 06:52:03Z

5

Angular 2 follows the Fetch spec, which only throws errors when there was a problem with the request operation. It does not throw if an error response was returned (as an error response is still a valid response).

You need to check the response.ok attribute to ensure it is not 404 or 500 etc.

answered Jan 7, 2017 at 6:52

Jon

1,09411 silver badges23 bronze badges

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

Comments

HK boy · Accepted Answer · 2020-07-04 21:58:30Z

0

Declared functions are assigned a global context if they aren’t declared within the context of an object. So when we want our closure (inner function) to refer to one of our parent objects, we either have to preserve the value of the object or bind the object to the function.

Try this:

.catch(this.handleError.bind(this));

edited Jul 4, 2020 at 21:58

HK boy

1,40411 gold badges21 silver badges27 bronze badges

answered Jul 4, 2020 at 11:20

Deacan

276 bronze badges

Collectives™ on Stack Overflow

.catch() in http.get not catching HTTP 500 error code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related