一、异步错误的"暗流涌动"

去年某个深夜，我们线上系统突然出现诡异现象：用户支付成功的订单在数据库神秘消失。经过3小时排查，发现是一个未处理的fetch请求错误导致后续代码静默失败。这种"沉默的崩溃"正是异步错误的典型特征——它们不会立即引发程序中断，而是像定时炸弹般潜伏在代码深处。

javascript // 危险的沉默错误示例 fetch('/api/submit-order') .then(response => { // 如果这里抛出错误... const data = response.json(); saveToDatabase(data); // 永远不会执行 }); // 缺少catch处理

二、七大处理策略深度解析

1. Promise的"双刃剑"：then/catch的陷阱与突破

传统的.catch()处理存在两个致命弱点：
- 作用域局限：只能捕获当前Promise链上的错误
- 错误吞噬：不合理的catch会导致错误被隐藏

javascript
// 反模式：错误被吞噬
getUserData()
.catch(err => console.log('出错了')) // 仅打印但未处理
.then(updateUI) // 继续执行不安全的操作

// 推荐做法：重新抛出或中断流程
fetchData()
.catch(err => {
logError(err);
throw new Error('流程终止', { cause: err }); // 保留原始错误
});

2. async/await的优雅陷进

看似同步的代码风格容易让人忘记错误处理。统计显示，超过62%的async函数缺少try/catch块。

javascript
// 危险写法
async function loadData() {
const data = await fetch('/api'); // 可能抛出错误
render(data); // 错误时直接中断
}

// 防御性写法（带重试机制）
async function safeLoad(maxRetry = 3) {
let attempts = 0;
while (attempts < maxRetry) {
try {
return await fetch('/api');
} catch (err) {
if (++attempts === maxRetry) throw err;
await new Promise(r => setTimeout(r, 1000 * attempts));
}
}
}

3. 全局错误监控的三重防护

构建完整的错误防御体系：

javascript
// 第一层：未捕获的Promise错误
window.addEventListener('unhandledrejection', event => {
sendToMonitoring(event.reason);
});

// 第二层：全局错误捕获
window.onerror = (msg, url, line, col, error) => {
logError({ msg, stack: error?.stack });
};

// 第三层：跨域脚本错误
window.addEventListener('error', event => {
if (event.filename && !event.message) {
handleCrossOriginError(event);
}
}, true);

4. 错误边界模式（React场景）

jsx
class ErrorBoundary extends React.Component {
state = { hasError: false };

static getDerivedStateFromError() {
return { hasError: true };
}

componentDidCatch(error, info) {
logComponentError(error, info.componentStack);
}

render() {
return this.state.hasError
?
: this.props.children;
}
}

// 使用方式

三、进阶实践：错误处理的"瑞士军刀"

1. 错误分类策略

建立错误类型字典，实现差异化处理：

javascript
const ERROR_TYPES = {
NETWORK: Symbol('network'),
AUTH: Symbol('authentication'),
VALIDATION: Symbol('validation')
};

function handleError(err) {
switch(identifyError(err)) {
case ERRORTYPES.NETWORK: return showNetworkWarning(); case ERRORTYPES.AUTH:
redirectToLogin();
default:
logToSentry(err);
}
}

2. 可取消的异步操作

使用AbortController避免"悬停Promise"：

javascript
const controller = new AbortController();

async function fetchWithTimeout(url, timeout = 5000) {
const timer = setTimeout(() => controller.abort(), timeout);
try {
const res = await fetch(url, { signal: controller.signal });
clearTimeout(timer);
return res.json();
} catch (err) {
if (err.name === 'AbortError') {
throw new Error(请求超时: ${timeout}ms);
}
throw err;
}
}

四、从处理到预防：构建健壮系统

1. 编写错误契约文档：明确每个模块可能抛出的错误类型
2. 实现错误注入测试：在CI流程中强制模拟网络错误
3. 建立错误追踪看板：可视化错误发生率/影响面
4. 设计渐进式降级方案：如API失败时切换本地缓存策略

"优秀的错误处理不是关于如何捕获更多错误，而是关于如何让错误变得有意义。" —— Node.js核心贡献者Tim Caswell

通过将这些策略组合应用，我们最终将原本碎片化的错误处理转变为系统性的防御体系。当再次面对异步错误时，不再是手忙脚乱的危机处理，而是从容优雅的流程控制。