@jsenv/server 17.6.4 → 17.6.5

package/dist/client/default_body_4xx_5xx/4xx.html

@@ -94,10 +94,20 @@
           ${css}
         </style>
         <dialog>
-          <p>Connection with server is lost</p>
-          <button autofocus name="reconnect">Retry</button>
+          <p>Connection with server is lost, waiting for it to come back...</p>
+          <button autofocus name="retry">Retry now</button>
         </dialog>`;
       
+      // The peer is a dev server being restarted, not a flaky network: it can be down
+      // for the length of an "npm install" and there is no attempt count past which
+      // giving up would be correct. Attempts space out to RETRY_AFTER_MAX_MS and never
+      // stop; the dialog is a status the page can leave and come back to, so closing
+      // it keeps the loop running and the page still reloads once the server answers.
+      const RETRY_AFTER_MS = 500;
+      const RETRY_AFTER_MAX_MS = 5000;
+      // Most restarts complete before this, so a quick one goes unnoticed.
+      const DIALOG_AFTER_MS = 3000;
+      
       class JsenvAutoreloadOnServerRestart extends HTMLElement {
         constructor({ url } = {}) {
           super();
@@ -105,59 +115,83 @@
           root.innerHTML = html;
       
           const dialog = root.querySelector("dialog");
-          const reconnectButton = dialog.querySelector('button[name="reconnect"]');
+          const retryButton = dialog.querySelector('button[name="retry"]');
       
-          (async () => {
-            const connect = () => {
-              const websocket = new WebSocket(url);
-              const connectedPromise = new Promise((resolve) => {
-                websocket.onerror = () => {
-                  resolve(null);
-                };
-                websocket.onopen = () => {
-                  resolve(websocket);
-                };
-              });
-              return connectedPromise;
-            };
+          const connect = () => {
+            const websocket = new WebSocket(url);
+            return new Promise((resolve) => {
+              websocket.onerror = () => {
+                resolve(null);
+              };
+              websocket.onopen = () => {
+                resolve(websocket);
+              };
+            });
+          };
+      
+          let retryAfter = RETRY_AFTER_MS;
+          let retryTimeout = null;
+          let dialogTimeout = null;
+      
+          const tryToReconnect = async () => {
+            retryTimeout = null;
+            retryButton.disabled = true;
+            const websocket = await connect();
+            if (websocket) {
+              clearTimeout(dialogTimeout);
+              console.info("reconnected to server, reloading the page...");
+              window.location.reload(true);
+              return;
+            }
+            retryButton.disabled = false;
+            retryTimeout = setTimeout(tryToReconnect, retryAfter);
+            const nextRetryAfter = retryAfter * 2;
+            retryAfter =
+              nextRetryAfter > RETRY_AFTER_MAX_MS
+                ? RETRY_AFTER_MAX_MS
+                : nextRetryAfter;
+          };
       
+          const retryNow = () => {
+            if (retryTimeout === null) {
+              return;
+            }
+            clearTimeout(retryTimeout);
+            retryAfter = RETRY_AFTER_MS;
+            tryToReconnect();
+          };
+      
+          const waitForServerToComeBack = () => {
+            console.info("connection to server lost, trying to reconnect");
+            dialogTimeout = setTimeout(() => {
+              dialogTimeout = null;
+              dialog.showModal();
+            }, DIALOG_AFTER_MS);
+            tryToReconnect();
+          };
+      
+          retryButton.onclick = () => {
+            retryNow();
+          };
+          // A tab coming back to the foreground, or the network coming back, are the
+          // moments the server is most likely to be up already; waiting out the
+          // backoff then shows a detached page for no reason.
+          window.addEventListener("online", retryNow);
+          window.addEventListener("focus", retryNow);
+          document.addEventListener("visibilitychange", () => {
+            if (document.visibilityState === "visible") {
+              retryNow();
+            }
+          });
+      
+          (async () => {
             const initialWebSocket = await connect();
             if (!initialWebSocket) {
+              waitForServerToComeBack();
               return;
             }
-            initialWebSocket.onclose = async () => {
-              console.info("connection to server lost, trying to reconnect");
-              const retry = async () => {
-                let attemptCount = 0;
-                let timeToWait = 100;
-                const tryToReconnect = async () => {
-                  const newWebsocket = await connect();
-                  if (newWebsocket) {
-                    dialog.close();
-                    console.info("reconnected to server, reloading the page...");
-                    window.location.reload(true);
-                    return;
-                  }
-                  attemptCount++;
-                  if (attemptCount === 10) {
-                    dialog.showModal();
-                    reconnectButton.onclick = async () => {
-                      reconnectButton.disabled = true;
-                      const previousContext = reconnectButton.textContent;
-                      reconnectButton.textContent = "Retrying...";
-                      await retry();
-                      reconnectButton.textContent = previousContext;
-                      reconnectButton.disabled = false;
-                    };
-                    return;
-                  }
-                  timeToWait += 100;
-                  await new Promise((resolve) => setTimeout(resolve, timeToWait));
-                  await tryToReconnect();
-                };
-                await tryToReconnect();
-              };
-              retry();
+            initialWebSocket.onclose = () => {
+              waitForServerToComeBack();
             };
           })();
         }

package/dist/client/route_inspector/route_inspector.html

@@ -275,10 +275,20 @@
           ${css}
         </style>
         <dialog>
-          <p>Connection with server is lost</p>
-          <button autofocus name="reconnect">Retry</button>
+          <p>Connection with server is lost, waiting for it to come back...</p>
+          <button autofocus name="retry">Retry now</button>
         </dialog>`;
       
