notify users about client crashes and collect information (#2329)

client/js/tracing.js

@@ -39,8 +39,38 @@ onLoad(function() {
 
   onMessage('tracing', _=>tracingEnabled=true);
 
-  window.onerror = function(msg, url, line, col, err) {
-    sendTraceEvent('error', { msg, url, line, col, err });
-    location.reload();
+  const errorHandler = function(error) {
+    const details = {
+      stack: String(error.stack),
+      undoProtocol,
+      delta,
+      bodyClass: $('body').className,
+      activeOverlay: [...$a('.overlay')].filter(o=>o.style.display!='none').map(o=>o.id),
+      jsonEditor: $('#jeText') && $('#jeText').innerText,
+      activeButtons: [...$a('button.active')].map(b=>b.getAttribute('icon') || b.id),
+      widgetsState: [...widgets.keys()].map(id=>widgets.get(id).state),
+      url: location.href,
+      userAgent: navigator.userAgent,
+      playerName,
+      html: document.documentElement.outerHTML
+    };
+    preventReconnect();
+    connection.close();
+    showOverlay('clientErrorOverlay');
+    $('#clientErrorOverlay button').addEventListener('click', function() {
+      details.message = $('#clientErrorOverlay textarea').value;
+      fetch('clientError', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(details)
+      })
+      window.location.reload();
+    });
   }
+  window.onerror = function(msg, url, line, col, err) {
+    errorHandler(err);
+  };
+  window.addEventListener("unhandledrejection", function(promiseRejectionEvent) {
+    errorHandler(promiseRejectionEvent.reason);
+  });
 });

client/room.html

@@ -502,6 +502,14 @@
       <p>You can try to reload the page. It's very possible that you will run into the same problem again until it is fixed though.</p>
     </div>
 
+    <div id="clientErrorOverlay" class="overlay">
+      <h1>Internal Error</h1>
+      <p>Your client just crashed. Sorry, this shouldn't happen.</p>
+      <p>How can we trigger the error ourselves so we can fix it?</p>
+      <p><textarea style="height: 150px; width: 100%"></textarea></p>
+      <p><button>Submit and Reload</button></p>
+    </div>
+
     <div id="connectionLostOverlay" class="overlay" style="display:none;">
       <h1>Connection lost</h1>
       <div class="disconnected">

server.mjs

@@ -443,6 +443,17 @@ MinifyHTML().then(function(result) {
     }).catch(next);
   });
 
+  router.put('/clientError', bodyParser.json({ limit: '50mb' }), function(req, res, next) {
+    if(typeof req.body == 'object') {
+      const errorID = Math.random().toString(36).substring(2, 10);
+      fs.writeFileSync(savedir + '/errors/' + errorID + '.json', JSON.stringify(req.body, null, '  '));
+      Logging.log(`ERROR: Client error ${errorID}: ${req.body.message}`);
+      res.send(errorID);
+    } else {
+      res.send('not a valid JSON object');
+    }
+  });
+
   router.use(Logging.userErrorHandler);
 
   router.use(Logging.errorHandler);