Fix: Verbesserte Fehlerbehandlung und Dokumentation fuer Backend-URL

README.md

@@ -68,20 +68,26 @@ Die Anwendung läuft jetzt auf [http://localhost:3000](http://localhost:3000)
 
 **Wichtig:** Die Anwendung benötigt eine WireGuard Easy Backend-Instanz.
 
-### Backend-Konfiguration
+### Backend-Konfiguration in CapRover
 
-Wenn Frontend und Backend in der **gleichen CapRover App** laufen:
+Wenn Frontend und Backend in der **gleichen CapRover App** laufen, muss das Backend über die richtige URL erreichbar sein:
 
-1. **Backend-URL**: Standardmäßig verwendet die App `http://localhost:51821`
-   - Falls das Backend als separater Container im Stack läuft, verwende den Service-Namen
-   - In CapRover kann optional `WG_API_URL` als Environment Variable gesetzt werden
+1. **Backend-URL ermitteln:**
+   - Wenn das Backend als **separater CapRover Service** läuft: Verwende die externe URL des Backends
+     - Beispiel: `https://wg-easy-backend.corexmanagement.de`
+   - Wenn beide im **gleichen Container** laufen: `http://localhost:51821`
+   - Wenn Backend als **Docker Service** im Stack: Verwende Service-Namen (z.B. `http://wg-easy-backend:51821`)
 
-2. **Backend-Passwort**: Standard ist `CoreX2024!Secure#VPN`
-   - Optional: `WG_PASSWORD` als Environment Variable in CapRover setzen
+2. **Environment Variable setzen:**
+   - In CapRover: App → Environment Variables
+   - `WG_API_URL`: URL des wg-easy Backends
+   - `WG_PASSWORD`: Backend-Passwort (Standard: `CoreX2024!Secure#VPN`)
 
-**Standardwerte (wenn keine Environment Variables gesetzt):**
-- **WG_API_URL**: `http://localhost:51821` (für gleiche CapRover App)
-- **WG_PASSWORD**: `CoreX2024!Secure#VPN`
+3. **Standardwerte (falls keine Environment Variables gesetzt):**
+   - **WG_API_URL**: `https://corex-wg-easy.corexmanagement.de` (Frontend-URL - muss angepasst werden!)
+   - **WG_PASSWORD**: `CoreX2024!Secure#VPN`
+
+**⚠️ Wichtig:** Setze `WG_API_URL` in CapRover auf die tatsächliche Backend-URL, sonst funktioniert die Verbindung nicht!
 
 ## 🐳 Docker Setup
 

lib/wg-api.ts

@@ -2,12 +2,19 @@
 
 // WG API URL Konfiguration
 // Wenn Frontend und Backend in der gleichen CapRover App laufen:
-// - Backend ist über localhost erreichbar (gleicher Container) oder
-// - Backend läuft als interner Service auf Port 51821
 // 
-// Standard: localhost:51821 (wenn beide im gleichen Container)
-// Alternative: Wenn Backend als separater Container im Stack läuft, verwende den Service-Namen
-const WG_API_URL = process.env.WG_API_URL || 'http://localhost:51821'
+// Option 1: Backend läuft als separater CapRover Service mit eigener Domain
+//   - Setze WG_API_URL auf die externe Backend-URL (z.B. https://wg-easy-backend.corexmanagement.de)
+//
+// Option 2: Backend läuft im gleichen Docker-Netzwerk (nicht empfohlen für CapRover)
+//   - Verwende Docker Service-Namen oder interne IP
+//
+// Option 3: Backend läuft auf separatem Port (nur wenn beide im gleichen Container)
+//   - localhost:51821
+//
+// WICHTIG: In CapRover sollte das Backend als eigener Service laufen mit eigener Domain!
+// Setze WG_API_URL in CapRover als Environment Variable auf die Backend-URL
+const WG_API_URL = process.env.WG_API_URL || 'https://corex-wg-easy.corexmanagement.de'
 const WG_PASSWORD = process.env.WG_PASSWORD || 'CoreX2024!Secure#VPN'
 
 interface WgClient {
@@ -75,6 +82,7 @@ export class WgApiClient {
 
     console.log(`[WG API] Requesting: ${url}`)
 
+    try {
       const response = await fetch(url, {
         ...options,
         headers,
@@ -96,6 +104,14 @@ export class WgApiClient {
       
       // If not JSON, return as text
       return response.text() as unknown as T
+    } catch (error) {
+      // Handle network errors
+      if (error instanceof TypeError && error.message.includes('fetch failed')) {
+        throw new Error(`Failed to connect to WG API at ${this.baseUrl}. Please check if the backend is running and WG_API_URL is correct. Original error: ${error.message}`)
+      }
+      // Re-throw other errors
+      throw error
+    }
   }
 
   async getStats(): Promise<WgStats> {