AI导哈

NextJS开发监控工具

一个监控NextJS开发服务器日志并自动修复错误的MCP服务器工具，适用于全栈开发错误检测与自动修复。

  • by alun-ai
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 alun-ai/nextjs-mcp-dev-monitor

使用说明

NextJS MCP开发监视器

监控NextJS开发服务器日志并自动修复错误的MCP服务器。

特性

  • 🔍 实时监控：监视NextJS开发服务器输出
  • 🔧 自动修复功能：自动解决常见错误
  • 🛡️ 安全模式：应用修复程序前的可选确认
  • 📋 错误分类：智能分类和优先排序
  • 💾 备份系统：修复前自动进行文件备份
  • 🎯 MCP集成：与Claude Code无缝集成
  • 🌐 前端错误检测：浏览器控制台错误的Puppeter集成
  • 🔄 全栈覆盖：监视服务器端和客户端错误

扩展功能

前端错误的Puppeter集成

该监视器包括高级Puppeteer集成，用于捕获和分析前端控制台错误：

  • 浏览器控制台监控：自动检测JavaScript错误、警告和网络故障
  • 运行时错误分析：捕获React组件错误、水合不匹配和状态管理问题
  • 性能监控：识别加载缓慢的资源和性能瓶颈
  • 视觉回归检测：监控布局变化和渲染问题
  • 跨浏览器测试：跨不同浏览器环境验证修复程序

支持的前端错误类型：

  • JavaScript运行时错误：未捕获的异常、引用错误、类型错误
  • 应对特定问题：组件生命周期错误、钩子违规、道具验证
  • 网络故障：API调用失败、资源加载错误、CORS问题
  • 性能问题：内存泄漏、过度重新渲染、捆绑包大小警告
  • 无障碍违规：ARIA问题、键盘导航问题、对比度错误

自动前端修复：

  • 导入分辨率：修复了缺失的导入和不正确的模块路径
  • 组件调试：解决常见的React模式和反模式
  • API集成：更正了获取调用、错误处理和数据验证
  • 造型问题：修复JS中的CSS问题，响应式设计问题
  • 捆绑优化：建议代码拆分和延迟加载改进

安装

现在，直接从GitHub存储库安装：

npm install git+https://github.com/alun-ai/mcp-nextjs-dev-server#main:nextjs-mcp-dev-monitor

注：此套餐将作为 npx nextjs-mcp-dev-monitor 一旦发布到npm。

用法

作为MCP服务器

添加到您的Claude Code MCP配置中：

{
  "mcpServers": {
    "nextjs-monitor": {
      "command": "node",
      "args": ["./node_modules/nextjs-mcp-dev-monitor/dist/server.js"]
    }
  }
}

可用的MCP工具

  • start_monitoring -开始监控NextJS项目
  • get_current_errors -检索检测到的错误
  • apply_error_fix -应用自动修复
  • get_monitoring_status -检查监视器状态
  • stop_monitoring -停止监控过程

发展

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

# Run tests
npm test

# Lint code
npm run lint

配置

开始监视时可以覆盖默认配置：

{
  autoFix: true,
  safeMode: true,
  backupEnabled: true,
  logLevel: 'info',
  excludePatterns: ['node_modules/**', 'dist/**', '.next/**'],
  includePatterns: ['src/**/*.ts', 'src/**/*.tsx']
}

许可证

麻省理工学院

相关 MCP