结构化JavaScript错误信息的技巧

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《如何结构化JavaScript错误信息？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

前端日志系统需统一捕获错误并转为结构化数据，通过监听window.onerror、error事件及unhandledrejection捕获全局异常，将错误转化为含type、message、stack、timestamp等字段的标准对象，结合上下文信息使用createErrorLog函数规范化，利用sendBeacon或fetch上报至服务端，兼顾页面性能与数据完整性，实现可检索、可追踪的错误监控体系。

前端日志系统中结构化 JavaScript 错误信息，关键在于统一捕获、标准化格式和附加上下文。直接使用 console.error() 或裸抛异常不利于排查问题，应将错误转化为结构化对象，便于存储、检索和分析。

捕获全局与运行时错误

通过监听全局事件，确保未捕获的错误也能被收集：

• window.onerror：捕获同步脚本错误和资源加载错误（注意跨域需开启 CORS）
• window.addEventListener('error')：可捕获更多类型的错误，包括 Promise 拒绝前的错误
• window.addEventListener('unhandledrejection')：专门处理未捕获的 Promise 错误

window.onerror = function(message, source, lineno, colno, error) {
  logError({
    type: 'runtime',
    message: error?.message || message,
    stack: error?.stack,
    url: source,
    line: lineno,
    column: colno,
    timestamp: Date.now(),
    userAgent: navigator.userAgent
  });
  return true;
};

window.addEventListener('unhandledrejection', event => {
  logError({
    type: 'promise',
    message: event.reason?.message || 'Unknown promise rejection',
    stack: event.reason?.stack,
    reason: event.reason,
    timestamp: Date.now()
  });
});

定义标准错误结构

所有错误应遵循一致的数据结构，方便后端解析和查询。常见字段包括：

• type：错误类型（如 runtime、network、promise、custom）
• message：简要描述
• stack：调用栈（开发环境更完整，生产环境可能压缩）
• url / referrer：当前页面和来源
• timestamp：发生时间
• userAgent / deviceInfo：设备与浏览器信息
• context：自定义上下文，如用户 ID、页面状态、操作路径

function createErrorLog(error, context = {}) {
  return {
    type: 'js_error',
    message: error.message,
    stack: error.stack,
    timestamp: Date.now(),
    page: location.href,
    ...context
  };
}

主动上报与性能权衡

结构化后需将错误发送到日志服务，但要注意用户体验不受影响：

• 使用 navigator.sendBeacon 确保页面关闭时日志仍能发出
• 避免频繁上报，可做去重或节流处理（如同一错误短时间内只报一次）
• 敏感信息如密码、token 需过滤
• 在低版本浏览器中降级处理（如 try/catch 包裹上报逻辑）

function logError(data) {
  const body = JSON.stringify(data);
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/log', body);
  } else {
    fetch('/log', { method: 'POST', body, keepalive: true });
  }
}

今天关于《结构化JavaScript错误信息的技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！