Accessing HTTP Error Response Body from HttpInterceptor in Angular

Question

I have an HttpInterceptor to catch errors and display them in a modal. Besides error code and message, I would also like to show the body of the response which actually hold

Answer 1

To make full use of Typescript I usually create an interface that extends HttpErrorResponse:

interface APIErrorResponse extends HttpErrorResponse {
   error: {
      id?: string
      links?: { about: string }
      status: string
      code?: string
      title: string
      detail: string
      source?: {
         pointer?: string
         parameter?: string
      }
      meta?: any
      }
}

After that, just assign APIErrorResponse instead of HttpErrorResponse to your error object and access your server's custom error as mentioned above: error.error