JavaScript异常处理与监控技巧

window.onerror = function(message, source, lineno, colno, error) {
  console.error('全局错误:', { message, source, lineno, colno, error });
  // 上报到服务器
  reportError({
    type: 'runtime',
    message,
    stack: error?.stack,
    url: source,
    line: lineno,
    column: colno
  });
  return true; // 阻止默认错误弹窗
};

window.addEventListener('unhandledrejection', function(event) {
  const reason = event.reason;
  console.warn('未处理的Promise拒绝:', reason);
  reportError({
    type: 'promise',
    message: reason?.message || String(reason),
    stack: reason?.stack,
    url: window.location.href
  });
  // 可选择阻止默认行为
  event.preventDefault();
});

function safeJsonParse(str) {
  try {
    return JSON.parse(str);
  } catch (error) {
    reportError({
      type: 'parse_error',
      message: error.message,
      stack: error.stack,
      input: str
    });
    return null;
  }
}

setTimeout(() => {
  try {
    throw new Error("异步错误");
  } catch (error) {
    reportError(error);
  }
}, 1000);

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

  if (navigator.sendBeacon) {
    navigator.sendBeacon('/log-error', new Blob([payload], { type: 'application/json' }));
  } else {
    const img = new Image();
    img.src = `/log-error?data=${encodeURIComponent(payload)}`;
  }
}