fix(serialization): handle large objects and p5.Font serialization

Author: lirenjie95

client/modules/IDE/hooks/useHandleMessageEvent.js

@@ -10,22 +10,49 @@ export default function useHandleMessageEvent() {
     obj,
     depth = 0,
     maxDepth = 10,
-    seen = new WeakMap()
+    seen = new WeakMap(),
+    maxSize = 1000000 // Add maximum serialization size limit
   ) => {
     if (typeof obj !== 'object' || obj === null) return obj;
 
+    // Check if object is p5.Font
+    if (obj.constructor && obj.constructor.name === 'p5.Font') {
+      return {
+        type: 'p5.Font',
+        name: obj.name || 'Unknown Font',
+        size: obj.size || 'Unknown Size'
+      };
+    }
+
+    // Check object size
+    try {
+      const size = JSON.stringify(obj).length;
+      if (size > maxSize) {
+        return {
+          type: 'Large Object',
+          size: size,
+          message: 'Object too large to serialize'
+        };
+      }
+    } catch (e) {
+      return {
+        type: 'Unserializable Object',
+        message: 'Object cannot be serialized'
+      };
+    }
+
     if (depth >= maxDepth) {
       if (seen.has(obj)) return '[Circular Reference]';
     }
 
     seen.set(obj, true);
 
     return Array.isArray(obj)
-      ? obj.map((item) => safeStringify(item, depth + 1, maxDepth, seen))
+      ? obj.map((item) => safeStringify(item, depth + 1, maxDepth, seen, maxSize))
       : Object.fromEntries(
           Object.entries(obj).map(([key, value]) => [
             key,
-            safeStringify(value, depth + 1, maxDepth, seen)
+            safeStringify(value, depth + 1, maxDepth, seen, maxSize)
           ])
         );
   };

client/utils/previewEntry.js

@@ -17,11 +17,46 @@ window.objectPaths[blobPath] = 'index.html';
 
 window.loopProtect = loopProtect;
 
+// Add safe stringify function to handle large objects
+const safeStringify = (obj, maxSize = 1000000) => {
+  // Handle p5.Font objects
+  if (obj && obj.constructor && obj.constructor.name === 'p5.Font') {
+    return {
+      type: 'p5.Font',
+      name: obj.name || 'Unknown Font',
+      size: obj.size || 'Unknown Size'
+    };
+  }
+
+  // Check object size
+  try {
+    const size = JSON.stringify(obj).length;
+    if (size > maxSize) {
+      return {
+        type: 'Large Object',
+        size: size,
+        message: 'Object too large to serialize'
+      };
+    }
+    return obj;
+  } catch (e) {
+    return {
+      type: 'Unserializable Object',
+      message: 'Object cannot be serialized'
+    };
+  }
+};
+
 const consoleBuffer = [];
 const LOGWAIT = 500;
 Hook(window.console, (log) => {
+  // Apply safe stringify to log data
+  const safeLog = {
+    ...log,
+    data: log.data ? log.data.map(item => safeStringify(item)) : []
+  };
   consoleBuffer.push({
-    log
+    log: safeLog
   });
 });
 setInterval(() => {
@@ -36,7 +71,6 @@ setInterval(() => {
 }, LOGWAIT);
 
 function handleMessageEvent(e) {
-  // maybe don't need this?? idk!
   if (window.origin !== e.origin) return;
   const { data } = e;
   const { source, messages } = data;
@@ -45,8 +79,10 @@ function handleMessageEvent(e) {
     decodedMessages.forEach((message) => {
       const { data: args } = message;
       const { result, error } = evaluateExpression(args);
+      // Apply safe stringify to result
+      const safeResult = safeStringify(result);
       const resultMessages = [
-        { log: Encode({ method: error ? 'error' : 'result', data: [result] }) }
+        { log: Encode({ method: error ? 'error' : 'result', data: [safeResult] }) }
       ];
       editor.postMessage(
         {