前端进阶中的错误日志收集怎么实现？

如何高效实现错误日志收集与监控

在前端开发快速迭代的今天，错误日志收集与监控已成为提升用户体验和代码质量的关键环节，无论是用户端突发的脚本错误，还是接口请求失败，精准、实时地捕获并分析这些错误日志，能够帮助开发者快速定位问题、优化代码逻辑，从而显著提升应用的稳定性。前端进阶中的错误日志收集究竟该如何实现？ 本文将从技术选型、实现方案到优化策略，为你详细解析。

前端进阶中的错误日志收集怎么实现？

错误日志收集的核心目标

在深入技术细节前，需明确错误日志收集的核心目标：

全面性：覆盖 JavaScript 运行时错误、资源加载失败、API 请求异常、用户行为触发的逻辑错误等。
实时性：快速上报错误，缩短问题发现周期。
可追溯性：记录错误发生的上下文（如用户环境、设备信息、页面路径等），便于复现与排查。
低侵入性：避免因日志收集代码影响主业务逻辑性能。

技术实现方案

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

通过监听 window 对象的 error 和 unhandledrejection 事件，捕获全局未处理的 JavaScript 错误和 Promise 拒绝：

// 捕获脚本错误
window.addEventListener('error', (event) => {
  const { message, filename, lineno, colno, error } = event;
  logError({
    type: 'js_error',
    message,
    stack: error?.stack,
    meta: { filename, lineno, colno }
  });
});
// 捕获未处理的 Promise 异常
window.addEventListener('unhandledrejection', (event) => {
  logError({
    type
 (（或这里应为直接写 'promise_error' 等类型标识）) // 修正示例：type: 'promise_error'  
    message: event.reason?.message || 'Unhandled promise rejection',
    stack: event.reason?.stack
  });
});

资源加载监控：跟踪静态资源失败

监听 window 的 error 事件时，通过判断 target.src 或 target.href 识别资源加载失败（如图片、脚本、样式表）：

// 示例：区分资源加载错误
window.addEventListener('error', (event) => {
  if (event.target && (event.target.src || event.target.href)) {
    logError({
      type: 'resource_error',
      resourceType: event.target.tagName.toLowerCase(), // img/script/link
      src: event.target.src || event.target.href
    });
  }
  // ...其他错误处理
});

API 请求监控：拦截异常响应

通过封装 fetch 或 XMLHttpRequest，拦截 HTTP 请求的异常状态码（如 4xx/5xx）或网络错误：

// 封装 fetch 以捕获请求错误
const originalFetch = window.fetch;
window.fetch = async (url, config) => {
  try {
    const response = await originalFetch(url, config);
    if (!response.ok) {
      logError({
        type: 'api_error',
        url,
        status: response.status,
        statusText: response.statusText
      });
    }
    return response;
  } catch (error) {
    logError({ type: 'network_error', url, message: error.message });
    throw error;
  }
};

用户行为与上下文采集

在上报错误时，附加用户环境信息（如浏览器版本、设备类型、页面 URL、用户 ID 等），可通过以下方式获取：

function getContextInfo() {
  return {
    userAgent: navigator.userAgent,
    url: window.location.href,
    timestamp: new Date().toISOString(),
    // 可根据项目需求扩展，如用户登录态、页面性能数据等
  };
}