前端日志配置管理最佳实践

GGBOND2025/6/11大约 3 分钟

引言

在前端开发中，日志管理是调试、监控和优化应用的重要部分。传统的 console.log 方法虽然简单，但缺乏结构化和集中管理的能力。本文将介绍如何使用现有的日志库 pino 在前端项目中实现统一的日志管理，代码设计为通用性强，适用于 Vue、React 等框架，并结合 VuePress 格式展示。

为什么需要日志管理？

调试效率：结构化日志便于快速定位问题。
用户体验：通过通知提示用户错误。
监控与分析：支持本地存储或发送到后端。

实现日志管理的步骤

1. 选择日志库

这里我使用 pino，因为它是轻量、高性能的日志库，且支持浏览器环境。安装方法如下：

npm install pino pino-pretty

2. 创建通用日志模块

在项目中创建一个通用的日志管理模块，适配不同框架。

// src/utils/logger.ts
import pino from 'pino';

// 判断是否开发环境 vite构建下
const isDev = import.meta.env.MODE === 'development';

const transport = {
    target: 'pino-pretty',
    options: {
        colorize: true,
        levelFirst: true,
        translateTime: 'yyyy-mm-dd HH:MM:ss',
        ignore: 'pid,hostname',
    }
};

const logger = pino({
    level: 'debug',
    base: null,
    transport
});


// 导出日志方法  后面直接log.info调用即可
export const log = {
    info: (message: string, meta?: Record<string, any>) =>
        logger.info({ msg: message, ...(meta ?? {}) }),

    warn: (message: string, meta?: Record<string, any>) =>
        logger.warn({ msg: message, ...(meta ?? {}) }),

    debug: (message: string, meta?: Record<string, any>) =>
        logger.debug({ msg: message, ...(meta ?? {}) }),

    error: (message: string, meta?: Record<string, any>) => {
        logger.error({ msg: message, ...(meta ?? {}) });

        import('tdesign-vue-next').then(({ MessagePlugin }) => {
            MessagePlugin.error(message, 3000);
        });
    },
};

// 全局访问（可选）
export default logger;

通用性：日志方法不依赖特定框架，通知逻辑通过 window.TDesign 动态检测。
扩展性：支持传输到后端，适配生产环境。

3. 集成到项目

全局注册

在 main.ts 中全局注册：

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import TDesign from 'tdesign-vue-next';
import 'tdesign-vue-next/es/style/index.css';
import { log } from '@/utils/logger'; // 确保路径正确

const app = createApp(App);

// 全局属性
app.config.globalProperties.$log = log;

// 使用 TDesign
app.use(TDesign);

// 挂载应用
app.mount('#app');

3. 扩展与优化

本地存储：使用 localStorage 保存日志。

// src/utils/logger.ts
const loggerOptions = {
  // ... 现有选项 ...
  browser: {
    // ... 现有配置 ...
    write: (obj: any) => {
      const logs = JSON.parse(localStorage.getItem('appLogs') || '[]');
      logs.push(obj);
      localStorage.setItem('appLogs', JSON.stringify(logs.slice(-1000))); // 限制 1000 条
    },
  },
};

自定义通知：适配其他 UI 库（如 Ant Design）。

// src/utils/logger.ts
if (typeof window !== 'undefined' && window.antd) {
  window.antd.message.error(args[0] instanceof Error ? args[0].message : args.join(' '), 3);
}

日志级别控制：通过环境变量动态调整。

const loggerOptions = {
  level: process.env.LOG_LEVEL || (process.env.NODE_ENV === 'development' ? 'debug' : 'info'),
};

总结

使用 pino 实现前端日志管理，代码设计通用，适配 Vue、React 等框架。通过全局错误处理、通知提示和可选的后端传输，满足调试和监控需求。未来可根据项目需求扩展存储或集成第三方日志服务（如 Sentry）。