如何在javascript中有效地处理错误【教程】

16次阅读

JavaScript 错误处理需分三层:同步错误用 try…catch,Promise 拒绝用 unhandledrejection 监听,全局异常用 window.onerror;须区分任务类型、避免静默吞错、正确配置跨域,并重视第三方异步错误的特殊处理。

如何在 javascript 中有效地处理错误【教程】

JavaScript 中没有“万能错误处理方案”,但绝大多数未捕获错误都能通过 try……catchwindow.onerrorPromise.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.”)。

立即学习Java 免费学习笔记(深入)”;

  • 参数顺序固定:window.onerror = (msg, url, line, col, error) => {……}
  • error 参数是原生 Error 对象(现代 浏览器 ),可用于取堆error.stack
  • 跨域资源需在 标签加 crossorigin="anonymous",且服务端返回 Access-Control-Allow-Origin
  • 该监听器无法阻止默认行为(比如页面崩溃),只能用于上报

async/await 场景下错误处理容易漏掉一层

await 后面的 Promise 被拒绝,等价于同步抛错,但很多人忘了外层函数必须是 async,且调用处仍需 try……catch

  • 错误不会被外层普通函数的 try……catch 捕获,除非那个函数本身也是 async
  • await Promise.reject(new Error('oops')) 会直接 throw,和 throw new Error() 行为一致
  • 多个 await 连续调用时,一个失败就中断后续,如需并发容错,改用 Promise.allSettled()
async function loadData() {   try {     const user = await fetch('/user').then(r => r.json());     const posts = await fetch(`/posts/${user.id}`).then(r => r.json());     return {user, posts};   } catch (err) {// 这里能捕获上面任意一个 await 的 rejection     handleError(err);   } }

真正难处理的是第三方库内部抛出的异步错误(比如 WebSocket 回调、Canvas 渲染异常、WebAssembly trap),它们往往绕过标准错误通道;这种场景需要结合 error 事件监听、主动健康检查、以及 sourcemap 映射堆栈来定位。

text=ZqhQzanResources