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?

Community · Accepted Answer · 2017-05-23 12:18:12Z

10

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

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Feb 27, 2016 at 12:59

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

2 Comments

kosta Over a year ago

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?

Thierry Templier Over a year ago

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.

Jessica Rocha · Accepted Answer · 2018-12-13 19:14:50Z

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, 2018 at 19:14

answered Dec 12, 2018 at 15:11

Jessica Rocha

413 bronze badges

1 Comment

JoeG Over a year ago

You should add additional detail to make your answer fit in context better

Stephen Romero · Accepted Answer · 2019-08-23 16:02:43Z

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:

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 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.

Ahmed Nabil · Accepted Answer · 2019-10-19 17:10:19Z

0

You can stringify the error object to print its string value

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

answered Oct 19, 2019 at 17:10

Ahmed Nabil

19.2k12 gold badges68 silver badges101 bronze badges

Collectives™ on Stack Overflow

Get error message from Angular 2 http

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Linked

Related