Nuxt日志记录进阶,服务端请求监控这样搞，Nuxt.js日志记录与服务器端请求监控攻略
💥 “用户投诉页面白屏，查了3小时才发现是某个API偷偷挂了！”——服务端请求不记录日志，就像蒙眼走钢丝，随时可能摔得粉身碎骨！
别慌！今天手把手教你用 winston 三招搞定Nuxt服务端日志监控，错误捕获率提升90%，还能自动压缩过期日志👇
🤔 一、为啥服务端日志这么要命？
▶ 血泪教训三连
- SSR渲染崩了不报错：Node端接口500错误，前台只显示白屏，无日志根本找不到根源；
- 异步请求黑盒：用户点击按钮没反应，其实是服务端请求超时，没日志只能瞎猜；
- 存储爆炸：PM2日志不分割，30天撑爆100G硬盘！
⚠️ 你问：客户端日志不能替代吗？
→ 答：大错特错！ 客户端日志抓不到 SSR渲染阶段 的致命错误！
🛠️ 二、三步神操作：winston精准监控
✅ Step 1：装包+基础配置
bash复制npm install winston winston-daily-rotate-file # 必装日志分割神器
javascript下载复制运行// ~/plugins/logger.jsimport winston from 'winston'export default ({ app }) => {if (process.server) {const logger = winston.createLogger({transports: [new winston.transports.DailyRotateFile({filename: 'logs/server-%DATE%.log',maxSize: '20m', // 单文件最大20MBmaxFiles: '30d', // 自动保留30天日志})]})app.$log = logger // 挂载到Nuxt全局}}
✅ Step 2：请求级打点（Axios拦截）
javascript下载复制运行// ~/utils/axios.jsexport default ({ $axios, app }) => {$axios.onError(error => {app.$log.error(`[${error.response.status}] ${error.request.path}`, {params: error.config.params, // 记录错误请求参数stack: error.stack // 关键！记录错误堆栈})})}
✅ Step 3：终极防御：SSR错误抓漏网之鱼
javascript下载复制运行// nuxt.config.jsexport default {hooks: {render: {errorMiddleware(app) {app.use((err, req, res, next) => {const $log = req.app.$log$log.error(`SSR崩了！路由: ${req.url}`, err)res.status(500).send('页面渲染失败')})}}}}
🚨 三、避坑指南：这些操作=埋雷！
▶ 作 *** 行为清单
| 操作 | 后果 | 正确姿势 |
|---|---|---|
| 日志存项目根目录 | 服务器硬盘秒爆💥 | 路径设为 /var/log/nuxt/ |
| 所有日志混在一个文件 | 查错像大海捞针🌊 | 分等级存储（info/error） |
| 不设日志自动清理 | 半年后磁盘报警⏰ | 用 winston-daily-rotate-file 自动轮转 |
▶ 2025新坑预警
- 云部署陷阱：容器化部署时，日志不输出到 stdout，K8s日志收集器抓不到；
- 破解方案：
javascript下载复制运行
logger.add(new winston.transports.Console()) // 同时输出到控制台
💡 四、独家技巧：日志分析效率翻倍
▶ 终端神器
- 实时过滤错误：
bash复制
tail -f logs/server-*.log | grep "ERROR" # 秒抓所有错误日志 - 统计高频接口报错：
bash复制
cat logs/server-*.log | awk '/GET/ {print $6}' | sort | uniq -c | sort -nr
🌟 个人见解：
别盲目追求 ELK 重型方案！中小项目用 winston基础配置+终端命令，省下80%运维成本，把精力留给核心业务！