Angular custom error handler not getting error type from promise

Question

When thrown from a promise every Error my custom error handler is getting does loose its type

import { HttpErrorResponse } from "@angular/common/http";
import { ErrorHandler, Injectable, Injector, NgZone } from "@angular/core";
import { MatSnackBar } from "@angular/material";

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

    constructor(private injector: Injector) { }

    handleError(error: any): void {
        if (error instanceof HttpErrorResponse) // this needs to be triggered
            this.injector.get(NgZone).run(() => this.injector.get(MatSnackBar).open(error.message))

        console.error(error)
    }

}

findProject(2) will throw a HttpErrorResponse since project 2 does not exist.

Working

this.projectService.findProject(2).subscribe()

Not working

await this.projectService.findProject(2).toPromise()

Not working

await this.projectService.findProject(2).toPromise().catch(error => { throw error })

Not working

try {
  await this.projectService.findProject(2).toPromise()
} catch (e) {
  console.log(e instanceof HttpErrorResponse) // true
  throw e
}

ProjectService is a swagger generated class which returns an Observable

Edit: This is the error object in handleError method:

Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"OK","url":"http://localhost:9090/api/project/2","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:9090/api/project/2: 404 OK","error":{"timestamp":1534921795114,"status":404,"error":"Not Found","exception":"de.dlh.lhind.lhindquiz.controller.ResourceNotFoundException","message":"No message available","path":"/api/project/2"}}
    at resolvePromise (zone.js:814)
    at zone.js:724
    at rejected (main.js:105)
    at ...

It seems like the promise wraps the HttpErrorResponse around a regular Error and error.message is indeed the requested object

Answer 1

I just hit the same issue and stumbled upon your question.

Seems you can fix this (at least in Angular 7) by unwrapping the exception in your ErrorHandler if needed.

if (error.promise && error.rejection) {
    // Promise rejection wrapped by zone.js
    error = error.rejection;
}

// regular error handling code

Note: I figured out the structure of the wrapping Error object using console.error("%O", error) as per this question: Chrome: Print exception details to console