react如何接收异常
在React中接收和处理异常可以通过多种方式实现，以下是一些常见的方法：
错误边界（Error Boundaries）
错误边界是React组件，用于捕获子组件树中的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;
}
}使用方式是将组件包裹在错误边界中：
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>try/catch捕获同步错误
对于组件内部的同步代码，可以使用传统的try/catch捕获异常：
function MyComponent() {
try {
// 可能抛出错误的代码
} catch (error) {
console.error(error);
return <div>Error occurred</div>;
}
return <div>Normal content</div>;
}异步错误处理
对于异步操作（如fetch、setTimeout），需要在Promise的catch中处理错误：
useEffect(() => {
fetchData()
.then(data => setState(data))
.catch(error => {
console.error(error);
setErrorState(true);
});
}, []);全局错误监听
通过window.onerror或window.addEventListener('error')捕获全局未处理的错误：
window.addEventListener('error', (event) => {
console.error('Global error:', event.error);
});未捕获的Promise错误
监听unhandledrejection事件捕获未处理的Promise拒绝：
window.addEventListener('unhandledrejection', (event) => {
console.error('Unhandled rejection:', event.reason);
});注意事项
- 错误边界无法捕获事件处理器、异步代码、服务端渲染错误或错误边界自身抛出的错误。
- 生产环境应结合监控工具（如Sentry）收集错误信息。
- 对于表单验证等场景，建议使用受控组件和状态管理而非异常。
