Skip to main content

Pink Error Line / API Connection Error

Symptom: The Fystack UI shows a pink/red error banner at the top of the page, or you see "Network Error" messages.

Root cause: The UI is trying to reach the Apex API at the wrong URL — typically localhost instead of your actual API domain.

Step 1: Check Where the UI Is Sending Requests​

  1. Open your Fystack app in Chrome (or any browser)
  2. Open DevTools — press F12 (or Cmd+Option+I on Mac)
  3. Go to the Network tab
  4. Reload the page and look at the failing requests (they'll be red)
  5. Check the Request URL — if it shows http://localhost:8150/... instead of https://api.yourdomain.com/..., your API_BASE_URL is wrong or not set

Step 2: Verify What the Container Is Using​

docker inspect fystack-ui-community | grep API_BASE_URL

If this shows http://localhost:8150 or is empty, that's the problem.

Step 3: Fix API_BASE_URL​

Update dev/.env from the project root:

echo "API_BASE_URL=https://api.yourdomain.com" > dev/.env

Then recreate the UI container to pick up the change:

docker compose -f ./dev/docker-compose.yaml up -d --force-recreate fystack-ui-community

Step 4: Verify the API Is Reachable​

# Directly on the VPS
curl http://127.0.0.1:8150/health

# Through the reverse proxy
curl https://api.yourdomain.com/health

If the direct curl works but the reverse proxy one doesn't, check your nginx configuration.

Step 5: Confirm the Fix​

  1. Hard-refresh the page (Ctrl+Shift+R)
  2. Open DevTools → Network tab again
  3. Verify requests now go to https://api.yourdomain.com/...
  4. The pink error banner should be gone