React Router中如何让异步/useEffect错误触发errorElement？

问题现象 #

• 同步渲染阶段抛出错误时，errorElement 能正常触发并处理：

function SyncError() {
  throw new Response('sync error', { status: 500 });
  return <p>You shouldn't see this</p>;
}

• 但在 Promise 中抛出的错误（即使捕获后重新抛出），无法被 errorElement 捕获：

function AsyncError() {
  Promise.reject(new Response('sync error', { status: 500 }))
    .catch((e) => {
      throw e;
    });
  return <p>You shouldn't see this</p>;
}

• 实际业务场景中，useEffect 内部异步操作抛出的错误，同样无法被 errorElement 捕获：

useEffect(() => {
  someMethodThatThrows()
    .then(...)
    .catch((e) => {
      // 该如何处理？
    });
}, []);

结论：属于预期行为 #

根据 React Router 官方文档说明：

React Router会自动处理绝大多数应用错误，捕获以下场景中抛出的错误：

• 渲染过程
• 数据加载
• 数据更新

实际应用中，除事件处理器（如<button onClick>）或useEffect中抛出的错误外，几乎所有错误都会被处理，而React Router应用中这类场景很少见。

替代方案 #

若需要让 useEffect 中的异步错误被 errorElement 捕获，可通过以下方式实现：

• 将异步错误转移到渲染阶段抛出：

function Component() {
  const [error, setError] = useState<Response | null>(null);

  useEffect(() => {
    someMethodThatThrows()
      .catch((e) => setError(e));
  }, []);

  // 在渲染阶段抛出错误，触发errorElement
  if (error) {
    throw error;
  }

  // 组件正常渲染逻辑
  return <div>...</div>;
}

这种方式能复用 errorElement 的统一错误处理逻辑，比单独用本地状态存储错误的方案更符合React Router的设计逻辑。

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