MCP Sentry 分析器

这是一个真正的MCP（Model Context Protocol）服务器，用于集成Sentry错误监测和AI分析功能。它能够自动捕获前端JavaScript错误，并通过多种AI大模型提供智能修复建议。

🎯 项目特色

• 真正的MCP服务器 - 可以直接通过 add mcpserver 添加到MCP客户端
• 多AI模型支持 - 支持OpenAI、Claude、Gemini等多种大模型
• 完整的前端集成 - 提供React、Vue等框架的完整示例
• 详细的MCP注释 - 包含清晰的MCP协议说明和使用指南
• 线上部署就绪 - 支持生产环境部署和实时监测

🎯 功能特性

• 🔍 Sentry集成: 自动捕获前端项目中的JavaScript错误
• 🤖 AI分析: 将错误信息发送给大模型，获取修复建议
• 📊 错误报告: 详细的错误分析和修复建议
• 🌐 RESTful API: 提供简单的HTTP API接口
• 📱 前端集成: 支持React、Vue等前端框架

🚀 快速开始

1. 安装依赖

cd mcp
npm install

2. 配置环境变量

复制环境变量示例文件：

cp env.example .env

编辑 .env 文件：

# Sentry配置
SENTRY_DSN=https://your-sentry-dsn@sentry.io/project-id

# AI配置 - 支持多种大模型
AI_PROVIDER=openai                    # 可选: openai, claude, gemini, custom
AI_API_KEY=your-api-key-here         # 对应提供商的API密钥
AI_MODEL=gpt-3.5-turbo               # 模型名称
AI_BASE_URL=https://api.openai.com/v1 # API基础URL（可选）

# 服务器配置
MCP_PORT=3001
NODE_ENV=development
RELEASE=1.0.0

3. 构建和运行

作为MCP服务器运行（推荐）

# 开发模式
npm run dev:mcp

# 生产模式
npm run build
npm run start:mcp

作为HTTP服务器运行

# 开发模式
npm run dev

# 生产模式
npm run build
npm start

4. 添加到MCP客户端

Claude Desktop配置

在 claude_desktop_config.json 中添加：

{
  "mcpServers": {
    "sentry-analyzer": {
      "command": "node",
      "args": ["/path/to/your/mcp/dist/mcp-server.js"],
      "env": {
        "SENTRY_DSN": "https://your-sentry-dsn@sentry.io/project-id",
        "AI_PROVIDER": "openai",
        "AI_API_KEY": "your-api-key-here",
        "AI_MODEL": "gpt-3.5-turbo"
      }
    }
  }
}

详细配置说明请查看 MCP客户端配置指南

📋 API接口

1. 健康检查

GET http://localhost:3001/health

2. 分析错误

POST http://localhost:3001/analyze-error
Content-Type: application/json

{
  "error_message": "TypeError: Cannot read property 'name' of undefined",
  "stack_trace": "TypeError: Cannot read property 'name' of undefined\n    at UserProfile.render (UserProfile.jsx:42:15)",
  "file_path": "src/components/UserProfile.jsx",
  "line_number": 42,
  "column_number": 15,
  "user_agent": "Mozilla/5.0...",
  "url": "http://localhost:3000/user/profile",
  "user_id": "user123"
}

响应示例：

{
  "errorInfo": {
    "message": "TypeError: Cannot read property 'name' of undefined",
    "file": "src/components/UserProfile.jsx",
    "line": 42,
    "timestamp": "2024-01-01T00:00:00.000Z"
  },
  "analysis": {
    "errorType": "TypeError",
    "severity": "medium",
    "description": "尝试访问undefined对象的属性",
    "suggestions": [
      "检查对象是否已正确初始化",
      "使用可选链操作符(?.)",
      "添加空值检查"
    ],
    "codeFix": "const name = user?.name || 'Unknown';",
    "relatedDocs": [
      "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining"
    ]
  }
}

3. 捕获错误到Sentry

POST http://localhost:3001/capture-error
Content-Type: application/json

