JavaScript异常处理全指南：从基础到高级实践

1. 为什么需要异常处理？

在JavaScript开发中，异常处理就像给代码系上安全带。想象你正在驾驶一辆汽车，异常处理机制就是当路面突然出现坑洼时，能够保护你不至于翻车的安全装置。没有它，一个小小的错误就可能导致整个应用崩溃。

我见过太多新手开发者写出这样的代码：

javascript复制function getUserData(userId) {
  const user = fetchUserFromDatabase(userId); // 假设这是个数据库查询
  return user.details;
}

当userId不存在时，fetchUserFromDatabase返回null，尝试访问null的details属性就会抛出"TypeError: Cannot read property 'details' of null"，导致整个脚本停止执行。

2. JavaScript异常处理基础

2.1 try-catch-finally结构

这是JavaScript处理异常的核心语法，我习惯把它比作代码的"急救包"：

javascript复制try {
  // 可能出错的代码
  riskyOperation();
} catch (error) {
  // 出错时的处理
  console.error('Caught an error:', error.message);
  fallbackOperation();
} finally {
  // 无论是否出错都会执行
  cleanupResources();
}

实际项目中，我建议在catch块中至少做以下三件事：

1. 记录错误日志（不要只用console.error）
2. 提供用户友好的反馈
3. 执行备用方案或安全降级

2.2 Error对象及其子类

JavaScript内置了多种错误类型，理解它们能帮你更快定位问题：

我经常看到开发者只捕获一般Error而忽略特定错误类型，这是不对的。应该这样处理：

javascript复制try {
  decodeURIComponent('%');
} catch (err) {
  if (err instanceof URIError) {
    // 专门处理URI错误
    handleURIError(err);
  } else {
    // 其他错误
    handleGenericError(err);
  }
}

3. 异步代码中的异常处理

3.1 Promise的异常捕获

Promise链中的错误处理常被误解。这是我总结的最佳实践：

javascript复制fetchData()
  .then(processData)
  .catch(error => {
    // 捕获前面所有then中的错误
    console.error('Processing failed:', error);
    return recoveryData(); // 提供备用数据
  })
  .then(finalize);

特别注意：在then()内部抛出的错误会被后续catch捕获，但如果在catch中又抛出错误，需要再添加catch才能捕获。

3.2 async/await的错误处理

async函数中，我推荐这种模式：

javascript复制async function getUserProfile(userId) {
  try {
    const user = await fetchUser(userId);
    const profile = await fetchProfile(user.profileId);
    return { user, profile };
  } catch (error) {
    if (error instanceof NetworkError) {
      // 网络错误特殊处理
      return cachedProfile(userId);
    }
    throw error; // 重新抛出未知错误
  }
}

重要经验：await表达式可以看作"同步"代码，所以try-catch能捕获到异步错误。

4. 高级异常处理技巧

4.1 全局错误捕获

对于未捕获的异常，设置全局处理：

javascript复制// 浏览器环境
window.addEventListener('error', (event) => {
  sendErrorToServer(event.error);
  // 返回true阻止默认控制台报错
  return true;
});

// Node.js环境
process.on('uncaughtException', (err) => {
  logger.fatal('Uncaught exception', err);
  // 重要：记录后应退出进程
  process.exit(1);
});

生产环境中，我建议结合Sentry等工具实现错误监控。

4.2 自定义错误类

创建业务特定的错误类型能提升代码可维护性：

javascript复制class PaymentError extends Error {
  constructor(message, paymentData) {
    super(message);
    this.name = 'PaymentError';
    this.paymentData = paymentData;
    this.isRetryable = true;
  }
}

// 使用
try {
  processPayment();
} catch (err) {
  if (err instanceof PaymentError && err.isRetryable) {
    retryPayment(err.paymentData);
  }
}

4.3 防御性编程实践

除了try-catch，这些技巧也能减少异常：

1. 可选链操作符(?.)：

javascript复制// 旧写法
const street = user && user.address && user.address.street;

// 新写法
const street = user?.address?.street;

2. 空值合并运算符(??)：

javascript复制const timeout = settings.timeout ?? 3000; // 默认3秒

3. 参数验证函数：

