angular - 当 rxjs throwError 重新抛出 http 错误响应时，自定义全局错误处理程序未命中

Question

目标:为服务器错误和应用程序错误(在 Typescript 代码中生成)提供全局错误处理程序。

如何:从同一工作空间内的 lib 项目中提供自定义 ErrorHandler。这是我的库结构:



我有以下 http-interceptor (http-error.interceptor.ts)

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {

  constructor(@Inject(LOGGER_SERVICE) private logger: ILoggerService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req)
    .pipe(
        catchError( (error: HttpErrorResponse) => {
          console.log('error');

          return throwError(error);
        })
    );
  }
}

以下自定义全局错误处理程序 (errors-handler.ts):

import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class ErrorsHandler implements ErrorHandler {

    handleError(error: any): void {
        console.log('hi!');
    }

}

这是错误处理.module.ts

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

在我的 public_api.ts 文件中，我只导出模块

/*
 * Public API Surface of error-handling
 */

export * from './lib/error-handling.module';

在同一个工作区中，我有一个应用程序(Angular CLI 提供的默认应用程序，它不在项目文件夹中)。在我的 app.module.ts 中，我导入了 ErrorHandlingModule :

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

我已经建立了我的@common/error-handling 库。
我还有一个带有 json-server 的假 api，我在其中定义了一个“类别”端点。我在 onInit 方法中调用 app.component.ts 上的该服务，通过调用端点“categorie”(不带“s”)产生 404 http 错误响应。提供应用程序时，控制台中有以下内容:



404 错误在那里，我也可以从 http-error.interceptor.ts 看到“错误”日志，但我看不到“嗨!”从我的自定义 ErrorHandler 记录。

当我在调用假 api 端点后从 app.component.ts 抛出错误时，全局错误处理程序正在工作。不知何故，线

return throwError(error);

在 http-error.interceptor.ts 中没有到达我的全局错误处理程序。

它与 zone.js 有关吗？错误在那里被抛出，而不是冒泡到应用程序的其余部分。我对 zone.js 不太熟悉。

还有其他想法吗？

提前致谢!

最好的，
最大限度。

Answer 1

export class ErrorHandlingModule { 
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: ErrorHandlingModule,
      providers: [
        {provide: ErrorHandler, useClass: ErrorsHandler},
        {provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true} ]
    };
}

然后在 AppModule 导入中使用 ErrorHandlingModule.forRoot()
更多信息 - https://angular.io/api/router/RouterModule#forRoot