🔍 tRPC 診斷頁面

tRPC React Query 狀態

status: pending

fetchStatus: fetching

isLoading: true

hasData: false

hasError: false

dataUpdatedAt: 0

執行日誌

[2026-03-23T01:37:49.311Z] 📊 State changed - status: pending, fetchStatus: fetching, isLoading: true, hasData: false, hasError: false
[2026-03-23T01:37:49.450Z] 🎬 Component mounted
[2026-03-23T01:37:49.450Z] 🚀 Starting direct fetch test...
[2026-03-23T01:37:49.450Z] 📡 Fetching: /api/trpc/knowledge.getCategories?batch=1&input=%7B%220%22%3A%7B%22json%22%3A%7B%22language%22%3A%22zh-TW%22%7D%7D%7D
[2026-03-23T01:37:49.465Z] 📥 Response status: 404
[2026-03-23T01:37:49.465Z] 📥 Response headers: {"cf-cache-status":"DYNAMIC","cf-ray":"9e09b68b39bec9b9-IAD","content-encoding":"gzip","content-type":"text/html; charset=utf-8","date":"Mon, 23 Mar 2026 01:37:49 GMT","server":"cloudflare"}
[2026-03-23T01:37:49.486Z] 📥 Response body (first 200 chars): <!DOCTYPE html> <html> <head> <title>Azure Container App - Unavailable</title> <style type="text/css"> html { height: 100%; width: 100%; } #fea
[2026-03-23T01:37:49.487Z] ❌ Direct fetch error: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

診斷說明

  • 上方顯示 tRPC React Query 的即時狀態
  • 中間顯示直接 fetch 的測試結果(繞過 React Query)
  • 下方顯示所有執行日誌和狀態變化
  • 如果直接 fetch 成功但 tRPC Query 失敗,代表問題在 React Query 層
  • 所有日誌也會輸出到瀏覽器 Console