在 Angular 中使用 async/await 时无法捕获全局异常答案

【问题标题】：Unable to catch global exceptions when using async/await in angular在 Angular 中使用 async/await 时无法捕获全局异常
【发布时间】：2020-03-12 09:55:57
【问题描述】：

到目前为止添加代码的sn-ps

app.module.ts

@Injectable()
class UIErrorHandler extends ErrorHandler {
  constructor() {
    super();
  }
  handleError(error) {
    super.handleError(error);
    alert(`Error occurred:${error.message}`);
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AngularFireAuthModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    LoginModule,
    AppRoutingModule,
  ],
  providers: [
    {
      provide: ErrorHandler,
      useClass: UIErrorHandler,
    },
    AuthenticationService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}
}

LoginComponent -> 在LoginModule 中声明的组件

import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { AuthenticationService } from "~services/authentication.service";

@Component({
  selector: "login",
  templateUrl: "./login.component.html",
  styleUrls: ["./login.component.scss"],
})
export class LoginComponent {
  constructor(public authenticationService: AuthenticationService, public router: Router) {
  }

  signIn = async () => {
    throw new Error("test error")
  };
}

如果从signIn 函数中删除async，则会捕获错误并且一切正常，但是使用async，全局处理程序无法捕获任何异常。如何在全球范围内捕获基于承诺的异常？

Uncaught (in promise) Error: test error
at LoginComponent.signIn (login.component.ts:56)
at Object.eval [as handleEvent] (LoginComponent.html:6)
at handleEvent (core.js:43993)
at callWithDebugContext (core.js:45632)
at Object.debugHandleEvent [as handleEvent] (core.js:45247)
at dispatchEvent (core.js:29804)
at core.js:31837
at SafeSubscriber.schedulerFn [as _next] (core.js:35379)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)

【问题讨论】：

听起来更像是您想使用HttpInterceptor。
@Chrillewoodz 没有尝试过HttpInterceptor，但是在使用不是网络调用的承诺的情况下，我如何捕捉这些错误？
在异步函数中尝试 catch 期望被拒绝的承诺，如果您直接抛出而没有相应的“等待”，则那里没有承诺拒绝。此外，如果你在异步函数中的 try 块中抛出异常，节点会抱怨你没有处理异常。
@JudeFernandes 我认为你不能在异步上下文中“引发”错误，因为没有堆栈可以引发，如果你想在同一个地方处理所有错误，你可以创建一个库来处理异常或使用事件发射器“引发”异常。

标签： javascript angular typescript async-await

【解决方案1】：

你能查一下the stackblitz here吗？这是你调用singIn函数的方式吗？

我基本上做了以下几点：

在组件ts中添加代码

export class AppComponent  {
    constructor() {
    this.signIn();
  }

  signIn = async () => {
    throw new Error('test error');
  }
}

修改module.ts如下：

@Injectable()
class UIErrorHandler extends ErrorHandler {
  constructor() {
    super();
  }
  handleError(error) {
    super.handleError(error);
    alert(`Error occurred:${error.message}`);
  }
}

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
    providers: [
    {
      provide: ErrorHandler,
      useClass: UIErrorHandler,
    }
  ],
})
export class AppModule { }

如您所见，这本身就可以工作。检查你的角度版本as there was an issue with non awaited promises in the past

【讨论】：

感谢您的示例和详细的答案，解决方案看起来和我的一模一样，我猜本地有一些东西会干扰错误，我会检查一下，谢谢