javascript复制function validateConfig(config) {
  if (!config?.apiUrl) {
    throw new ConfigError('Missing API URL');
  }
  // 其他验证...
}

5. 性能与调试考量

5.1 try-catch的性能影响

在V8引擎中，try-catch确实有性能开销，但现代JS引擎已大幅优化。我的实测数据：

建议：在关键性能路径避免过度使用，但不要因噎废食。

5.2 错误堆栈追踪

保持完整的错误堆栈很重要：

javascript复制function validateInput(input) {
  if (!input) {
    const err = new Error('Invalid input');
    Error.captureStackTrace(err, validateInput); // 仅Node.js
    throw err;
  }
}

在浏览器中，new Error()会自动捕获堆栈，但在异步代码中可能会丢失部分信息。

5.3 Source Map集成

生产环境压缩代码后，配置source map能还原原始错误位置：

javascript复制// webpack配置示例
module.exports = {
  devtool: 'source-map',
  // ...
};

我通常在CI流程中上传source map到错误监控系统，但记得不要直接部署到生产环境。

6. 实战中的错误处理策略

6.1 前端错误分类处理

根据错误类型采取不同策略：

1. 用户输入错误：显示友好的表单验证消息
2. 网络错误：自动重试并显示离线状态
3. 代码逻辑错误：记录详细日志并引导用户刷新
4. 第三方API错误：降级使用缓存数据

6.2 Node.js服务端错误处理

我的中间件模式：

javascript复制app.use(async (ctx, next) => {
  try {
    await next();
  } catch (err) {
    ctx.status = err.status || 500;
    ctx.body = {
      error: process.env.NODE_ENV === 'development' ? 
        err.message : 'Internal Server Error'
    };
    
    // 记录完整错误
    ctx.logger.error(err);
  }
});

重要原则：始终将错误转换为适当的HTTP状态码。

6.3 测试中的异常验证

使用Jest等测试框架验证错误：

javascript复制test('throws invalid input', () => {
  expect(() => {
    parseInput(null);
  }).toThrow('Invalid input');
  
  // 验证特定错误类型
  expect(() => {
    parseInput('bad');
  }).toThrow(ValidationError);
});

我习惯为每个可能的错误路径编写测试用例。

7. 错误监控与分析

7.1 错误聚合

在生产环境中，我推荐这些指标：

• 错误发生率（错误数/总请求数）
• 受影响用户比例
• 错误首次出现时间
• 最后出现时间
• 错误频率趋势

7.2 错误分组策略

有效的错误分组能减少噪音：

1. 按错误类型分组
2. 按堆栈相似性分组
3. 按用户环境分组（浏览器、OS等）
4. 按业务模块分组

7.3 错误解决流程

我的团队采用这样的流程：

1. 监控系统报警
2. 根据指纹定位相似错误
3. 重现问题（使用记录的上下文）
4. 修复并添加回归测试
5. 部署后验证错误率下降

8. 常见误区与最佳实践

8.1 应该避免的模式

1. 空的catch块：

javascript复制try {
  doSomething();
} catch {
  // 静默忽略错误！
}

2. 过于宽泛的捕获：

javascript复制try {
  // ...
} catch (err) {
  // 捕获所有错误但处理方式单一
  showToast('出错了');
}

3. 在异步回调中抛出错误：

javascript复制// 这样抛出的错误无法被外部捕获
setTimeout(() => {
  throw new Error('Async error');
}, 100);

8.2 推荐的最佳实践

1. 错误应包含足够上下文：

javascript复制throw new DatabaseError('Failed to save user', {
  userId,
  query,
  originalError: err
});

2. 区分可恢复与不可恢复错误：

javascript复制class RecoverableError extends Error {
  constructor(message) {
    super(message);
    this.isRecoverable = true;
  }
}

3. 在适当层级处理错误：

• 低级函数：抛出原始错误
• 中级函数：包装错误添加上下文
• 顶级入口：最终处理或报告错误

9. 现代JavaScript的错误处理特性

9.1 Promise.any与AggregateError

ES2021引入了处理多个Promise的新方式：

