React Hooks中API路径的Error Boundary不生效问题求助

你的代码存在两个核心问题导致Error Boundary无法生效：

1. Fetch请求的错误未被正确抛入React渲染流程 #

fetch API仅在网络错误时触发reject，HTTP状态码错误（如404）不会自动触发reject。同时你的代码未捕获任何请求错误，导致错误以未处理Promise的形式存在——而Error Boundary无法捕获异步Promise错误，仅能捕获React渲染/生命周期中的同步错误。

修复useFetch： #

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => {
        // 手动校验HTTP响应状态
        if (!res.ok) {
          throw new Error(`HTTP错误！状态码: ${res.status}`);
        }
        return res.json();
      })
      .then((data) => {
        setData(data);
        setError(null);
      })
      .catch((err) => {
        setError(err);
        setData(null);
      });
  }, [url]);

  return [data, error];
};

export default useFetch;

2. 未主动触发渲染阶段的错误捕获 #

当请求返回非数组数据（如404的响应对象）时，data.map会抛出错误，但需要你在组件中主动将错误抛出，才能被Error Boundary捕获。

修复App组件： #

import React from "react";
import "./style.css";
import useFetch from "./useFetch";

export default function App() {
  const [data, error] = useFetch('https://jsonplaceholder.typicode.com/todos/ddd');

  // 主动抛出错误，交由Error Boundary处理
  if (error) {
    throw error;
  }

  return (
    <div>
      {data && Array.isArray(data) ?
        data.map((item) => {
          return <p key={item.id}> {item.title}</p>;
        }) :
        data && <p>{data.message}</p>
      }

      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

额外说明： #

Error Boundary仅能捕获子组件树内的同步渲染错误、生命周期方法错误及Hook中的同步错误，无法直接捕获异步操作（如fetch、setTimeout）的错误，必须手动将这些错误抛入React渲染流程。你也可以使用react-error-boundary提供的useErrorHandler Hook简化异步错误捕获，无需在组件中手动抛出错误。

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