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