216 lines
5.1 KiB
Markdown
216 lines
5.1 KiB
Markdown
# 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. 复制完整的控制台输出给我
|
|
|
|
让我知道结果！
|