#11 bug: error messages display "[object Object]" instead of actual error text

When an API error occurs, the UI displays "[object Object]" instead of the actual error message.

Example: When trying to generate without a loaded model, the error appears as:

[object Object]

Actual API Response:

{
  "error": {
    "error_code": "NO_CHECKPOINT_LOADED",
    "message": "No checkpoint model loaded. Please load a checkpoint model first using POST /api/models/{hash}/load",
    "request_id": "req_390608",
    "status_code": 400,
    "timestamp": 1762113688
  }
}

Root Cause: The error handling code is displaying the entire error object instead of extracting the message property.

Impact:

• Users see unhelpful "[object Object]" messages
• No indication of what actually went wrong
• Poor user experience

Pages Affected: Potentially all generation pages:

• Text to Image
• Image to Image
• Upscaler
• Queue view
• Models page

Fix Needed: Update error handling to properly extract and display error messages from the API response structure.

Fixed in commit 8cf860c

Root Cause Analysis: The API client was attempting to extract the error message incorrectly. The API returns errors in this nested structure:

{
  "error": {
    "error_code": "NO_CHECKPOINT_LOADED",
    "message": "No checkpoint model loaded. Please load a checkpoint model first using POST /api/models/{hash}/load",
    "request_id": "req_390608",
    "status_code": 400,
    "timestamp": 1762113688
  }
}

The Broken Code:

const error = await response.json();
throw new Error(error.error || 'API request failed');

This accessed error.error which returned the entire error object (not a string), resulting in Error("[object Object]") being thrown.

The Fix:

const errorData = await response.json().catch(() => ({
  error: { message: response.statusText },
}));

// Handle nested error structure with fallback chain
const errorMessage =
  errorData.error?.message ||    // ✅ "No checkpoint model loaded..."
  errorData.message ||            // Handles flat structure
  errorData.error ||              // Legacy format
  'API request failed';           // Final fallback

throw new Error(errorMessage);   // ✅ Always a string

Why This Works:

1. Tries errorData.error.message first (nested structure) - THIS IS THE CORRECT PATH
2. Falls back to errorData.message (flat structure)
3. Falls back to errorData.error as string (legacy)
4. Final fallback to generic message
5. Result is always a string, never an object

Verification: All UI pages already use the correct error display pattern:

catch (err) {
  setError(err instanceof Error ? err.message : 'Fallback');
}

So fixing the API client automatically fixes error display across:

• ✅ Text to Image page
• ✅ Image to Image page
• ✅ Upscaler page
• ✅ Queue page
• ✅ Models page

Example Error Messages Now Displayed:

• "No checkpoint model loaded. Please load a checkpoint model first using POST /api/models/{hash}/load"
• "Failed to load model"
• "Generation cancelled"
• "Job polling timeout"

No more "[object Object]"!