javascript复制try {
  const first = await Promise.any([fetchA(), fetchB()]);
  // 使用第一个成功的结果
} catch (err) {
  // 所有Promise都失败时
  console.log(err.errors); // 查看所有错误
}

9.2 Error Cause链

ES2022允许记录错误因果关系：

javascript复制async function processOrder(orderId) {
  try {
    await chargePayment(orderId);
  } catch (err) {
    throw new Error('Failed to process order', {
      cause: err // 保留原始错误
    });
  }
}

9.3 顶层await的错误处理

在模块顶层可以直接使用try-catch：

javascript复制try {
  const config = await loadConfig();
} catch (err) {
  console.error('Failed to load config', err);
  // 可能退出进程或使用默认配置
}

10. 跨领域错误处理考量

10.1 Web Worker中的错误

需要特殊的事件监听：

javascript复制const worker = new Worker('worker.js');
worker.onerror = (event) => {
  console.error('Worker error:', event.message);
};

10.2 WebSocket错误处理

需要同时处理错误事件和关闭事件：

javascript复制const socket = new WebSocket(url);

socket.onerror = (event) => {
  console.error('WebSocket error:', event);
};

socket.onclose = (event) => {
  if (event.wasClean) {
    console.log('Connection closed cleanly');
  } else {
    console.error('Connection abruptly closed');
  }
};

10.3 WebAssembly异常

需要通过JavaScript桥接处理：

javascript复制try {
  const result = wasmInstance.exports.riskyOperation();
} catch (err) {
  console.error('WASM error:', err);
}

11. 错误处理与TypeScript

11.1 类型安全的错误处理

利用联合类型明确可能发生的错误：

typescript复制type Result<T, E extends Error> = 
  | { success: true; value: T }
  | { success: false; error: E };

function safeParse(json: string): Result<object, SyntaxError> {
  try {
    return { success: true, value: JSON.parse(json) };
  } catch (err) {
    return { 
      success: false, 
      error: err instanceof SyntaxError ? err : new SyntaxError('Invalid JSON')
    };
  }
}

11.2 自定义错误类型

使用接口定义错误结构：

typescript复制interface BusinessError extends Error {
  code: number;
  details?: unknown;
  isRetryable: boolean;
}

class PaymentError extends Error implements BusinessError {
  constructor(public code: number, message: string) {
    super(message);
    this.isRetryable = code < 500;
  }
}

11.3 never类型与穷尽检查

确保处理所有可能的错误：

typescript复制function handleError(err: NetworkError | DatabaseError) {
  if (err instanceof NetworkError) {
    // 处理网络错误
  } else if (err instanceof DatabaseError) {
    // 处理数据库错误
  } else {
    // 类型安全：确保处理了所有情况
    const _exhaustiveCheck: never = err;
  }
}

12. 错误处理与函数式编程

12.1 Either模式

替代try-catch的函数式方案：

javascript复制class Either {
  constructor(value, error) {
    this.value = value;
    this.error = error;
  }
  
  static right(value) {
    return new Either(value, null);
  }
  
  static left(error) {
    return new Either(null, error);
  }
  
  map(fn) {
    return this.error ? 
      Either.left(this.error) : 
      Either.right(fn(this.value));
  }
}

// 使用示例
const result = Either.right(42)
  .map(x => x * 2)
  .map(x => { throw new Error('test'); })
  .map(x => x + 1);

12.2 Try monad实现

更完整的函数式错误处理：

javascript复制class Try {
  constructor(fn) {
    try {
      this.value = fn();
      this.isSuccess = true;
    } catch (err) {
      this.error = err;
      this.isSuccess = false;
    }
  }
  
  static of(fn) {
    return new Try(fn);
  }
  
  map(fn) {
    return this.isSuccess ? 
      Try.of(() => fn(this.value)) : 
      this;
  }
  
  getOrElse(defaultValue) {
    return this.isSuccess ? this.value : defaultValue;
  }
}

// 使用示例
const result = Try.of(() => JSON.parse(input))
  .map(data => data.property)
  .getOrElse({ property: 'default' });

13. 浏览器API特定的错误处理

13.1 IndexedDB事务错误

需要处理事务和请求两个层级的错误：

javascript复制const request = indexedDB.open('myDB', 1);

