XState.js：子服务Guard中的异常无法捕获，该如何处理？

问题场景 #

尝试通过外部try/catch捕获Guard中抛出的异常，但未成功。示例代码如下：

const { interpret, createMachine } = require("xstate");

const fetchMachine = createMachine(
  {
    initial: "start",
    states: {
      start: {
        on: {
          LETS_TRY: "subService",
        },
      },
      subService: {
        invoke: {
          src: () => Promise.resolve(),
          onDone: [
            {
              target: "stop",
              cond: "someGuard",
            },
          ],
          onError: "stop",
        },
      },
      stop: {
        type: "final",
      },
    },
  },
  {
    guards: {
      someGuard: () => {
        throw new Error("error in guard");
      },
    },
  }
);

try {
  interpret(fetchMachine)
    .start()
    .send("LETS_TRY");
} catch (e) {
  console.log("exception caught", e.message);
}

预期输出exception caught，但实际得到错误：

Error: Unable to evaluate guard 'someGuard' in transition for event 'done.invoke.(machine).subService:invocation[0]' in state node '(machine).subService'

解决方案 #

XState的Guard异常无法通过外部try/catch捕获，因为Guard的执行属于XState内部调度流程（微任务阶段），外部同步try/catch无法覆盖。可以通过以下两种方式处理：

1. Guard内部自行捕获异常

在Guard函数内用try/catch包裹风险逻辑，返回默认布尔值避免异常冒泡：

guards: {
  someGuard: () => {
    try {
      // 可能抛出异常的逻辑
      throw new Error("error in guard");
    } catch (e) {
      console.log("Guard内部捕获异常:", e.message);
      return false; // 异常时返回默认判定结果
    }
  },
}

2. 监听XState全局错误事件

通过解释器的onError方法捕获所有内部未处理异常：

interpret(fetchMachine)
  .onError((error) => {
    console.log("全局捕获Guard异常:", error.message);
  })
  .start()
  .send("LETS_TRY");

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