Angular 6 error handlig - HttpErrorResponse has undefined status - json

Question

I have a Angular 6 client consuming a REST Api developed with .Net Web Api.
Everything is working except for the error handling. When I try to process the error to react differently to different status codes (404, 403, 409, 500...) I simply can't make it work. The HttpErrorResponse object doesn't have any of the fields it is supposed to (like 'status' or 'error').
I've made a super simple service that reproduces the issue:
Request on the service.ts
public test(): Observable<any> {
let url = this.templatesUrl + '/myMethod';
console.log('GET myMethod ' + url);
return this.http.get<any>(url)
.pipe(catchError(this.handleError));
}
Error handler (pretty much straight from the official documentation):
private handleError(error: HttpErrorResponse) {
console.warn(error);
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.message}`);
}
// return an observable with a user-facing error message
return throwError('Unexpected error');
}
Service on the .Net side:
[HttpGet]
[Route("myMethod")]
public IHttpActionResult myDotNetMethod()
{
return InternalServerError(new Exception("Details about the issue"));
}
The service is called and it returns a status code 500 along with a json object:
The status of the response:
The response header, it is json:
The json object:
And what the log shows: no status and pretty much an empty object:
Loosk like the HttpErrorResponse is pretty much empty. But the response from the API was fine, the status code is there and the json object too.
What am I missing?
Update: In case you are wonder what hides behind that "Internal Server Error" that shows in the log (it is just the callstack generated by chrome):
Update 2: Here's the error object under the microscope. It is simply "Internal Server Error". No trace of status or message.

Answer 1

Solved... the object was empty due to an interceptor. So if something similar is happening to you check those out.
I'm sorry to have wasted everyone's time, I was unaware of the existance of that particular interceptor.

Answer 2

I think your problem is how you are throwing the error in .Net.
Try this:
var statusCode = HttpStatusCode.InternalServerError;
var response = new HttpResponseMessage(statusCode)
{
Content = new ObjectContent<object>(
new
{
Message = "Error Message",
ExceptionMessage = "StackTrace"
},
new JsonMediaTypeFormatter())
};
throw new HttpResponseException(response);
Or if it does not work try this: https://stackoverflow.com/a/28589333/8758483
Another good idea is to centralize your error handling by implementing an ErrorHandler in Angular.
import { ErrorHandler } from '#angular/core';
#Injectable()
export class GlobalErrorHandler implements ErrorHandler {
handleError(error) {
// your custom error handling logic
}
}
Then you tell Angular you want to use this class instead of the default one by providing it in you NgModule:
#NgModule({
providers: [{provide: ErrorHandler, useClass: GlobalErrorHandler}]
})
If you want more detail you can read this article:
Expecting the Unexpected — Best practices for Error handling in Angular

Answer 3

In the response the property is called "Message" and not "message".