首页 > 文章 > 前端

JavaScript异常处理与监控技巧

时间：2026-03-18 11:57:46 159浏览收藏

JavaScript错误处理是保障前端应用稳定性和可维护性的关键环节，文章系统讲解了如何通过全局捕获（window.onerror与unhandledrejection）、局部防护（try-catch的同步与异步正确用法）、可靠上报（sendBeacon/Image降级策略及上下文增强）、以及Source Map堆栈还原四大核心手段，构建覆盖全面、响应及时、定位精准的前端错误监控闭环——不仅让隐藏的异常无处遁形，更将每一次报错转化为快速修复和体验优化的有力依据。

JavaScript错误处理_异常捕获与监控上报

JavaScript在运行过程中难免会遇到各种错误，比如语法错误、运行时异常、网络请求失败等。良好的错误处理机制不仅能提升用户体验，还能帮助开发者快速定位和修复问题。关键在于异常捕获与监控上报的合理结合。

全局异常捕获：监听未处理的错误

前端项目中，很多错误是意外抛出且未被捕获的。通过监听全局事件，可以兜底收集这些异常。

window.onerror 可以捕获大多数同步运行时错误：

window.onerror = function(message, source, lineno, colno, error) {
  console.error('全局错误:', { message, source, lineno, colno, error });
  // 上报到服务器
  reportError({
    type: 'runtime',
    message,
    stack: error?.stack,
    url: source,
    line: lineno,
    column: colno
  });
  return true; // 阻止默认错误弹窗
};

注意：跨域脚本的错误信息会被浏览器屏蔽，显示为Script error.。解决方法是在引入外部脚本时设置 CORS 头部，并在 script 标签上添加 crossorigin="anonymous"。

对于 Promise 中未被捕获的异常，需使用 unhandledrejection 事件：

window.addEventListener('unhandledrejection', function(event) {
  const reason = event.reason;
  console.warn('未处理的Promise拒绝:', reason);
  reportError({
    type: 'promise',
    message: reason?.message || String(reason),
    stack: reason?.stack,
    url: window.location.href
  });
  // 可选择阻止默认行为
  event.preventDefault();
});

局部异常捕获：try-catch 的正确使用

对于可预见的高风险操作，比如 JSON 解析、DOM 操作或调用不稳定 API，应主动使用 try-catch 捕获异常。

function safeJsonParse(str) {
  try {
    return JSON.parse(str);
  } catch (error) {
    reportError({
      type: 'parse_error',
      message: error.message,
      stack: error.stack,
      input: str
    });
    return null;
  }
}

注意：try-catch 只能捕获同步错误。异步代码中的异常需要在对应的作用域内捕获：

setTimeout(() => {
  try {
    throw new Error("异步错误");
  } catch (error) {
    reportError(error);
  }
}, 1000);

错误上报策略：稳定可靠地发送数据

上报错误不能影响主流程，建议使用 navigator.sendBeacon 或降级为 Image 请求，避免被页面跳转中断。

function reportError(data) {
  const payload = JSON.stringify({
    ...data,
    timestamp: Date.now(),
    userAgent: navigator.userAgent,
    url: location.href
  });

  if (navigator.sendBeacon) {
    navigator.sendBeacon('/log-error', new Blob([payload], { type: 'application/json' }));
  } else {
    const img = new Image();
    img.src = `/log-error?data=${encodeURIComponent(payload)}`;
  }
}

上报内容应包含上下文信息，如用户行为路径、设备环境、页面状态等，便于复现问题。