Repack Logs MCP

重新包装原木mcp

用于跟踪Re.Pack/Rsback开发服务器日志的MCP（模型上下文协议）服务器。使Claude等AI助手能够查询构建日志、查找错误和监视编译状态。

运作原理

此软件包提供三个组件：

1. 重新打包日志插件 -一个将构建日志写入JSON文件的Rspack/Webpack插件
2. MCP 服务器 -监视日志文件，并为AI助手提供查询日志的工具
3. 客户端记录器 -React Native应用程序的轻量级记录器，可将运行时日志发送到MCP服务器

安装

npm install -g repack-logs-mcp
# or use directly with npx
npx repack-logs-mcp /path/to/.repack-logs.json

设置

步骤1：将插件添加到您的Rspack配置中

添加 RepackLogsPlugin 给你的 rspack.config.mjs （或 rspack.config.js):

import { RepackLogsPlugin } from 'repack-logs-mcp/plugin';

export default {
  // ... your existing config
  plugins: [
    // ... your existing plugins
    new RepackLogsPlugin({
      // Path to write logs (default: '.repack-logs.json')
      outputPath: '/absolute/path/to/.repack-logs.json',
      // Clear logs on each build start (default: true)
      clearOnStart: true,
    }),
  ],
};

Re.Pack示例：

import * as Repack from '@callstack/repack';
import { RepackLogsPlugin } from 'repack-logs-mcp/plugin';

export default Repack.defineRspackConfig({
  // ... your config
  plugins: [
    new Repack.RepackPlugin(),
    new RepackLogsPlugin({
      outputPath: '/Users/yourname/project/.repack-logs.json',
    }),
  ],
});

步骤2：添加运行时日志记录（可选）

要捕获运行时日志（来自应用程序的console.log），您需要添加一个小型客户端脚本，该脚本拦截控制台调用并将其发送到MCP服务器。

步骤2a：创建客户端文件

创建一个名为的文件 mcp-client.js 在React Native应用程序的根目录中（旁边 index.js):

/**
 * MCP Console Capture Client
 * Intercepts console.log/warn/error and sends to MCP server
 */

var SERVER_URL = 'http://localhost:9090';
var logBuffer = [];
var flushTimer = null;
var BATCH_INTERVAL = 1000;
var originalConsole = {
  log: console.log,
  warn: console.warn,
  error: console.error,
  debug: console.debug,
  info: console.info
};

function flushLogs() {
  if (flushTimer) {
    clearTimeout(flushTimer);
    flushTimer = null;
  }
  if (logBuffer.length === 0) return;

  var logs = logBuffer.slice();
  logBuffer = [];

  fetch(SERVER_URL + '/logs', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ logs: logs })
  }).catch(function() {});
}

function formatArg(arg) {
  if (typeof arg === 'string') return arg;
  if (arg instanceof Error) return arg.name + ': ' + arg.message;
  try {
    return JSON.stringify(arg);
  } catch (e) {
    return String(arg);
  }
}

function createInterceptor(type, original) {
  return function() {
    var args = Array.prototype.slice.call(arguments);
    original.apply(console, args);

    var tag = 'console';
    var message = args.map(formatArg).join(' ');

    if (typeof args[0] === 'string') {
      var match = args[0].match(/^\[([^\]]+)\]/);
      if (match) tag = match[1];
    }

    var entry = {
      type: type,
      message: message,
      tag: tag,
      timestamp: new Date().toISOString()
    };

    if (args.length > 1) {
      try {
        entry.data = args.length === 2 ? args[1] : args.slice(1);
      } catch (e) {}
    }

    logBuffer.push(entry);
    if (!flushTimer) {
      flushTimer = setTimeout(flushLogs, BATCH_INTERVAL);
    }
  };
}

function enableConsoleCapture(options) {
  options = options || {};
  if (options.serverUrl) SERVER_URL = options.serverUrl;

  console.log = createInterceptor('info', originalConsole.log);
  console.info = createInterceptor('info', originalConsole.info);
  console.warn = createInterceptor('warn', originalConsole.warn);
  console.error = createInterceptor('error', originalConsole.error);
  console.debug = createInterceptor('debug', originalConsole.debug);
}

function disableConsoleCapture() {
  console.log = originalConsole.log;
  console.info = originalConsole.info;
  console.warn = originalConsole.warn;
  console.error = originalConsole.error;
  console.debug = originalConsole.debug;
}

module.exports = {
  enableConsoleCapture: enableConsoleCapture,
  disableConsoleCapture: disableConsoleCapture
};

步骤2b：在应用程序中启用捕获

将此添加到您的 index.js （之前 AppRegistry.registerComponent):

// Enable console.log capture for MCP debugging (only in dev)
if (__DEV__) {
  try {
    const { enableConsoleCapture } = require('./mcp-client');
    enableConsoleCapture();
  } catch (e) {
    // MCP client not available, skip
  }
}

步骤2c：检查运行时服务器端口

跑 get_status 查看运行时服务器正在使用哪个端口：

Runtime Log Server:
  Port: 9090
  URL: http://localhost:9090

如果端口不同于9090（例如9093），请更新 SERVER_URL 在 mcp-client.js 为了匹配。

就是这样！ 现在你所有的现有 console.log 呼叫被自动发送到MCP服务器。

捕获：

• 拦截console.log、console.warn、console.error、console.debug
• 从中提取标签 [TagName] 模式（例如。， console.log('[MyComponent] hello'))
• 仍然输出到Metro控制台（因此您也可以在那里看到日志）
• 批处理日志以提高效率（每秒发送一次）
• 仅在开发模式下运行

步骤3：配置MCP服务器

将MCP服务器指向插件配置中使用的相同日志文件路径。

提供的工具

配置

日志文件路径可以通过以下方式设置：

1. CLI参数 （最高优先级）：

   npx repack-logs-mcp /path/to/.repack-logs.json

1. 环境变量:

   REPACK_LOG_FILE=/path/to/.repack-logs.json npx repack-logs-mcp

1. 默认: .repack-logs.json 在当前目录中

插件选项

环境变量（MCP服务器）

Claude代码集成

添加到您的Claude Code MCP设置中(~/.claude/settings.json 或项目设置）：

{
  "mcpServers": {
    "repack-logs": {
      "command": "npx",
      "args": ["repack-logs-mcp", "/path/to/your/project/.repack-logs.json"]
    }
  }
}

然后问克劳德这样的问题：

• “最近的构建日志是什么？”
• “显示运行时日志”
• “是否存在任何构建错误？”
• “显示上次生成的警告”
• “日志监视器的状态如何？”

用法示例

获取最近日志

Tool: get_build_logs
Args: { "limit": 10 }

按类型筛选

Tool: get_build_logs
Args: { "types": ["error", "warn"], "limit": 20 }

搜索日志

Tool: get_build_logs
Args: { "search": "Cannot find module" }

仅获取错误

Tool: get_errors
Args: { "limit": 10 }

获取运行时日志

Tool: get_runtime_logs
Args: { "limit": 50 }

按标签筛选运行时日志

Tool: get_runtime_logs
Args: { "tag": "MyComponent", "limit": 20 }

搜索运行时日志

Tool: get_runtime_logs
Args: { "search": "error", "types": ["error", "warn"] }

发展

# Install dependencies
npm install

# Build
npm run build

# Test with MCP Inspector
npx @modelcontextprotocol/inspector node dist/index.js .repack-logs.json

许可证

麻省理工学院