Files

douboer d93bc02772 first commit

2025-10-14 14:18:20 +08:00

5.1 KiB

Raw Blame History

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 错误处理

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 错误捕获

watch(() => props.server, (newServer) => {
  if (newServer) {
    try {
      updateFormData(newServer)
      initializeToolSettings(newServer)
    } catch (error) {
      console.error('❌ 更新表单数据失败:', error)
    }
  }
}, { immediate: true })

修复 3: 组件初始化验证

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 等必需字段
是否有循环引用

控制台执行:

// 检查 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. 如果没有任何日志

代码没有更新，需要：

停止旧的开发服务器
确认在正确的端口 (5174)
清除浏览器缓存

快速修复脚本

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

// 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()
}

临时解决方案

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

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

需要提供的信息

请提供以下截图或信息：

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

格式示例：

错误: 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
}

下一步

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

让我知道结果！

5.1 KiB Raw Blame History