前端日志系统中如何结构化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()
  });
});

定义标准错误结构

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

卓丰企业网站管理系统英文版

新增功能: 1.增加文件下载系统; 2.美化后台登陆界面; 3.完善前后台登陆系统安全性; 4.后台登陆加了验证码; 5.修正组织结构的后台管理; 6.修正所有发现的小错误; 7.美化页面; 后台主要功能如下： 一、系统管理：管理员管理，可以新增管理员及修改管理员密码；数据库备份，为保证您的数据安全本系统采用了数据库备份功能；上传文件管理，管理你增加产品时上传的图片及其他文件。 二、企业信息：可

下载

• 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
  };
}

主动上报与性能权衡

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

立即学习“Java免费学习笔记（深入）”；

• 使用 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 });
  }
}