react如何处理异常

错误边界（Error Boundaries）

React 16+ 引入了错误边界的概念，用于捕获子组件树中的 JavaScript 错误，并展示降级 UI。通过定义 static getDerivedStateFromError() 或 componentDidCatch() 的类组件即可成为错误边界。

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

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

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
  }

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

try/catch 处理事件和异步代码

错误边界无法捕获事件处理器或异步代码中的异常。这些场景需使用传统的 try/catch 处理。

function MyComponent() {
  const handleClick = () => {
    try {
      // 可能抛出错误的代码
    } catch (error) {
      console.error("Event handler error:", error);
    }
  };

  return <button onClick={handleClick}>Click</button>;
}

全局错误监听

通过 window.addEventListener 监听未捕获的全局错误，适用于非 React 特有的错误处理。

useEffect(() => {
  const handleGlobalError = (error) => {
    console.error("Global error:", error);
  };
  window.addEventListener("error", handleGlobalError);
  return () => window.removeEventListener("error", handleGlobalError);
}, []);

第三方错误监控服务

集成 Sentry、Rollbar 等工具可实时监控生产环境中的错误。通常需在应用入口初始化。

import * as Sentry from "@sentry/react";
Sentry.init({ dsn: "YOUR_DSN" });

function App() {
  return <ErrorBoundary fallback={<p>An error occurred</p>}>...</ErrorBoundary>;
}

开发环境严格模式

React 的 StrictMode 组件会检测潜在问题（如不安全的生命周期方法），帮助在开发阶段暴露异常。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);