title: How to get http backend error response body in angular 7?
body: <p>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.</p>
  
  <p>Opening chrome tools, i can see the response and when i log the http error from my angular interceptor, the error object is null.</p>
  
  <pre><code>return next.handle(request)
  
        .pipe(tap(event =&gt; {
            // 
        }, (err: HttpErrorResponse) =&gt; {
          console.log(JSON.stringify(err));
        }));
  </code></pre>
  
  <p>I expect to be able to access the message property of this response copied from chrome dev tools</p>
  
  <pre><code>{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"
  </code></pre>
  
  <p>my interceptor code is this:</p>
  
  <pre><code>    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&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
      return next.handle(request)
  
        .pipe(tap(event =&gt; {
          if (event instanceof HttpResponse) {
            // do stuff with response if you want
          }
        }, (err: HttpErrorResponse) =&gt; {
          console.log(JSON.stringify(err));
          if (err instanceof HttpErrorResponse) {
  
                this.messageService.add({
                  severity: 'error',
                  summary: 'Server Error', detail: err.error.message
                });
              }
        }));
    }
  }
  </code></pre>
  
  <p><strong>Update:</strong>
  In my http service call, i modified the headers and change the response type from default <strong>JSON</strong> to <strong>arrayBuffer</strong> like so:</p>
  
  <pre><code>    printLetter(letter: Letter) {
      const headers = new HttpHeaders();
      // @ts-ignore
      return this.http.post&lt;any&gt;(this.apiLetter, letter, {headers, responseType: 'arrayBuffer'});
    }
  </code></pre>
  
  <p>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</p>