Angular 2: http.get in Observable not handling error

Question

I'm using observables for Http calls, which have been working fine, but then I changed up my controllers and noticed that my code apparently isn't handling errors.

Here is a look at the code from my service (SellingMenuService):

public getVarieties(): Observable<any> {
    return this.http.get(this.varietyListUrl).map(response => {
        return response.json();
    }, (error: any) => {
        console.log(error);
        console.log('error finding variety list');
        // TODO: implement error handling here.
    });
}

And here is the relevant code from my component:

constructor(public sellingMenuService: SellingMenuService) { }

getVarietyList(): void {        
    this.sellingMenuService.getVarieties().subscribe(res => {            
        console.log(res);
        this.varieties = res;
    });         
}

And here are some errors in my console:

If I'm getting a 500 error, shouldn't those console logs from my service above get hit? Why don't they?

Here is the official recommended way to handle exceptions on HTTP requests from Angular.io. There is a link to a live example on Plunker at the bottom of the page (go to /app/toh/hero.service.ts to see the code of the HTTP client service). — Alex Klaus
– Alex Klaus, Commented May 29, 2017 at 10:43

Maciej Treder · Accepted Answer · 2016-10-27 18:36:28Z

1

You are trying to catch error in the map method, while you should do it inside subscribe.

public getVarieties(): Observable<any> {
    return this.http.get(this.varietyListUrl).map(response => {
        return response.json();
    }).subscribe((res: any) => {
        console.log(res);
    }, (error: any) => {
        console.log(error);
        console.log('error finding variety list');
        // TODO: implement error handling here.
    });
}

You can also add third parameter to observable. It will be resolved when observable is finalized:

public getVarieties(): Observable<any> {
    return this.http.get(this.varietyListUrl).map(response => {
        return response.json();
    }).subscribe((res: any) => {
        console.log(res);
    }, (error: any) => {
        console.log(error);
        console.log('error finding variety list');
        // TODO: implement error handling here.
    }, () => {
        console.log("finalized")
    });
}

You can read more here: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

answered Oct 27, 2016 at 18:36

Maciej Treder

12.4k6 gold badges58 silver badges77 bronze badges

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

2 Comments

Bryan Over a year ago

I tried your code and got the following build error: Type 'Subscription' is not assignable to type 'Observable<any>'

Maciej Treder Over a year ago

Can you reproduce it in plunkr?

Community · Accepted Answer · 2017-05-23 12:32:30Z

1

You appear to have your error-handling logic inside map().

import 'rxjs/add/operator/catch';

return this.http.request(request)
  .map(res => res.json())
  .subscribe(
    data => console.log(data),
    err => console.log(err),
    () => console.log('yay')
  );

See: How to catch exception correctly from http.request()?

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Oct 27, 2016 at 18:26

Dan Wilson

4,0472 gold badges19 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular 2: http.get in Observable not handling error

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related