JavaScript异常处理依赖try...catch...finally和异步错误捕获，React中通过错误边界组件捕获子组件错误，结合全局监听与监控工具实现多层防护，确保程序优雅降级。
JavaScript中的异常处理机制主要依赖于try...catch...finally结构和对异步操作的错误捕获。编写健壮的错误边界意味着在程序出错时能防止崩溃、提供反馈并维持基本功能，特别是在前端框架如React中，“错误边界”有特定含义。
理解JavaScript的异常处理基础
使用try...catch可以捕获同步代码中的运行时错误：
try {
let result = riskyOperation();
console.log(result);
} catch (error) {
console.error("出错了：", error.message);
}
如果riskyOperation()抛出异常，catch块会捕获它，避免脚本中断。finally块可选，用于执行清理操作：
finally {
cleanup(); // 无论是否出错都会执行
}
对于异步代码，需结合Promise或async/await：
立即学习“Java免费学习笔记（深入）”；
async function fetchData() {
try {
const res = await fetch('/api/data');
if (!res.ok) throw new Error(res.statusText);
return await res.json();
} catch (error) {
console.error("请求失败：", error);
}
}
未被.catch()处理的Promise拒绝会在控制台报错，可能触发unhandledrejection事件，建议监听：
window.addEventListener('unhandledrejection', event => {
console.warn('未处理的Promise拒绝：', event.reason);
event.preventDefault(); // 阻止默认行为（如控制台警告）
});
在React中实现错误边界
错误边界是React组件，通过定义static getDerivedStateFromError()或componentDidCatch来捕获子组件树中的JavaScript错误。
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error("捕获到错误：", error, info);
}
render() {
if (this.state.hasError) {
return
}
return this.props.children;
}
}
将该组件包裹可能出错的部分：
注意：错误边界无法捕获异步错误、事件处理器内部错误或服务端渲染错误。
提升健壮性的实践建议
编写可靠错误处理的关键在于预见性和防御性编程：
- 始终验证输入：函数入口检查参数类型与结构，提前抛出有意义的错误。
- 合理使用throw：自定义错误应继承Error类，便于识别和处理。
- 避免空catch块：至少记录错误或通知用户，不要静默吞掉异常。
- 分层处理错误：底层抛出，中间件记录，UI层展示友好提示。
- 监控生产环境错误：集成Sentry、LogRocket等工具收集运行时异常。
全局错误监听可作为最后一道防线：
window.addEventListener('error', event => {
console.error('未捕获的错误：', event.error);
});
