JavaScript错误处理需结合多种模式：1. Promise的catch和finally用于异步错误捕获与资源清理；2. async/await中用try/catch包裹await调用，提升可读性；3. 全局监听onerror和unhandledrejection防止未捕获异常；4. React错误边界捕获组件生命周期错误，避免UI崩溃；5. 自定义错误类如ApiError增强错误信息结构；6. Node.js中使用四参数中间件统一处理服务端错误。综合运用可提升应用健壮性与可观测性。
JavaScript中的错误处理远不止try/catch。虽然try/catch适用于同步代码的异常捕获，但在异步编程、Promise链、事件驱动或大型应用中，仅靠它远远不够。以下是几种更高级且实用的错误处理模式。
1. Promise的catch和finally
在处理异步操作时，Promise提供了原生的错误处理机制。每个Promise链都可以通过.catch()捕获错误，避免未处理的拒绝（unhandled rejection）。
说明：- Promise链中任意一步出错，都会跳转到最近的.catch()
- 使用.catch()集中处理错误，提升可维护性
- finally()无论成功失败都会执行，适合清理资源
示例：
fetch('/api/data')
.then(res => res.json())
.then(data => { /* 处理数据 */ })
.catch(error => {
console.error('请求失败:', error);
})
.finally(() => {
// 停止loading动画等
});
2. async/await中的错误处理
async函数内部可以使用try/catch处理await表达式的异常，写法更接近同步代码，逻辑清晰。
立即学习“Java免费学习笔记（深入）”；
建议：- 对每一个可能出错的await调用进行包裹
- 结合Promise.catch()做降级处理
- 避免遗漏catch导致异常冒泡到全局
示例：
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);
return null;
}
}
3. 全局错误监听
通过全局事件监听，捕获未被处理的异常和Promise拒绝，防止程序静默崩溃。
- window.onerror：捕获同步脚本错误
- window.addEventListener('error')：更细粒度控制
- window.addEventListener('unhandledrejection')：专门处理未捕获的Promise拒绝
示例：
window.addEventListener('unhandledrejection', event => {
console.warn('未处理的Promise拒绝:', event.reason);
// 可以上报到监控系统
event.preventDefault();
});
4. 错误边界（Error Boundaries）
在React等UI框架中，组件级别的错误可能导致整个界面崩溃。错误边界是一种React组件，能捕获子组件生命周期中的JavaScript错误。
注意：- 只能捕获后代组件抛出的错误
- 不能捕获异步事件或Promise中的错误
- 通过实现getDerivedStateFromError或componentDidCatch来处理
示例：
class ErrorBoundary extends React.Component {
state = { hasError: false };
<p>static getDerivedStateFromError() {
return { hasError: true };
}</p><p>componentDidCatch(error, info) {
console.error("错误详情:", error, info);
}</p><p>render() {
if (this.state.hasError) {
return <div>页面出错了</div>;
}
return this.props.children;
}
}
5. 自定义错误类型与结构化错误
使用自定义错误类可以让错误信息更明确，便于分类处理。
做法：- 继承Error类创建特定错误类型
- 添加额外上下文如code、url、timestamp
- 配合日志系统做精准分析
示例：
class ApiError extends Error {
constructor(message, statusCode, url) {
super(message);
this.name = "ApiError";
this.statusCode = statusCode;
this.url = url;
this.timestamp = Date.now();
}
}
<p>// 使用
throw new ApiError("网络请求超时", 504, "/api/data");
6. 中间件式错误处理（Node.js场景）
在Express等框架中，可以定义错误处理中间件，统一响应格式。
- 错误中间件有四个参数：(err, req, res, next)
- 放在所有路由之后注册
- 可区分开发/生产环境输出细节
示例：
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).json({
message: "服务器内部错误",
...(process.env.NODE_ENV === 'development' && { stack: err.stack })
});
});
基本上就这些。合理组合这些模式，才能构建健壮、可观测的应用。错误处理不复杂但容易忽略细节。