request.onerror = (event) => {
  console.error('Database error:', event.target.error);
};

const db = await new Promise((resolve, reject) => {
  request.onsuccess = () => resolve(request.result);
  request.onerror = () => reject(request.error);
});

const tx = db.transaction('store', 'readwrite');
tx.onerror = (event) => {
  // 事务级别错误
  console.error('Transaction failed:', event.target.error);
};

const store = tx.objectStore('store');
const putRequest = store.put(data);

putRequest.onerror = (event) => {
  // 请求级别错误
  console.error('Put failed:', event.target.error);
};

13.2 Web Audio API错误处理

处理音频上下文挂起状态：

javascript复制const audioContext = new AudioContext();

if (audioContext.state === 'suspended') {
  await audioContext.resume().catch(err => {
    console.error('Failed to resume audio:', err);
    showUIAlert('请点击页面以启用音频');
  });
}

13.3 地理位置API错误

处理用户拒绝权限的情况：

javascript复制navigator.geolocation.getCurrentPosition(
  position => {
    // 成功处理
  },
  err => {
    switch (err.code) {
      case err.PERMISSION_DENIED:
        // 用户拒绝
        break;
      case err.POSITION_UNAVAILABLE:
        // 位置信息不可用
        break;
      case err.TIMEOUT:
        // 请求超时
        break;
    }
  }
);

14. Node.js特有的错误模式

14.1 错误优先回调

处理传统Node.js回调模式：

javascript复制const fs = require('fs');

function readFilePromise(path) {
  return new Promise((resolve, reject) => {
    fs.readFile(path, (err, data) => {
      if (err) {
        if (err.code === 'ENOENT') {
          // 文件不存在特殊处理
          resolve(null);
        } else {
          reject(err);
        }
      } else {
        resolve(data);
      }
    });
  });
}

14.2 Stream错误处理

正确处理可读/可写流错误：

javascript复制const readStream = fs.createReadStream('input.txt');
const writeStream = fs.createWriteStream('output.txt');

readStream.on('error', err => {
  console.error('Read error:', err);
  writeStream.destroy(); // 确保清理
});

writeStream.on('error', err => {
  console.error('Write error:', err);
  readStream.destroy(); // 确保清理
});

readStream.pipe(writeStream);

14.3 子进程错误处理

处理子进程的多种退出情况：

javascript复制const { spawn } = require('child_process');

const child = spawn('ls', ['-lh']);

child.on('error', err => {
  // 进程启动失败
  console.error('Failed to start:', err);
});

child.on('exit', (code, signal) => {
  if (code === 0) {
    console.log('Success');
  } else if (signal) {
    console.error('Killed by signal:', signal);
  } else {
    console.error('Exited with code:', code);
  }
});

15. 性能敏感场景的错误优化

15.1 热路径中的错误处理

对于高频执行的代码，我采用这些优化：

1. 将错误检查前置：

javascript复制// 优化前
function processItem(item) {
  try {
    return transform(item);
  } catch {
    return null;
  }
}

// 优化后
function processItem(item) {
  if (!isValid(item)) return null;
  return transform(item); // 不再需要try-catch
}

2. 使用错误标志而非异常：

javascript复制let error = null;
const result = safeOperation(arg, err => { error = err; });

if (error) {
  handleError(error);
}

15.2 预验证模式

在批量操作前统一检查：

javascript复制function processBatch(items) {
  // 先验证所有输入
  const invalid = items.find(item => !isValid(item));
  if (invalid) {
    throw new ValidationError('Invalid item found');
  }
  
  // 然后安全处理
  return items.map(processItem);
}

15.3 错误缓存机制

对于可能重复发生的错误：

javascript复制const errorCache = new Map();

function operationWithCache(input) {
  if (errorCache.has(input)) {
    return errorCache.get(input);
  }
  
  try {
    const result = riskyOperation(input);
    return result;
  } catch (err) {
    errorCache.set(input, err);
    throw err;
  }
}

16. 测试策略与错误注入

16.1 单元测试中的错误验证

使用测试框架的高级断言：

javascript复制// 使用Jest
test('throws when input is null', () => {
  expect(() => parse(null)).toThrow('Invalid input');
  expect(() => parse('')).toThrow(ValidationError);
});

