diff --git a/src/main.ts b/src/main.ts index cd2338aad2b43582e593c32f474b5430e98c25cc..5728111d0ab0ec9faf1c0f269d88d19cde97931c 100644 --- a/src/main.ts +++ b/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(); diff --git a/src/parent/iframe.ts b/src/parent/iframe.ts index 5b35ac74873419f2bf6efae0aaa5ff965511b559..017791d97cd90b0a65b49415f0d0477d30bf073f 100644 --- a/src/parent/iframe.ts +++ b/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(); +} diff --git a/src/parent/parent.ts b/src/parent/parent.ts index 5836df9b89e699f949182bfdc9412b32003d5bb1..093803c53aa593d896d9694b41f648f18a94932a 100644 --- a/src/parent/parent.ts +++ b/src/parent/parent.ts @@ -1,4 +1,4 @@ -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; } });