react如何接收异常
在React中接收和处理异常是确保应用健壮性的关键。以下方法可帮助开发者有效捕获异常：
错误边界（Error Boundaries）
使用类组件定义错误边界，通过componentDidCatch生命周期方法捕获子组件树中的JavaScript错误：
class ErrorBoundary extends React.Component {
state = { hasError: false };
componentDidCatch(error, info) {
this.setState({ hasError: true });
console.error('Caught error:', error, info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}使用时包裹可能出错的组件：
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>try/catch捕获同步错误
对于组件内部的同步代码，使用标准try/catch语句：
function MyComponent() {
const fetchData = () => {
try {
// 可能抛出错误的代码
} catch (error) {
console.error('Sync error caught:', error);
}
};
return <button onClick={fetchData}>Click</button>;
}异步错误处理
处理Promise或async/await中的异常时，需显式捕获：
async function loadData() {
try {
const response = await fetch('/api/data');
const data = await response.json();
} catch (error) {
console.error('Async error:', error);
}
}全局错误监听
通过window.onerror或window.addEventListener捕获未处理的全局错误：
window.addEventListener('error', (event) => {
console.error('Global error:', event.error);
});事件处理器错误
React事件处理器中的错误不会冒泡到错误边界，需单独处理：
function handleClick() {
try {
// 可能出错的逻辑
} catch (error) {
console.error('Event error:', error);
}
}开发环境与生产环境差异
注意开发模式下React会重复渲染以显示错误，生产环境则只渲染一次。可通过process.env.NODE_ENV区分环境处理逻辑。
日志上报
将捕获的错误发送至监控服务：
componentDidCatch(error, info) {
logErrorToService(error, info.componentStack);
}通过组合这些方法，可以构建多层次的错误处理系统，确保React应用的稳定性。错误边界适合处理渲染期间的意外错误，而显式的try/catch更适合处理已知可能出错的操作逻辑。
