Haoxin Logger 模块

概述

Haoxin Logger 是一个轻量级的前端日志系统，提供了美观的控制台日志输出，帮助开发者更好地调试和监控应用程序。该模块的主要特性包括：

• 带背景色高亮的日志输出，提升可读性
• 毫秒级时间戳和时间间隔显示
• 模块名和方法名的清晰标识
• 多级别日志支持（debug、info、warn、error）
• 对象序列化显示
• 日志级别控制

安装与使用

安装

# 在项目根目录执行
npm install

导入方式

// 使用模块别名导入（推荐）
import { Logger } from '@haoxin/logger';

// 或直接路径导入
import { Logger } from '../packages/logger';

// 导入默认实例
import logger from '@haoxin/logger';

基本用法

1. 初始化带模块名的日志记录器

// 只指定模块名
const logger = Logger.init('AuthModule');

// 同时指定模块名和方法名
const logger = Logger.init('MeetingModule', 'createMeeting');

2. 记录不同级别的日志

// 记录调试信息（蓝色背景）
logger.debug('这是一条调试信息');

// 记录普通信息（绿色背景）
logger.info('这是一条普通信息');

// 记录警告信息（黄色背景）
logger.warn('这是一条警告信息');

// 记录错误信息（红色背景）
logger.error('这是一条错误信息');

3. 记录带额外参数的日志

// 记录对象数据
logger.info('用户登录成功', { userId: '12345', username: 'admin' });

// 记录多个参数
logger.debug('处理请求', request.url, request.method);

// 记录错误详情
logger.error('操作失败', error);

高级功能

在同一模块中切换方法名

在同一个模块中，您可以使用 setMethod 方法轻松切换不同的方法名：

// 初始化模块日志器
const moduleLogger = Logger.init('MeetingModule');

// 在创建会议方法中使用
function createMeeting() {
  const logger = moduleLogger.setMethod('createMeeting');
  logger.info('创建会议');
}

// 在加入会议方法中使用
function joinMeeting() {
  const logger = moduleLogger.setMethod('joinMeeting');
  logger.info('加入会议');
}

设置日志级别

您可以全局设置日志级别，低于该级别的日志将不会输出：

import { Logger, LogLevel } from '@haoxin/logger';

// 设置全局日志级别为 INFO（将不显示 DEBUG 级别的日志）
Logger.setLevel(LogLevel.INFO);

// 或者设置为 ERROR（只显示 ERROR 级别的日志）
Logger.setLevel(LogLevel.ERROR);

重置时间差计算

日志系统会显示相邻两条日志之间的时间差，您可以通过以下方法重置时间差计算：

logger.resetTimeDiff();

日志样式说明

Logger 模块为不同级别的日志提供了鲜明的背景色和样式，便于在控制台中快速识别：

| 日志级别 | 背景色 | 前景色 | 显示样式 | |---------|-------|-------|---------| | DEBUG | 蓝色 | 白色 | 粗体 + 圆角背景 | | INFO | 绿色 | 白色 | 粗体 + 圆角背景 | | WARN | 黄色 | 黑色 | 粗体 + 圆角背景 | | ERROR | 红色 | 白色 | 粗体 + 圆角背景 |

日志输出格式为：[日志级别] [时间戳 (+时间差)] [模块名.方法名] 日志消息 附加信息

实际应用示例

示例1：认证模块

import { Logger } from '@haoxin/logger';

const logger = Logger.init('AuthModule');

export function login(username, password) {
  logger.debug(`尝试登录用户: ${username}`);
  
  try {
    // 登录逻辑
    logger.info(`用户 ${username} 登录成功`);
    return { success: true };
  } catch (error) {
    logger.error('登录失败', error);
    return { success: false };
  }
}

示例2：会议管理模块

import { Logger } from '@haoxin/logger';

const moduleLogger = Logger.init('MeetingModule');

export class MeetingManager {
  constructor() {
    this.logger = moduleLogger.setMethod('constructor');
    this.logger.info('会议管理器初始化');
  }
  
  createMeeting(meetingData) {
    const logger = moduleLogger.setMethod('createMeeting');
    logger.debug('创建会议', meetingData);
    
    try {
      // 创建会议逻辑
      const meetingId = 'meeting-' + Date.now();
      logger.info('会议创建成功', { meetingId });
      return { meetingId, success: true };
    } catch (error) {
      logger.error('会议创建失败', error);
      return { success: false, error: error.message };
    }
  }
  
  joinMeeting(meetingId, userId) {
    const logger = moduleLogger.setMethod('joinMeeting');
    logger.info('用户加入会议', { meetingId, userId });
    // 加入会议逻辑
  }
}

实际示例

示例1：认证模块 (JavaScript)

// auth.js
import Logger from '../utils/logger.js';

const logger = Logger.init('AuthModule');

export function login(username, password) {
  logger.debug(`尝试登录用户: ${username}`);
  
  try {
    // 登录逻辑
    logger.info(`用户 ${username} 登录成功`);
    return { success: true };
  } catch (error) {
    logger.error('登录失败', error);
    return { success: false };
  }
}

示例2：数据模块 (TypeScript)

// data-service.ts
import Logger from '../utils/logger';

const logger = Logger.init('DataService');

export function fetchData<T>(endpoint: string): Promise<T> {
  const fetchLogger = logger.setMethod('fetchData');
  fetchLogger.debug(`请求数据: ${endpoint}`);
  
  return fetch(endpoint)
    .then(response => {
      fetchLogger.info(`数据请求成功: ${endpoint}`);
      return response.json() as T;
    })
    .catch(error => {
      fetchLogger.error(`数据请求失败: ${endpoint}`, { error: error.message });
      throw error;
    });
}

重置时间间隔

如果需要重置时间间隔计数器，可以使用 resetTimeDiff 方法：

// 重置时间间隔
Logger.resetTimeDiff();
// 或者通过模块日志器重置
moduleLogger.resetTimeDiff();

日志格式说明

输出的日志格式如下：

[YYYY-MM-DD HH:mm:ss.SSS](+时间间隔) 日志级别: [模块名.方法名] 日志内容 [额外信息]

例如：

[2025-08-19 15:07:00.683] info: [MeetingModule.createMeeting] 会议创建成功: 产品周会 (ID: meeting-1755587220683)

注意事项

1. 确保在项目根目录运行 npm install 安装 winston 依赖
2. 日志系统同时提供 JavaScript 和 TypeScript 版本，可以根据项目需求选择使用
3. 对于 TypeScript 项目，推荐使用 logger.ts 以获得更好的类型支持
4. 所有日志方法都支持链式调用不同的日志级别