Angular2 / Rxjs: "catch" on observable, giving ProgressEvent instead of json from response

In mine HttpServive

, I have generic http methods that will handle starting / ending the download bar, setting the correct headers for the JWT, etc.

It's okay, but now I'm trying to add some logic in catch

to check the response in case of a non-200 status code (e.g. 401) so that I can do something and then re-make the failed request.

The problem is that the response I get in case of a non-200 status code is not available from that catch

for whatever reason.

For example, this is the code:

// ...

return this.http[method](url, options || defaultOptions)
    .map((res: Response) => res.json()) // <--- gives JSON from response
    .catch((error: any)) => {
        console.log(error);
        console.log(error.json()); // <--- should give JSON from response, but gives ProgressEvent instead
        return Observable.throw(error.json()); // also gives ProgressEvent when I 'subscribe' to the observable
    })
    .finally(() => {
        this.loadingBarService.complete();
    });

      

        
        
        
      

    

console.log(error)

outputs a type error Response

; console.log(error.json())

outputs some data of type ProgressEvent

.

Why am I getting ProgressEvent instead of JSON sent from non-200 status code response?

This is ProgressEvent

:

{
    bubbles: false,
    cancelBubbles: false,
    cancelable: false,
    composed: false,
    currentTarget: XMLHttpRequest,
    defaultPrevented: false,
    eventPhase: 0,
    isTrusted: true,
    lengthComputable: false,
    loaded: 0,
    path: Array(0),
    returnValue: true,
    srcElement: XMLHttpRequest,
    target: XMLHttpRequest,
    timeStamp: 1234.115,
    total: 0,
    type: "error",
    __proto__: ProgressEvent
}

      

        
        
        
      

    

As you can see, ProgressEvent

not my answer. My response is a single property JSON object error

that contains message and status. This is just wrong, why don't I get an answer?