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尝试从{{ 1}}，但我收到 handleError ：

ErrorLogService ：

global-error-handler.service.ts

步骤1-为全局错误消息创建一个AppConstants类（AppConstants.ts）：

[ts] Property 'handleError' does not exist on type 'typeof GlobalErrorHandler'.

步骤2 –创建用于错误记录的错误记录服务（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)
    )
  }

第3步-创建全局错误处理程序服务（GlobalErrorHandler.service.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!'; }
}

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

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

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'关键字（对于您.subscribe的可观察对象）抛出错误。

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

角度错误处理和记录-调用GlobalErrorHandler的handleError

1 个答案: