Intercept and report syntax errors

index.html

@@ -5,6 +5,54 @@
     <title>Lexy's Labyrinth</title>
     <link rel="stylesheet" type="text/css" href="style.css">
     <link rel="shortcut icon" type="image/png" href="icon.png">
+    <script>
+        "use strict";
+        {
+            let domloaded = false;
+            window.addEventListener('DOMContentLoaded', e => domloaded = true);
+
+            let _ll_log_fatal_error = (err, ev) => {
+                document.getElementById('loading').setAttribute('hidden', '');
+                let failed = document.getElementById('failed');
+                failed.removeAttribute('hidden');
+                document.body.setAttribute('data-mode', 'failed');
+
+                failed.classList.add('--got-error');
+                let stack = '(origin unknown)';
+                if (err.stack) {
+                    stack = err.stack.replace(/^/mg, "  ");
+                }
+                else if (err.fileName) {
+                    stack = `in ${err.fileName} at ${err.lineNumber}:${err.columnNumber}`;
+                }
+                else if (ev) {
+                    stack = `in ${ev.filename} at ${ev.lineno}:${ev.colno}`;
+                }
+                failed.querySelector('pre').textContent = `${err.toString()}\n\n${stack}`;
+            };
+            window.ll_log_fatal_error = function(err, ev) {
+                if (domloaded) {
+                    _ll_log_fatal_error(err, ev);
+                }
+                else {
+                    window.addEventListener('DOMContentLoaded', () => _ll_log_fatal_error(err, ev));
+                }
+            };
+            let handle = window.addEventListener('error', e => {
+                if (! e.error)
+                    // Not a script error
+                    return;
+                try {
+                    ll_log_fatal_error(e.error, e);
+                }
+                catch (err) {}
+            }, true);
+            // Once we've loaded successfully, drop the handler
+            window.ll_successfully_loaded = function() {
+                window.removeEventListener('error', handle, true);
+            };
+        }
+    </script>
     <!-- FIXME it would be super swell if i could load this lazily -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
     <script type="module" src="js/main.js"></script>
@@ -80,6 +128,8 @@
         <h1>oops!</h1>
         <p>Sorry, the game was unable to load at all.</p>
         <p>If you have JavaScript partly or wholly blocked, I salute you!  ...but this is an interactive game and cannot work without it.</p>
+        <p class="-with-error">I did manage to capture this error, which you might be able to <a href="https://github.com/eevee/lexys-labyrinth/issues/new">report somewhere</a>:</p>
+        <pre class="-with-error stack-trace"></pre>
     </main>
     <main id="loading" hidden>
         <p>...loading...</p>
@@ -88,7 +138,6 @@
         </div>
     </main>
     <script>
-        // FIXME not quite good enough; we'll get loading forever if there's a syntax error in the js
         document.querySelector('#failed').setAttribute('hidden', '');
         document.querySelector('#loading').removeAttribute('hidden');
     </script>

js/main.js

@@ -4033,17 +4033,13 @@ async function main() {
         await main();
     }
     catch (e) {
-        let failed = document.getElementById('failed');
+        if (ll_log_fatal_error) {
-        document.getElementById('loading').setAttribute('hidden', '');
+            ll_log_fatal_error(e);
-        failed.removeAttribute('hidden');
+        }
-        document.body.setAttribute('data-mode', 'failed');
-
-        failed.appendChild(mk('p',
-            "I did manage to capture this error, which you might be able to ",
-            mk('a', {href: 'https://github.com/eevee/lexys-labyrinth'}, "report somewhere"),
-            ":",
-        ));
-        failed.appendChild(mk('pre.stack-trace', e.toString(), "\n\n", (e.stack ?? "").replace(/^/mg, "  ")));
         throw e;
     }
+
+    if (ll_successfully_loaded) {
+        ll_successfully_loaded();
+    }
 })();

style.css

@@ -505,6 +505,12 @@ body[data-mode=player] #editor-play {
     margin: auto;
     text-align: center;
 }
+#failed .-with-error {
+    display: none;
+}
+#failed.--got-error .-with-error {
+    display: revert;
+}
 #loading {
     font-size: 2em;
 }