Thinh Lam
103 lines
2.8 KiB
Markdown
103 lines
2.8 KiB
Markdown
# 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
|
|
```bash
|
|
# 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:
|
|
```json
|
|
{
|
|
"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
|
|
```bash
|
|
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
|