dbis_core/frontend/API_CONNECTION_FIX.md

API Connection Error - Fix Guide

Issue

After login, you see: "Network error. Please check your connection."

This means the frontend cannot reach the backend API.

---

🔍 Diagnosis

Current Configuration

• Frontend URL: http://192.168.11.130
• API URL (configured): http://192.168.11.150:3000
• API Status: ❌ Not reachable

---

✅ Solutions

Option 1: Start the Backend API (Recommended)

The API needs to be running on container 10150 (192.168.11.150:3000).

Check if API container is running:

pct status 10150

Start the API service:

# On Proxmox host
pct exec 10150 -- systemctl start dbis-api
pct exec 10150 -- systemctl status dbis-api

Or start manually:

pct exec 10150 -- bash -c "cd /opt/dbis-core && npm start"

Option 2: Use Mock Data (Temporary)

I've updated the frontend to use mock data when the API is unavailable. The app will now:

1. ✅ Try to connect to the API
2. ✅ If connection fails, automatically use mock data
3. ✅ Show a warning in console (not visible to users)
4. ✅ Display the dashboard with sample data

This allows you to:

• Test the frontend UI
• Navigate all pages
• See how the interface works
• Develop without a backend

Option 3: Change API URL

If your API is running on a different address:

Update the .env file on the frontend container:

pct exec 10130 -- bash -c "cat > /opt/dbis-core/frontend/.env <<EOF
VITE_API_BASE_URL=http://YOUR_API_URL:PORT
VITE_APP_NAME=DBIS Admin Console
VITE_REAL_TIME_UPDATE_INTERVAL=5000
EOF
"

# Rebuild frontend
pct exec 10130 -- bash -c "cd /opt/dbis-core/frontend && npm run build && systemctl restart nginx"

Option 4: Use Nginx Proxy

If the API is on the same network but different port, configure nginx to proxy:

# In /etc/nginx/sites-available/dbis-frontend
location /api {
    proxy_pass http://192.168.11.150:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

---

🔧 Quick Fix Commands

Check API Status

# Check if API container is running
pct status 10150

# Check if API service is running
pct exec 10150 -- systemctl status dbis-api

# Test API connectivity
curl http://192.168.11.150:3000/health

Start API Service

# Start API container if stopped
pct start 10150

# Start API service
pct exec 10150 -- systemctl start dbis-api

# Or start manually
pct exec 10150 -- bash -c "cd /opt/dbis-core && npm start &"

Verify Frontend Configuration

# Check frontend .env
pct exec 10130 -- cat /opt/dbis-core/frontend/.env

# Should show:
# VITE_API_BASE_URL=http://192.168.11.150:3000

---

📊 Current Status

After the fix I just applied:

• ✅ Frontend will use mock data if API is unavailable
• ✅ You can still use the interface with sample data
• ✅ Error message is more informative
• ✅ No more blocking network errors

---

🎯 What Happens Now

1. If API is running: Frontend connects and shows real data
2. If API is not running: Frontend shows mock data automatically
3. Error messages: More helpful, showing the API URL that failed

---

🔄 Next Steps

1. Start the backend API (Option 1) for real data
2. Or continue with mock data (Option 2) for UI testing
3. Check browser console (F12) for detailed error messages
4. Verify network connectivity between containers

---

📝 Notes

• Mock data allows full UI testing without backend
• All pages will work with sample data
• Real API integration requires backend to be running
• Network errors are now handled gracefully

---

Status: Frontend updated to handle API unavailability gracefully.