How to get http backend error response body in angular 7?

Question

Using Spring boot as my backend which send some error response with json body to my frontend angular. I have angular http interceptor sets up to intercept http errors. but i can not get the json error response from the backend.

Opening chrome tools, i can see the response and when i log the http error from my angular interceptor, the error object is null.

return next.handle(request)

      .pipe(tap(event => {
          // 
      }, (err: HttpErrorResponse) => {
        console.log(JSON.stringify(err));
      }));

I expect to be able to access the message property of this response copied from chrome dev tools

{timestamp: "2019-06-24T15:17:41.864+0000", status: 400, error: "Bad Request",…}
error: "Bad Request"
errors: [{codes: ["Min.examinerLogin.phoneNo", "Min.phoneNo", "Min.java.lang.String", "Min"],…}]
message: "Validation failed for object='examinerLogin'. Error count: 1"
path: "/api/public/letters"
status: 400
timestamp: "2019-06-24T15:17:41.864+0000"
trace: "org.springframework.web.bind.MethodArgumentNotVali"

my interceptor code is this:

    import {Injectable} from '@angular/core';
import {HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse, HttpResponse} from '@angular/common/http';
import { AuthService } from './auth.service';
import {Router} from '@angular/router';
import {Observable} from 'rxjs';
import {tap} from 'rxjs/operators';
import {MessageService} from 'primeng/api';

@Injectable({
  providedIn: 'root'
})

export class TokenInterceptor implements HttpInterceptor {

  constructor(
    private router: Router,
    private authenticationService: AuthService,
    private messageService: MessageService
    ) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(request)

      .pipe(tap(event => {
        if (event instanceof HttpResponse) {
          // do stuff with response if you want
        }
      }, (err: HttpErrorResponse) => {
        console.log(JSON.stringify(err));
        if (err instanceof HttpErrorResponse) {

              this.messageService.add({
                severity: 'error',
                summary: 'Server Error', detail: err.error.message
              });
            }
      }));
  }
}

Update: In my http service call, i modified the headers and change the response type from default JSON to arrayBuffer like so:

    printLetter(letter: Letter) {
    const headers = new HttpHeaders();
    // @ts-ignore
    return this.http.post<any>(this.apiLetter, letter, {headers, responseType: 'arrayBuffer'});
  }

So Angular expects arrayBuffer response instead of JSON error response. Now I wonder if the response type can be of type array such that both JSON and arrayBuffer can be expected

Answer 1

finally got it working...

from this answer here https://stackoverflow.com/a/48502027/1597923

So I added this piece to my error.interceptor.ts file and voila

....
if (err.error instanceof Blob) {
   const reader: FileReader = new FileReader();
   reader.onloadend = () => {
   if (typeof reader.result === 'string') {
       const err1 = JSON.parse(reader.result);
       this.messageService.add({
          severity: 'error',
          summary: err1.error, detail: err1.message
       });
   }
 };
 reader.readAsText(err.error);
            }
....