普通视图

发现新文章,点击刷新页面。
昨天以前首页

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

作者 烛阴
2025年3月27日 07:03

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

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}`);  
      }  
    }  
    
    • 优势:同步化错误处理逻辑,避免回调地狱。

❌
❌