Show error when rerun_js viewer panics or fails to load

- closes
https://linear.app/rerun/issue/RR-3312/add-error-handling-and-loading-spinner-to-httpslatestcloudrerunio

This handles both wasm load errors and panics and will show the error
message and a clear caches and reload button. Also adds a basic loading
spinner:

https://github.com/user-attachments/assets/479839df-25ea-46cd-9669-1446e5926c49

Source-Ref: fac247abab92cb130472150c1ed18a6c5e5866d2

Author: lucasmerlin

rerun_js/web-viewer/index.ts

@@ -362,6 +362,23 @@ export class WebViewer {
     this.#canvas.style.height = options.height ?? "360px";
     parent.append(this.#canvas);
 
+    // Show loading spinner
+    const loader = document.createElement("div");
+    loader.id = "rerun-loader";
+    loader.innerHTML = `
+      <style>
+        @keyframes rerun-spin { to { transform: rotate(360deg); } }
+      </style>
+      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background-color: #1c1c1c; font-family: sans-serif; color: white;">
+        <div style="width: 40px; height: 40px; border: 3px solid #444; border-top-color: white; border-radius: 50%; animation: rerun-spin 1s linear infinite;"></div>
+        <div style="margin-top: 16px;">Loading Rerun…</div>
+      </div>
+    `;
+    loader.style.position = "absolute";
+    loader.style.inset = "0";
+    parent.style.position = "relative";
+    parent.append(loader);
+
     // This yield appears to be necessary to ensure that the canvas is attached to the DOM
     // and visible. Without it we get occasionally get a panic about a failure to find a canvas
     // element with the given ID.
@@ -372,7 +389,14 @@ export class WebViewer {
       delete (options as any).base_url;
     }
 
-    let WebHandle_class = await load(base_url);
+    let WebHandle_class: typeof wasm_bindgen.WebHandle;
+    try {
+      WebHandle_class = await load(base_url);
+    } catch (e) {
+      loader.remove();
+      this.#fail("Failed to load rerun", String(e));
+      throw e;
+    }
     if (this.#state !== "starting") return;
 
     const fullscreen = this.#allow_fullscreen
@@ -404,18 +428,33 @@ export class WebViewer {
     try {
       await this.#handle.start(this.#canvas);
     } catch (e) {
-      this.stop();
+      loader.remove();
+      this.#fail("Failed to start", String(e));
       throw e;
     }
     if (this.#state !== "starting") return;
 
+    loader.remove();
     this.#state = "ready";
     this.#dispatch_event("ready");
 
     if (rrd) {
       this.open(rrd);
     }
 
+    let self = this;
+
+    function check_for_panic() {
+      if (self.#handle?.has_panicked()) {
+        self.#fail("Rerun has crashed.", self.#handle?.panic_message());
+      } else {
+        let delay_ms = 1000;
+        setTimeout(check_for_panic, delay_ms);
+      }
+    }
+
+    check_for_panic();
+
     return;
   }
 
@@ -566,7 +605,7 @@ export class WebViewer {
       try {
         this.#handle.add_receiver(url, options.follow_if_http);
       } catch (e) {
-        this.stop();
+        this.#fail("Failed to open recording", String(e));
         throw e;
       }
     }
@@ -589,7 +628,7 @@ export class WebViewer {
       try {
         this.#handle.remove_receiver(url);
       } catch (e) {
-        this.stop();
+        this.#fail("Failed to close recording", String(e));
         throw e;
       }
     }
@@ -624,6 +663,39 @@ export class WebViewer {
     this.#allow_fullscreen = false;
   }
 
+  #fail(message: string, error_message?: string) {
+    console.error("WebViewer failure:", message, error_message);
+    if (this.canvas?.parentElement) {
+      const parent = this.canvas.parentElement;
+      parent.innerHTML = `
+        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: white; font-family: sans-serif; background-color: #1c1c1c;">
+          <h1 id="fail-message"></h1>
+          <pre id="fail-error" style="text-align: left;"></pre>
+          <button id="fail-clear-cache">Clear caches and reload</button>
+        </div>
+      `;
+
+      document.getElementById("fail-message")!.textContent = message;
+
+      const errorEl = document.getElementById("fail-error")!;
+      if (error_message) {
+        errorEl.textContent = error_message;
+      } else {
+        errorEl.remove();
+      }
+
+      document.getElementById("fail-clear-cache")!.addEventListener("click", async () => {
+        if ("caches" in window) {
+          const keys = await caches.keys();
+          await Promise.all(keys.map((key) => caches.delete(key)));
+        }
+        window.location.reload();
+      });
+    }
+
+    this.stop();
+  }
+
   /**
    * Opens a new channel for sending log messages.
    *
@@ -643,7 +715,7 @@ export class WebViewer {
     try {
       this.#handle.open_channel(id, channel_name);
     } catch (e) {
-      this.stop();
+      this.#fail("Failed to open channel", String(e));
       throw e;
     }
 
@@ -657,7 +729,7 @@ export class WebViewer {
       try {
         this.#handle.send_rrd_to_channel(id, data);
       } catch (e) {
-        this.stop();
+        this.#fail("Failed to send data", String(e));
         throw e;
       }
     };
@@ -672,7 +744,7 @@ export class WebViewer {
       try {
         this.#handle.send_table_to_channel(id, data);
       } catch (e) {
-        this.stop();
+        this.#fail("Failed to send table", String(e));
         throw e;
       }
     }
@@ -687,7 +759,7 @@ export class WebViewer {
       try {
         this.#handle.close_channel(id);
       } catch (e) {
-        this.stop();
+        this.#fail("Failed to close channel", String(e));
         throw e;
       }
     };
@@ -713,7 +785,7 @@ export class WebViewer {
     try {
       this.#handle.override_panel_state(panel, state);
     } catch (e) {
-      this.stop();
+      this.#fail("Failed to override panel state", String(e));
       throw e;
     }
   }
@@ -733,7 +805,7 @@ export class WebViewer {
     try {
       this.#handle.toggle_panel_overrides(value as boolean | undefined);
     } catch (e) {
-      this.stop();
+      this.#fail("Failed to toggle panel overrides", String(e));
       throw e;
     }
   }