show error message when there is compilation error

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);

packages/web-util/src/serve.ts

@@ -38,7 +38,6 @@ export async function serve(opts: {
 
   app.use(PATHS.APP, express.static(opts.folder));
   const server = https.createServer(httpServerOptions, app);
-  server.listen(opts.port);
   logger.info(`serving ${opts.folder} on ${opts.port}`);
   logger.info(`  ${PATHS.APP}: application`);
   logger.info(`  ${PATHS.EXAMPLE}: examples`);
@@ -74,21 +73,28 @@ export async function serve(opts: {
     logger.info(`watching ${watchingFolder} for change`);
 
     chokidar.watch(watchingFolder).on("change", (path, stats) => {
-      logger.trace(`changed ${path}`);
+      logger.info(`changed ${path}`);
 
-      sendToAllClients({ type: "file-updated-start", data: { path } });
       if (opts.onUpdate) {
+        sendToAllClients({ type: "file-updated-start", data: { path } });
         opts.onUpdate().then((result) => {
           sendToAllClients({
             type: "file-updated-done",
             data: { path, result },
           });
+        }).catch((error) => {
+          sendToAllClients({
+            type: "file-updated-failed",
+            data: { path, error },
+          });
         });
       } else {
-        sendToAllClients({ type: "file-change-done", data: { path } });
+        sendToAllClients({ type: "file-change", data: { path } });
       }
     });
 
+    if (opts.onUpdate) opts.onUpdate()
+
     app.get(PATHS.EXAMPLE, function (req: any, res: any) {
       res.set("Content-Type", "text/html");
       res.send(
@@ -107,5 +113,7 @@ export async function serve(opts: {
     app.get(PATHS.NOTIFY, function (req: any, res: any) {
       res.send("ok");
     });
+
+    server.listen(opts.port);
   }
 }