title: HttpInterceptor in Angular 4.3: Intercepting 400 error responses
body: <p>I would like <strong>to intercept 401 and other errors</strong> in order to react accordingly. This is my interceptor:</p>
  
  <pre><code>import { LoggingService } from './../logging/logging.service';
  import { Injectable } from '@angular/core';
  import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse, HttpErrorResponse } from '@angular/common/http';
  
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/do';
  
  @Injectable()
  export class TwsHttpInterceptor implements HttpInterceptor {
  
      constructor(private logger: LoggingService) { }
  
      intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
          this.logger.logDebug(request);    
          return next.handle(request)
              .do(event =&gt; {
                  if (event instanceof HttpResponse) {
                      this.logger.logDebug(event);
                  }
              });
      }
  }
  </code></pre>
  
  <p>While this works well for 200 requests, <strong>it does not intercept the error respsonses</strong></p>
  
  <p>All I see in chrome's dev console is this:</p>
  
  <blockquote>
    <p>zone.js:2616 GET <a href="http://localhost:8080/backend/rest/wrongurl" rel="noreferrer">http://localhost:8080/backend/rest/wrongurl</a> 404 (Not
    Found)</p>
  </blockquote>
  
  <p>Or this</p>
  
  <blockquote>
    <p>zone.js:2616 GET <a href="http://localhost:8080/backend/rest/url" rel="noreferrer">http://localhost:8080/backend/rest/url</a> 401
    (Unauthorized)</p>
  </blockquote>
  
  <p>I would like my interceptor to deal with this. What am I missing ?</p>