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")
);
