JavaScript错误处理全攻略

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《JavaScript错误捕获与处理方法详解》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

try-catch 不能捕获语法错误、异步回调中的错误、Promise 拒绝、事件监听器内错误；需用 window.onerror、error 事件或 unhandledrejection 事件配合手动检查 HTTP 状态码和 await 链式 try-catch 来全面覆盖。

try-catch 不能捕获哪些错误？

同步代码中的运行时错误（比如 ReferenceError、TypeError）可以被 try-catch 捕获，但以下几类不行：

• 语法错误（SyntaxError），比如少了个括号或引号，脚本根本不会执行，直接报错退出
• 异步任务里的错误（如 setTimeout、fetch 回调中抛出的错误），除非你在回调内部再套 try-catch
• Promise 拒绝（reject）默认不会触发 catch 块，必须用 .catch() 或 await 配合 try-catch
• 事件监听器中抛出的错误（如 onclick 里的异常），会脱离当前执行栈，需靠 window.onerror 或 window.addEventListener('error')

async/await 中怎么正确捕获 Promise 错误？

很多人写 await fetch(...) 后直接访问 .json()，却没意识到 fetch 成功返回 Response 并不等于请求业务成功——HTTP 状态码 4xx/5xx 不会自动 reject。

• 必须手动检查 response.ok 或 response.status，否则错误响应会静默通过
• await response.json() 可能抛出 SyntaxError（服务端返回非 JSON 内容），需要额外 try-catch
• 推荐写法：在 async 函数内用 try-catch 包裹整个 await 链，或统一用 .catch() 处理链式 Promise

async function loadData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json(); // 这里也可能出错
    return data;
  } catch (err) {
    console.error('加载失败:', err.message);
    throw err; // 必要时继续上抛
  }
}

全局错误监听：window.onerror 和 window.addEventListener('error') 有什么区别？

window.onerror 是老接口，只能捕获 JS 执行错误和部分资源加载失败；而 window.addEventListener('error') 是更通用的捕获方式，但注意它默认不抓 Promise 拒绝。

• window.onerror 的参数顺序固定：(message, source, lineno, colno, error)，返回 true 可阻止默认错误提示
• window.addEventListener('error') 捕获的是 ErrorEvent，event.error 才是原始错误对象，资源加载失败时该属性可能为 null
• 要捕获未处理的 Promise 拒绝，必须单独监听 unhandledrejection 事件，且不能只靠 console.error，得主动上报或记录

错误对象里哪些字段真正有用？

除了 message 和 stack，现代浏览器还提供几个关键字段，但兼容性有差异：

• name：错误类型名（如 'TypeError'），比 message 更稳定，适合做分类判断
• cause：ECMAScript 2022 新增，用于链式错误（如 throw new Error('bad', { cause: originalErr })），但 Safari 目前不支持
• stack 包含调用路径，但不同环境格式不一（Chrome 有 at，Firefox 用 @），解析需谨慎；生产环境建议用 stacktrace-js 等库归一化
• 自定义错误建议继承 Error 并添加业务字段（如 code、timestamp），避免只靠字符串匹配判断错误类型

实际项目中最容易漏掉的是对 HTTP 状态码的检查和 unhandledrejection 的监听——这两个点一旦忽略，线上就可能出现“接口挂了但前端完全无感知”的情况。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript错误处理全攻略》文章吧，也可关注golang学习网公众号了解相关技术文章。