Connect console messages from iframe to editor frame

processing · catarak · Jul 7, 2021 · Feb 4, 2021 · Feb 10, 2021 · Feb 17, 2021
commit 06cee3752bc4ceeaa31f11aa03e434bd35802819
diff --git a/client/modules/Preview/EmbedFrame.jsx b/client/modules/Preview/EmbedFrame.jsx
@@ -19,11 +19,7 @@ import {
   EXTERNAL_LINK_REGEX,
   NOT_EXTERNAL_LINK_REGEX
 } from '../../../server/utils/fileUtils';
-import {
-  hijackConsoleErrorsScript,
-  startTag,
-  getAllScriptOffsets
-} from '../../utils/consoleUtils';
+import { startTag, getAllScriptOffsets } from '../../utils/consoleUtils';
 import { registerFrame, MessageTypes } from '../../utils/dispatcher';
 
 import { getHTMLFile } from '../IDE/reducers/files';
@@ -86,7 +82,6 @@ function resolvePathsForElementsWithAttribute(attr, sketchDoc, files) {
 
 function resolveCSSLinksInString(content, files) {
   let newContent = content;
-  console.log(content);
   let cssFileStrings = content.match(STRING_REGEX);
   cssFileStrings = cssFileStrings || [];
   cssFileStrings.forEach((cssFileString) => {
@@ -293,11 +288,12 @@ function injectLocalFiles(files, htmlFile) {
   const sketchDocString = `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
   scriptOffs = getAllScriptOffsets(sketchDocString);
   const consoleErrorsScript = sketchDoc.createElement('script');
-  consoleErrorsScript.innerHTML = hijackConsoleErrorsScript(
-    JSON.stringify(scriptOffs)
-  );
+  consoleErrorsScript.innerHTML = `
+    window.offs = ${JSON.stringify(scriptOffs)};
+    window.editorOrigin = '${getConfig('EDITOR_URL')}';
+  `;
   addLoopProtect(sketchDoc);
-  sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement);
+  sketchDoc.head.prepend(consoleErrorsScript);
 
   return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
 }

diff --git a/client/modules/Preview/previewIndex.jsx b/client/modules/Preview/previewIndex.jsx
@@ -24,7 +24,6 @@ const App = () => {
   const [state, dispatch] = useReducer(filesReducer, [], initialState);
   const [isPlaying, setIsPlaying] = useState(false);
   function handleMessageEvent(message) {
-    console.log('embedframe received message event');
     const { type, payload } = message;
     switch (type) {
       case MessageTypes.FILES:

diff --git a/client/utils/consoleUtils.js b/client/utils/consoleUtils.js
@@ -1,68 +1,8 @@
-import { EXTERNAL_LINK_REGEX } from '../../server/utils/fileUtils';
-
-export const hijackConsoleErrorsScript = (offs) => {
-  const s = `
-    function getScriptOff(line) {
-      var offs = ${offs};
-      var l = 0;
-      var file = '';
-      for (var i=0; i<offs.length; i++) {
-        var n = offs[i][0];
-        if (n < line && n > l) {
-          l = n;
-          file = offs[i][1];
-        }
-      }
-      return [line - l, file];
-    }
-    // catch reference errors, via http://stackoverflow.com/a/12747364/2994108
-    window.onerror = function (msg, url, lineNumber, columnNo, error) {
-        var string = msg.toLowerCase();
-        var substring = "script error";
-        var data = {};
-        if (url.match(${EXTERNAL_LINK_REGEX}) !== null && error.stack){
-          var errorNum = error.stack.split('about:srcdoc:')[1].split(':')[0];
-          var fileInfo = getScriptOff(errorNum);
-          data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
-        } else {
-          var fileInfo = getScriptOff(lineNumber);
-          data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
-        }
-        window.parent.postMessage([{
-          log: [{
-            method: 'error',
-            data: [data],
-            id: Date.now().toString()
-          }],
-          source: fileInfo[1]
-        }], '*');
-      return false;
-    };
-    // catch rejected promises
-    window.onunhandledrejection = function (event) {
-      if (event.reason && event.reason.message && event.reason.stack){
-        var errorNum = event.reason.stack.split('about:srcdoc:')[1].split(':')[0];
-        var fileInfo = getScriptOff(errorNum);
-        var data = event.reason.message + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
-        window.parent.postMessage([{
-          log: [{
-            method: 'error',
-            data: [data],
-            id: Date.now().toString()
-          }],
-          source: fileInfo[1]
-        }], '*');
-      }
-    };
-  `;
-  return s;
-};
-
 export const startTag = '@fs-';
 
 export const getAllScriptOffsets = (htmlFile) => {
   const offs = [];
-  const hijackConsoleErrorsScriptLength = 52;
+  const hijackConsoleErrorsScriptLength = 2;
   const embeddedJSStart = 'script crossorigin=""';
   let foundJSScript = true;
   let foundEmbeddedJS = true;

diff --git a/client/utils/previewEntry.js b/client/utils/previewEntry.js
@@ -1,6 +1,19 @@
 import loopProtect from 'loop-protect';
 import { Hook, Decode, Encode } from 'console-feed';
 import evaluateExpression from './evaluateExpression';
+import { EXTERNAL_LINK_REGEX } from '../../server/utils/fileUtils';
+
+// should postMessage user the dispatcher? does the parent window need to
+// be registered as a frame? or a just a listener?
+
+// could maybe send these as a message idk
+// const { editor } = window;
+const editor = window.parent.parent;
+const { editorOrigin } = window;
+// const editorOrigin = '*';
+// const editorOrigin = 'http://localhost:8000';
+// so this works??
+// maybe i have to pass the parent window??? idk man
 
 window.loopProtect = loopProtect;
 
@@ -17,12 +30,13 @@ setInterval(() => {
       messages: consoleBuffer,
       source: 'sketch'
     };
-    window.parent.postMessage(message, window.origin);
+    editor.postMessage(message, editorOrigin);
     consoleBuffer.length = 0;
   }
 }, LOGWAIT);
 
 function handleMessageEvent(e) {
+  // maybe don't need this?? idk!
   if (window.origin !== e.origin) return;
   const { data } = e;
   const { source, messages } = data;
@@ -34,15 +48,87 @@ function handleMessageEvent(e) {
       const resultMessages = [
         { log: Encode({ method: error ? 'error' : 'result', data: [result] }) }
       ];
-      window.parent.postMessage(
+      editor.postMessage(
         {
           messages: resultMessages,
           source: 'sketch'
         },
-        window.origin
+        editorOrigin
       );
     });
   }
 }
 
 window.addEventListener('message', handleMessageEvent);
+
+function getScriptOff(line) {
+  const { offs } = window;
+  let l = 0;
+  let file = '';
+  for (let i = 0; i < offs.length; i += 1) {
+    const n = offs[i][0];
+    if (n < line && n > l) {
+      l = n;
+      [, file] = offs[i];
+    }
+  }
+  return [line - l, file];
+}
+// catch reference errors, via http://stackoverflow.com/a/12747364/2994108
+window.onerror = function onError(msg, url, lineNumber, columnNo, error) {
+  // var string = msg.toLowerCase();
+  // var substring = "script error";
+  let data = {};
+  let fileInfo;
+  if (url.match(EXTERNAL_LINK_REGEX) !== null && error.stack) {
+    const errorNum = error.stack.split('about:srcdoc:')[1].split(':')[0];
+    fileInfo = getScriptOff(errorNum);
+    data = `${msg} (${fileInfo[1]}: line ${fileInfo[0]})`;
+  } else {
+    fileInfo = getScriptOff(lineNumber);
+    data = `${msg} (${fileInfo[1]}: line ${fileInfo[0]})`;
+  }
+  editor.postMessage(
+    {
+      source: fileInfo[1],
+      messages: [
+        {
+          log: [
+            {
+              method: 'error',
+              data: [data],
+              id: Date.now().toString()
+            }
+          ]
+        }
+      ]
+    },
+    editorOrigin
+  );
+  return false;
+};
+// catch rejected promises
+window.onunhandledrejection = function onUnhandledRejection(event) {
+  if (event.reason && event.reason.message && event.reason.stack) {
+    const errorNum = event.reason.stack.split('about:srcdoc:')[1].split(':')[0];
+    const fileInfo = getScriptOff(errorNum);
+    const data = `${event.reason.message} (${fileInfo[1]}: line ${fileInfo[0]})`;
+    editor.postMessage(
+      {
+        source: fileInfo[1],
+        messages: [
+          {
+            log: [
+              {
+                method: 'error',
+                data: [data],
+                id: Date.now().toString()
+              }
+            ]
+          }
+        ]
+      },
+      editorOrigin
+    );
+  }
+};
diff --git a/server/views/previewIndex.js b/server/views/previewIndex.js
@@ -19,6 +19,7 @@ function renderPreviewIndex() {
               ? `${assetsManifest['/previewScripts.js']}`
               : '/previewScripts.js'
           }';
+          window.process.env.EDITOR_URL = '${process.env.EDITOR_URL}';
         </script>
         </head>
       <body>