feat: add logging for blocked updates when beforeunload is cancelled

.cspell.json

@@ -3,6 +3,7 @@
   "language": "en,en-gb",
   "words": [
     "apos",
+    "beforeunload",
     "camelcase",
     "tapable",
     "sockjs",

client-src/index.js

@@ -287,6 +287,7 @@ const overlay =
  */
 const reloadApp = ({ hot, liveReload }, currentStatus) => {
   if (currentStatus.isUnloading) {
+    log.info("Reload prevented.");
     return;
   }
 

examples/client/beforeunload/hmr-fallback/README.md

@@ -0,0 +1,39 @@
+# client.beforeunload Example
+
+This example reproduces a bug where the `isUnloading` flag gets stuck after canceling the "Leave site?" dialog, blocking HMR/Live Reload.
+
+## Bug Description
+
+When a user cancels the native confirmation dialog triggered by a `beforeunload` event listener, webpack-dev-server's internal `isUnloading` state remains `true`. This causes all subsequent HMR and live reloads to be ignored until manual refresh.
+
+## Configuration
+
+```js
+module.exports = {
+  devServer: {
+    hot: true,
+    liveReload: false, // Intentionally configured to cause HMR fallback
+  },
+};
+```
+
+## How to Reproduce the Bug
+
+### Prerequisites
+
+- Enable "Slow 3G" in browser DevTools Network tab (to make the issue more visible)
+- Open browser console to see webpack-dev-server logs
+
+### Steps
+
+1. Run `npx webpack serve` and open `http://localhost:8080/`
+2. Click **"Add Beforeunload Event"** button
+3. Click **"Reload Page"** button (or press F5/Ctrl+R)
+4. When "Leave site?" dialog appears, click **"Cancel"**
+5. Edit `app.js` file (make any change to trigger rebuild)
+6. **Bug**: Page does not update despite file changes
+
+### Expected vs Actual Behavior
+
+**Expected**: After canceling dialog, file changes should still trigger page updates  
+**Actual**: Page updates are completely blocked until manual refresh

examples/client/beforeunload/hmr-fallback/app.js

@@ -0,0 +1,79 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+// Beforeunload event handler
+function beforeunloadHandler(event) {
+  console.log("[webpack-dev-server] beforeunload event triggered");
+  event.preventDefault();
+  event.returnValue = "";
+  return "";
+}
+
+let isEventRegistered = false;
+
+// Create add event button
+const addEventButton = document.createElement("button");
+addEventButton.textContent = "Add Beforeunload Event";
+addEventButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px;";
+addEventButton.addEventListener("click", function () {
+  if (!isEventRegistered) {
+    window.addEventListener("beforeunload", beforeunloadHandler);
+    isEventRegistered = true;
+    updateStatus();
+    console.log("[webpack-dev-server] beforeunload event added");
+  }
+});
+
+// Create remove event button
+const removeEventButton = document.createElement("button");
+removeEventButton.textContent = "Remove Beforeunload Event";
+removeEventButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #dc3545; color: white; border: none; border-radius: 4px;";
+removeEventButton.addEventListener("click", function () {
+  if (isEventRegistered) {
+    window.removeEventListener("beforeunload", beforeunloadHandler);
+    isEventRegistered = false;
+    updateStatus();
+    console.log("[webpack-dev-server] beforeunload event removed");
+  }
+});
+
+// Create reload button
+const reloadButton = document.createElement("button");
+reloadButton.textContent = "Reload Page";
+reloadButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px;";
+reloadButton.addEventListener("click", function () {
+  console.log("[webpack-dev-server] page reload triggered");
+  window.location.reload();
+});
+
+// Create status display
+const statusDisplay = document.createElement("div");
+statusDisplay.style.cssText =
+  "margin: 10px; padding: 10px; border: 2px solid #ccc; border-radius: 4px; font-weight: bold;";
+
+function updateStatus() {
+  statusDisplay.textContent = isEventRegistered
+    ? "Status: Beforeunload event is ACTIVE - Page exit will be blocked"
+    : "Status: Beforeunload event is INACTIVE - Page exit will not be blocked";
+  statusDisplay.style.backgroundColor = isEventRegistered
+    ? "#d4edda"
+    : "#f8d7da";
+  statusDisplay.style.borderColor = isEventRegistered ? "#28a745" : "#dc3545";
+}
+
+target.classList.add("pass");
+target.innerHTML = "Beforeunload Event Controller";
+target.appendChild(document.createElement("br"));
+target.appendChild(document.createElement("br"));
+target.appendChild(statusDisplay);
+target.appendChild(document.createElement("br"));
+target.appendChild(addEventButton);
+target.appendChild(removeEventButton);
+target.appendChild(reloadButton);
+
+// Initialize status
+updateStatus();

examples/client/beforeunload/hmr-fallback/webpack.config.js

@@ -0,0 +1,14 @@
+"use strict";
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require("../../../util");
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    hot: true,
+    liveReload: false,
+  },
+});

