Fix postMessage error

Summary:
This diff is an attempt to fix Relay devtools postMessage error. When an event data contains non serializable data, when it will throw when it tries to postMessage.

The diff fixes the error on Adsmanager by adding a `makeCloneable` function that recursively filter non-serializable data.

Reviewed By: captbaritone

Differential Revision: D88909583

fbshipit-source-id: 5236fcaf6bd749b976e86337d1339a697eb96b3b

Author: tyao1

shells/browser/chrome/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 3,
   "name": "Relay Developer Tools",
   "description": "Adds Relay debugging tools to the Chrome Developer Tools.",
-  "version": "0.9.18",
-  "version_name": "0.9.18",
+  "version": "0.9.19",
+  "version_name": "0.9.19",
   "minimum_chrome_version": "88",
   "icons": {
     "16": "icons/enabled16.png",

src/backend/EnvironmentWrapper.js

@@ -47,29 +47,38 @@ function sanitizeEvent(event: Object): Object {
     const value = event[key];
     if (typeof value === 'function' || UNUSED_EXPENSIVE_FIELDS.includes(key)) {
       continue;
-    } else if (value == null || typeof value !== 'object') {
-      newEvent[key] = value;
-    } else if (value instanceof Map) {
-      newEvent[key] = Object.fromEntries((value: Map<mixed, mixed>));
-    } else if (value instanceof Set) {
-      newEvent[key] = Array.from(value);
-    } else if (typeof value.toJSON == 'function') {
-      // Convert RecordSource to Object, there are arbitary values for resolvers
-      newEvent[key] = JSON.parse(JSON.stringify(value.toJSON()));
-    } else if (
-      (key === 'info' && event.name === 'network.info') ||
-      event.name === 'network.start' ||
-      key === 'cacheConfig'
-    ) {
-      // Some network events contain arbitary data
-      newEvent[key] = JSON.parse(JSON.stringify(value));
-    } else {
-      newEvent[key] = value;
     }
+    newEvent[key] = makeCloneable(value);
   }
   return newEvent;
 }
 
+function makeCloneable(obj: mixed): Object {
+  if (obj === null || typeof obj !== 'object') return obj;
+
+  if (Array.isArray(obj)) {
+    return obj.map(makeCloneable);
+  }
+
+  if (typeof obj.toJSON == 'function') {
+    // Convert RecordSource to Object, there are arbitary values for resolvers
+    // $FlowFixMe[incompatible-use]
+    return makeCloneable(obj.toJSON());
+  }
+  const result: Object = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (
+      typeof value === 'function' ||
+      typeof value === 'symbol' ||
+      value instanceof Node
+    ) {
+      continue;
+    }
+    result[key] = makeCloneable(value);
+  }
+  return result;
+}
+
 export function attach(
   hook: DevToolsHook,
   rendererID: number,
@@ -80,7 +89,7 @@ export function attach(
   const store = environment.getStore();
 
   const originalLog = environment.__log;
-  environment.__log = event => {
+  environment.__log = (event) => {
     originalLog(event);
     if (!SUPPORTED_EVENTS.has(event.name)) {
       return;
@@ -100,7 +109,7 @@ export function attach(
 
   const storeOriginalLog = store.__log;
   // TODO(damassart): Make this cleaner
-  store.__log = event => {
+  store.__log = (event) => {
     if (storeOriginalLog !== null) {
       storeOriginalLog(event);
     }
@@ -133,7 +142,7 @@ export function attach(
   function flushInitialOperations() {
     // TODO(damassart): Make this a modular function
     if (pendingEventsQueue != null) {
-      pendingEventsQueue.forEach(pendingEvent => {
+      pendingEventsQueue.forEach((pendingEvent) => {
         hook.emit('environment.event', {
           id: rendererID,
           envName: environment.configName,