拒绝日志（“控制台打印一下就够了”）

日志的重要性与滥用

日志是开发过程中不可或缺的调试工具，它能记录程序运行时的关键信息。但很多开发者养成了过度依赖控制台日志的习惯，特别是在前端领域，console.log随处可见。这种随意打印日志的做法看似方便，实际上会带来诸多问题：

function calculateTotal(items) {
  console.log('items:', items); // 调试日志
  const subtotal = items.reduce((sum, item) => sum + item.price, 0);
  console.log('subtotal:', subtotal); // 调试日志
  const tax = subtotal * 0.1;
  console.log('tax:', tax); // 调试日志
  return subtotal + tax;
}

控制台日志的局限性

浏览器控制台的日志只在开发阶段可见，一旦代码部署到生产环境，这些日志对用户和开发者都不可见。当生产环境出现问题时，缺乏有效的日志记录会导致排查困难。控制台日志还存在以下问题：

1. 无法持久化保存
2. 无法按级别分类
3. 无法远程收集
4. 可能暴露敏感信息
5. 影响性能（特别是在循环中大量打印时）

// 性能问题示例
for (let i = 0; i < 10000; i++) {
  console.log('Processing item', i); // 严重影响性能
  processItem(data[i]);
}

专业的日志解决方案

现代前端应用应该采用专业的日志库，如：

• loglevel
• winston (浏览器版)
• pino
• 或自定义日志系统

这些解决方案提供以下优势：

import logger from 'loglevel';

// 设置日志级别
logger.setLevel('warn');

// 分级日志
logger.debug('Debug message'); // 不会输出
logger.warn('Warning message'); // 会输出
logger.error('Error message'); // 会输出

日志分级策略

合理的日志分级能有效管理日志输出：

1. DEBUG - 详细的开发信息
2. INFO - 重要的运行时事件
3. WARN - 潜在问题
4. ERROR - 错误事件但不影响系统运行
5. CRITICAL - 严重错误导致功能不可用

// 分级日志示例
function fetchUserData(userId) {
  logger.debug(`Fetching data for user ${userId}`);
  try {
    const response = await api.get(`/users/${userId}`);
    logger.info(`Successfully fetched data for user ${userId}`);
    return response.data;
  } catch (error) {
    logger.error(`Failed to fetch user ${userId}: ${error.message}`);
    throw error;
  }
}

生产环境日志收集

在生产环境中，应该将日志发送到远程服务器或日志服务：

1. 使用window.onerror捕获全局错误
2. 集成Sentry、LogRocket等专业服务
3. 自定义日志上报机制

// 自定义日志上报
function logToServer(level, message, metadata = {}) {
  if (process.env.NODE_ENV === 'production') {
    navigator.sendBeacon('/log', {
      level,
      message,
      metadata,
      timestamp: new Date().toISOString(),
      userAgent: navigator.userAgent
    });
  }
}

// 使用示例
try {
  riskyOperation();
} catch (error) {
  logToServer('error', 'riskyOperation failed', { error: error.message });
}

日志的最佳实践

1. 结构化日志：使用JSON格式而非纯文本
2. 上下文信息：包含足够的问题排查上下文
3. 敏感信息过滤：避免记录密码、token等
4. 性能考虑：避免高频日志影响性能
5. 日志轮转：防止日志文件过大

// 结构化日志示例
logger.info({
  event: 'checkout_started',
  userId: '12345',
  cartItems: 3,
  device: 'mobile',
  location: '/checkout'
});

// 而不是
logger.info('User 12345 started checkout with 3 items on mobile');

日志与监控的集成

将日志系统与监控告警系统集成，实现：

1. 错误自动告警
2. 性能指标监控
3. 用户行为分析
4. 异常模式检测

// 错误边界组件中的日志集成
class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    logger.error('React component error', {
      error: error.toString(),
      stack: error.stack,
      componentStack: info.componentStack
    });
    monitoring.trackError(error);
  }
}

日志的测试与验证

确保日志系统正常工作同样重要：

1. 单元测试验证关键日志是否记录
2. E2E测试验证日志上报流程
3. 定期检查日志存储和检索功能

// 日志的单元测试示例
describe('logging', () => {
  it('should log API errors', () => {
    const mockLogger = { error: jest.fn() };
    const api = createApi({ logger: mockLogger });
    
    return api.get('/invalid-route')
      .catch(() => {
        expect(mockLogger.error).toHaveBeenCalled();
      });
  });
});

文化层面的改变

团队需要建立正确的日志文化：

1. 代码审查时检查日志使用
2. 制定日志规范文档
3. 定期清理无用日志
4. 分享日志使用经验

// 不好的日志实践
console.log('got here'); // 无意义
console.log(data); // 缺乏上下文

// 好的日志实践
logger.debug('Received API response', { 
  endpoint: '/users',
  status: response.status,
  duration: `${Date.now() - startTime}ms`
});

性能优化的日志策略

对于性能敏感的场景：

1. 使用条件日志
2. 采样率控制
3. 延迟批量上报
4. Web Worker处理

// 性能优化的日志示例
const logPerformance = (function() {
  const queue = [];
  let timer = null;
  
  return (metric) => {
    queue.push(metric);
    
    if (!timer) {
      timer = setTimeout(() => {
        sendMetrics(queue);
        queue.length = 0;
        timer = null;
      }, 1000);
    }
  };
})();

// 使用
logPerformance({ name: 'render', duration: 16 });