debug: add detailed WASM loading diagnostics for ImageMagick

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>
This commit is contained in:
2025-11-17 12:13:01 +01:00
parent 63cb9bcff5
commit 4e6c68a855

View File

@@ -65,18 +65,47 @@ export async function loadImageMagick(): Promise<any> {
// Initialize ImageMagick with WASM file from public directory // Initialize ImageMagick with WASM file from public directory
// In production (static export), this will be served from /wasm/magick.wasm // In production (static export), this will be served from /wasm/magick.wasm
const wasmUrl = '/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'); const ImageMagick = await import('@imagemagick/magick-wasm');
imagemagickInstance = ImageMagick; imagemagickInstance = ImageMagick;
moduleState.imagemagick = true; moduleState.imagemagick = true;
console.log('ImageMagick loaded and initialized successfully'); console.log('[ImageMagick] Loaded and initialized successfully');
return imagemagickInstance; return imagemagickInstance;
} catch (error) { } catch (error) {
console.error('Failed to load ImageMagick:', error); console.error('[ImageMagick] Failed to load:', error);
throw new Error('Failed to load ImageMagick WASM module'); throw new Error(`Failed to load ImageMagick WASM module: ${error instanceof Error ? error.message : 'Unknown error'}`);
} }
} }