别再滥用console.log！现代前端Debug日志最佳实践

console.log('user:', user);
console.log('error:', err);
console.log('step 3 done');

// utils/logger.js
const LOG_LEVELS = {
  DEBUG: 0,
  INFO: 1,
  WARN: 2,
  ERROR: 3
};

class Logger {
  constructor(moduleName, options = {}) {
    this.module = moduleName;
    this.level = options.level || (process.env.NODE_ENV === 'production' ? 'ERROR' : 'DEBUG');
    this.reporter = options.reporter; // 用于上报错误
  }

  _log(level, message, data = {}) {
    const shouldLog = LOG_LEVELS[level] >= LOG_LEVELS[this.level];
    
    if (shouldLog) {
      const timestamp = new Date().toISOString();
      const logObj = { timestamp, level, module: this.module, message, ...data };
      
      // 开发环境：结构化输出到控制台
      if (process.env.NODE_ENV !== 'production') {
        console.group(`%c[${level}] ${this.module}`, 
          `color: ${level === 'ERROR' ? 'red' : level === 'WARN' ? 'orange' : 'gray'}`);
        console.log(logObj);
        console.groupEnd();
      }
      
      // 生产环境：仅 ERROR 上报
      if (level === 'ERROR' && this.reporter) {
        this.reporter.captureException(new Error(message), { extra: logObj });
      }
    }
  }

  debug(msg, data) { this._log('DEBUG', msg, data); }
  info(msg, data)  { this._log('INFO', msg, data); }
  warn(msg, data)  { this._log('WARN', msg, data); }
  error(msg, data) { this._log('ERROR', msg, data); }
}

// 使用示例
export const authLogger = new Logger('Auth', { reporter: window.Sentry });
export const paymentLogger = new Logger('Payment');

console.table(users); // 表格形式展示用户列表

console.time('fetchUser');
await fetchUser();
console.timeEnd('fetchUser'); // 输出: fetchUser: 245ms

function problematicFn() {
  console.trace('Called from where?');
}

console.log('%c Auth Error ', 'background: red; color: white; padding: 2px 6px;', error);

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0,
});

// 在 logger 中调用 Sentry.captureException()

function reportLog(level, message, context) {
  if (level === 'ERROR') {
    fetch('/api/logs', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ level, message, context, url: location.href, ua: navigator.userAgent })
    }).catch(() => {}); // 静默失败，避免影响主流程
  }
}

// vite.config.js
import strip from '@rollup/plugin-strip';

export default {
  plugins: [
    process.env.NODE_ENV === 'production' && strip({
      functions: ['debugLog', 'devOnlyLog'], // 自定义日志函数名
      sourceMap: true,
    })
  ]
}

// webpack.config.js
optimization: {
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true, // 移除所有 console.*
          pure_funcs: ['debugLog'] // 移除自定义函数
        }
      }
    })
  ]
}

function sanitize(data) {
  if (typeof data !== 'object' || data === null) return data;
  
  const sensitiveFields = ['password', 'token', 'phone', 'idCard'];
  const result = { ...data };
  
  for (const key in result) {
    if (sensitiveFields.some(field => key.includes(field))) {
      result[key] = '[REDACTED]';
    } else if (typeof result[key] === 'object') {
      result[key] = sanitize(result[key]);
    }
  }
  return result;
}

// 在 logger 中使用
logger.info('User login', sanitize({ user, token }));