1. 日志管理概述：为什么需要日志、日志的演进历史、日志在前端工程化中的角色
1.1 为什么需要日志？—— 没有日志的日子，我经历过
说实话，我刚入行那会儿，对日志这件事完全没概念。
那时候写前端，console.log 满天飞。上线前删一波，删不干净就留在线上。用户反馈说「页面白屏了」，我第一反应是「你清一下缓存试试」—— 现在想想，真是脸红。
为什么会这样？因为那时候的前端，说白了就是个「展示层」。逻辑简单，状态少，出问题了刷新一下就好。
但今天不一样了。一个前端项目，动辄几十万行代码，状态管理、路由守卫、接口请求、权限校验、埋点上报…… 任何一个环节出问题，你都得靠日志来还原现场。
我个人习惯把日志比作「黑匣子」。飞机失事了，大家第一件事就是找黑匣子。线上出 Bug 了，你第一件事应该是什么？—— 查日志。
没有日志，你就像蒙着眼睛修车。你猜是哪坏了，你猜用户做了什么操作，你猜是不是网络问题…… 猜来猜去，时间全浪费了。
1.2 日志的演进历史 —— 从 console.log 到可观测性
日志这件事，在前端领域其实经历了好几个阶段。我把它梳理成了一张表，你一看就明白：
| 阶段 | 时间 | 典型做法 | 痛点 |
|---|---|---|---|
| 原始时代 | 2010 年前 | console.log / alert | 上线前手动删除，容易遗漏 |
| 工具时代 | 2010-2015 | log4javascript、debug.js | 配置复杂，浏览器兼容性差 |
| 工程化时代 | 2015-2020 | winston（Node）、logrocket、Sentry | 前端日志开始和后端对齐 |
| 可观测时代 | 2020 至今 | OpenTelemetry、Datadog RUM、自建日志平台 | 日志 + 指标 + 链路追踪三位一体 |
我记得 2016 年那会儿，我在一个电商项目中第一次尝试用 logrocket。当时团队里有人反对，说「录屏太耗性能了」。结果上线第二天，一个用户反馈下单失败，我们回放了他的操作录屏，发现是某个按钮的点击事件被一个 z-index 更高的遮罩层挡住了。
嗯，从那以后，没人再质疑日志的价值了。
1.3 日志在前端工程化中的角色 —— 不只是「记下来」
你想想看，一个成熟的前端工程化体系里，日志扮演了什么角色？
我把它拆成三个层面：
1.3.1 开发阶段：调试与验证
说白了，就是帮你「看到代码在干什么」。
比如你写了一个自定义 hook，里面有一堆 useEffect 和 useMemo。你很难靠肉眼判断依赖项对不对。这时候，日志就是你的「第三只眼」。
// 我曾经这样调试一个复杂 hook
useEffect(() => {
console.log('[UserProfile] 依赖变化:', {
userId,
fetchPolicy,
cacheVersion
});
// 实际逻辑...
}, [userId, fetchPolicy, cacheVersion]);这段代码看起来简单，但我在项目中遇到过好几次「依赖项漏写」导致的诡异 Bug。加了日志后，一眼就能看出哪个依赖没触发更新。
1.3.2 测试阶段：断言与覆盖率
测试用例跑过了，不代表逻辑就对了。我习惯在测试中加一些「日志断言」—— 不是检查返回值，而是检查「某个日志是否被正确输出」。
1.3.3 线上阶段：监控与排障
这是日志最核心的价值。线上出了问题，你不可能在用户电脑上打断点。你只能靠日志。
我曾经接手过一个项目，线上频繁报「白屏」，但没有任何日志。我花了整整三天，才定位到是一个第三方 CDN 资源偶尔加载失败导致的。
后来我加了一行日志：
// 记录资源加载状态
window.addEventListener('error', (e) => {
if (e.target.tagName === 'SCRIPT' || e.target.tagName === 'LINK') {
logError('资源加载失败', {
src: e.target.src || e.target.href,
timestamp: Date.now()
});
}
}, true);就这一行代码，后续的排障时间从三天缩短到了十分钟。
1.4 日志管理的核心原则 —— 我的三条铁律
做了这么多年前端，我总结了三句话：
- 日志要有「上下文」 —— 光记一个「请求失败」没用，你得记下是哪个接口、什么参数、什么时间、什么浏览器。
- 日志要有「等级」 —— debug、info、warn、error，别把所有东西都打成 error。否则你永远分不清「用户误操作」和「系统崩溃」。
- 日志要有「出口」 —— 开发环境打控制台，测试环境打文件，线上环境打远程服务。别混在一起。
嗯，这三条看起来简单，但我在面试中问过很多人，能说清楚的不超过 20%。
1.5 小结
日志这件事，说大不大，说小不小。但它直接决定了你「线上出问题后，是花 10 分钟解决，还是花 10 小时猜谜」。
接下来的章节，我会带你一步步搭建一个完整的前端日志体系。从日志采集、格式化、上报，到日志平台的建设、告警策略的制定，再到可观测性的落地。
准备好了吗？我们开始吧。