Aurelia auth response - http

Question

I am using aurelia auth for login. But I can't get error message from server. In catch method err.response is undefined. Err is object with body of type Readable stream. Below is my code:
this.auth.login(bodyContent)
.then(response=>{
})
.catch(err=>{
console.log(err);
console.log(err.response);
});
in chrome developer tools I can see response message.
This is err printed:

Answer 1

I found solution here (https://gist.github.com/bryanrsmith/14caed2015b9c54e70c3) and it is the following:
.catch(error => error.json().then(serverError =>
console.log(serverError)
}));
The explanation can be found in the Aurelia docs:
The Fetch API has no convenient way of sending JSON in the body of a request. Objects must be manually serialized to JSON, and the Content-Type header set appropriately. aurelia-fetch-client includes a helper called json for this.

Answer 2

I also came across this same question recently.
I ended up creating a class called FetchError to encapsulate these sorts of errors. I then throw FetchError whenever an error occurs during a fetch.
login.ts:
import { FetchError } from '../../errors';
login() {
var credentials = { grant_type: "password", username: this.username, password: this.password };
return this.auth.login(credentials, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
.then((response) => {
return this.auth;
}).catch(err => {
this.errorMessage = "Login failed";
throw new FetchError("Unable to log in", err);
});
};
The FetchError class uses the 'http-status-codes' node module to look up the textual description.
errors.ts:
import * as HttpStatus from 'http-status-codes';
export class BaseError extends Error {
constructor(message) {
super(message);
this.message = message;
}
}
export class FetchError extends BaseError {
statusCode: number;
statusText: string;
description: string;
constructor(message: string, err: any) {
super(message);
if (err instanceof Response) {
var resp = <Response>err;
this.statusCode = resp.status;
if (resp.status == 12029)
this.statusText = "A connection to server could not be established";
else
this.statusText = HttpStatus.getStatusText(resp.status);
resp.json()
.then(body => {
this.description = body.Message;
console.log(`Error: ${this.message}, Status: ${this.statusText}, Code: ${this.statusCode}, Description: ${this.description}`);
})
}
else if (err instanceof Error) {
var error = <Error>error;
this.description = err.message;
console.log(`Error: ${this.message}, Description: ${this.description}`);
}
else {
this.description = "???";
console.log(`Unknown error: ${this.message}`);
}
}
}
I'm sure there are better ways of doing this. I'm still getting my head around this.