Ver código fonte

Fix error messages showing "[object Object]" instead of actual text (#11)

**Problem:**
When API errors occurred (e.g., "No checkpoint model loaded"), the UI displayed
"[object Object]" instead of the actual error message.

**Root Cause:**
The API client was not properly extracting error messages from the nested error
response structure.

**API Response Structure:**
```json
{
  "error": {
    "error_code": "NO_CHECKPOINT_LOADED",
    "message": "No checkpoint model loaded. Please load a checkpoint model first...",
    "request_id": "req_390608",
    "status_code": 400,
    "timestamp": 1762113688
  }
}
```

**Previous Code (BROKEN):**
```typescript
if (!response.ok) {
  const error = await response.json().catch(() => ({
    error: response.statusText,
  }));
  throw new Error(error.error || 'API request failed');  // ❌ Returns object!
}
```

This tried to access `error.error` which returned the entire error object,
not the message string.

**Fixed Code:**
```typescript
if (!response.ok) {
  const errorData = await response.json().catch(() => ({
    error: { message: response.statusText },
  }));

  // Handle nested error structure: { error: { message: "..." } }
  const errorMessage =
    errorData.error?.message ||   // Try nested structure first
    errorData.message ||           // Try flat structure
    errorData.error ||             // Fallback to error object as string
    'API request failed';          // Final fallback

  throw new Error(errorMessage);   // ✅ Returns string message
}
```

**Solution Benefits:**
1. Handles nested error structure: `{ error: { message: "..." } }`
2. Handles flat error structure: `{ message: "..." }`
3. Handles legacy error format: `{ error: "..." }`
4. Always returns a string message, never an object

**Changes:**
Modified `webui/lib/api.ts` (lines 104-117):
- Renamed `error` to `errorData` for clarity
- Added proper error message extraction with fallback chain
- Added comments explaining the structure

**Result:**
✅ Error messages now display correctly across all pages:
- "No checkpoint model loaded. Please load a checkpoint model first..."
- "Failed to load model"
- "Generation cancelled"
- etc.

**Verified Pages:**
- Text to Image
- Image to Image
- Upscaler
- Queue
- Models

All pages already use `err instanceof Error ? err.message : 'Fallback'` pattern,
so fixing the API client resolves the issue everywhere.

Fixes #11
Fszontagh 3 meses atrás
pai
commit
8cf860c
1 arquivos alterados com 11 adições e 3 exclusões
  1. 11 3
      webui/lib/api.ts

+ 11 - 3
webui/lib/api.ts

@@ -102,10 +102,18 @@ class ApiClient {
     });
 
     if (!response.ok) {
-      const error = await response.json().catch(() => ({
-        error: response.statusText,
+      const errorData = await response.json().catch(() => ({
+        error: { message: response.statusText },
       }));
-      throw new Error(error.error || 'API request failed');
+
+      // Handle nested error structure: { error: { message: "..." } }
+      const errorMessage =
+        errorData.error?.message ||
+        errorData.message ||
+        errorData.error ||
+        'API request failed';
+
+      throw new Error(errorMessage);
     }
 
     return response.json();