如何正确捕获NGXS dispatch操作触发的异常？

为什么你的捕获操作没生效？ #

问题出在NGXS的内部错误处理机制上：当Action执行过程中抛出未处理的异常（不管是Observable的错误还是Promise的reject），NGXS会默认把这个异常转发给Angular的全局ErrorHandler（也就是你配置的OurHandler）。哪怕你在组件的订阅里用catchError或者.catch()捕获了错误，也会触发全局错误模态框——因为组件的订阅监听的是dispatch返回的Observable结果，而NGXS内部在执行Action时的异常已经被它自己的错误处理流程捕获，并转发给了全局ErrorHandler，这是两个独立的处理流。

解决方案 #

方案1：在Action内部捕获并处理异常（推荐） #

最直接的方式是在State的Action方法里就把异常处理掉，不让它流出到NGXS的错误转发机制中。这样既可以控制状态更新，又能避免全局错误模态框弹出。

修改你的ThingDoingState：

@Action(DoTheThing)
doTheThing(ctx: StateContext<ThingDoingModel>, { foo }: DoTheThing): Observable<string> {
  return this.apiService.doTheThing(foo).pipe(
    catchError(err => {
      // 1. 可选：更新状态，保存错误信息或修改加载状态
      const currentState = ctx.getState();
      ctx.setState({
        ...currentState,
        error: err.message,
        isLoading: false
      });

      // 2. 选择：要么返回EMPTY让Action流正常完成（组件的error回调不会触发）
      // return EMPTY;

      // 或者返回throwError，让组件的订阅能捕获到错误并显示自定义模态框
      return throwError(() => err);
    })
  );
}

然后组件里的订阅可以这样写：

onSubmit() {
  this.store.dispatch(new DoTheThing(this.foo)).subscribe({
    next: () => this.showSuccessModal(),
    error: (err) => this.showErrorModal(err.message)
  });
}

⚠️ 注意：如果在Action里返回throwError，NGXS不会再次转发这个错误到全局——因为你已经在Action的Observable链中用catchError处理了原始错误，重新抛出的错误只会被组件的订阅捕获。

方案2：自定义NGXS错误处理，阻止全局转发 #

如果你希望在多个Action中统一处理错误，或者不想在每个Action里写catch逻辑，可以自定义NgxsErrorHandler，覆盖默认的错误转发行为。

1. 创建自定义错误处理器：

import { NgxsErrorHandler } from '@ngxs/store';
import { Injectable } from '@angular/core';

@Injectable()
export class CustomNgxsErrorHandler implements NgxsErrorHandler {
  handleError(error: any): void {
    // 这里可以添加日志记录等逻辑，但是不要调用Angular的全局ErrorHandler
    console.error('NGXS Action 执行出错:', error);
    // 什么都不做的话，就不会触发你配置的OurHandler了
  }
}

2. 在AppModule中提供这个自定义处理器：

@NgModule({
  // ...其他配置
  providers: [
    { provide: ErrorHandler, useClass: OurHandler },
    { provide: NgxsErrorHandler, useClass: CustomNgxsErrorHandler } // 新增这一行
  ]
})
export class AppModule {}

这样，所有NGXS Action的错误都会被CustomNgxsErrorHandler处理，不会再转发给Angular的全局ErrorHandler，你在组件里的catchError或者.catch()就能正常捕获错误，只显示你自定义的模态框。

方案3：用try/catch处理Promise类型的Action #

如果你的Action返回的是Promise（像你代码里那样），可以用async/await配合try/catch来捕获异常：

@Action(DoTheThing)
async doTheThing(ctx: StateContext<ThingDoingModel>, { foo }: DoTheThing): Promise<string> {
  try {
    return await this.apiService.doTheThing(foo);
  } catch (err) {
    // 可选：更新状态
    ctx.patchState({ error: err.message });
    
    // 如果你想让组件捕获错误，就重新抛出
    throw err;
    // 否则返回一个默认值，让Promise正常resolve
    // return '';
  }
}

这种方式和方案1的原理一样，都是在Action内部处理异常，避免NGXS转发到全局ErrorHandler。

总结 #

最推荐的是方案1，因为它能让你在Action内部统一管理状态和错误逻辑，同时保持组件的逻辑简洁。如果需要全局统一处理NGXS的错误，方案2会更合适。

内容的提问来源于stack exchange，提问作者KRyan