1 files changed, 28 insertions, 0 deletions
diff --git a/packages/web-util/src/live-reload.ts b/packages/web-util/src/live-reload.ts
index 60c7cb565..901127f83 100644
--- a/packages/web-util/src/live-reload.ts
+++ b/packages/web-util/src/live-reload.ts
@@ -14,6 +14,31 @@ function setupLiveReload(): void {
         window.location.reload();
         return;
       }
+      if (event.type === "file-updated-failed") {
+        const h1 = document.getElementById("overlay-text")
+        if (h1) {
+          h1.innerHTML = "compilation failed"
+          h1.style.color = 'red'
+          h1.style.margin = ''
+        }
+        const div = document.getElementById("overlay")
+        if (div) {
+          const content = JSON.stringify(event.data, undefined, 2)
+          const pre = document.createElement("pre");
+          pre.id = "error-text"
+          pre.style.margin = "";
+          pre.textContent = content;
+          div.style.backgroundColor = "rgba(0,0,0,0.8)";
+          div.style.flexDirection = 'column'
+          div.appendChild(pre);
+        }
+        console.error(event.data.error)
+        return;
+      }
+      if (event.type === "file-updated") {
+        window.location.reload();
+        return;
+      }
     } catch (e) {
       return;
     }
@@ -31,14 +56,17 @@ setupLiveReload();
 
 function showReloadOverlay(): void {
   const d = document.createElement("div");
+  d.id = "overlay"
   d.style.position = "absolute";
   d.style.width = "100%";
   d.style.height = "100%";
   d.style.color = "white";
   d.style.backgroundColor = "rgba(0,0,0,0.5)";
   d.style.display = "flex";
+  d.style.zIndex = String(Number.MAX_SAFE_INTEGER)
   d.style.justifyContent = "center";
   const h = document.createElement("h1");
+  h.id = "overlay-text"
   h.style.margin = "auto";
   h.innerHTML = "reloading...";
   d.appendChild(h);