How to apply Angular ErrorHandler accross modules

Question

Here\'s my Angular 4 app module:

@NgModule({
declarations: [
    AppComponent
],
providers: [
    QuickBoardListService,
    {provide: ErrorHandler, useClass         


        

Answer 1

First, let's define a GlobalErrorHandler class that will inherit from ErrorHandler like so:

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { LoggingService } from '../services';  //<-- Replace this with your logging service or something similar

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

constructor(private injector: Injector) { }

handleError(error) {
    const loggingService = this.injector.get(LoggingService);
    const message = error.message ? error.message : error.toString();
      // log on the server
      loggingService.log({ message });
    });
    throw error;
  }

}

Now you have to tell Angular to use your GlobalErrorHandler instead of the default one adding the provider to your app.module.ts:

import { NgModule, ApplicationRef, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { GlobalErrorHandler } from './error-handler'; //<-- adapt the "from" to your file
import { ServicesModule } from './services';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: ErrorHandler, 
      useClass: GlobalErrorHandler
    }
  ]
})
export class AppModule { }

Answer 2

In angular you can write interceptor to intercept http request. So the in the interceptor you can handle error for all http call from one place. I will work perfectly for all modules.

interceptor for non HttpClient uses

export class AppComponent implements OnInit {
      reqInterceptable: Interceptor<any[], any[]> = req => {
        if (req[1] && req[1].headers ) {
          // do what ever you want
        }

        return req;
      };

  respInterceptable: Interceptor<Observable<Response>, Observable<Response>> = res => res.do(null, e => {
    if (e.url) {
        this.alerter.alert(new DangerAlert('HTTP Error: ' + e.status + ' ' + e.statusText,
          'URL: ' + e.url, 'Info: ' + e.json().message));
    }
    return e;
  });

  constructor(private alerter: AlertService,
    public interceptor: HttpInterceptorService,
    private router: Router,
    private route: ActivatedRoute,
  ) {
    this.skipDictionary = {};
    // handled skipAlert flag for messaging of failed requests
    this.interceptor.request().addInterceptor(this.reqInterceptable);

    // for every request if we get an error notify the user of it
    this.interceptor.response().addInterceptor(this.respInterceptable);
  }
}

Interceptor for HttpClient

This is for the new HttpClient and you can directly write the interceptor like below

@Injectable()
export class HttpsRequestInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // do something for your error message
    return next.handle(dupReq);
  }
};
@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpsRequestInterceptor, multi: true }
  ]
})
export class InterceptorModule { }