Files
ai-showcase-platform/CONSOLE_ERROR_FIX_REPORT.md

4.6 KiB
Raw Blame History

控制台錯誤修復報告

📋 錯誤分析

錯誤信息:

Error: 創建應用程式失敗
components\admin\app-management.tsx (214:15) @ handleAddApp

錯誤位置:

throw new Error(errorData.error || '創建應用程式失敗')

🔍 根本原因

經過分析,問題出在以下幾個方面:

1. 權限問題

API /api/apps 需要用戶具有 developeradmin 角色,但當前用戶可能是 user 角色。

2. Token 認證問題

可能沒有有效的 JWT token或者 token 已過期。

3. 用戶不存在

資料庫中可能沒有合適的管理員用戶。

修復方案

1. 改進錯誤處理

修改文件: components/admin/app-management.tsx

修復內容:

  • 添加詳細的調試信息
  • 改進錯誤處理邏輯
  • 添加 token 檢查
const handleAddApp = async () => {
  try {
    // 準備應用程式資料
    const appData = {
      name: newApp.name,
      description: newApp.description,
      type: mapTypeToApiType(newApp.type),
      demoUrl: newApp.appUrl || undefined,
      version: '1.0.0'
    }

    console.log('準備提交的應用資料:', appData)

    // 調用 API 創建應用程式
    const token = localStorage.getItem('token')
    console.log('Token:', token ? '存在' : '不存在')

    if (!token) {
      throw new Error('未找到認證 token請重新登入')
    }

    const response = await fetch('/api/apps', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      body: JSON.stringify(appData)
    })

    console.log('API 回應狀態:', response.status, response.statusText)

    if (!response.ok) {
      const errorData = await response.json()
      console.error('API 錯誤詳情:', errorData)
      throw new Error(errorData.error || `API 錯誤: ${response.status} ${response.statusText}`)
    }

    const result = await response.json()
    console.log('應用程式創建成功:', result)

    // ... 其餘代碼
  } catch (error) {
    console.error('創建應用程式失敗:', error)
    const errorMessage = error instanceof Error ? error.message : '未知錯誤'
    alert(`創建應用程式失敗: ${errorMessage}`)
  }
}

2. 創建管理員用戶

新文件: scripts/create-admin-user.js

功能:

  • 創建具有管理員權限的用戶
  • 提供登入憑證

登入資訊:

  • 電子郵件:admin@example.com
  • 密碼:Admin123!
  • 角色:admin
  • 部門:ITBU

3. 測試腳本

新文件: scripts/test-user-permissions.js

功能:

  • 檢查資料庫中的用戶
  • 檢查應用程式列表
  • 提供調試信息

🧪 測試步驟

步驟 1創建管理員用戶

npm run create:admin

步驟 2檢查用戶權限

npm run test:user-permissions

步驟 3在瀏覽器中測試

  1. 打開管理後台
  2. 使用以下憑證登入:
    • 電子郵件:admin@example.com
    • 密碼:Admin123!
  3. 嘗試創建新的 AI 應用
  4. 檢查瀏覽器控制台的調試信息

📊 修改的文件清單

  1. components/admin/app-management.tsx

    • 改進 handleAddApp 函數的錯誤處理
    • 添加詳細的調試信息
    • 添加 token 檢查
  2. scripts/create-admin-user.js (新文件)

    • 創建管理員用戶腳本
    • 提供登入憑證
  3. scripts/test-user-permissions.js (新文件)

    • 檢查用戶權限和資料庫狀態
  4. package.json

    • 添加新的測試腳本

預期結果

修復後,您應該能夠:

  1. 成功登入管理後台

    • 使用提供的管理員憑證
  2. 成功創建應用程式

    • 應用程式正確保存到資料庫
    • 沒有控制台錯誤
  3. 看到詳細的調試信息

    • 在瀏覽器控制台中看到 API 調用詳情
    • 如果有錯誤,會顯示具體的錯誤信息

🎯 故障排除

如果仍然有問題,請檢查:

  1. Token 問題

    • 確保已正確登入
    • 檢查 localStorage 中是否有 token
  2. 權限問題

    • 確保用戶角色是 admindeveloper
    • 使用提供的管理員憑證登入
  3. API 問題

    • 檢查瀏覽器控制台的詳細錯誤信息
    • 確認 API 端點正常工作

💡 使用建議

  1. 首次使用:

    npm run create:admin
    
  2. 登入管理後台:

    • 電子郵件:admin@example.com
    • 密碼:Admin123!
  3. 測試應用創建:

    • 在管理後台嘗試創建新的 AI 應用
    • 檢查瀏覽器控制台的調試信息

現在您的管理後台應該可以正常工作,沒有控制台錯誤!