fix(client): prevent overlay from closing immediately on runtime error at initial load

client-src/index.js

@@ -45,6 +45,7 @@ import sendMessage from "./utils/sendMessage.js";
  * @property {boolean} isUnloading true when unloaded, otherwise false
  * @property {string} currentHash current hash
  * @property {string=} previousHash previous hash
+ * @property {boolean} hasRuntimeError true when a runtime error occurred
  */
 
 /**
@@ -84,8 +85,15 @@ const decodeOverlayOptions = (overlayOptions) => {
 const status = {
   isUnloading: false,
   currentHash: __webpack_hash__,
+  hasRuntimeError: false,
 };
+window.addEventListener("error", () => {
+  status.hasRuntimeError = true;
+});
 
+window.addEventListener("unhandledrejection", () => {
+  status.hasRuntimeError = true;
+});
 /**
  * @returns {string} current script source
  */
@@ -403,8 +411,7 @@ const onSocketMessage = {
   invalid() {
     log.info("App updated. Recompiling...");
 
-    // Fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
-    if (options.overlay) {
+    if (options.overlay && !status.hasRuntimeError) {
       overlay.send({ type: "DISMISS" });
     }
 
@@ -473,7 +480,7 @@ const onSocketMessage = {
   "still-ok": function stillOk() {
     log.info("Nothing changed.");
 
-    if (options.overlay) {
+    if (options.overlay && !status.hasRuntimeError) {
       overlay.send({ type: "DISMISS" });
     }
 
@@ -482,6 +489,8 @@ const onSocketMessage = {
   ok() {
     sendMessage("Ok");
 
+    status.hasRuntimeError = false;
+
     if (options.overlay) {
       overlay.send({ type: "DISMISS" });
     }

test/e2e/overlay-initial-runtime-error.test.js

@@ -0,0 +1,49 @@
+"use strict";
+
+const path = require("node:path");
+const puppeteer = require("puppeteer");
+const webpack = require("webpack");
+const WebpackDevServer = require("../../lib/Server");
+
+describe("overlay runtime error", () => {
+  let browser;
+  let page;
+  let server;
+
+  beforeAll(async () => {
+    const config = {
+      mode: "development",
+      entry: path.resolve(__dirname, "../fixtures/overlay-runtime-error.js"),
+    };
+
+    const compiler = webpack(config);
+
+    server = new WebpackDevServer(
+      {
+        port: 8081,
+        client: {
+          overlay: true,
+        },
+      },
+      compiler,
+    );
+
+    await server.start();
+
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+    await server.stop();
+  });
+
+  it("should keep overlay visible on runtime error during initial load", async () => {
+    await page.goto("http://localhost:8081");
+
+    const overlay = await page.$("webpack-dev-server-client-overlay");
+
+    expect(overlay).not.toBeNull();
+  });
+});

test/fixtures/overlay-runtime-error.js

@@ -0,0 +1 @@
+throw new Error("Initial runtime error");