{
  "error_message": "ReferenceError: user is not defined",
  "stack_trace": "ReferenceError: user is not defined\n    at handleSubmit (api.js:15:8)",
  "file_path": "src/utils/api.js",
  "line_number": 15,
  "additional_context": {
    "component": "UserForm",
    "action": "submit"
  }
}

4. 获取错误历史

GET http://localhost:3001/error-history?limit=10&user_id=user123

🎨 前端集成

我们提供了完整的前端集成示例，支持多种框架：

📁 前端示例文件夹

查看 frontend-examples/ 文件夹获取完整的集成示例：

• React示例 - frontend-examples/react-example/
• Vue示例 - frontend-examples/vue-example/
• 原生JavaScript示例 - frontend-examples/vanilla-js/
• Next.js示例 - frontend-examples/nextjs-example/

🚀 快速集成

React项目

# 查看React示例
cd frontend-examples/react-example/
npm install
npm start

Vue项目

# 查看Vue示例
cd frontend-examples/vue-example/
npm install
npm run dev

📋 环境变量配置

在你的前端项目中创建 .env.local 文件：

# MCP服务器地址
REACT_APP_MCP_SERVER_URL=http://localhost:3001
VITE_MCP_SERVER_URL=http://localhost:3001
NEXT_PUBLIC_MCP_SERVER_URL=http://localhost:3001

# Sentry配置
REACT_APP_SENTRY_DSN=https://your-sentry-dsn@sentry.io/project-id
VITE_SENTRY_DSN=https://your-sentry-dsn@sentry.io/project-id
NEXT_PUBLIC_SENTRY_DSN=https://your-sentry-dsn@sentry.io/project-id

详细集成说明请查看各个示例文件夹中的README.md文件。

🧪 测试

运行测试脚本：

# 确保服务器正在运行
npm run dev

# 在另一个终端运行测试
node test-server.js

📁 项目结构

mcp/
├── src/
│   ├── mcp-server.ts          # MCP服务器主文件（推荐使用）
│   ├── server-simple.ts       # Express HTTP服务器
│   ├── sentry.ts              # Sentry集成
│   ├── ai-analyzer.ts         # AI分析功能（支持多种模型）
│   └── types.ts               # 类型定义
├── frontend-examples/          # 前端集成示例
│   ├── react-example/         # React完整示例
│   ├── vue-example/           # Vue完整示例
│   ├── vanilla-js/            # 原生JavaScript示例
│   └── nextjs-example/        # Next.js示例
├── dist/                      # 编译输出
├── test-server.js             # 测试脚本
├── MCP_CLIENT_CONFIG.md       # MCP客户端配置指南
├── package.json
├── tsconfig.json
├── env.example                # 环境变量示例
└── README.md

🔧 配置说明

Sentry配置

• SENTRY_DSN: Sentry项目的DSN地址
• NODE_ENV: 环境名称（development/production）
• RELEASE: 版本号

AI配置

• AI_PROVIDER: AI提供商（openai/claude/gemini/custom）
• AI_API_KEY: 对应提供商的API密钥
• AI_MODEL: 使用的模型名称
• AI_BASE_URL: API基础URL（可选）

服务器配置

• MCP_PORT: 服务器端口（默认3001）

🚨 故障排除

常见问题

1. 服务器启动失败

   • 检查端口是否被占用
   • 确认环境变量配置正确

2. AI分析失败

   • 检查OpenAI API密钥是否正确
   • 确认网络连接正常
   • 查看API配额是否充足

3. Sentry事件未发送

   • 检查DSN配置
   • 确认网络连接
   • 查看Sentry项目设置

调试技巧

1. 查看详细日志:

DEBUG=* npm run dev

2. 测试单个功能:

curl -X POST http://localhost:3001/analyze-error \
  -H "Content-Type: application/json" \
  -d '{"error_message": "Test error"}'

📈 扩展功能

• 支持更多AI模型（Claude、Gemini等）
• 集成更多错误监测服务
• 添加错误趋势分析
• 支持自定义分析规则
• 添加错误分类和标签

📝 更新日志

v1.0.0

• 初始版本发布
• 支持Sentry集成
• 支持AI错误分析
• 提供RESTful API
• 支持React和Vue集成