# Vue 错误调试指南

## 错误信息
```
[Vue warn]: Unhandled error during execution of component update
at <MCPSettings>
```

## 可能的原因

### 1. 响应式数据更新错误
- `formData` reactive 对象更新时出错
- `server` prop 包含不可序列化的数据
- 循环引用

### 2. 组件渲染错误
- MCPServerDetail 组件的某个属性访问出错
- v-if 条件渲染时的空指针
- 计算属性返回错误

### 3. 事件处理器错误
- @back, @save 等事件处理函数抛出异常
- async 函数中的 Promise 被拒绝

## 已实施的修复

### 修复 1: 增强 updateFormData 错误处理
```typescript
const updateFormData = (server: MCPServerConfig) => {
  try {
    formData.name = server.name || ''
    formData.description = server.description || ''
    formData.type = server.type || 'http'
    formData.url = server.url || ''
    formData.headers = Array.isArray(server.headers) ? server.headers : []
    serverEnabled.value = server.enabled !== false
  } catch (error) {
    console.error('❌ updateFormData 出错:', error)
    throw error
  }
}
```

### 修复 2: 添加 watch 错误捕获
```typescript
watch(() => props.server, (newServer) => {
  if (newServer) {
    try {
      updateFormData(newServer)
      initializeToolSettings(newServer)
    } catch (error) {
      console.error('❌ 更新表单数据失败:', error)
    }
  }
}, { immediate: true })
```

### 修复 3: 组件初始化验证
```typescript
try {
  console.log('🎯 MCPServerDetail 组件加载')
  console.log('📦 接收到的 server prop:', props.server)
  
  if (!props.server) {
    console.warn('⚠️ server prop 为空')
  }
} catch (error) {
  console.error('❌ 组件初始化错误:', error)
}
```

## 调试步骤

### 1. 刷新页面
访问新的端口: **http://localhost:5174/**

强制刷新: `Cmd + Shift + R`

### 2. 打开控制台
`Cmd + Option + I` → Console 标签

### 3. 清除所有日志
点击 Console 的 "Clear console" 图标

### 4. 点击编辑按钮
观察控制台输出的顺序：

```
🔍 [1] 打开服务器详情被调用
🔍 [2] 服务器数据: {...}
🔍 [3] 当前 showServerDetail 值: false
🔍 [4] editingServer 设置完成: {...}
✅ [5] showServerDetail 设置为 true
✅ [6] 最终状态检查
🎯 MCPServerDetail 组件加载
📦 接收到的 server prop: {...}
👀 MCPServerDetail watch 触发
📝 更新表单数据: {...}
✅ formData 更新完成
```

### 5. 查找红色错误
如果有错误，会在某个步骤后出现红色文字

## 具体检查项

### A. 如果错误在步骤 [4] 之前
问题在 `openServerDetail` 函数

### B. 如果错误在 "MCPServerDetail 组件加载" 之后
问题在组件的 setup 阶段

**检查项**:
- [ ] `props.server` 是否为对象
- [ ] `props.server` 是否有 name, url, type 等必需字段
- [ ] 是否有循环引用

**控制台执行**:
```javascript
// 检查 server 数据结构
const server = {你复制的server对象}
console.log('name:', server.name)
console.log('url:', server.url)
console.log('type:', server.type)
console.log('headers:', server.headers)
```

### C. 如果错误在 "更新表单数据" 之后
问题在 `updateFormData` 或 `initializeToolSettings`

**可能原因**:
- `server.type` 不是 'http' | 'sse' | 'websocket'
- `server.headers` 不是数组
- `server.capabilities` 结构错误

### D. 如果没有任何日志
代码没有更新，需要：
1. 停止旧的开发服务器
2. 确认在正确的端口 (5174)
3. 清除浏览器缓存

## 快速修复脚本

如果还是有错误，在控制台执行：

```javascript
// 1. 检查当前状态
console.log('当前URL:', window.location.href)
console.log('应该是:', 'http://localhost:5174/')

// 2. 查找所有错误
const errors = []
window.addEventListener('error', e => {
  errors.push(e)
  console.error('捕获到错误:', e)
})

// 3. 查看 server 数据
const servers = Array.from(document.querySelectorAll('.server-card'))
console.log('服务器卡片数量:', servers.length)

// 4. 模拟点击
const editBtn = Array.from(document.querySelectorAll('button'))
  .find(b => b.textContent.includes('编辑'))
if (editBtn) {
  console.log('找到编辑按钮，尝试点击...')
  editBtn.click()
}
```

## 临时解决方案

如果错误持续，可以尝试简化组件：

1. 注释掉部分内容，逐步找出问题
2. 使用简单的 alert 替代复杂的表单
3. 先显示纯文本，再逐步添加功能

## 需要提供的信息

请提供以下截图或信息：

1. **完整的控制台错误信息**（包括堆栈跟踪）
2. **错误出现在哪个步骤之后**
3. **点击编辑前的 server 对象**（复制整个对象）
4. **浏览器和版本**

格式示例：
```
错误: TypeError: Cannot read property 'xxx' of undefined
堆栈:
  at updateFormData (MCPServerDetail.vue:xxx)
  at eval (MCPServerDetail.vue:xxx)
  at callWithErrorHandling (runtime-core.esm-bundler.js:xxx)

server 对象:
{
  id: "xxx",
  name: "test",
  url: "http://0.0.0.0:3100/mcp",
  type: "http",
  status: "disconnected",
  enabled: true
}
```

## 下一步

1. 访问 http://localhost:5174/
2. 强制刷新页面
3. 清除控制台
4. 点击编辑
5. 复制完整的控制台输出给我

让我知道结果！