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:
@@ -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'}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user