HttpErrorResponse#error is not instance of Error in client-side/network error

[adwd]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

According to document (https://angular.io/guide/http#getting-error-details), if client-side or network error occurred, HttpErrorResponse#error is instance of Error. But when I tried this behavior with CORS error, HttpErrorResponse#error is instance of ProgressEvent.

Expected behavior

fix document to describe correct way to distinguish client-side/network error or backend returned 4xx/5xx.

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/7f96LrlQyFknX28QDzrN

What is the motivation / use case for changing the behavior?

Due to this problem, I don't know the way to distinguish http request is failed by client-side or backend returned 4xx or 5xx.

Environment

Angular version: 4.3.4


Browser:
- [x] Chrome (desktop) version 60
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v8.2.1  
- Platform: Mac 

Others:

[ghost]

I can confirm this issue which is currently affecting me.

Backend sends an 413 PAYLOAD_TOO_LARGE Error which is identified by Angular as a ProgressEvent.

Therefore, the Http Status / Error Message are gone.

[rewathkafley]

Reason for closing this issue? I don't see a solution to this issue, as i am also experiencing this.

[zaszlo]

was having this too, this way of catching it fixed it:
https://stackoverflow.com/questions/46019771/catching-errors-in-angular-httpclient

[kennyamr]

In case the solution above is not working for you. In my case, it was a matter of CORS. For the exact same code, locahost was not working but test environment was. It seems that even though browser knows it is a 500 status code, let's say, however, the CORS policy makes weird stuff with the request.

You can either:
1.- Add a plugin to deal with CORS so that you can simulate the behavior it will have once it is deployed
2.- Allow CORS server-side (I discourage this option)

Hope this info helps others!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}