react如何处理异常

React 异常处理的基本方法

React 应用中异常处理通常分为组件内错误和全局错误两类。组件内错误可通过 try/catch 或错误边界（Error Boundaries）捕获，全局错误可通过 window.onerror 或 ErrorEvent 监听。

使用错误边界（Error Boundaries）

错误边界是 React 16 引入的类组件特性，用于捕获子组件树中的 JavaScript 错误并展示备用 UI：

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  componentDidCatch(error, errorInfo) {
    console.error("Error caught by boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

// 使用方式
<ErrorBoundary>
  <BuggyComponent />
</ErrorBoundary>

异步代码的异常处理

对于 setTimeout、fetch 等异步操作，错误边界无法捕获，需结合 try/catch：

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('/api/data');
      if (!response.ok) throw new Error('Network error');
    } catch (error) {
      console.error('Fetch failed:', error);
    }
  };
  fetchData();
}, []);

全局错误监听

通过 window.addEventListener 捕获未处理的异常：

useEffect(() => {
  const handleError = (error) => {
    // 上报错误到监控系统
    console.error('Global error:', error);
  };
  window.addEventListener('error', handleError);
  return () => window.removeEventListener('error', handleError);
}, []);

开发环境与生产环境的差异

在开发模式下，React 会默认将错误打印到控制台并中断渲染。生产环境下错误边界会捕获错误并降级渲染，但未被捕获的错误仍可能导致白屏。建议结合 Sentry 等工具进行生产环境错误监控。

函数组件中的错误处理

函数组件本身无法作为错误边界，但可通过高阶组件或自定义 Hook 封装：

function useErrorHandler(givenError) {
  const [error, setError] = useState(null);
  if (givenError) throw givenError;
  return [error, (err) => setError(err)];
}

function MyComponent() {
  const [error, handleError] = useErrorHandler();
  if (error) return <div>Error occurred</div>;
  // ...
}

事件处理器的异常捕获

事件处理器中的错误需显式处理，React 不会自动传播这些错误：

const handleClick = () => {
  try {
    // 可能抛出错误的操作
  } catch (error) {
    console.error('Event error:', error);
  }
};

服务端渲染（SSR）的异常处理

在 Next.js 等框架中，需结合 getServerSideProps 的错误处理：

export async function getServerSideProps() {
  try {
    const data = await fetchData();
    return { props: { data } };
  } catch (error) {
    return { props: { error: error.message } };
  }
}