ErrorBoundary未捕获API调用抛出的ERR-401错误问题排查

云上老周

2026-6-17

问题原因与解决方案

核心原因

React（包括Expo Router的ErrorBoundary）默认仅捕获同步渲染阶段抛出的错误。你的customInstance中401错误是异步Promise拒绝，当这个Promise没有被组件内的错误处理机制正确传递到ErrorBoundary的捕获流程时，就会变成未处理的Promise拒绝，导致控制台警告且ErrorBoundary无法捕获。路由迭代后请求的执行上下文或时机变化，导致之前隐式的错误传递逻辑失效。

具体解决方法

1. 利用SWR的错误边界集成（适配你的代码场景）

因为你的customInstance包含SWR取消请求的逻辑，直接在SWR配置中开启useErrorBoundary选项，让SWR自动将异步错误抛给ErrorBoundary：

// 在调用customInstance的组件中
import useSWR from 'swr';

const { data } = useSWR('/your-api-path', customInstance, {
  useErrorBoundary: true, // 关键配置：将异步错误交给ErrorBoundary处理
});

2. 确保ErrorBoundary的层级覆盖请求组件

检查Expo Router的路由结构，确保发起API请求的所有页面/组件都处于rootLayout的ErrorBoundary子树中。如果请求是在某个布局组件（如layout.tsx）中发起的，需确认该布局组件在ErrorBoundary的包裹范围内。

3. 组件内手动捕获异步错误并同步抛出

如果未使用SWR，可在组件内通过useState存储错误，然后在渲染阶段同步抛出，让ErrorBoundary捕获：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [apiError, setApiError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        await customInstance({ url: '/your-api-path' });
      } catch (err) {
        setApiError(err);
      }
    };
    fetchData();
  }, []);

  // 同步抛出错误，触发ErrorBoundary
  if (apiError) {
    throw apiError;
  }

  return <View>{/* 组件内容 */}</View>;
}