Files

OG T 9bff46a1b0 feat: integrate Sentry + fix CI/CD issues

Sentry Integration (補強 SignOz):
- Add @sentry/nextjs for frontend error tracking + session replay
- Add sentry-sdk[fastapi] for backend error tracking
- Create sentry.client/server/edge.config.ts
- Integrate with next.config.js + instrumentation.ts
- Add Sentry exception capture in FastAPI error handler
- Create deployment scripts for Self-Hosted @ 192.168.0.110

CI/CD Fixes:
- Fix F821 Undefined name 'Field' in incidents.py
- Add NEXT_PUBLIC_API_URL env var to CI build step
- Add build-arg to Docker build verification

E2E Test Improvements:
- Fix strict mode violations in dashboard-acceptance tests
- Add timeout increase for Phase 4 demo tests
- Make tests more resilient to UI variations

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-03-24 15:19:52 +08:00

4.7 KiB

Raw Blame History

AWOOOI 系統 QA 專業測試報告

1. 執行摘要 (Executive Summary)

本次 QA 測試涵蓋了 AWOOOI 專案的 apps/web 前端與 apps/api 後端之整合，重點測試頁面包含全局戰情室 (Dashboard)、Multi-Sig 授權卡片 (ApprovalCard)、以及行動日誌 (Action Log)。我們利用 Playwright 進行了全面的自動化 E2E 測試，發現在 22 個測試案例中，有部分案例因為前端 hydration、中英文語系切換 (i18n) 以及按鈕防呆機制等問題導致失敗。

2. 測試結果總覽 (Test Results Overview)

執行 pnpm exec playwright test 共計 22 個測試案例。

通過 (Passed): 12
失敗 (Failed) / 不穩定 (Flaky): 10

2.1 主要失敗項目分析

Action Log 頁面結構與導航 (action-log.spec.ts)
- ✖️ 重新整理按鈕存在且可點擊 (Timeout 15.5s)
- ✖️ 行動日誌連結可點擊 (Timeout 15.0s)
- 問題描述: 頁面在導航或等待 API 回應時，載入時間過長超過預設的 15 秒 timeout，或是對應元素的 locator (button:has-text("重新整理")) 在中文環境下找不到。
Dashboard 語系切換與組件狀態 (dashboard-acceptance.spec.ts)
- ✖️ 語系切換器功能 - 繁中轉英文 (Timeout 12.1s)
- ✖️ 主機卡片顯示真實狀態 (Timeout 11.2s)
- ✖️ 完整頁面截圖 - 雙語對照 (Timeout 15.0s)
- ✖️ HITL 授權卡片功能驗證 (Timeout 9.8s)
- 問題描述: 語系切換時，頁面依賴的 next-intl 可能沒有即時更新 DOM 或是 SSE 連線阻塞了 domcontentloaded 事件的觸發，導致 Playwright 等待超時。同時，某些真實的 IP 192.168.0.x 或者長按鈕在畫面上未能及時算繪出來。
RBAC 與 Timeline 展示 (rbac-screenshot.spec.ts / phase4-timeline.spec.ts)
- ✖️ Screenshot RBAC permission UI (Timeout 3.6s)
- ✖️ Phase 4: Full Action Timeline Demo Flow (Timeout 2.2s)
- 問題描述: 在模擬真實情境 (Demo Flow) 中，依賴於後端特定的 API 返回資料。如果後端沒有正確種子資料或是載入順序問題，將導致測試提早失敗。

3. 問題與優化建議 (Issues & Optimization Proposals)

3.1 前端效能與 Zustand/SSE 競爭 (Race Conditions)

問題: E2E 測試中發現，多次因為載入超時導致測試失敗。日誌 (LOGBOOK) 也提到 Polling 與 SSE 在操作時會有競爭狀況，導致 UI 閃爍。
解決方案:
1. 在 approval.store.ts 與 agent.store.ts 中，落實「樂觀更新 (Optimistic UI)」並在送出 Mutation 的這幾秒內「完全強制停止 polling」。
2. 加入 SSE 斷線重連的 Exponential Backoff（指數退避）機制，防止斷線瞬間大量的重連請求卡死瀏覽器線程。

3.2 i18n 語系切換與 Hydration 報錯

問題: 繁中轉英文的測試失敗。可能是 Next.js App Router 配合 next-intl 在客戶端 Hydration 時，伺服器與客戶端渲染語言不一致，導致報錯或 UI 卡死。
解決方案:
1. 確保 html 標籤的 lang 屬性在 Server Component 中正確取得請求的 locale。
2. 確保沒有依賴於 window 物件的資料在首次 render 中輸出，避免 Hydration Mismatch。

3.3 E2E 測試腳本穩定性 (Flakiness)

問題: action-log.spec.ts 中過度依賴中文字串 (如 hasText: '重新整理')，如果網頁預設載入英文，就會永遠找不到。且 Timeout 15s 對於包含完整依賴啟動的測試環境有點太短。
解決方案:
1. 測試腳本中全面改用 data-testid 來定位元素（如 [data-testid="refresh-btn"]），而非依賴語言字串。
2. 在 playwright.config.ts 調高 navigationTimeout 為 45000ms，或者在重度依賴 API 的測試中使用 .route Mock 掉不穩定的網路請求（如果是純前端視覺測試的話；但依據鐵律，整合測試需真實環境，因此需確保留意本地 K3s/API 速度）。

3.4 錯誤處理與 Console 乾淨度

問題: 仍有測試檢查 console.error 失敗。這通常來自於 React Key Props 未給予、或是未捕捉的 Promise Rejection。
解決方案:
- 全面審查 apps/web/src/components 的清單渲染，補齊 key={item.id}。
- 在 fetch 呼叫外層實作全局的 Axios/Fetch Interceptor，標準化攔截 500/404，不讓錯誤直接漏出到前端 console。

4. 自動化 QA 腳本庫 (QA Scripts)

為了符合「禁止人工 QA」的鐵律，我已在此專案中補充了專業的自動化 QA 檢查腳本。詳見 scripts/ 資料夾下的說明文件與執行檔。我們將確保每次部屬前執行這些腳本。

QA 審查完成時間: 2026-03-24 審查人員: AWOOOI SRE QA Expert (Agent)

4.7 KiB Raw Blame History Unescape Escape