JavaScript错误处理方法与技巧

JavaScript错误处理没有一劳永逸的方案，但掌握同步、异步、全局三层防御体系——即精准使用try...catch捕获同步异常、监听unhandledrejection应对Promise拒绝、配置window.onerror抓取全局错误（并解决跨域限制）——就能覆盖绝大多数未捕获错误；关键在于理解任务类型（宏任务/微任务）、避免静默吞错、区分错误实例类型，并为第三方异步黑盒（如WebSocket、Canvas、Wasm）构建补充监控机制，让错误真正可见、可溯、可控。

JavaScript 中没有“万能错误处理方案”，但绝大多数未捕获错误都能通过 try...catch、window.onerror 和 Promise.catch() 三层覆盖，关键在于分清同步、异步、微任务、宏任务的错误传播路径。

同步代码错误必须用 try...catch 包裹

函数内部抛出的同步错误（如 JSON.parse('invalid')、undefined.foo）不会自动冒泡到全局，不加 try...catch 就直接中断执行。

• 只对可能失败的语句块包裹，避免把整个函数体包进去，掩盖真实问题范围
• catch 中建议检查 error instanceof SyntaxError 等类型，而非只读 error.message
• 不要在 catch 里静默吞掉错误（即空 catch{}），至少调用 console.error(error)

try {
  const data = JSON.parse(input);
  render(data);
} catch (err) {
  if (err instanceof SyntaxError) {
    showErrorMessage('数据格式错误');
  } else {
    console.error(err);
  }
}

未捕获的 Promise 拒绝会触发 unhandledrejection

Promise 链中漏写 .catch() 或 await 后没包 try...catch，错误不会进 window.onerror，而是走独立事件流。

• 务必在应用启动时监听：window.addEventListener('unhandledrejection', e => { ... })
• e.reason 是拒绝值，可能是 Error 实例，也可能是字符串或普通对象
• Node.js 环境对应的是 process.on('unhandledRejection')
• 注意：Chrome 会把未处理的 Promise 拒绝标记为“warning”，但不会终止脚本

window.onerror 只能捕获语法错误和全局同步异常

它收不到 Promise 错误、setTimeout 内部抛出的错误（除非在回调里再抛）、以及跨域脚本的详细信息（仅显示 “Script error.”）。

• 参数顺序固定：window.onerror = (msg, url, line, col, error) => {...}
• error 参数是原生 Error 对象（现代浏览器），可用于取堆栈：error.stack
• 跨域资源需在 "> ">

  文章 · 前端   |  9分钟前  |  

  ">防止 HTML 页面在 JavaScript 执行完成前渲染，通常是为了确保页面在 JavaScript 完全加载和执行后才显示内容，避免出现“白屏”或“闪烁”现象。以下是几种常见的方法：1. 使用 defer 属性

  161浏览 收藏