前端日志分级怎么做才合理？

Des.维通提问于 2026-03-21 22:31:17 阅读 41

优化

我们项目现在所有日志都用console.log打，线上出问题根本没法快速定位，想按 info/warn/error 分级，但不知道怎么统一管理。

试过自己封装一个 logger，但团队有人还是直接用原生 console，导致分级失效。有没有成熟的方案或者最佳实践？比如能不能自动过滤掉非 error 日志在生产环境？

const logger = {
  info: (...args) => console.log('[INFO]', ...args),
  warn: (...args) => console.warn('[WARN]', ...args),
  error: (...args) => console.error('[ERROR]', ...args)
};

我来解答赞 2 收藏

反馈

2 条解答

嘉倪 Dev Lv1

这种问题我见多了，直接上代码吧。你这个logger想法是对的，但需要加个环境判断和全局替换原生console。

const logLevels = ['info', 'warn', 'error'];

let currentLevel = process.env.NODE_ENV === 'production' ? 'error' : 'info';



function createLogger() {

  return logLevels.reduce((acc, level) => {

    acc[level] = (...args) => {

      if (logLevels.indexOf(level) >= logLevels.indexOf(currentLevel)) {

        console[level]([${level.toUpperCase()}], ...args);

      }

    };

    return acc;

  }, {});

}



const logger = createLogger();



// 替换全局console

['log', 'warn', 'error'].forEach(method => {

  const original = console[method];

  console[method] = (...args) => {

    logger[method](...args);

    if (process.env.NODE_ENV !== 'production') {

      original.call(console, ...args);

    }

  };

});

代码放这了。生产环境只保留error，开发环境都打出来。记得在项目入口设置NODE_ENV就行了。不过团队沟通很重要，强制用这个logger才能真正生效。累死个人，改日志系统最烦了。

2026-03-31 22:02

诸葛淑芳 Lv1

这个问题确实是个头疼的事儿。你封装的 logger 是个不错的开始，但关键是要确保每个人都用它而不是直接用 console.log。可以考虑以下几个步骤来优化：

首先，定义一个全局的日志配置，区分开发环境和生产环境。可以在 logger 里增加一个环境判断，只在开发环境下显示 info 和 warn 日志，而在生产环境下只显示 error 日志。

然后，可以通过一些工具或者 Webpack 插件在构建时自动替换所有的 console.log 调用为你的 logger 方法，这样可以强制大家使用新的日志系统。

最后，可以考虑引入一个统一的日志库，比如 winston 或 loglevel，这些库本身支持日志级别控制，并且有丰富的插件生态，可以方便地对接到其他日志服务，比如 ELK Stack 或 Splunk。

这样更清晰，也能减少线上调试时的日志噪音。希望这些建议对你有帮助。

2026-03-21 22:33