sciagent/fe0/DEBUG_NETWORK_ERROR.md

Debug Network Error in Chat Assistant

Issue

Frontend shows "Network error. Please check your connection." but backend logs show 200 OK.

Root Cause Analysis

The backend is successfully processing requests (200 OK), but the frontend axios client is reporting a network error. This typically means:

1. CORS Issue: Response is blocked by browser CORS policy
2. Response Format: Response doesn't match expected format
3. Timeout: Request takes too long (>30s)
4. Network Path: Browser can't reach the backend URL

Debugging Steps

1. Check Browser Console

Open browser DevTools (F12) and check:

• Console tab for error messages
• Network tab to see the actual request/response
• Look for CORS errors (red text)

2. Check API URL

The frontend should use:

• Local development: http://localhost:4402
• Docker: Should still use http://localhost:4402 (browser makes request from host)

3. Test API Directly

# Test from your machine (not Docker)
curl -X POST http://localhost:4402/api/v1/chat \
  -H "Content-Type: application/json" \
  -d '{"message": "Hello"}'

4. Check CORS Headers

The backend should return CORS headers. Check in browser Network tab:

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Methods: *
• Access-Control-Allow-Headers: *

5. Check Response Format

The backend returns:

{
  "message": "AI response text",
  "model": "gemma3:270M",
  "tokens_used": 150
}

The frontend expects this format in ChatResponse.

Quick Fixes

Fix 1: Verify API URL

Check what URL the frontend is using:

1. Open browser console
2. Look for: API Client initialized with baseURL: ...
3. Should be: http://localhost:4402

Fix 2: Check CORS

Backend has allow_origins=["*"] which should work, but verify:

1. Check browser Network tab
2. Look for OPTIONS preflight request
3. Should return 200 OK

Fix 3: Test with curl

curl -v -X POST http://localhost:4402/api/v1/chat \
  -H "Content-Type: application/json" \
  -H "Origin: http://localhost:8081" \
  -d '{"message": "test"}'

Fix 4: Check Response Time

The backend log shows 6.3 seconds. If axios timeout is shorter, it will fail. Current timeout is 30s, so should be fine.

Expected Behavior

1. Browser makes POST to http://localhost:4402/api/v1/chat
2. Backend processes request (6-7 seconds for Ollama)
3. Backend returns 200 OK with JSON response
4. Frontend receives response and displays it

Current Status

✅ Backend: Working (200 OK) ❌ Frontend: Network error 🔍 Need to check: Browser console, Network tab, CORS headers

Next Steps

1. Open browser DevTools
2. Go to Network tab
3. Make a chat request
4. Check the request details:
   • URL
   • Status code
   • Response headers
   • Response body
5. Check Console tab for errors