From 4e6c68a85583530947ea5f60d876a2db712e152e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 17 Nov 2025 12:13:01 +0100
Subject: [PATCH] debug: add detailed WASM loading diagnostics for ImageMagick
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added comprehensive logging to diagnose the WASM loading issue:
- Log the WASM URL being fetched
- Log fetch response (status, content-type, content-length)
- Log actual WASM file size after fetching
- Verify the buffer is not empty before initialization
- Pass ArrayBuffer directly to initializeImageMagick
- Better error messages with context

This will help identify why the WASM file appears empty:
- Is the fetch failing? (wrong path, 404, CORS)
- Is the response empty? (server issue)
- Is the content-type wrong? (misconfigured server)

The logs will appear in the browser console when converting images.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 lib/wasm/wasmLoader.ts | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/lib/wasm/wasmLoader.ts b/lib/wasm/wasmLoader.ts
index a5fdd51..8701f2a 100644
--- a/lib/wasm/wasmLoader.ts
+++ b/lib/wasm/wasmLoader.ts
@@ -65,18 +65,47 @@ export async function loadImageMagick(): Promise<any> {
     // Initialize ImageMagick with WASM file from public directory
     // In production (static export), this will be served from /wasm/magick.wasm
     const wasmUrl = '/wasm/magick.wasm';
-    await initializeImageMagick(wasmUrl);
+
+    console.log('[ImageMagick] Attempting to load WASM from:', wasmUrl);
+
+    // Test fetch the WASM file first to debug
+    try {
+      const response = await fetch(wasmUrl);
+      console.log('[ImageMagick] WASM fetch response:', {
+        ok: response.ok,
+        status: response.status,
+        contentType: response.headers.get('content-type'),
+        contentLength: response.headers.get('content-length'),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch WASM file: ${response.status} ${response.statusText}`);
+      }
+
+      const arrayBuffer = await response.arrayBuffer();
+      console.log('[ImageMagick] WASM file size:', arrayBuffer.byteLength, 'bytes');
+
+      if (arrayBuffer.byteLength === 0) {
+        throw new Error('WASM file is empty');
+      }
+
+      // Now initialize with the buffer directly
+      await initializeImageMagick(arrayBuffer);
+    } catch (fetchError) {
+      console.error('[ImageMagick] Failed to fetch WASM:', fetchError);
+      throw fetchError;
+    }
 
     const ImageMagick = await import('@imagemagick/magick-wasm');
 
     imagemagickInstance = ImageMagick;
     moduleState.imagemagick = true;
-    console.log('ImageMagick loaded and initialized successfully');
+    console.log('[ImageMagick] Loaded and initialized successfully');
 
     return imagemagickInstance;
   } catch (error) {
-    console.error('Failed to load ImageMagick:', error);
-    throw new Error('Failed to load ImageMagick WASM module');
+    console.error('[ImageMagick] Failed to load:', error);
+    throw new Error(`Failed to load ImageMagick WASM module: ${error instanceof Error ? error.message : 'Unknown error'}`);
   }
 }