前端日志收集与异常捕获方法

前端日志收集与异常捕获是保障Web应用稳定性和用户体验的关键基础设施，文章系统梳理了从全局JS错误、Promise拒绝、资源加载失败到自定义行为埋点的全链路监控方案，强调通过window.onerror、unhandledrejection、事件监听等多维度捕获机制实现无死角覆盖，结合结构化上报、上下文增强和Source Map堆栈还原，在提升问题定位效率的同时严守安全边界，避免源码泄露，真正让前端错误“看得见、查得准、修得快”。

前端日志收集与异常捕获是保障 Web 应用稳定运行的重要手段。随着前端工程复杂度提升，仅靠用户反馈排查问题已远远不够。建立完善的日志体系，能帮助开发团队快速定位错误、分析用户行为、优化性能表现。

一、全局异常捕获

JavaScript 提供了多种方式监听未捕获的异常，确保代码出错时能被记录下来。

示例代码：

window.onerror = function(message, source, lineno, colno, error) {
  console.error('Global error:', { message, source, lineno, colno, error });
  reportError({
    type: 'js_error',
    message,
    stack: error?.stack,
    line: lineno,
    column: colno,
    url: source
  });
  return true; // 阻止默认上报行为
};

window.addEventListener('unhandledrejection', event => {
  const reason = event.reason;
  reportError({
    type: 'promise_rejection',
    message: reason?.message || String(reason),
    stack: reason?.stack,
    reason: reason
  });
});

二、资源加载异常监控

图片、脚本、CSS 等静态资源加载失败不会触发 window.onerror，但可通过 error 事件单独监听。

对于动态插入的资源，建议在创建时绑定错误监听：

const script = document.createElement('script');
script.src = 'https://example.com/bundle.js';
script.onerror = () => {
  reportError({
    type: 'resource_load_fail',
    resource: script.src,
    tag: 'script'
  });
};
document.head.appendChild(script);

也可通过捕获 error 事件统一处理：

window.addEventListener('error', (event) => {
  if (event.target instanceof HTMLScriptElement ||
      event.target instanceof HTMLLinkElement ||
      event.target instanceof HTMLImageElement) {
    reportError({
      type: 'resource_error',
      tagName: event.target.tagName,
      src: event.target.src || event.target.href
    });
  }
}, true); // 使用捕获阶段

三、自定义日志与行为埋点

除异常外，关键业务流程也应主动上报日志，便于还原用户操作路径。

封装一个通用上报方法：

function reportLog(data) {
  const baseInfo = {
    timestamp: Date.now(),
    url: location.href,
    userAgent: navigator.userAgent,
    uid: getUserID() // 自定义获取用户标识
  };
  fetch('/api/log', {
    method: 'POST',
    body: JSON.stringify({ ...baseInfo, ...data }),
    headers: { 'Content-Type': 'application/json' }
  }).catch(() => {
    // 上报失败可尝试本地缓存或忽略
  });
}

function reportError(errorData) {
  reportLog({ level: 'error', ...errorData });
}

四、Source Map 支持与堆栈还原

生产环境通常使用压缩后的 JS 文件，错误堆栈中的行列号无法直接对应源码。通过构建 Source Map 并部署到服务器，可在后台服务中还原原始错误位置。

注意：不要将 map 文件暴露在生产静态资源目录中，以防源码泄露。

基本上就这些。合理配置前端日志收集机制，能让问题发现更及时，调试效率更高。关键是做到全面捕获、结构化上报、安全可控。

以上就是《前端日志收集与异常捕获方法》的详细内容，更多关于的资料请关注golang学习网公众号！