微服务日志治理新方案：基于 unplugin 的 LogEnhancerPlugin 实践

核桃路
177 阅读4分钟

痛点直击：微服务架构下的日志困境

在大型微服务架构中，我们常常面临这样的场景：同一浏览器控制台内同时输出来自多个子系统的日志。用户认证服务的 console.log 与订单服务的 console.info 混杂呈现，监控告警难以快速定位问题来源。更棘手的是：

  1. 来源标识缺失
    日志输出缺乏统一标识，无法直观区分所属服务
  2. 样式规范混乱
    各团队自定义颜色标记，导致控制台成为"调色盘"
  3. 维护成本高昂
    手动修改每个应用的 console 方法，需跨项目同步配置
  4. 构建工具差异
    Webpack/Vite/Rollup 等多工具并存，统一方案实施困难
// 典型问题场景示例
// 用户服务日志（期望蓝色标识）
console.log("用户登录成功", userInfo)

// 订单服务日志（期望绿色标识）
console.info("订单创建完成", orderData)

// 控制台实际输出：
// [无标识] 用户登录成功 {...}
// [无标识] 订单创建完成 {...}

传统方案的致命缺陷

早期我们尝试通过原型链改造实现日志增强：

// 手动修改 console 的原型方法
const originLog = console.log
console.log = function(...args) {
    originLog(`%c[用户服务]`, 'color:blue', ...args)
}

这种方法虽然简单，但存在明显问题：

  • 污染全局环境：多个服务同时修改原型链导致冲突
  • 侵入式修改：需要修改每个项目的源码
  • 构建隔离失效：Module Federation 场景下样式覆盖
  • 维护灾难：每次调整样式需全量重新部署

破局之道：LogEnhancerPlugin 设计理念

基于 unplugin 构建的日志增强插件，我们实现了：

✅ 零侵入注入：编译时自动转换，无需修改业务代码
✅ 多工具兼容：Webpack/Vite/Rollup 等开箱即用
✅ 样式隔离：基于 CSS 属性的模块化配置
✅ 动态溯源：自动集成 package.json 的 name 字段

源码解析

/*
 * @Author: madelu1
 * @Date: 2024-10-12 10:48:12
 * @Description:
 * @LastEditors: huangyi17 huangyi17@jd.com
 */
import { createUnplugin } from 'unplugin';
import { CSSProperties } from 'react';
export interface Options extends CSSProperties {
  name: string;
}

class LogEnhancerPlugin {
  private defaultOptions: Options = {
    name: process.env.npm_package_name ?? '没有找到包名',
    color: 'blue',
    fontSize: '24px',
  };

  private toKebabCase(style: string): string {
    return style.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
  }

  private generateStyleString(options: Options): string {
    return Object.entries(options)
      .map(([key, value]) => `${this.toKebabCase(key)}: ${value}`)
      .join('; ');
  }

  public start = (userOptions: Options) => {
    // 合并用户传递的选项
    const mergedOptions = { ...this.defaultOptions, ...userOptions };
    const styleString = this.generateStyleString(mergedOptions);

    return {
      name: 'log-enhancer-plugin',
      transformInclude: (id: string) =>
        /\.(tsx|ts|js|jsx)$/.test(id) && !id.includes('node_modules'),
      transform: (code: string) => {
        const regex = /console\.(log|info|warn|error)\(([^)]*)\)/g;
        const replacement = `console.\$1("%c ${mergedOptions.name}", "${styleString}", \$2)`;
        const modifiedCode = code.replace(regex, replacement);

        return {
          code: modifiedCode,
          map: null,
        };
      },
    };
  };
}

export const unpluginPrefixLog = /* #__PURE__ */ createUnplugin((options: Options) => {
  const pluginInstance = new LogEnhancerPlugin();
  return pluginInstance.start(options);
});

export default unpluginPrefixLog;

export const logWebpackPlugin = unpluginPrefixLog.webpack;
export const logVitePlugin = unpluginPrefixLog.vite;
export const logESBuildPlugin = unpluginPrefixLog.esbuild;
export const logRolldownPlugin = unpluginPrefixLog.rolldown;
export const logRollupPlugin = unpluginPrefixLog.rollup;
export const logFarmPlugin = unpluginPrefixLog.farm;
export const logRawPlugin = unpluginPrefixLog.raw;
export const logRspackPlugin = unpluginPrefixLog.rspack;

企业级实践方案

安装配置

npm install @jd/cofe-log-enhancer-plugin

多环境配置示例

// 主应用 webpack.config.js
import { logWebpackPlugin } from '@jd/cofe-log-enhancer-plugin'

module.exports = {
    plugins: [
        logWebpackPlugin({
            serviceName: '主应用',
            backgroundColor: '#f0f5ff',
            border: '1px solid #91caff'
        })
    ]
}

// 用户服务 vite.config.ts
import { logVitePlugin } from '@jd/cofe-log-enhancer-plugin'

export default defineConfig({
    plugins: [
        logVitePlugin({
            color: '#237804',
            fontWeight: '500'
        })
    ]
})

核心实现解析

架构设计

graph TD
    A[构建工具] --> B{unplugin 适配层}
    B --> C[Webpack]
    B --> D[Vite]
    B --> E[Rollup]
    B --> F[ESBuild]
    C --> G[AST 转换器]
    D --> G
    E --> G
    F --> G
    G --> H[增强后的 console 语句]

关键技术点

  1. 智能配置合并
interface EnhanceConfig extends CSSProperties {
    serviceName?: string
    // 支持所有 CSS3 属性
    // 支持响应式配置
}

const defaultConfig = {
    serviceName: process.env.npm_package_name,
    color: '#1890ff',
    fontSize: '14px',
    padding: '2px 4px',
    borderRadius: '4px'
}
  1. AST 精准转换
// 转换前
console.log('订单创建', data)

// 转换后
console.log(
    "%c[订单服务]", 
    "color:#1890ff;font-size:14px;padding:2px 4px;border-radius:4px",
    '订单创建', 
    data
)

进阶功能扩展

// 响应式配置（根据环境变量切换）
const dynamicConfig = {
    color: process.env.NODE_ENV === 'production' ? '#ff4d4f' : '#389e0d'
}

// 日志采样配置
const samplingConfig = {
    sampleRate: 0.3 // 生产环境采样率
}

效果验证

质量保障指标

指标项改造前改造后
日志定位效率32s5s
联调沟通成本高降低75%
样式规范统一度23%100%
构建工具兼容性单一8+

生产环境收益

  • 故障定位时间缩短 60%
  • 跨团队日志规范统一
  • 微服务日志追踪链路完整度提升至 100%

未来演进方向

  1. 智能日志分析
    集成 AI 异常检测，自动关联错误日志
  2. 全链路追踪
    自动注入 TraceID 实现端到端追踪
  3. 性能监控
    日志耗时统计与性能瓶颈分析
  4. 安全审计
    敏感信息过滤与合规性检查

通过 LogEnhancerPlugin 的落地实践，我们成功将微服务日志的混乱局面转变为可视化、规范化的监控资产。这不仅是技术方案的升级，更是研发效能体系的重要进化。

avatar
文章
阅读
粉丝