前端日志系统如何结构化JS错误信息

前端日志系统对于提升Web应用质量至关重要。本文深入探讨了如何**结构化JavaScript错误信息**，构建可检索、可追踪的错误监控体系，符合百度SEO优化。核心在于统一捕获全局错误，包括同步脚本、资源加载、Promise异常等，并将其转化为标准化的JSON对象，包含`type`、`message`、`stack`、`timestamp`等关键字段。通过`createErrorLog`函数规范化错误信息，结合用户ID、页面状态等上下文，利用`sendBeacon`或`fetch`接口高效上报至服务端，兼顾页面性能与数据完整性，为问题排查提供精准的数据支持，提升用户体验。

前端日志系统需统一捕获错误并转为结构化数据，通过监听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 });
  }
}

基本上就这些。结构化错误不是一次性配置，而是贯穿开发、监控和运维的实践。关键是把零散的异常变成带上下文、可搜索、可追踪的数据点。

好了，本文到此结束，带大家了解了《前端日志系统如何结构化JS错误信息》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！