Angular2 rxjs http.request.catch has strange behaviour for some http errors

Question

My http service does not catch correctly some http errors. The catch method has 2 different response objects ( see below ).

private fireRequest(request: Request): Observable<any> {
    return this.http.request(request)
    .switchMap((response: Response) => {
        const responseData = response.json() || [];
        return Observable.of(responseData);
    })
    .catch((response: Response) => {
        const res2 = response.json();
        // filters http errors from status 0 errors
        if (response.status && response.status > 0) {
            const res = response.json();
            return Observable.of<any>(res);
        }
        const unexpectedNetworkError = new 
              Error('commons.unexpected_network');
        return Observable.throw(unexpectedNetworkError);
    })
}

Strange error behaviour. ( even in chrome network tab i do not see the http body )

// catch 404 error
{ 
  headers: Headers,
  ok: false,
  status: 0,
  statusText : "",
  type : 3,
  url : null,
  _body : ProgressEvent
}

Correct error behaviour

// catch 401 error
{ 
  headers: Headers,
  ok: false,
  status: 401,
  statusText : "Unauthorized",
  type : 2,
  url : http://api.service/users,
  _body : { // json body}
}

Hi, I found out the problem regards the browser an its CORS behaviour and my backend. When you call a non existing ruote, the browser sends a preflight request (options) and my be returns a 404 with error details in the body. However the browser returns a generic error with http status code 0 without the actual payload. The second call is never made. — Sasha
– Sasha, Commented May 3, 2017 at 11:42
Awesome, thanks for the elaborate answer! I also found a similar issue on mine which was related to CORS as well, but the issue for me was that my middleware was broken in the API. Once I fixed that I was good to go, but that did illuminate that other issue as well though. The other issue for me was that I WAS getting the original request made, because I could see the valid response in the network tab. — Lansana Camara
– Lansana Camara, Commented May 3, 2017 at 11:50

Sasha · Accepted Answer · 2017-08-10 14:00:23Z

I found out the problem regards the browser and its CORS behaviour.

a) Succefull call

BROWSER                  SERVER
    | ------ preflight ---> |
    | <-- allow GET, PUT -- |
    | ------- GET req ----> |
    | <------ GET res ----- |

b) Failed call with backed response 404 instead of 200

BROWSER                SERVER
    | ---- preflight ----> |
    | <------ 404 -------- |
    |                      |
    |                      |

c) No intenet connection, no response from server

BROWSER                SERVER
    | ---- preflight ----> X
    |                      |
    |                      |
    |                      |

Whenever you make an api call to a non existing ruote, the browser sends a preflight request (b).

Depening on your backend error handling strategy you could receive:

1) Http 404 code with error details in the body In this case the browser returns a generic error with http status code 0 without the actual server's payload. The second call is never made because there is no sense in doing it since the preflight went wrong.

2) Http 200 code for the preflight and 404 for the actual call. In this case everything works fine.

The problem remains if there is no internet connection.

Collectives™ on Stack Overflow

Angular2 rxjs http.request.catch has strange behaviour for some http errors

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related