Get error message from Angular 2 http

Question

I have the following code in my service

myService.ts

makeHttpGetRequest(url){

        return Observable.interval(config.SUPERVISOR_REFRESH_INTERVAL * 1000)
            .switchMap(() => this.http.get(url))
            .map(res => res.json())
            .timeout(config.REQUEST_TIMEOUT * 1000, new Error('Time out occurred'))

    }

In my component file,

myComponent.ts

ngOnInit(){
        this._myService.makeHttpGetRequest(myurl)
            .subscribe(
                data => {
                    this.supervisorServers = data;
                    }

                },
                error => {
                    this.error = true;
                    console.log(error); //gives an object at this point
                    this.showError(error);
                }
            );
    }

I want to print the error message in case of for e.g. Invailid url. When I print the error, I get an object (probably response object) like the following:

Object { _body: error, status: 200, statusText: "Ok", headers: Object, type: 3, url: null }

If I open this, I cannot find the error message. Is there a better way to get precies error messages?

score 10 · Answer 1 · edited May 23 '17 at 12:18

The error is contained in the body of the response even in this case. See the error event handler onError function:

https://github.com/angular/angular/blob/master/modules/@angular/http/src/backends/xhr_backend.ts#L96

You can access it using the json method on the response:

error => {
  this.error = true;
  console.log(error.json()); //gives the object object
  this.showError(error.json());
}

Edit

I investigated a bit more this issue. In fact, you can't have the exact message. I mean the net::ERR_NAME_NOT_RESOLVED. XHR doesn't provide it. That said, you can see that the status of XHR is 0. This could be an hint that there was a problem the request when sending the request (it's not actually sent).

error => {
  (...)
  var err = error.json();
  var status = err.currentTarget.status;
  (...)
}

See this question:

XMLHttpRequest() & net::ERR_NAME_NOT_RESOLVED

Thanks for the reply. I can access that. But for e.g. when I have an invalid url, I can't see error message in the body of the response. Is it possible to obtain an error message to show on the UI? — kosta, Feb 27 '16 at 14:20
You're welcome! In fact, you can't have the exact message since it's not accessible within the XHR object. That said, you can rely on the `status` field of this object... I updated my answer. — Thierry Templier, Feb 29 '16 at 08:22

Jessica Rocha · Answer 2 · 2018-12-13T19:14:50.043

4

I try error.error and work to me. Its get the Object message error.

EDIT:

Sorry!!

Try this:

            error => {
                this.error = true;
                console.log(error.error); 
                this.showError(error.error);
            }

edited Dec 13 '18 at 19:14

answered Dec 12 '18 at 15:11

Jessica Rocha

41
3

2

You should add additional detail to make your answer fit in context better – JoeG Dec 12 '18 at 15:25

score 1 · Answer 3 · answered Aug 23 '19 at 16:02

1

Using Angular 5+ you can actually just use error.message.

 error => {
                console.log(error.message); 
                this.showError(error.message);
          }

In my case I am using Ionic 3 with an alert

 error => {
        loading.dismiss();
        let alert = this.alertCtrl.create({
        title: 'Error: ',
        message:  error.message,//Displays http error message in alert
        buttons: [
                     {
                        text: 'Dismiss',
                        role: 'Yes',
                        handler: () => {}
                     }
                  ]
                });
             alert.present();
             }

Here is a snippet of the error object in the console when logged:

answered Aug 23 '19 at 16:02

Stephen Romero

2,812
4
25
48

error.message gives me a big part of stacktrace too. I don't want that part. I can substring it using split('at') but that way is not clean is it? I was hoping for a better solution coming to this thread. – arm Jan 23 '20 at 11:31
@arm this ultimately depends on the kind of error you receive back. I've had instances where message doesn't exist but you can navigate through the error.message instance or have cases set up based on the error type to grab what you need. – Stephen Romero Jan 23 '20 at 21:50

score 0 · Answer 4 · answered Oct 19 '19 at 17:10

0

You can stringify the error object to print its string value

const errStr = JSON.stringify(error);
console.log(errStr);

answered Oct 19 '19 at 17:10

Ahmed Nabil

17,392
11
61
88

Get error message from Angular 2 http

4 Answers4

Linked