MCP Sentry Analyzer
Integrates Sentry error monitoring with AI-powered analysis to automatically capture frontend JavaScript errors and provide intelligent repair suggestions through multiple AI models including OpenAI, Claude, and Gemini.
README
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)
🚨 故障排除
常见问题
-
服务器启动失败
- 检查端口是否被占用
- 确认环境变量配置正确
-
AI分析失败
- 检查OpenAI API密钥是否正确
- 确认网络连接正常
- 查看API配额是否充足
-
Sentry事件未发送
- 检查DSN配置
- 确认网络连接
- 查看Sentry项目设置
调试技巧
- 查看详细日志:
DEBUG=* npm run dev
- 测试单个功能:
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集成
推荐服务器
Baidu Map
百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。
Playwright MCP Server
一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。
Magic Component Platform (MCP)
一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。
Audiense Insights MCP Server
通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。
VeyraX
一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。
graphlit-mcp-server
模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。
Kagi MCP Server
一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。
e2b-mcp-server
使用 MCP 通过 e2b 运行代码。
Neon MCP Server
用于与 Neon 管理 API 和数据库交互的 MCP 服务器
Exa MCP Server
模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。