J*aScript错误监控与上报实战_j*ascript技巧_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

JaScript错误监控与上报实战_jascript技巧

2025-10-30

浏览次数：次

返回列表

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

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

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

1. 捕获全局 J*aScript 错误

使用 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. 自定义错误上报函数

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

万相营造

阿里妈妈推出的AI电商营销工具

168 查看详情万相营造

实现一个通用上报函数：

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

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

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