JavaScript日志与错误跟踪需规范console用法、组合全局捕获机制、结构化上报关键字段、配Sourcemap提升可读性，并将日志视为可观测性产品设计。
JavaScript 中的日志记录和错误跟踪，核心在于合理使用内置方法、捕获异常时机、结构化输出，并结合浏览器或服务端能力做持久化。重点不是“记多少”，而是“记得准、查得快、能还原”。
基础日志：console 用法要规范
console.log() 等方法不只是调试工具，也是运行时可观测性的第一道入口。建议：
- 避免裸写
console.log('xxx')，改用带标签和上下文的形式，例如：console.info('[API]', 'fetch user failed', { userId, error: err.message }) - 用 console.group() 组织关联日志，比如一次请求的发起、响应、解析全过程；用 console.time() 测量关键路径耗时
- 生产环境需禁用或劫持 console 方法（如重定向到自定义上报函数），防止敏感信息泄露或性能损耗
全局错误捕获：不能只靠 try-catch
try-catch 只能捕获同步代码和当前执行栈中的错误。真正要覆盖全场景，需组合以下机制：
- window.onerror：捕获全局 JS 运行时错误（语法错误、未捕获异常），可获取错误消息、脚本 URL、行号、列号
-
window.addEventListener('unhandledrejection')：捕获未处理的 Promise 拒绝，拿到
reason（可能是 Error 实例或任意值） - Vue/React 的错误边界（Error Boundary）：在框架层拦截组件渲染异常，配合 componentDidCatch 或 onErrorCaptured 收集上下文
结构化错误上报：带上可定位的关键字段
单纯打印错误堆栈不够，需补充环境与行为上下文才能快速复现：
立即学习“Java免费学习笔记（深入）”；
- 必传字段：错误类型（
err.name）、消息（err.message）、堆栈（err.stack）、时间戳、页面 URL、用户 ID（如有）、SDK 版本、浏览器 UA - 可选但强烈建议：最近 5 条用户操作（如点击按钮、跳转路由）、当前 Redux/Vuex state 快照（脱敏后）、网络状态（online/offline）、是否在 iframe 中
- 上报方式优先用 Beacon API（
navigator.sendBeacon），确保页面卸载前也能发出请求；降级用 img 标签或 fetch + keepalive
本地调试增强：Source Map 与 sourcemap 插件支持
线上压缩代码报错堆栈难读？必须配 sourcemap：
- 构建时生成
.map文件并部署到可访问地址（注意不暴露源码） - 确保服务器返回正确 MIME 类型（
application/json）和 CORS 头（允许前端域名读取） - Chrome DevTools 会自动加载 sourcemap；也可用 @sentry/cli 或 webpack-sourcemap-plugin 自动上传至监控平台
不复杂但容易忽略。关键是把日志当产品功能来设计：谁看、怎么看、看到什么能立刻行动。
