title: Angular error handling and logging - Call GlobalErrorHandler's handleError
body: <p>I'm following an Angular error handling/logging tutorial here: <a href="https://www.code-sample.com/2017/09/angular-4-error-handling-and-logging.html" rel="nofollow noreferrer">https://www.code-sample.com/2017/09/angular-4-error-handling-and-logging.html</a></p>
  
  <p>My question is - how can I call the <code>handleError</code> method (residing in the <code>global-error-handler.service.ts</code> file, seen in step 3 below) from one of my services?</p>
  
  <p>In my <code>ErrorLogService</code>, I'm also instantiating a <code>POST</code> request (with data coming from a component) and using <code>catchError</code> to try and call <code>handleError</code> from <code>global-error-handler.service.ts</code>, but I'm getting <em><code>[ts] Property 'handleError' does not exist on type 'typeof GlobalErrorHandler'.</code></em>:</p>
  
  <p><strong>ErrorLogService</strong>:</p>
  
  <pre><code>  postData(body):Observable&lt;any&gt;{
  
      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        }),
        withCredentials: true
      }
      return this.http.post(this.baseUrl2, body, httpOptions)
      .pipe(
        catchError(GlobalErrorHandler.handleError)
      )
    }
  </code></pre>
  
  <p><br/></p>
  
  <p><strong>Step 1 - Create an AppConstants class (AppConstants.ts) for global error messages:</strong></p>
  
  <pre><code>export class AppConstants {
  public static get baseURL(): string { return 'http://localhost:4200/api'; }
  public static get httpError(): string { return 'There was an HTTP error.'; }
  public static get typeError(): string { return 'There was a Type error.'; }
  public static get generalError(): string { return 'There was a general error.'; }
  public static get somethingHappened(): string { return 'Nobody threw an Error but something happened!'; }
  }
  </code></pre>
  
  <p><strong>Step 2 – Create an error log service (ErrorLogService) for error logging:</strong></p>
  
  <pre><code>import { Injectable} from '@angular/core';
  import { HttpErrorResponse } from '@angular/common/http';
  import{ AppConstants} from '../app/constants'
  // my import of globalErrorHandler, so I can (hopefully) use its handleError method
  import { GlobalErrorHandler } from '../global-error-handler/global-error-handler';
  
  //#region Handle Errors Service
  @Injectable()
  export class ErrorLogService {
  
    constructor() {  }
  
    //Log error method
    logError(error: any) {
      //Returns a date converted to a string using Universal Coordinated Time (UTC).
      const date = new Date().toUTCString();
  
      if (error instanceof HttpErrorResponse) {
        //The response body may contain clues as to what went wrong,
        console.error(date, AppConstants.httpError, error.message, 'Status code:',
                                                    (&lt;HttpErrorResponse&gt;error).status);
      }
      else if (error instanceof TypeError) {
        console.error(date, AppConstants.typeError, error.message, error.stack);
      }
      else if (error instanceof Error) {
        console.error(date, AppConstants.generalError, error.message, error.stack);
      }
      else if(error instanceof ErrorEvent){
        //A client-side or network error occurred. Handle it accordingly.
        console.error(date, AppConstants.generalError, error.message);
      }
      else {
        console.error(date, AppConstants.somethingHappened, error.message, error.stack);
      }
    }
  }
  //#endregion
  </code></pre>
  
  <p><strong>Step 3 - Create a global error handler service (GlobalErrorHandler.service.ts) for using the error log service to log errors</strong></p>
  
  <pre><code>import { Injectable, ErrorHandler } from '@angular/core';
  import {ErrorLogService} from './error-log.service';
  
  // Global error handler for logging errors
  @Injectable()
  export class GlobalErrorHandler extends ErrorHandler {
      constructor(private errorLogService: ErrorLogService) {
         //Angular provides a hook for centralized exception handling.
         //constructor ErrorHandler(): ErrorHandler
          super();
      }
  
      handleError(error) : void {
          this.errorLogService.logError(error);
      }
  }
  </code></pre>
  
  <p><strong>Step 4 – In app.module.ts, import services, global handler and error handler:</strong></p>
  
  <pre><code>import { NgModule, ErrorHandler } from '@angular/core';
  import {ErrorLogService} from './error-logg.service';
  import {GlobalErrorHandler} from './global-error.service';
  
  @NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
      UserComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      RouterModule.forRoot([
        { path: '', component: AppComponent, pathMatch: 'full', canActivate: [AuthGuard]},
        { path: 'user', component: UserComponent, canActivate: [AuthGuard]},
        { path: 'login', component: LoginComponent}])
    ],
    providers: [ ErrorLogService, // register global error log service
                GlobalErrorHandler,// register global error handler
                EmployeeService, // register Employee service
                ValidationService, //register Validation Service
                AuthenticationService, //register Authentication Service
                UserService],//register User Service
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>