使用全局错误处理程序处理 NGXS（角度）中的错误

Question

我想以两种方式处理 NGXS 中的错误。第一种方法是在组件中处理 store dispatch 的错误。第二种方式是全局角度错误处理程序，作为未处理错误（第一种方式未处理）时的后备。

但问题是，当动作处理程序出现错误时，NGRX 总是调用全局错误处理程序。

所以在组件中给出这段代码：

this.store.dispatch(new FetchAction())
   .subscribe( error: () => console.log('fetch error occured'))

这个动作处理程序：

fetch() {
   return this.http.get('..');
}

还有这个全局错误处理程序：

export class GlobalErrorHandler extends ErrorHandler {
   handleError(err: any) {
      console.log('unexpected error occured');
   }
}

控制台中会有两条错误消息。一个来自调度的订阅，另一个来自全局错误处理程序，因为操作处理程序中存在错误。

现在我可以在动作处理程序中捕获错误，但这样做是错误的，因为动作处理程序不应该知道该动作的错误是在组件中处理的。

我做了一个堆栈闪电战，当单击按钮时在控制台中显示两个错误：https://stackblitz.com/edit/ngxs-error-throw-r42fkb?file=src/app/app.component.ts

Answer 1

我也有同样的问题。但正如文档所说，这是设计使然。尽管您在上层处理，但错误正在传播到主 ErrorHandler。

如果在动作中抛出未处理的异常，错误将被传播到 ErrorHandler 并且您也可以通过订阅调度 Observable 来捕获它。如果您订阅了 dispatch Observable，错误将被捕获两次，一次是在 ErrorHandler 中，一次是在您的 dispatch 句柄上

Answer 2

使用 RxJS catchError 操作符处理底层错误：

这样，您捕获了错误，因此它不会调用您的全局操作处理程序。

this.store.dispatch(new FetchAction())
   .pipe(catchError(error => /* Do something specific with the error. */))
   .subscribe(() => { /* Do something with the success result. */ })

让错误冒泡到全局操作处理程序：

这里没什么特别的。只需忽略错误。 当您不知道如何处理错误时，请执行此操作。

this.store.dispatch(new FetchAction())
   .subscribe(() => { /* Do something with the success result. */ })

如果需要，您可以使用 throwError 重新抛出更具体的错误，以便在更高级别处理它时获得更多信息。

this.store.dispatch(new FetchAction())
   .pipe(catchError(error => throwError(new Error('Some specific error.'))))
   .subscribe(() => { /* Do something with the success result. */ })