当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript错误监控实用教程

JavaScript错误监控实用教程

2025-11-02 17:45:28 0浏览收藏

前端项目上线后问题难复现？本文为你提供一份实用的 **JavaScript 错误监控实战指南**，助你第一时间发现并定位线上问题。本文将深入探讨如何构建完善的前端错误监控与上报机制，包括：利用 `window.onerror` 捕获全局同步错误，使用 `addEventListener('unhandledrejection')` 监听未捕获的 Promise 异常，实现 `reportError` 函数并通过 `navigator.sendBeacon` 上报错误，以及结合 Source Map 解析压缩代码堆栈，还原真实源码位置。掌握这些技巧，让你的前端项目更稳定、更易维护，有效提升用户体验。

答案：前端项目需通过JavaScript错误监控与上报机制及时发现并定位线上问题。1. 使用 window.onerror 捕获全局同步错误，但无法获取 Promise 错误和跨域脚本详细信息；2. 通过 addEventListener('unhandledrejection') 监听未捕获的 Promise 异常；3. 实现 reportError 函数，优先使用 navigator.sendBeacon 上报错误数据以确保页面卸载时仍能发送；4. 结合 Source Map 解析压缩代码的堆栈信息，还原真实源码位置以便调试。该体系需兼顾准确性、性能及可维护性。

JavaScript错误监控与上报实战_javascript技巧

前端项目上线后，最怕的就是用户遇到问题却无法复现。JavaScript错误监控与上报机制能帮助开发者第一时间发现并定位线上问题。虽然浏览器提供了基本的错误捕获能力，但要实现完整、稳定的监控体系，还需要结合实际场景进行优化和封装。

1. 捕获全局 JavaScript 错误

使用 window.onerror 可以监听运行时的同步错误，包括语法错误、引用错误等。当脚本执行过程中抛出未捕获的异常时，该方法会被触发。

注意：onerror 无法捕获 Promise 异常或跨域脚本的详细信息（会显示为 "Script error."）。

基础写法如下：

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

为了处理跨域脚本的错误信息，需确保引入的外部资源添加了 CORS 头部 并在 script 标签中加上 crossorigin="anonymous"。

2. 监听 Promise 异常

未被 catch 的 Promise 错误会静默失败，影响用户体验。使用 addEventListener('unhandledrejection') 可以有效捕捉这类问题。

示例代码：

window.addEventListener('unhandledrejection', function(event) {
  const reason = event.reason;
  const message = reason?.message || String(reason);
  const stack = reason?.stack || '';

  reportError({
    type: 'PromiseRejection',
    message,
    stack
  });

  // 可选择阻止默认行为
  event.preventDefault();
});

常见于异步请求未加 .catch() 或 await 没有 try 包裹的情况，及时上报有助于排查接口异常或逻辑遗漏。

3. 自定义错误上报函数

将错误数据统一发送到服务端，建议使用 navigator.sendBeacon 或 AJAX POST。sendBeacon 在页面卸载时仍能可靠发送数据，适合错误上报场景。

实现一个通用上报函数：

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

  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/log-error', payload);
  } else {
    // fallback 使用 Image 或 fetch
    fetch('/api/log-error', {
      method: 'POST',
      body: payload,
      keepalive: true // 确保请求完成即使页面已关闭
    }).catch(() => {
      // 忽略上报失败
    });
  }
}

服务端接收后可存储并通知相关人员，形成闭环处理流程。