前端日志收集与异常捕获方案_javascript技巧-js教程-PHP中文网

前端日志收集与异常捕获方案_javascript技巧

夢幻星辰

发布： 2025-10-31 23:34:01

原创

446人浏览过

前端日志收集需全面捕获异常并结构化上报。首先通过window.onerror、error事件和unhandledrejection监听全局错误与Promise异常；其次针对脚本、图片等资源加载失败绑定onerror或捕获error事件；再结合自定义埋点记录用户行为，封装reportLog统一上报，附带时间、URL、设备等上下文信息；最后利用Source Map还原压缩代码的错误堆栈，提升定位效率。整个机制应确保安全可控，避免源码泄露，实现高效问题追踪与用户体验优化。

前端日志收集与异常捕获方案_javascript技巧

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

一、全局异常捕获

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

● window.onerror：捕获全局同步脚本错误和资源加载错误（需开启跨域支持）。 ● window.addEventListener('error')：可捕获更广泛的错误类型，包括网络请求、资源加载等。 ● window.addEventListener('unhandledrejection')：专门用于监听未处理的 Promise 异常。

示例代码：

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 事件单独监听。

立即学习“Java免费学习笔记（深入）”；

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

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 事件统一处理：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

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); // 使用捕获阶段

登录后复制

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

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

● 在关键函数入口添加 logAction('user_login_start') 类型调用。 ● 结合用户身份、设备信息、页面路径等上下文增强日志可读性。 ● 控制上报频率，避免重复或冗余数据刷屏。

封装一个通用上报方法：

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 });
}

登录后复制