React应用中Fetch API抛出的错误无法被ErrorBoundary捕获

核心原因 #

React的ErrorBoundary只能捕获组件同步渲染阶段、生命周期方法内，以及同步事件处理函数中抛出的错误。而你代码里的onSubmit是异步函数，catch块中抛出的错误属于异步Promise链中的错误，这类错误发生在React的渲染流程之外，ErrorBoundary无法自动捕获。

你手动抛出的随机错误是同步执行的，处于React错误捕获机制的覆盖范围内，所以能被正常捕获；但fetch请求的错误是异步触发的，超出了这个范围。

解决方案 #

方案1：通过状态触发渲染时抛出错误 #

在组件中添加状态存储异步错误，然后在渲染阶段判断并抛出，让ErrorBoundary能捕获到：

import { useState } from 'react';

// 组件内部
const [asyncError, setAsyncError] = useState(null);

// 渲染阶段检查错误，若存在则抛出
if (asyncError) {
  throw asyncError;
}

const onSubmit = async (data) => {
  const eventData = {
    firstName: data.firstName,
    lastName: data.lastName,
    username: data.username,
    email: data.email,
    password: data.password,
  };

  try {
    const response = await fetch(
      "https://localhost:7182/api/v1/users/create",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(eventData),
      }
    );

    if (!response.ok) {
      const responseError = await response.json();
      const code = responseError.ErrorCode;
      if (response.status === 409) {
        if (code === emailAlreadyExists) {
          setError("email", {
            type: "server",
            message: serverErrors[code],
          });
        } else if (code === usernameAlreadyExists) {
          setError("username", {
            type: "server",
            message: serverErrors[code],
          });
        }
      }
      // 若需要将非2xx状态码也转为ErrorBoundary可捕获的错误
      // 可以在这里创建错误对象并设置到asyncError中
      // setAsyncError(new Error(responseError.Message || '请求失败'));
    } else {
      navigate("/home");
    }
  } catch (error) {
    // 将异步错误存入状态，触发重新渲染并抛出
    setAsyncError(error);
  }
};

方案2：手动通知ErrorBoundary处理错误 #

如果你的ErrorBoundary组件提供了手动触发错误的方法（比如通过props传递handleError函数），可以在catch中直接调用该方法：

// 假设父组件ErrorBoundary传递了handleError props
const onSubmit = async (data) => {
  // ... 其他代码
  catch (error) {
    props.handleError(error);
  }
};

// 对应的ErrorBoundary组件示例
class MyErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  handleError = (error) => {
    this.setState({ hasError: true, error });
  };

  render() {
    if (this.state.hasError) {
      return <h1>出错了：{this.state.error.message}</h1>;
    }
    return this.props.children;
  }
}

// 使用时传递handleError
<MyErrorBoundary ref={boundaryRef}>
  <YourFormComponent handleError={(err) => boundaryRef.current.handleError(err)} />
</MyErrorBoundary>

补充说明 #

fetch API本身只有在网络层面失败（比如请求无法发送、域名不存在等）才会进入catch块；HTTP的非2xx状态码（比如404、409）不会触发fetch的reject，所以你代码中对response.ok的判断是正确的，如果需要把这类HTTP错误也交给ErrorBoundary处理，需要手动创建错误对象并通过上述方案抛出。

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