Web Client Errors MCP

Web客户端错误MCP

检测任何网站上的客户端JavaScript和网络错误——为AI编码代理构建。

它的作用

Web客户端错误MCP 是一个 模型上下文协议（MCP） 检测和分析网站客户端错误的服务器。它使用Playwright启动一个真正的浏览器，导航到任何URL，并捕获：

• JavaScript错误 --未捕获的异常、引用错误、类型错误
• 网络错误 --请求失败、CORS问题、4xx/5xx响应
• 控制台警告 --控制台输出可能有问题
• 资源加载失败 --资产丢失，提取失败

专为AI编码代理（如 压碎)帮助有效地调试web应用程序。

为什么存在

在构建或调试web应用程序时，众所周知，客户端错误很难发现——它们发生在用户的浏览器中，而不是您的终端中。该工具使AI代理能够：

• 立即检测任何网站上的错误
• 使用堆栈跟踪获取详细的错误信息
• 分析错误模式并获得修复建议
• 在不进行手动浏览器测试的情况下调试生产问题

🎯 UNIX哲学

该项目遵循UNIX哲学：

• 做一件事：检测客户端web错误
• 做好它：可靠、准确、全面的检测
• 一起工作：与CRUSH无缝集成
• 处理文本：通过CRUSH的自然语言界面
• 适应：适用于任何网站、任何框架

📋 CRUSH快速入门

安装和配置

git clone https://github.com/LarsArtmann/web-client-errors-mcp.git
cd web-client-errors-mcp
bun install
bun run build

添加到您的CRUSH .mcp.json:

{
  "mcp": {
    "web-client-errors": {
      "type": "stdio",
      "command": "bun",
      "args": ["/path/to/web-client-errors-mcp/dist/core/mcp-server.js"],
      "disabled": false
    }
  }
}

与CRUSH一起使用

# Restart CRUSH, then:
"detect errors on https://example.com"
"analyze error session from previous detection"

🛠️ 工具

检测错误

使用Playwright浏览器自动化检测任何网站上的客户端错误。

参数:

示例: "detect errors on https://mysite.com with 10 second wait"

analyze_error_session

分析收集到的错误，找出模式并提供修复建议。

参数:

示例: "analyze error session abc-123"

get_error_details

获取有关特定错误的详细信息，包括堆栈跟踪和上下文。

参数:

示例: "get details for TypeError undefined property"

🔧 发展

bun install       # Install dependencies
bun run build     # Compile TypeScript
bun run dev       # Watch and rebuild
bun run typecheck # Type checking
bun test          # Run tests
bun run lint      # Lint code

# Or use just
just build        # Build project
just test         # Run tests
just check        # Full quality check
just ci           # CI pipeline

📁 项目结构

src/
├── core/
│   └── mcp-server.ts      # MCP server implementation
├── services/
│   ├── browser-manager.ts # Playwright browser automation
│   └── error-detection.ts # Error classification & analysis
├── repositories/
│   └── session-store.ts   # Session & error storage
├── types/
│   └── domain.ts          # Domain types (branded, discriminated)
├── config.ts              # Configuration management
└── logger.ts              # Structured logging setup

🔌 资源

MCP服务器向AI代理公开这些资源：

• errors://recent --所有会话的最新错误
• errors://stats --汇总错误统计信息

📖 建筑

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│  AI Coding      │────▶│  MCP Server      │────▶│  Playwright     │
│  Agent (CRUSH)  │     │  (This Project)  │     │  Browser        │
└─────────────────┘     └──────────────────┘     └─────────────────┘
                               │
                               ▼
                         ┌──────────────────┐
                         │  Session Store   │
                         │  Error Analysis  │
                         └──────────────────┘

📚 文档

📄 许可证

麻省理工学院