前端日志系统需统一捕获错误并转为结构化数据，通过监听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 };}
主动上报与性能权衡
结构化后需将错误发送到日志服务，但要注意用户体验不受影响：
立即学习“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 }); }}
基本上就这些。结构化错误不是一次性配置，而是贯穿开发、监控和运维的实践。关键是把零散的异常变成带上下文、可搜索、可追踪的数据点。
以上就是前端日志系统中如何结构化JavaScript错误信息？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525022.html
微信扫一扫 
支付宝扫一扫 
