fix the setup

PROXY_SETUP.md

@@ -0,0 +1,80 @@
+# Proxy Server Setup for Production
+
+## Problem
+The proxy server isn't working because `VITE_PROXY_SERVER` is being set to `http://localhost:8090` during the Docker build, which won't work from the browser on a remote server.
+
+## Solution
+
+When building and deploying on the remote server, you need to build the Docker image with the correct build argument.
+
+### For Manual Docker Run Commands
+
+Rebuild the Jumble image with the correct proxy URL:
+
+```bash
+docker build \
+  --build-arg VITE_PROXY_SERVER=http://jumble.imwald.eu:8090 \
+  -t silberengel/imwald-jumble:12 \
+  .
+
+# Then push to Docker Hub
+docker push silberengel/imwald-jumble:12
+```
+
+**Note on Docker Network:**
+
+You only need to create the network once (it persists). Check if it exists first:
+
+```bash
+# Check if network exists
+docker network ls | grep jumble-network
+
+# If it doesn't exist, create it (only needed once)
+docker network create jumble-network
+```
+
+### For Docker Compose
+
+### 1. Set Environment Variables Before Building
+
+```bash
+export JUMBLE_PROXY_SERVER_URL="http://jumble.imwald.eu:8090"
+export JUMBLE_SOCIAL_URL="http://jumble.imwald.eu:32768"
+```
+
+### 2. Rebuild the Docker Image
+
+```bash
+docker-compose build --no-cache
+```
+
+### 3. Restart the Containers
+
+```bash
+docker-compose down
+docker-compose up -d
+```
+
+## How to Check if it's Working
+
+1. After deploying, open the browser console on `https://jumble.imwald.eu`
+2. Navigate to a page with a URL that should show OpenGraph data
+3. Look for `[WebService]` log messages that will show:
+   - Whether the proxy server is configured
+   - What URL is being used to fetch metadata
+   - Any errors (CORS, network, etc.)
+
+## Important Notes
+
+- The `VITE_PROXY_SERVER` value is baked into the JavaScript bundle during build time
+- You MUST rebuild the Docker image if you change `JUMBLE_PROXY_SERVER_URL`
+- The proxy server's `ALLOW_ORIGIN` must match the frontend URL (`JUMBLE_SOCIAL_URL`)
+- Both must use the same protocol (http vs https)
+
+## Troubleshooting
+
+If you see errors in the console:
+- `[WebService] No proxy server configured` - `VITE_PROXY_SERVER` is undefined or empty
+- `[WebService] CORS/Network error` - The proxy URL might be wrong, or CORS isn't configured
+- `[WebService] Failed to fetch metadata` - The proxy server might not be running or accessible
+

src/services/web.service.ts

@@ -8,16 +8,27 @@ class WebService {
     async (urls) => {
       return await Promise.all(
         urls.map(async (url) => {
+          // Check if we should use proxy server to avoid CORS issues
+          const proxyServer = import.meta.env.VITE_PROXY_SERVER
+          const isProxyUrl = url.includes('/sites/')
+          
+          // Debug logging for proxy configuration
+          if (proxyServer) {
+            console.log(`[WebService] Proxy server configured: ${proxyServer}`)
+          } else {
+            console.warn(`[WebService] No proxy server configured. VITE_PROXY_SERVER is:`, import.meta.env.VITE_PROXY_SERVER)
+          }
+          
+          // If proxy is configured and URL isn't already proxied, use proxy
+          let fetchUrl = url
+          if (proxyServer && !isProxyUrl) {
+            fetchUrl = `${proxyServer}/sites/${encodeURIComponent(url)}`
+            console.log(`[WebService] Using proxy URL: ${fetchUrl}`)
+          } else {
+            console.log(`[WebService] Fetching directly (no proxy): ${fetchUrl}`)
+          }
+          
           try {
-            // Check if we should use proxy server to avoid CORS issues
-            const proxyServer = import.meta.env.VITE_PROXY_SERVER
-            const isProxyUrl = url.includes('/sites/')
-            
-            // If proxy is configured and URL isn't already proxied, use proxy
-            let fetchUrl = url
-            if (proxyServer && !isProxyUrl) {
-              fetchUrl = `${proxyServer}/sites/${encodeURIComponent(url)}`
-            }
             
             // Add timeout and better error handling
             const controller = new AbortController()
@@ -36,9 +47,10 @@ class WebService {
             clearTimeout(timeoutId)
             
             if (!res.ok) {
-              // Don't log 404s and CORS errors as they're expected
+              // Log all errors for debugging
+              console.warn(`[WebService] Failed to fetch metadata for ${url} (via ${fetchUrl}): ${res.status} ${res.statusText}`)
               if (res.status !== 404 && res.status !== 0) {
-                console.warn(`Failed to fetch metadata for ${url}: ${res.status} ${res.statusText}`)
+                console.warn(`[WebService] Response headers:`, Object.fromEntries(res.headers.entries()))
               }
               return {}
             }
@@ -58,17 +70,19 @@ class WebService {
 
             return { title, description, image }
           } catch (error) {
-            // Only log unexpected errors, not CORS or network issues
+            // Log all errors for debugging
             if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
-              // This is likely a CORS error - don't log it
+              // This is likely a CORS error
+              console.warn(`[WebService] CORS/Network error fetching metadata for ${url} (via ${fetchUrl}):`, error.message)
               return {}
             }
             if (error instanceof Error && error.name === 'AbortError') {
-              // Timeout - don't log it
+              // Timeout
+              console.warn(`[WebService] Timeout fetching metadata for ${url} (via ${fetchUrl})`)
               return {}
             }
             // Log other unexpected errors
-            console.warn(`Unexpected error fetching metadata for ${url}:`, error)
+            console.warn(`[WebService] Unexpected error fetching metadata for ${url} (via ${fetchUrl}):`, error)
             return {}
           }
         })