+      // The peer is a dev server being restarted, not a flaky network: it can be down
+      // for the length of an "npm install" and there is no attempt count past which
+      // giving up would be correct. Attempts space out to RETRY_AFTER_MAX_MS and never
+      // stop; the dialog is a status the page can leave and come back to, so closing
+      // it keeps the loop running and the page still reloads once the server answers.
+      const RETRY_AFTER_MS = 500;
+      const RETRY_AFTER_MAX_MS = 5000;
+      // Most restarts complete before this, so a quick one goes unnoticed.
+      const DIALOG_AFTER_MS = 3000;
+      
       class JsenvAutoreloadOnServerRestart extends HTMLElement {
         constructor({ url } = {}) {
           super();
@@ -286,59 +296,83 @@
           root.innerHTML = html;
       
           const dialog = root.querySelector("dialog");
-          const reconnectButton = dialog.querySelector('button[name="reconnect"]');
+          const retryButton = dialog.querySelector('button[name="retry"]');
       
-          (async () => {
-            const connect = () => {
-              const websocket = new WebSocket(url);
-              const connectedPromise = new Promise((resolve) => {
-                websocket.onerror = () => {
-                  resolve(null);
-                };
-                websocket.onopen = () => {
-                  resolve(websocket);
-                };
-              });
-              return connectedPromise;
-            };
+          const connect = () => {
+            const websocket = new WebSocket(url);
+            return new Promise((resolve) => {
+              websocket.onerror = () => {
+                resolve(null);
+              };
+              websocket.onopen = () => {
+                resolve(websocket);
+              };
+            });
+          };
+      
+          let retryAfter = RETRY_AFTER_MS;
+          let retryTimeout = null;
+          let dialogTimeout = null;
+      
+          const tryToReconnect = async () => {
+            retryTimeout = null;
+            retryButton.disabled = true;
+            const websocket = await connect();
+            if (websocket) {
+              clearTimeout(dialogTimeout);
+              console.info("reconnected to server, reloading the page...");
+              window.location.reload(true);
+              return;
+            }
+            retryButton.disabled = false;
+            retryTimeout = setTimeout(tryToReconnect, retryAfter);
+            const nextRetryAfter = retryAfter * 2;
+            retryAfter =
+              nextRetryAfter > RETRY_AFTER_MAX_MS
+                ? RETRY_AFTER_MAX_MS
+                : nextRetryAfter;
+          };
       
+          const retryNow = () => {
+            if (retryTimeout === null) {
+              return;
+            }
+            clearTimeout(retryTimeout);
+            retryAfter = RETRY_AFTER_MS;
+            tryToReconnect();
+          };
+      
+          const waitForServerToComeBack = () => {
+            console.info("connection to server lost, trying to reconnect");
+            dialogTimeout = setTimeout(() => {
+              dialogTimeout = null;
+              dialog.showModal();
+            }, DIALOG_AFTER_MS);
+            tryToReconnect();
+          };
+      
+          retryButton.onclick = () => {
+            retryNow();
+          };
+          // A tab coming back to the foreground, or the network coming back, are the
+          // moments the server is most likely to be up already; waiting out the
+          // backoff then shows a detached page for no reason.
+          window.addEventListener("online", retryNow);
+          window.addEventListener("focus", retryNow);
+          document.addEventListener("visibilitychange", () => {
+            if (document.visibilityState === "visible") {
+              retryNow();
+            }
+          });
+      
+          (async () => {
             const initialWebSocket = await connect();
             if (!initialWebSocket) {
+              waitForServerToComeBack();
               return;
             }
-            initialWebSocket.onclose = async () => {
-              console.info("connection to server lost, trying to reconnect");
-              const retry = async () => {
-                let attemptCount = 0;
-                let timeToWait = 100;
-                const tryToReconnect = async () => {
-                  const newWebsocket = await connect();
-                  if (newWebsocket) {
-                    dialog.close();
-                    console.info("reconnected to server, reloading the page...");
-                    window.location.reload(true);
-                    return;
-                  }
-                  attemptCount++;
-                  if (attemptCount === 10) {
-                    dialog.showModal();
-                    reconnectButton.onclick = async () => {
-                      reconnectButton.disabled = true;
-                      const previousContext = reconnectButton.textContent;
-                      reconnectButton.textContent = "Retrying...";
-                      await retry();
-                      reconnectButton.textContent = previousContext;
-                      reconnectButton.disabled = false;
-                    };
-                    return;
-                  }
-                  timeToWait += 100;
-                  await new Promise((resolve) => setTimeout(resolve, timeToWait));
-                  await tryToReconnect();
-                };
-                await tryToReconnect();
-              };
-              retry();
+            initialWebSocket.onclose = () => {
+              waitForServerToComeBack();
             };
           })();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/server",
-  "version": "17.6.4",
+  "version": "17.6.5",
   "type": "module",
   "description": "A modern Node.js HTTP server with declarative routing, content negotiation, and WebSocket support",
   "repository": {
@@ -56,8 +56,8 @@
     "@jsenv/utils": "../../tooling/utils",
     "eventsource": "5.1.1",
     "formidable": "3.5.4",
-    "playwright": "1.62.1",
-    "undici": "8.10.0",
+    "playwright": "1.63.0",
+    "undici": "8.10.2",
     "ws": "8.21.3"
   },
   "publishConfig": {

package/src/plugins/autoreload_on_server_restart/client/autoreload_on_server_restart.js

@@ -26,10 +26,20 @@ const html = /* html */ `<style>
     ${css}
   </style>
   <dialog>
-    <p>Connection with server is lost</p>
-    <button autofocus name="reconnect">Retry</button>
+    <p>Connection with server is lost, waiting for it to come back...</p>
+    <button autofocus name="retry">Retry now</button>
   </dialog>`;
 
+// The peer is a dev server being restarted, not a flaky network: it can be down
+// for the length of an "npm install" and there is no attempt count past which
+// giving up would be correct. Attempts space out to RETRY_AFTER_MAX_MS and never
+// stop; the dialog is a status the page can leave and come back to, so closing
+// it keeps the loop running and the page still reloads once the server answers.
+const RETRY_AFTER_MS = 500;
+const RETRY_AFTER_MAX_MS = 5000;
+// Most restarts complete before this, so a quick one goes unnoticed.
+const DIALOG_AFTER_MS = 3000;
+
 class JsenvAutoreloadOnServerRestart extends HTMLElement {
   constructor({ url } = {}) {
     super();
@@ -37,59 +47,83 @@ class JsenvAutoreloadOnServerRestart extends HTMLElement {
     root.innerHTML = html;
 
     const dialog = root.querySelector("dialog");
-    const reconnectButton = dialog.querySelector('button[name="reconnect"]');
+    const retryButton = dialog.querySelector('button[name="retry"]');
 
-    (async () => {
-      const connect = () => {
-        const websocket = new WebSocket(url);
-        const connectedPromise = new Promise((resolve) => {
-          websocket.onerror = () => {
-            resolve(null);
-          };
-          websocket.onopen = () => {
-            resolve(websocket);
-          };
-        });
-        return connectedPromise;
-      };
+    const connect = () => {
+      const websocket = new WebSocket(url);
+      return new Promise((resolve) => {
+        websocket.onerror = () => {
+          resolve(null);
+        };
+        websocket.onopen = () => {
+          resolve(websocket);
+        };
+      });
+    };
+
+    let retryAfter = RETRY_AFTER_MS;
+    let retryTimeout = null;
+    let dialogTimeout = null;
+
+    const tryToReconnect = async () => {
+      retryTimeout = null;
+      retryButton.disabled = true;
+      const websocket = await connect();
+      if (websocket) {
+        clearTimeout(dialogTimeout);
+        console.info("reconnected to server, reloading the page...");
+        window.location.reload(true);
+        return;
+      }
+      retryButton.disabled = false;
+      retryTimeout = setTimeout(tryToReconnect, retryAfter);
+      const nextRetryAfter = retryAfter * 2;
+      retryAfter =
+        nextRetryAfter > RETRY_AFTER_MAX_MS
+          ? RETRY_AFTER_MAX_MS
+          : nextRetryAfter;
+    };
 
+    const retryNow = () => {
+      if (retryTimeout === null) {
+        return;
+      }
+      clearTimeout(retryTimeout);
+      retryAfter = RETRY_AFTER_MS;
+      tryToReconnect();
+    };
+
+    const waitForServerToComeBack = () => {
+      console.info("connection to server lost, trying to reconnect");
+      dialogTimeout = setTimeout(() => {
+        dialogTimeout = null;
+        dialog.showModal();
+      }, DIALOG_AFTER_MS);
+      tryToReconnect();
+    };
+
+    retryButton.onclick = () => {
+      retryNow();
+    };
+    // A tab coming back to the foreground, or the network coming back, are the
+    // moments the server is most likely to be up already; waiting out the
+    // backoff then shows a detached page for no reason.
+    window.addEventListener("online", retryNow);
+    window.addEventListener("focus", retryNow);
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "visible") {
+        retryNow();
+      }
+    });
+
+    (async () => {
       const initialWebSocket = await connect();
       if (!initialWebSocket) {
+        waitForServerToComeBack();
         return;
       }
-      initialWebSocket.onclose = async () => {
-        console.info("connection to server lost, trying to reconnect");
-        const retry = async () => {
-          let attemptCount = 0;
-          let timeToWait = 100;
-          const tryToReconnect = async () => {
-            const newWebsocket = await connect();
-            if (newWebsocket) {
-              dialog.close();
-              console.info("reconnected to server, reloading the page...");
-              window.location.reload(true);
-              return;
-            }
-            attemptCount++;
-            if (attemptCount === 10) {
-              dialog.showModal();
-              reconnectButton.onclick = async () => {
-                reconnectButton.disabled = true;
-                const previousContext = reconnectButton.textContent;
-                reconnectButton.textContent = "Retrying...";
-                await retry();
-                reconnectButton.textContent = previousContext;
-                reconnectButton.disabled = false;
-              };
-              return;
-            }
-            timeToWait += 100;
-            await new Promise((resolve) => setTimeout(resolve, timeToWait));
-            await tryToReconnect();
-          };
-          await tryToReconnect();
-        };
-        retry();
+      initialWebSocket.onclose = () => {
+        waitForServerToComeBack();
       };
     })();
   }