JavaScript日志需分层语义化（debug/info/warn/error），注入trace ID追踪异步链路，捕获全局错误与未处理Promise，生产环境通过URL参数、角色或localStorage动态控制日志级别并脱敏敏感信息。
JavaScript 中的日志记录不只是 console.log() 打印几行字，它是调试复杂应用最直接、最可控的“探针”。合理设计日志机制，能快速定位异步链路断裂、状态突变、竞态条件和跨模块数据污染等问题。
基础日志分层与语义化输出
避免所有日志混用 console.log。按严重程度和用途区分：
-
debug：仅开发环境开启，如函数入参、中间计算值（用
console.debug 或自定义 log.debug()）
-
info：关键流程节点，如“用户登录成功”“WebSocket 连接建立”
-
warn：非致命但需关注，如降级策略触发、API 返回空数据
-
error：捕获异常时必须带堆栈、上下文（如请求 URL、用户 ID、时间戳）
示例：
const logger = {
debug: (...args) => process.env.NODE_ENV === 'development' && console.debug('[DEBUG]', ...args),
info: (...args) => console.info('[INFO]', ...args),
warn: (...args) => console.warn('[WARN]', ...args),
error: (msg, context = {}) => console.error('[ERROR]', msg, { time: new Date().toISOString(), ...context })
};
为异步与生命周期添加上下文追踪
在 Promise 链、React 组件、Vue setup 或事件处理器中，日志容易丢失执行路径。解决方法是注入轻量级 trace ID：
- 每次发起请求或进入关键逻辑时生成唯一 ID（如
Date.now() + Math.random().toString(36).substr(2, 5)）
- 将该 ID 作为参数透传或通过闭包/代理持有，在后续日志中统一携带
- 配合浏览器 DevTools 的
console.group() 折叠日志块，提升可读性
示例（fetch 封装）：
function fetchWithTrace(url, options = {}) {
const traceId = `t${Date.now()}-${Math.random().toString(36).substr(2, 4)}`;
console.group(`[FETCH] ${url} [${traceId}]`);
console.debug('→ Request:', { url, ...options });
return fetch(url, options)
.then(res => {
console.debug('← Response:', res.status);
return res;
})
.catch(err => {
console.error('✗ Failed:', err);
throw err;
})
.finally(() => console.groupEnd());
}
拦截全局错误与未处理 Promise 拒绝
复杂应用中，很多问题发生在无人监听的角落。务必捕获两类兜底错误：
-
window.addEventListener('error')：捕获 JS 运行时错误、资源加载失败（注意 script error 跨域限制）
-
window.addEven
tListener('unhandledrejection')：捕获未 await 或未 catch 的 Promise 拒绝
在这些监听器中，记录完整错误对象、当前路由、用户行为序列（如有）、设备信息，并考虑上报至监控服务（如 Sentry、自建 endpoint）。
生产环境安全可控的日志开关
线上不能关闭所有日志，也不能全量打印。推荐方案：
- 通过 URL 参数临时开启（如
?debug=logger），便于现场复现问题
- 基于用户角色或灰度标识动态启用高粒度日志（如内部员工可看 debug 级）
- 使用
localStorage 记录用户偏好，避免每次手动加参数
- 敏感字段（token、手机号、密码）必须脱敏后再记录（正则替换或白名单字段提取）
不复杂但容易忽略。
tListener('unhandledrejection')