I am facing weird issue while working with httpinterceptor in angular 5. I am not able to get the error response and error status code in Chrome and but able to get in IE below is my HttpInterceptor code.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } 
from '@angular/mon/http';
import { finalize, tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
const startTime = Date.now();
let status: string;

return next.handle(req).pipe(
    tap(
      event => {
        status = '';
        if (event instanceof HttpResponse) {
          status = 'succeeded';
        }
      },
      error => {
        if(error instanceof HttpErrorResponse)  {
          console.log(error.error.message) 
          // Above message is printing in IE but no in chorme.
       }
     }
    ),
    finalize(() => {

    })
);
 }

} 

In the above Error block the message and status code I am able to see in IE but not in Chrome. Kindly help me how to resolve this.

Edit: I am consuming data from different origin and cors is enabled in web services

I am facing weird issue while working with httpinterceptor in angular 5. I am not able to get the error response and error status code in Chrome and but able to get in IE below is my HttpInterceptor code.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } 
from '@angular/mon/http';
import { finalize, tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
const startTime = Date.now();
let status: string;

return next.handle(req).pipe(
    tap(
      event => {
        status = '';
        if (event instanceof HttpResponse) {
          status = 'succeeded';
        }
      },
      error => {
        if(error instanceof HttpErrorResponse)  {
          console.log(error.error.message) 
          // Above message is printing in IE but no in chorme.
       }
     }
    ),
    finalize(() => {

    })
);
 }

} 

In the above Error block the message and status code I am able to see in IE but not in Chrome. Kindly help me how to resolve this.

Edit: I am consuming data from different origin and cors is enabled in web services

• javascript
• angular
• angular5

• have you tried: if(error instanceof HttpErrorResponse || error instanceof ErrorEvent) ? Or just without the type checking and see if chrome reaches the error at all? – Poul Kruijt Commented Aug 16, 2018 at 18:15
• what's the actual HTTP error you're testing this with? Is there an HTTP error thrown in Chrome? – joh04667 Commented Aug 16, 2018 at 18:16
• I am trying to handle 500 interal server error with some custom meesage thrown by service – Surya Prakash Tumma Commented Aug 16, 2018 at 18:16
• Is this a CORs request or on the same origin? – Matti Price Commented Aug 16, 2018 at 18:22
• It is a CORS request – Surya Prakash Tumma Commented Aug 16, 2018 at 18:23

2 Answers 2

I found the issue, It is due to not setting response headers on errors at server side. Server is throwing exception directly for errors without setting response headers. I have set response headers at server side and now I am able to see the error message in chrome.

Still I am confused how e IE able to respond on this errors.

You are missing the HttpErrorResponse import, a more browser agnostic approach would be to look at the error status, rather than the error message.

  if (err instanceof HttpErrorResponse) {
      console.log(err.status);
  }

I believe IE uses Friendly error messages where other browsers don't https://blogs.msdn.microsoft./ieinternals/2010/08/18/friendly-http-error-pages/

Here's a fairly up to date Medium article on Interceptors and usage which may clarify some things https://medium./@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

Hope this helps