前端JS异常捕获与统一格式化的完整指南

/**
 * 将任意错误值格式化为包含堆栈信息的字符串
 * @param {*} error - 错误对象或任意值
 * @param {string} fallbackMessage - 当无法获取有效信息时的备选消息
 * @param {string} [url] - 发生错误的脚本URL（从onerror获取）
 * @param {number} [line] - 行号（从onerror获取）
 * @param {number} [col] - 列号（从onerror获取）
 * @returns {string} 格式化后的错误字符串
 */
function formatError(error, fallbackMessage, url, line, col) {
  let result = '';

  // 情况1：error 是对象类型，尝试提取 stack 或 message
  if (error && typeof error === 'object') {
    // 优先使用 stack（包含完整的调用堆栈）
    if (typeof error.stack === 'string') {
      result = error.stack;
    }
    // 其次使用标准 error 属性（name 和 message）
    else if (typeof error.message === 'string') {
      const name = error.name || 'Error';
      result = `${name}: ${error.message}`;
    }
    // 否则尝试 JSON 序列化（避免循环引用）
    else {
      try {
        result = JSON.stringify(error, null, 2);
      } catch (e) {
        // 序列化失败（如循环引用），使用默认字符串转换
        result = String(error);
      }
    }
  } else {
    // 原始类型直接转为字符串
    result = String(error);
  }

  // 情况2：结果中不包含行列信息（如只拿到 message），但通过 onerror 获得了具体位置
  // 简单判断堆栈中是否已有类似 ":数字" 的行号标记
  const hasLineInfo = /:\d+/.test(result);
  if (!hasLineInfo && url && line) {
    const location = `${url}:${line}${col ? ':' + col : ''}`;
    result = result ? `${result} at ${location}` : `Error at ${location}`;
  }

  // 情况3：仍然没有有效内容，使用 fallbackMessage
  if (!result && fallbackMessage) {
    result = fallbackMessage;
  }

  return result;
}

window.onerror = function (message, source, lineno, colno, error) {
  const errorStr = formatError(error, message, source, lineno, colno);
  
  // 上报错误（示例：使用 sendToServer 函数）
  sendToServer({
    type: 'onerror',
    message: message,
    stack: errorStr,
    url: source,
    line: lineno,
    column: colno,
    userAgent: navigator.userAgent,
    timestamp: Date.now()
  });

  // 返回 true 可以阻止浏览器默认处理（如控制台打印错误）
  // return true;
};

window.addEventListener('unhandledrejection', function (event) {
  const reason = event.reason;
  const errorStr = formatError(reason, 'Unhandled Rejection');

  sendToServer({
    type: 'unhandledrejection',
    reason: errorStr,
    userAgent: navigator.userAgent,
    timestamp: Date.now()
  });

  // 可选：阻止默认行为（某些浏览器会打印错误）
  event.preventDefault();
});

function sendToServer(data) {
  // 避免频繁上报（例如使用采样率）
  if (Math.random() > 0.1) return; // 10% 采样

  const url = 'https://your-monitor-server.com/api/error';
  const body = JSON.stringify(data);

  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: body,
      keepalive: true // 类似 sendBeacon 的行为
    }).catch(() => {}); // 忽略 fetch 失败
  }
}

// error-monitor.js
(function() {
  'use strict';

  function formatError(error, fallbackMessage, url, line, col) {
    let result = '';
    if (error && typeof error === 'object') {
      if (typeof error.stack === 'string') {
        result = error.stack;
      } else if (typeof error.message === 'string') {
        const name = error.name || 'Error';
        result = `${name}: ${error.message}`;
      } else {
        try {
          result = JSON.stringify(error, null, 2);
        } catch (e) {
          result = String(error);
        }
      }
    } else {
      result = String(error);
    }

    const hasLineInfo = /:\d+/.test(result);
    if (!hasLineInfo && url && line) {
      const location = `${url}:${line}${col ? ':' + col : ''}`;
      result = result ? `${result} at ${location}` : `Error at ${location}`;
    }

    if (!result && fallbackMessage) {
      result = fallbackMessage;
    }

    return result;
  }

  function sendToServer(data) {
    // 采样：仅上报 10% 的错误，可根据需要调整
    if (Math.random() > 0.1) return;

    const url = 'https://your-monitor-server.com/api/error';
    const body = JSON.stringify({
      ...data,
      userAgent: navigator.userAgent,
      timestamp: Date.now(),
      page: window.location.href
    });

    if (navigator.sendBeacon) {
      navigator.sendBeacon(url, body);
    } else {
      fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: body,
        keepalive: true
      }).catch(() => {});
    }
  }

  window.onerror = function (message, source, lineno, colno, error) {
    const errorStr = formatError(error, message, source, lineno, colno);
    sendToServer({
      type: 'onerror',
      rawMessage: message,
      stack: errorStr,
      url: source,
      line: lineno,
      column: colno
    });
  };

  window.addEventListener('unhandledrejection', function (event) {
    const reason = event.reason;
    const errorStr = formatError(reason, 'Unhandled Rejection');
    sendToServer({
      type: 'unhandledrejection',
      stack: errorStr
    });
    event.preventDefault();
  });
})();