Hide UI on error

src/main.ts

@@ -34,6 +34,7 @@ function shouldStartMinimized(): boolean {
 }
 
 async function main() {
+    hideOnError();
     const root = document.querySelector(rootDivId) as HTMLDivElement;
     if (!root) {
         throw new Error("No element with id as 'chatterbox' found!");
@@ -61,6 +62,24 @@ function allowsChild(parent, child) {
     }
 }
 
+function hideOnError() {
+    // When an error occurs, log it and then hide everything!
+    const handler = e => {
+        if (e.message === "ResizeObserver loop completed with undelivered notifications." ||
+            e.message === "ResizeObserver loop limit exceeded") {
+            // see https://stackoverflow.com/a/64257593
+            e.stopImmediatePropagation();
+            return false;
+        }
+        console.error(e.error ?? e.reason);
+        (window as any).sendError();
+        return false;
+    };
+    window.addEventListener("error", handler, true);
+    window.addEventListener("unhandledrejection", handler, true);
+}
+
+
 (window as any).sendViewChangeToParent = function (view: "timeline" | "account-setup") {
     window.parent?.postMessage({
         action: "resize-iframe",
@@ -76,4 +95,8 @@ function allowsChild(parent, child) {
     window.parent?.postMessage({ action: "unread-message", count }, "*");
 };
 
+(window as any).sendError = function () {
+    window.parent?.postMessage({ action: "error" }, "*");
+};
+
 main();

src/parent/iframe.ts

@@ -42,3 +42,10 @@ export function resizeIframe(data) {
     if (height) { iframeElement.style.height = height; }
     if (width) { iframeElement.style.width = width; }
 }
+
+export function removeIframe() {
+    const iframeElement = document.querySelector(".chatterbox-iframe") as HTMLIFrameElement;
+    iframeElement?.remove();
+    const startButton = document.querySelector(".start") as HTMLDivElement;
+    startButton.remove();
+}

src/parent/parent.ts

-import { resizeIframe, toggleIframe } from "./iframe";
+import { resizeIframe, toggleIframe, removeIframe } from "./iframe";
 import { loadStartButton } from "./load";
 import "./parent-style.css";
 
@@ -33,6 +33,9 @@ window.addEventListener("message", event => {
         case "unread-message":
             setUnreadCount(event.data.count);
             break;
+        case "error":
+            removeIframe();
+            break;
     }
 });