react如何处理异常
错误边界（Error Boundaries）
React 16+ 引入错误边界组件，用于捕获子组件树中的 JavaScript 异常。需定义 static getDerivedStateFromError() 或 componentDidCatch() 生命周期方法：
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
logErrorToService(error, info);
}
render() {
if (this.state.hasError) {
return <FallbackUI />;
}
return this.props.children;
}
}Try/Catch 处理事件异常
React 事件处理器内的异常不会被错误边界捕获，需手动处理：
const handleClick = () => {
try {
dangerousOperation();
} catch (error) {
console.error('Event handler error:', error);
}
};异步代码错误处理
对 Promise 和 async/await 需单独处理：
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('/api');
} catch (error) {
console.error('Fetch error:', error);
}
};
fetchData();
}, []);开发环境 vs 生产环境
- 开发模式：错误会触发完整堆栈跟踪
- 生产模式：错误被压缩，需通过 source map 调试
第三方错误报告
集成 Sentry/Bugsnag 等工具：
import * as Sentry from '@sentry/react';
<Sentry.ErrorBoundary fallback={<p>An error occurred</p>}>
<App />
</Sentry.ErrorBoundary>
