add console interceptor

mkslanc · Mar 21, 2023 · 8adaeaa · 8adaeaa
1 parent f9c8d5f
commit 8adaeaa
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -2,10 +2,11 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,height=device-height" />
     <title>Ace playground</title>
 
 </head>
 <body>
 <script src="bundle.simple.js"></script>
 </body>
-</html>
+</html>
diff --git a/src/playground.ts b/src/playground.ts
@@ -6,7 +6,8 @@ import * as defaultLayout from "./layouts/two-columns-bottom.json";
 import {Tab} from "ace-layout/src/widgets/tabs/tab";
 import {SAMPLES} from "./samples";
 import {LanguageProvider} from "ace-linters";
-import {LayoutEditor} from "../../ace-layout/src/widgets/widget";
+import {LayoutEditor} from "ace-layout/src/widgets/widget";
+
 let event = require("ace-code/src/lib/event");
 let {HashHandler} = require("ace-code/src/keyboard/hash_handler");
 let keyUtil = require("ace-code/src/lib/keys");
@@ -124,6 +125,7 @@ event.addCommandKeyListener(window, function (e, hashId, keyCode) {
         e.preventDefault();
     }
 });
+
 function getTab(title: string, path: string): Tab<Ace.EditSession> {
     return tabManager.open<Ace.EditSession>({title: title, path: path}, "main");
 }
@@ -136,6 +138,7 @@ export function initTabs() {
 
 let hashSample;
 let sampleValues: [string, string, string] | undefined;
+
 function loadHashSample() {
     hashSample = new URL(document.URL).hash.replace("#", "");
     let path = 'samples/' + (allSamples.includes(hashSample) ? hashSample : "hello-world");
@@ -145,13 +148,15 @@ function loadHashSample() {
             let data = window.atob(value).split("\\0");
             if (data.length == 3)
                 sampleValues = data as [string, string, string];
-        } catch (e) {}
+        } catch (e) {
+        }
     } else {
         let state = new URL(document.URL).searchParams.get("state");
         if (state) {
             try {
                 localStorage[path] = window.atob(state);
-            } catch (e) {}
+            } catch (e) {
+            }
         }
     }
 
@@ -186,7 +191,8 @@ function createCopyLinkButton() {
     createEditorButton("Copy link", "Copy link", function () {
         let url = new URL(document.URL);
         url.searchParams.set("value", window.btoa([tabJs, tabCSS, tabHTML].map(tab => tab.session.getValue()).join("\\0")));
-        navigator.clipboard.writeText(url.toString()).then(r => {});
+        navigator.clipboard.writeText(url.toString()).then(r => {
+        });
     });
 }
 
@@ -195,7 +201,8 @@ function createCopyStateButton() {
         saveSample();
         let url = new URL(document.URL);
         url.searchParams.set("state", window.btoa(localStorage[currentPath!]));
-        navigator.clipboard.writeText(url.toString()).then(r => {});
+        navigator.clipboard.writeText(url.toString()).then(r => {
+        });
     });
 }
 
@@ -318,12 +325,23 @@ function loadSample(path: string) {
 }
 
 function displayError(errorMessage) {
-    if (typeof errorMessage !== "string") return;
+    let messages = "";
+    if (errorMessage.log) {
+        messages = errorMessage.elements.filter((el) => el != null).map((el) => {
+            if (errorMessage.log == "error" || errorMessage.log == "warning") {
+                return errorMessage.log + ": " + el.error;
+            } else {
+                return errorMessage.log + ": " + el;
+            }
+
+        }).join("\n");
+
+    }
     let terminal = tabManager.open<Ace.EditSession>({
-        title: "Problems",
+        title: "Log",
         path: 'terminal',
         editorType: EditorType.ace
     }, "console");
-    terminal.session.setValue(errorMessage);
+    terminal.session.setValue(messages);
     tabManager.loadFile(terminal);
 }
diff --git a/src/template.ts b/src/template.ts
@@ -16,12 +16,42 @@ export function generateTemplate(js, html, css) {
 </head>
 <body>
 <script>
-window.onerror = (e) => parent.postMessage(e);
+  function serialize(val) {
+    let seen = new Set;
+    function inner(val) {
+      if (val instanceof Error) return {error: val.toString(), stack: val.stack}
+      if (typeof val == "function") return {function: val.name || "?"}
+      if (val == null || typeof val != "object") return val
+      if (seen.has(val)) return {cycle: true}
+      seen.add(val);
+      if (Array.isArray(val)) return {array: val.map(inner)}
+      let result = {object: Object.create(null), ctor: ctorName(val)};
+      for (let prop of Object.keys(val)) {
+        try { result.object[prop] = inner(val[prop]); }
+        catch {}
+      }
+      return result
+    }
+    return inner(val)
+  }
+
+  function wrapConsole(level) {
+    let old = console[level];
+    console[level] = (...args) => {
+      old.apply(console, args);
+      parent.postMessage({log: level, elements: args.map(serialize)});
+    };
+  }
+  wrapConsole("log");
+  wrapConsole("warn");
+  wrapConsole("error");
+  window.addEventListener("error", e => console.error(e.error));
+
 </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.12.5/ace.js"
 ></script>
 ${html}
 <script>${js}</script>
 </body>
 </html>`;
-}
+}