16.2 错误注入测试

模拟错误场景：

javascript复制// 使用Sinon stub
const stub = sinon.stub(db, 'query').rejects(new DatabaseError('Timeout'));

await expect(service.getData()).rejects.toThrow(DatabaseError);

16.3 混沌工程实践

在生产环境安全地测试容错能力：

1. 随机拒绝少量请求
2. 模拟网络延迟
3. 随机使服务崩溃
4. 监控系统恢复情况

17. 错误处理与安全考量

17.1 敏感信息泄露

避免在错误中暴露敏感数据：

javascript复制// 不安全
throw new Error(`Failed to login user ${username}`);

// 安全
throw new Error('Authentication failed');

17.2 错误导致的资源泄漏

确保错误时释放资源：

javascript复制let resource;
try {
  resource = acquireResource();
  // ...
} finally {
  if (resource) {
    resource.release();
  }
}

17.3 错误重试的安全限制

防止无限重试：

javascript复制async function withRetry(operation, maxRetries = 3) {
  let attempt = 0;
  while (true) {
    try {
      return await operation();
    } catch (err) {
      if (++attempt >= maxRetries || !isRetryable(err)) {
        throw err;
      }
      await delay(attempt * 1000);
    }
  }
}

18. 错误处理与用户体验

18.1 用户友好的错误消息

转换技术错误为友好提示：

javascript复制function getUserMessage(error) {
  const messages = {
    NetworkError: '网络连接失败，请检查您的网络设置',
    TimeoutError: '请求超时，请稍后再试',
    default: '发生未知错误，请联系支持'
  };
  
  return messages[error.name] || messages.default;
}

18.2 错误恢复UI模式

提供明确的恢复路径：

javascript复制function renderError(error) {
  if (error instanceof NetworkError) {
    return (
      <div>
        <p>网络连接失败</p>
        <button onClick={retry}>重试</button>
        <button onClick={useOfflineMode}>离线模式</button>
      </div>
    );
  }
  // ...
}

18.3 错误边界（React）

使用React错误边界捕获组件错误：

javascript复制class ErrorBoundary extends React.Component {
  state = { error: null };
  
  static getDerivedStateFromError(error) {
    return { error };
  }
  
  render() {
    if (this.state.error) {
      return <FallbackUI error={this.state.error} />;
    }
    return this.props.children;
  }
}

// 使用
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

19. 错误处理与日志策略

19.1 结构化日志记录

记录有意义的错误上下文：

javascript复制logger.error({
  message: 'Payment processing failed',
  error: err.message,
  stack: err.stack,
  userId: currentUser.id,
  transactionId,
  environment: process.env.NODE_ENV,
  timestamp: new Date().toISOString()
});

19.2 日志采样策略

对于高频错误，避免日志爆炸：

javascript复制function logError(error) {
  if (Math.random() < 0.1) { // 10%采样率
    logger.error(error);
  }
  metrics.increment('errors.' + error.name);
}

19.3 错误指纹生成

对相似错误分组：

javascript复制function getErrorFingerprint(error) {
  const stackLines = error.stack.split('\n');
  const relevantStack = stackLines.slice(0, 3).join('\n');
  return hash(`${error.name}:${relevantStack}`);
}

20. 错误处理文化与实践

20.1 团队错误处理指南

建立团队规范：

1. 什么情况下应该抛出错误
2. 什么情况下应该捕获处理
3. 错误分类标准（致命/可恢复/预期内）
4. 日志记录格式要求
5. 监控报警阈值

20.2 错误复盘流程

定期进行错误复盘：

1. 根本原因分析
2. 影响范围评估
3. 修复方案验证
4. 预防措施制定
5. 文档更新

20.3 错误处理checklist

我的个人检查清单：

• [ ] 错误是否包含足够上下文？
• [ ] 是否处理了所有可能的错误来源？
• [ ] 错误消息是否避免暴露敏感信息？
• [ ] 是否有适当的恢复或降级路径？
• [ ] 是否记录了必要的调试信息？
• [ ] 是否有对应的监控报警？
• [ ] 是否添加了相关测试用例？