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']
}许可证
麻省理工学院