examples/client/beforeunload/live-reload/README.md

@@ -0,0 +1,39 @@
+# client.beforeunload Example
+
+This example reproduces a bug where the `isUnloading` flag gets stuck after canceling the "Leave site?" dialog, blocking Live Reload updates.
+
+## Bug Description
+
+When a user cancels the native confirmation dialog triggered by a `beforeunload` event listener, webpack-dev-server's internal `isUnloading` state remains `true`. This causes all subsequent Live Reload updates to be ignored until manual refresh.
+
+## Configuration
+
+```js
+module.exports = {
+  devServer: {
+    hot: false,
+    liveReload: true, // Test Live Reload scenario
+  },
+};
+```
+
+## How to Reproduce the Bug
+
+### Prerequisites
+
+- Enable "Slow 3G" in browser DevTools Network tab (to make the issue more visible)
+- Open browser console to see webpack-dev-server logs
+
+### Steps
+
+1. Run `npx webpack serve` and open `http://localhost:8080/`
+2. Click **"Add Beforeunload Event"** button
+3. Click **"Reload Page"** button (or press F5/Ctrl+R)
+4. When "Leave site?" dialog appears, click **"Cancel"**
+5. Edit `app.js` file (make any change to trigger rebuild)
+6. **Bug**: Page does not update despite file changes
+
+### Expected vs Actual Behavior
+
+**Expected**: After canceling dialog, file changes should still trigger Live Reload updates  
+**Actual**: Live Reload updates are completely blocked until manual refresh

examples/client/beforeunload/live-reload/app.js

@@ -0,0 +1,79 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+// Beforeunload event handler
+function beforeunloadHandler(event) {
+  console.log("[webpack-dev-server] beforeunload event triggered");
+  event.preventDefault();
+  event.returnValue = "";
+  return "";
+}
+
+let isEventRegistered = false;
+
+// Create add event button
+const addEventButton = document.createElement("button");
+addEventButton.textContent = "Add Beforeunload Event";
+addEventButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px;";
+addEventButton.addEventListener("click", function () {
+  if (!isEventRegistered) {
+    window.addEventListener("beforeunload", beforeunloadHandler);
+    isEventRegistered = true;
+    updateStatus();
+    console.log("[webpack-dev-server] beforeunload event added");
+  }
+});
+
+// Create remove event button
+const removeEventButton = document.createElement("button");
+removeEventButton.textContent = "Remove Beforeunload Event";
+removeEventButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #dc3545; color: white; border: none; border-radius: 4px;";
+removeEventButton.addEventListener("click", function () {
+  if (isEventRegistered) {
+    window.removeEventListener("beforeunload", beforeunloadHandler);
+    isEventRegistered = false;
+    updateStatus();
+    console.log("[webpack-dev-server] beforeunload event removed");
+  }
+});
+
+// Create reload button
+const reloadButton = document.createElement("button");
+reloadButton.textContent = "Reload Page";
+reloadButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px;";
+reloadButton.addEventListener("click", function () {
+  console.log("[webpack-dev-server] page reload triggered");
+  window.location.reload();
+});
+
+// Create status display
+const statusDisplay = document.createElement("div");
+statusDisplay.style.cssText =
+  "margin: 10px; padding: 10px; border: 2px solid #ccc; border-radius: 4px; font-weight: bold;";
+
+function updateStatus() {
+  statusDisplay.textContent = isEventRegistered
+    ? "Status: Beforeunload event is ACTIVE - Page exit will be blocked"
+    : "Status: Beforeunload event is INACTIVE - Page exit will not be blocked";
+  statusDisplay.style.backgroundColor = isEventRegistered
+    ? "#d4edda"
+    : "#f8d7da";
+  statusDisplay.style.borderColor = isEventRegistered ? "#28a745" : "#dc3545";
+}
+
+target.classList.add("pass");
+target.innerHTML = "Beforeunload Event Controller";
+target.appendChild(document.createElement("br"));
+target.appendChild(document.createElement("br"));
+target.appendChild(statusDisplay);
+target.appendChild(document.createElement("br"));
+target.appendChild(addEventButton);
+target.appendChild(removeEventButton);
+target.appendChild(reloadButton);
+
+// Initialize status
+updateStatus();

examples/client/beforeunload/live-reload/webpack.config.js

@@ -0,0 +1,14 @@
+"use strict";
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require("../../../util");
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    hot: false,
+    liveReload: true,
+  },
+});