Lite: Convert an error object caught in the worker to be cloneable (#5838)

* Convert an error object caught in the worker to be cloneable so it can be delegated to the main thread properly

* add changeset

* Add a comment

* Fix the error serialization for the inter-thread messaging

* Fix reply error message

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

.changeset/chatty-berries-flash.md

@@ -0,0 +1,5 @@
+---
+"@gradio/wasm": minor
+---
+
+feat:Lite: Convert an error object caught in the worker to be cloneable

js/wasm/src/webworker/index.ts

@@ -314,10 +314,27 @@ self.onmessage = async (event: MessageEvent<InMessage>): Promise<void> => {
 			}
 		}
 	} catch (error) {
+		console.error(error);
+
+		if (!(error instanceof Error)) {
+			throw error;
+		}
+
+		// The `error` object may contain non-serializable properties such as function (for example Pyodide.FS.ErrnoError which has a `.setErrno` function),
+		// so it must be converted to a plain object before sending it to the main thread.
+		// Otherwise, the following error will be thrown:
+		// `Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'MessagePort': #<Object> could not be cloned.`
+		// Also, the JSON.stringify() and JSON.parse() approach like https://stackoverflow.com/a/42376465/13103190
+		// does not work for Error objects because the Error object is not enumerable.
+		// So we use the following approach to clone the Error object.
+		const cloneableError = new Error(error.message);
+		cloneableError.name = error.name;
+		cloneableError.stack = error.stack;
+
 		const replyMessage: ReplyMessageError = {
 			type: "reply:error",
-			error: error as Error
-		};
+			error: cloneableError,
+		}
 		messagePort.postMessage(replyMessage);
 	}
 };