javascript中的错误处理怎样进行【教程】_技术教程

JavaScript错误处理需分同步、异步和全局三类：同步错误用try...catch捕获；异步错误须在Promise链或async/await中显式处理；全局错误通过window.onerror和unhandledrejection监听补漏，并按类型分级上报。

JavaScript 错误处理不是靠“加个 try...catch 就万事大吉”，关键看你在哪个环节、处理哪类错误、是否影响用户可感知的行为。

同步代码出错：必须用 `try...catch` 捕获

只有 throw、运行时异常（如 undefined.foo()）、JSON.parse() 解析失败等同步抛出的错误，才能被 try...catch 拦住。

不能捕获异步回调里的错误（比如 setTimeout(() => { throw new Error() })）
catch 块中别再抛未处理的错误，否则会静默丢失——至少打个 console.error(e)
不要只写 catch(e) { } 空处理，掩盖问题；也不建议无差别 catch 所有错误后继续执行逻辑

try {
  const data = JSON.parse(input);
  render(data);
} catch (e) {
  if (e instanceof SyntaxError) {
    showErrorMessage('JSON 格式错误');
  } else {
    console.error('解析意外失败:', e);
  }
}

异步操作出错：Promise 链上必须接 `.catch()` 或用 `await` + `try...catch`

fetch、axios、自定义 Promise 等，错误不会冒泡到外层同步 try...catch，必须在 Promise 链里显式处理。

fetch 成功返回 Response 对象，但 HTTP 错误码（如 404、500）不会触发 reject，得手动检查 response.ok
async/await 写法下，await 后面的 Promise reject 会被 catch 捕获，但仅限同一函数作用域内
避免 .then(success).catch(handleError) 这种写法漏掉 success 回调里的新错误（它内部再抛错就没人管了）

async function loadData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (e) {
    // 这里能捕获 fetch 失败、JSON 解析失败、手动 throw 的错误
    reportError(e);
    throw e; // 如果上层还要处理，记得 re-throw
  }
}

全局未捕获错误：用 `window.onerror` 和 `window.addEventListener('error')` 补漏

它们捕获的是完全没被任何 try/catch 或 .catch() 拦住的错误，比如：

脚本加载失败（）
跨域 script 的语法错误（此时 error.message 是空字符串）
资源加载失败触发的 ErrorEvent（注意：不是所有资源错误都走这里，图片失败走 onerror 属性）

注意：window.onerror 无法捕获 Promise reject 未处理的情况；要监听后者，必须用 window.addEventListener('unhandledrejection', ...)。

window.addEventListener('unhandledrejection', event => {
  // event.reason 是 Promise.reject() 传入的值，可能是 Error 实例，也可能只是字符串
  if (event.reason instanceof Error) {
    reportError(event.reason, 'unhandledRejection');
  }
});

错误分类与上报：别把网络超时和用户输入错误当成同一回事

真实项目里，你得区分错误来源和严重程度，否则监控系统全是噪音。

用户侧错误（如表单校验失败）不该进错误监控，该走业务埋点
网络错误（TypeError: Failed to fetch）、解析错误（SyntaxError）、引用错误（ReferenceError）优先级高，需立即告警
同一个错误在 1 分钟内重复 10 次以上，大概率是代码缺陷，不是偶发网络抖动
上报前脱敏：去掉 URL 中的 token、用户 ID，不传 stack 里的敏感路径（如本地开发路径 /Users/xxx/...）

最常被忽略的一点：error.stack 在不同浏览器里格式不一致，直接上报前最好用 stacktrace-js 或简单正则归一化，否则聚合分析会失效。