JavaScript错误处理终极避坑指南：从崩溃到优雅，你的代码还能抢救一下！

一、错误类型：三大“杀手”与应对策略

1. 语法错误（SyntaxError）

• 特征：代码解析阶段直接报错，如括号缺失、关键字拼写错误。
• 示例：

  console.log("Hello World';  // 缺少闭合引号  
  

• 解决方案：
  • 使用ESLint等工具静态检测。
  • 避免依赖分号自动插入，显式书写分号。

2. 运行时错误（Runtime Error）

• 典型子类：
  • ReferenceError：访问未声明变量（如console.log(undeclaredVar)）。
  • TypeError：对错误类型执行操作（如null.f()）。
  • RangeError：数值越界（如new Array(-1)）。
• 调试技巧：
  • 利用Chrome DevTools的断点调试和调用栈追踪。

3. 逻辑错误（Logical Error）

• 隐蔽性：代码无报错但结果异常，如误用乘法替代加法。
• 防御方案：
  • 编写单元测试覆盖边界条件。
  • 使用console.assert()进行运行时断言。

---

二、核心处理机制：try/catch的“三板斧”

1. 基础结构

try {  
  let num = JSON.parse('{invalid json}'); 
  console.log(num);
} catch (error) {  
  console.error("捕获错误：", error.message);  
} finally {  
  cleanupResources();  // 无论成败都会执行  
}  

2. 自定义错误：精准定位问题

• 抛出语义化错误：

class NetworkError extends Error {  
  constructor(url) {  
    super(`请求 ${url} 失败`);  
    this.code = "NETWORK_FAILURE";  
  }  
}  
throw new NetworkError("https://api.example.com");  

• 优势：通过error.code分类处理不同错误。

3. 性能陷阱

• 避免在循环内滥用try/catch：V8引擎对try块优化较弱，高频调用可能拖慢性能。

// 错误示范：  
for (let i = 0; i < 1e6; i++) {  
  try { /* 可能失败的操作 */ }  
  catch {}  
}  
// 正确做法：将try/catch外移至循环外层  

---

三、异步错误处理：Promise与async/await的“暗礁”

1. Promise未捕获错误

• 典型场景：

  fetchData().then(res => { ... }); // 缺少.catch()  
  

  • 后果：触发Uncaught (in promise) Error，导致全局崩溃。
• 解决方案：
  • 链式处理：.then().catch()。
  • 全局兜底：

    window.addEventListener('unhandledrejection', e => {  
      reportToServer(e.reason);  // 上报至监控系统  
    });  
    

2. async/await的优雅处理

• 结合try/catch：

  async function loadUserData() {  
    try {  
      const data = await fetch('/api/user');  
      if (!data.ok) throw new Error('状态码异常');  
    } catch (error) {  
      showToast(`加载失败：${error.message}`);  
    }  
  }  
  

  • 优势：同步化错误处理逻辑，避免回调地狱。

---