react如何抛异常
如何在 React 中抛出异常
在 React 中，异常处理通常分为组件内部错误和全局错误捕获两种方式。以下是具体实现方法：
组件内部抛出异常
直接使用 JavaScript 的 throw 语句抛出错误：
function MyComponent() {
const throwError = () => {
throw new Error('自定义错误信息');
};
return <button onClick={throwError}>触发错误</button>;
}使用 Error Boundary 捕获组件树异常
React 16+ 提供了错误边界（Error Boundary）机制捕获子组件树中的 JavaScript 异常：
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error('捕获到错误:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>组件渲染出错</h1>;
}
return this.props.children;
}
}
// 使用方式
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>异步代码中的异常处理
对于 Promise 或 async/await 需要单独处理：
async function fetchData() {
try {
const response = await fetch('/api/data');
if (!response.ok) throw new Error('请求失败');
} catch (error) {
console.error('异步错误:', error);
// 可以在此处更新组件状态显示错误信息
}
}全局错误监听
捕获未被 Error Boundary 处理的错误：
// 类组件生命周期错误
window.addEventListener('error', (event) => {
console.error('全局错误:', event.error);
});
// 未捕获的Promise异常
window.addEventListener('unhandledrejection', (event) => {
console.error('未处理的Promise拒绝:', event.reason);
});最佳实践建议
- 关键组件应包裹 Error Boundary
- 异步操作必须包含 try/catch
- 生产环境应记录错误到日志服务
- 开发环境可利用 React 开发工具检测错误
错误边界无法捕获以下场景：
- 事件处理器中的错误（需自行 try/catch）
- 异步代码（setTimeout/requestAnimationFrame）
- 服务端渲染错误
- 错误边界自身抛出的错误
