From edbb5d13887655c872efdab920a3126c66c092d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 17 Nov 2025 12:16:37 +0100
Subject: [PATCH] debug: add comprehensive logging for image preview issue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added detailed logging at every step of the image conversion and preview:

ImageMagick Service:
- Log input and output sizes
- Log applied quality settings
- Verify result is not empty before creating blob
- Log created blob size and MIME type
- Fail early if conversion produces empty result

Preview Component:
- Log blob details (size, type, URL)
- Add onError handler to img tag with detailed error info
- Add onLoad handler to confirm successful loading
- Console logs will help identify:
  - Is the blob empty?
  - Is the MIME type correct?
  - Is the object URL valid?
  - What error occurs when loading?

TypeScript Fix:
- Changed result type to `Uint8Array | undefined`
- Allows proper checking before blob creation

This will help diagnose why the preview image appears broken
despite successful conversion.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/converter/ConversionPreview.tsx | 19 +++++++++++++++++++
 lib/converters/imagemagickService.ts       | 22 ++++++++++++++++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/components/converter/ConversionPreview.tsx b/components/converter/ConversionPreview.tsx
index 2705580..93d0721 100644
--- a/components/converter/ConversionPreview.tsx
+++ b/components/converter/ConversionPreview.tsx
@@ -68,6 +68,14 @@ export function ConversionPreview({ job, onDownload }: ConversionPreviewProps) {
 
     const category = job.outputFormat.category;
 
+    // Log blob details for debugging
+    console.log('[Preview] Blob details:', {
+      size: job.result.size,
+      type: job.result.type,
+      previewUrl,
+      outputFormat: job.outputFormat.extension,
+    });
+
     switch (category) {
       case 'image':
         return (
@@ -76,6 +84,17 @@ export function ConversionPreview({ job, onDownload }: ConversionPreviewProps) {
               src={previewUrl}
               alt="Converted image preview"
               className="max-w-full max-h-64 object-contain"
+              onError={(e) => {
+                console.error('[Preview] Image failed to load:', {
+                  src: previewUrl,
+                  blobSize: job.result?.size,
+                  blobType: job.result?.type,
+                  error: e,
+                });
+              }}
+              onLoad={() => {
+                console.log('[Preview] Image loaded successfully');
+              }}
             />
           </div>
         );
diff --git a/lib/converters/imagemagickService.ts b/lib/converters/imagemagickService.ts
index 357dfa8..c50872a 100644
--- a/lib/converters/imagemagickService.ts
+++ b/lib/converters/imagemagickService.ts
@@ -36,7 +36,7 @@ export async function convertWithImageMagick(
     if (onProgress) onProgress(50);
 
     // Convert image using ImageMagick
-    let result: Uint8Array;
+    let result: Uint8Array | undefined;
 
     await ImageMagick.read(inputData, (image) => {
       // Apply quality setting if specified
@@ -73,8 +73,26 @@ export async function convertWithImageMagick(
       if (onProgress) onProgress(90);
     });
 
+    // Verify we have a result
+    if (!result || result.length === 0) {
+      throw new Error('ImageMagick conversion produced empty result');
+    }
+
+    console.log('[ImageMagick] Conversion complete:', {
+      inputSize: inputData.length,
+      outputSize: result.length,
+      format: outputFormat,
+      quality: options.imageQuality,
+    });
+
     // Create blob from result
-    const blob = new Blob([result! as BlobPart], { type: getMimeType(outputFormat) });
+    const mimeType = getMimeType(outputFormat);
+    const blob = new Blob([result as BlobPart], { type: mimeType });
+
+    console.log('[ImageMagick] Created blob:', {
+      size: blob.size,
+      type: blob.type,
+    });
 
     if (onProgress) onProgress(100);