angular 错误处理_可能出什么问题了？ 如何处理Angular中的错误

angular 错误处理

Approximately a year ago, I have implemented the first e2e tests on a project. It was a rather big application using JAVA SpringBoot on the back-end and Angular on the front-end. We used Protractor as a testing tool, which uses Selenium. In the front-end code there was a service, which had an error handler method. When that method was called, a modal dialog popped up and the user could see the details of the errors and the stack-trace.

大约一年前，我已经在一个项目上实施了第一批e2e测试。 这是一个相当大的应用程序，在后端使用JAVA SpringBoot，在前端使用Angular。 我们使用量角器作为测试工具，它使用了Selenium。 在前端代码中有一个服务，该服务具有错误处理程序方法。 调用该方法时，将弹出一个模式对话框，用户可以看到错误的详细信息和堆栈跟踪。

The problem was that while it has tracked every error that happened on the back-end, the front-end failed silently. TypeErrors, ReferenceErrors and other uncaught exceptions were logged only to the console. When something went wrong during e2e test runs the screenshot, which was taken when the test step has failed, has shown absolutely nothing. Have fun debugging that!

问题在于，尽管它跟踪了后端发生的每个错误，但前端却静默地失败了。 TypeErrors ， ReferenceErrors和其他未捕获的异常仅记录到控制台。 当e2e测试期间出现问题时，将运行测试步骤失败时所截取的屏幕截图，该结果完全没有显示。 祝您调试愉快！

Luckily Angular has a built-in way of handling errors and it is extremely easy to use. We just have to create our own service, which implements Angular's ErrorHandler interface:

幸运的是，Angular具有内置的错误处理方式，非常易于使用。 我们只需要创建自己的服务即可实现Angular的ErrorHandler接口：

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

@Injectable({
    providedIn: 'root'
})
export class ErrorHandlerService implements ErrorHandler{
    constructor() {}

    handleError(error: any) {
        // Implement your own way of handling errors
    }
}

While we could easily provide our service in our AppModule, it might be a good idea to provide this service in a separate module. This way we could create our own library and use it in our future projects as well:

尽管我们可以在AppModule中轻松提供服务，但最好在单独的模块中提供此服务。 这样，我们可以创建自己的库，并在以后的项目中使用它：

// ERROR HANDLER MODULE
import {ErrorHandler, ModuleWithProviders, NgModule} from '@angular/core';
import {ErrorHandlerComponent} from './components/error-handler.component';
import {FullscreenOverlayContainer, OverlayContainer, OverlayModule} from '@angular/cdk/overlay';
import {ErrorHandlerService} from './error-handler.service';
import {A11yModule} from '@angular/cdk/a11y';

@NgModule({
  declarations: [ErrorHandlerComponent],
  imports: [CommonModule, OverlayModule, A11yModule],
  entryComponents: [ErrorHandlerComponent]
})
export class ErrorHandlerModule {
  public static forRoot(): ModuleWithProviders {
    return {
      ngModule: ErrorHandlerModule,
      providers: [
        {provide: ErrorHandler, useClass: ErrorHandlerService},
        {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
      ]
    };
  }
}

We used the Angular CLI for generating the ErrorHandlerModule, so we already have a component generated, which can be our modal dialog's content. In order for us to be able to put it inside an Angular CDK overlay, it needs to be an entryComponent. That is why we have put it into the ErrorHandlerModule's entryComponents array.

我们使用Angular CLI生成了ErrorHandlerModule ，因此我们已经生成了一个组件，该组件可以作为模式对话框的内容。 为了使我们能够将其放入Angular CDK叠加层中，它必须是entryComponent。 这就是为什么我们将其放入ErrorHandlerModule的entryComponents数组中的原因。

We also added some imports. OverlayModule and A11yModule comes from the CDK module. They are needed for creating our overlay and to trap focus when our error dialog is opened. As you can see, we provide OverlayContainer using the FullscreenOverlayContainer class because if an error occurs, we want to restrict our users' interactions to our error modal. If we don't have a fullscreen backdrop, the users might be able to interact with the application and cause further errors. Let's add our newly created module to our AppModule:

我们还添加了一些进口。 OverlayModule和A11yModule来自CDK模块。 当我们打开错误对话框时，它们是创建覆盖图和捕获焦点所必需的。 如您所见，我们使用FullscreenOverlayContainer类提供OverlayContainer ，因为如果发生错误，我们希望将用户的交互限制为我们的错误模式。 如果我们没有全屏背景，则用户可能能够与该应用程序进行交互并导致进一步的错误。 让我们将新创建的模块添加到AppModule中 ：

// APP MODULE
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {MainComponent} from './main/main.component';
import {ErrorHandlerModu