Accessing HTTP Error Response Body from HttpInterceptor in Angular

The answer applies to versions of Angular below 6.

The body should be available in the error property, so:

return next.handle(req).do(event => {}, (error: HttpErrorResponse) => {  console.log(error.error); // body  ...});

Here is the gist of the implementation from the sources:

if (ok) {  ...} else {  // An unsuccessful request is delivered on the error channel.  observer.error(new HttpErrorResponse({    // The error in this case is the response body (error from the server).    error: body,   <--------------------    headers,    status,    statusText,    url: url || undefined,  }));}

To learn more about mechanics behind interceptors read:

• Insider’s guide into interceptors and HttpClient mechanics in Angular

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