Angular 错误处理和日志记录 - 调用 GlobalErrorHandler 的 handleError

Question

我在这里学习 Angular 错误处理/日志记录教程：https://www.code-sample.com/2017/09/angular-4-error-handling-and-logging.html

我的问题是 - 如何从我的一项服务中调用 handleError 方法（位于 global-error-handler.service.ts 文件中，见下文第 3 步）？

在我的ErrorLogService 中，我还实例化了一个POST 请求（数据来自一个组件）并使用catchError 尝试从global-error-handler.service.ts 调用handleError，但我得到了[ts] Property 'handleError' does not exist on type 'typeof GlobalErrorHandler'.:

ErrorLogService：

  postData(body):Observable<any>{

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      }),
      withCredentials: true
    }
    return this.http.post(this.baseUrl2, body, httpOptions)
    .pipe(
      catchError(GlobalErrorHandler.handleError)
    )
  }

第 1 步 - 为全局错误消息创建 AppConstants 类 (AppConstants.ts)：

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!'; }
}

第 2 步 – 为错误日志创建错误日志服务 (ErrorLogService)：

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:',
                                                  (<HttpErrorResponse>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

第 3 步 - 创建全局错误处理程序服务 (GlobalErrorHandler.service.ts) 以使用错误日志服务记录错误

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);
    }
}

第 4 步 – 在 app.module.ts 中，导入服务、全局处理程序和错误处理程序：

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 { }

Answer 1

我明白了！ 我最终使用了另一个教程，他们在 App.Module.ts 中以不同的方式实例化 GlobalErrorHandlerService。按照这个工作（一个漂亮的错误处理教程）：https://www.concretepage.com/angular/angular-custom-error-handler

在其中，在app.module.ts 中，他们执行了以下操作（注意providers 数组）：

@NgModule({
  ------
  providers: [
    GlobalErrorHandlerService,
    { provide: ErrorHandler, useClass: GlobalErrorHandlerService },
    -----    
  ]
})
export class AppModule { } 

另外，就我而言，我不应该尝试致电handleError。 GlobalErrorHandlerService 覆盖默认的 ErrorHandler。因此，在我的 'GlobalErrorHandlerService' 中创建的新 handleError 方法将自动或通过使用 'throw' 关键字（在您 .subscribed 的 observables 上）向其抛出错误。

如果您在使用 Angular 全局错误处理时遇到问题，请仔细阅读上述教程。