title: Custom global error handler not hit when http error response is re-thrown by rxjs throwError
body: <p><strong>Aim:</strong> to have a global error handler for server errors and app errors (produced in Typescript code).</p>
  
  <p><strong>How:</strong> providing a custom ErrorHandler from a lib project inside the same workspace. This is my lib structure:</p>
  
  <p><a href="https://i.stack.imgur.com/xAaKF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xAaKF.png" alt="@common/error-handling lib"></a> </p>
  
  <p>I have following http-interceptor (http-error.interceptor.ts)</p>
  
  <pre><code>@Injectable()
  export class HttpErrorInterceptor implements HttpInterceptor {
  
    constructor(@Inject(LOGGER_SERVICE) private logger: ILoggerService) {}
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      return next.handle(req)
      .pipe(
          catchError( (error: HttpErrorResponse) =&gt; {
            console.log('error');
  
            return throwError(error);
          })
      );
    }
  }
  </code></pre>
  
  <p>The following custom global error handler (errors-handler.ts):</p>
  
  <pre><code>import { ErrorHandler, Injectable } from '@angular/core';
  
  @Injectable()
  export class ErrorsHandler implements ErrorHandler {
  
      handleError(error: any): void {
          console.log('hi!');
      }
  
  }
  </code></pre>
  
  <p>And this is the error-handling.module.ts</p>
  
  <pre><code>import { NgModule, ErrorHandler } from '@angular/core';
  import { HTTP_INTERCEPTORS } from '@angular/common/http';
  import { HttpErrorInterceptor } from './http-error.interceptor';
  import { ErrorsHandler } from './errors-handler';
  
      @NgModule({
        declarations: [],
        imports: [
        ],
        exports: [],
        providers: [
          {provide: ErrorHandler, useClass: ErrorsHandler},
          {provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true}
        ]
      })
      export class ErrorHandlingModule { }
  </code></pre>
  
  <p>In my public_api.ts file I only export the module</p>
  
  <pre><code>/*
   * Public API Surface of error-handling
   */
  
  export * from './lib/error-handling.module';
  </code></pre>
  
  <p>In the same workspace I have an app (the default app provided by Angular CLI, it is not inside projects folder). In my app.module.ts I have imported the ErrorHandlingModule :</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';
  
  import { ErrorHandlingModule } from '@common/error-handling';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  
  import { CoreModule } from './core/core.module';
  
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      CoreModule,
  
      ErrorHandlingModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>I have already built my @common/error-handling lib.
  I also have a fake api with json-server in which I have defined a "categories" end point. I call that service on app.component.ts in the onInit method, producing a 404 http error response by calling to the endpoint "categorie" (without "s"). I have the following in the console when I serve my app:</p>
  
  <p><a href="https://i.stack.imgur.com/n0VyD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n0VyD.png" alt="Error shown in console, but not catched by global error handler"></a></p>
  
  <p>The 404 error is there, I can also see the "error" log from http-error.interceptor.ts, but I cannot see the "hi!" log from my custom ErrorHandler.</p>
  
  <p>The global error handler is working when I throw an error from app.component.ts after calling the fake api endpoint. Somehow, the line</p>
  
  <pre><code>return throwError(error);
  </code></pre>
  
  <p>in http-error.interceptor.ts is not reaching my global error handler.</p>
  
  <p>Is it something related to zone.js? The error is thrown there and not bubbled up to the rest of the app. I am not so familiar with zone.js.</p>
  
  <p>Any other thoughts?</p>
  
  <p>Thanks in advance!</p>
  
  <p>Best,
  Max.</p>