global error

src/main.js

@@ -45,6 +45,14 @@ session.on('change', (documents) => {
   });
 });
 
+session.on('pubsub:close', () => {
+  // untested
+  setError('Disconnected from Server...');
+});
+session.on('pubsub:open', () => {
+  clearGlobalError();
+});
+
 export const Frame = {
   hydra: document.getElementById('hydra'),
   shader: document.getElementById('shader'),
@@ -67,35 +75,48 @@ session.on('eval:strudel', (msg) => Frame.strudel?.contentWindow.postMessage({ t
 // kabelsalat
 session.on('eval:kabelsalat', (msg) => Frame.kabelsalat?.contentWindow.postMessage({ type: 'eval', msg }));
 
+let showGlobalError = (message) => {
+  let errorEl = document.querySelector(`#global-error`);
+  if (errorEl) {
+    errorEl.innerText = message;
+  } else {
+    document.body.insertAdjacentHTML('beforeend', `<div id="global-error">${message}</div>`);
+  }
+};
+
+let showLocalError = (docId, message) => {
+  const slot = document.querySelector(`#slot-${docId}`);
+  let errorEl = document.querySelector(`#slot-${docId} #error-${docId}`);
+  if (errorEl) {
+    errorEl.innerText = message;
+  } else {
+    slot.insertAdjacentHTML('beforeend', `<div class="error" id="error-${docId}">${message}</div>`);
+  }
+};
+
 // error handling
 const setError = (message, docId) => {
   console.error(message);
   if (!docId) {
-    // todo: where to show global errors?
+    showGlobalError(message);
     return;
   }
-
   // messages will either be string or InlineErrorMessage
   if (typeof message != 'string') {
     displayInlineErrors(docId, message);
     return;
   }
-
-  const slot = document.querySelector(`#slot-${docId}`);
-  let errorEl = document.querySelector(`#slot-${docId} #error-${docId}`);
-
-  if (errorEl) {
-    errorEl.innerText = message;
-  } else {
-    slot.insertAdjacentHTML('beforeend', `<div class="error" id="error-${docId}">${message}</div>`);
-  }
+  showLocalError(docId, message);
 };
-const clearError = (docId) => {
+const clearLocalError = (docId) => {
   document.querySelector(`#slot-${docId} #error-${docId}`)?.remove();
   clearInlineErrors(docId);
 };
+const clearGlobalError = () => {
+  document.querySelector(`#global-error`)?.remove();
+};
 // clear local error when new eval comes in
-session.on('eval', (msg) => clearError(msg.docId));
+session.on('eval', (msg) => clearLocalError(msg.docId));
 
 window.addEventListener('message', (event) => {
   if (event.origin !== window.location.origin) {

src/style.css

@@ -173,6 +173,17 @@ body {
   }
 }
 
+#global-error {
+  background-color: black;
+  font-family: monospace;
+  padding: 8px;
+  margin: 0;
+  text-align: center;
+  color: tomato;
+  position: fixed;
+  bottom: 0;
+}
+
 :root {
   --foreground: white;
 }