test(e2e): accumulate runtime errors in the browser and settle on webpack 5.109

Runtime-error accumulation (two errors paging "1 / 2" ↔ "2 / 2") and
unhandled promise rejections now run against real page errors — the
rejection fixture rejects from the page's own script so the event
carries the real reason. Their jsdom equivalents are removed.

The branch also settles on webpack 5.109: the lockfile catches up with
the already-bumped range, and the assertions and console snapshots
adopt 5.109's parse-error format (numbered code-frame gutter, caret
line, and the "File was parsed as module type" note) instead of
normalizing it away.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: bjohansebas

package-lock.json

@@ -5,8 +5,10 @@ exports[`client logging (browser) logging=error keeps errors only 1`] = `
   "[webpack-dev-middleware] bundle has 1 errors",
   "[webpack-dev-middleware] ./app.js 1:7
 Module parse failed: Unexpected token (1:7)
+File was parsed as module type 'javascript/auto'.
 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
-> broken {{{",
+> 1 | broken {{{
+    |        ^",
 ]
 `;
 

test/e2e/__snapshots__/logging.test.js.snap.webpack5

@@ -6,11 +6,15 @@ exports[`error overlay (browser) paginates multiple problems with a counter 1`]
   "[webpack-dev-middleware] bundle has 2 errors",
   "[webpack-dev-middleware] ./a.js 1:7
 Module parse failed: Unexpected token (1:7)
+File was parsed as module type 'javascript/auto'.
 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
-> broken a {{{
+> 1 | broken a {{{
+    |        ^
 ./b.js 1:7
 Module parse failed: Unexpected token (1:7)
+File was parsed as module type 'javascript/auto'.
 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
-> broken b {{{",
+> 1 | broken b {{{
+    |        ^",
 ]
 `;

test/e2e/__snapshots__/overlay.test.js.snap.webpack5

@@ -190,8 +190,8 @@ describe("multi-compiler (browser)", () => {
     const secondPage = await frame.evaluate(() => document.body.textContent);
     const union = firstPage + secondPage;
 
-    expect(union).toContain("> broken app");
-    expect(union).toContain("> broken widget");
+    expect(union).toContain("broken app {{{");
+    expect(union).toContain("broken widget {{{");
   });
 
   it("keeps one bundle's overlay errors while a sibling rebuilds successfully", async () => {

test/e2e/multi-compiler.test.js

@@ -300,7 +300,7 @@ describe("error overlay (browser)", () => {
 
     // Both errors also reach the console, joined into a single error call —
     // snapshotted once the second one's code frame is in.
-    await console_.waitFor("> broken b");
+    await console_.waitFor("broken b {{{");
     expect(normalizeConsole(console_.messages)).toMatchSnapshot();
 
     // One problem at a time, with a counter.
@@ -318,6 +318,77 @@ describe("error overlay (browser)", () => {
     );
   });
 
+  it("accumulates runtime errors and pages between them", async () => {
+    hotApp = await createHotApp({
+      code: `
+        document.getElementById("app").textContent = "v1";
+        globalThis.boom = (message) => {
+          setTimeout(() => {
+            throw new Error(message);
+          }, 0);
+        };
+      `,
+    });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(hotApp.url);
+    await page.waitForFunction(
+      () => document.getElementById("app")?.textContent === "v1",
+    );
+
+    await page.evaluate(() => globalThis.boom("boom-one"));
+    const frame = await waitForOverlay(page);
+    await frame.waitForFunction(() =>
+      document.body.textContent.includes("boom-one"),
+    );
+
+    // A second error joins the pager; the newest one is shown.
+    await page.evaluate(() => globalThis.boom("boom-two"));
+    await frame.waitForFunction(
+      () =>
+        document.body.textContent.includes("boom-two") &&
+        document.body.textContent.includes("2 / 2"),
+    );
+
+    // The previous error stays reachable.
+    await frame.click('[aria-label="Previous problem"]');
+    await frame.waitForFunction(() =>
+      document.body.textContent.includes("boom-one"),
+    );
+    expect(await frame.evaluate(() => document.body.textContent)).toContain(
+      "1 / 2",
+    );
+  });
+
+  it("shows unhandled promise rejections", async () => {
+    hotApp = await createHotApp({
+      // The rejection must originate from the page's own script so the
+      // unhandledrejection event carries the real reason.
+      code: `
+        document.getElementById("app").textContent = "v1";
+        globalThis.rejectSoon = (message) => {
+          setTimeout(() => {
+            Promise.reject(new Error(message));
+          }, 0);
+        };
+      `,
+    });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(hotApp.url);
+    await page.waitForFunction(
+      () => document.getElementById("app")?.textContent === "v1",
+    );
+
+    await page.evaluate(() => globalThis.rejectSoon("rejected-boom"));
+
+    const frame = await waitForOverlay(page);
+
+    expect(await frame.evaluate(() => document.body.textContent)).toContain(
+      "rejected-boom",
+    );
+  });
+
   it("does not appear when overlay=false", async () => {
     hotApp = await createHotApp({ query: "?overlay=false", code: app("v1") });
     ({ page, browser } = await runBrowser());

test/e2e/overlay.test.js

@@ -133,50 +133,6 @@ describe("overlay", () => {
   });
 
   describe("runtime errors", () => {
-    it("shows uncaught errors in the overlay and accumulates them", () => {
-      configureOverlay({ catchRuntimeError: true });
-
-      globalThis.dispatchEvent(
-        new ErrorEvent("error", {
-          error: new Error("boom-runtime"),
-          message: "boom-runtime",
-        }),
-      );
-
-      expect(getOverlay()).not.toBeNull();
-      expect(getCard().textContent).toContain(
-        "Uncaught runtime error: boom-runtime",
-      );
-
-      globalThis.dispatchEvent(
-        new ErrorEvent("error", {
-          error: new Error("boom-2"),
-          message: "boom-2",
-        }),
-      );
-
-      // With pagination (default) the newest runtime error is shown, and the
-      // previous one stays reachable.
-      expect(getCard().textContent).toContain("boom-2");
-      expect(getCard().textContent).toContain("2 / 2");
-
-      getOverlay().contentDocument.dispatchEvent(
-        new KeyboardEvent("keydown", { key: "ArrowLeft" }),
-      );
-      expect(getCard().textContent).toContain("boom-runtime");
-    });
-
-    it("shows unhandled promise rejections", () => {
-      configureOverlay({ catchRuntimeError: true });
-
-      const event = new Event("unhandledrejection");
-      /** @type {EXPECTED_ANY} */ (event).reason = new Error("rejected-boom");
-      globalThis.dispatchEvent(event);
-
-      expect(getOverlay()).not.toBeNull();
-      expect(getCard().textContent).toContain("rejected-boom");
-    });
-
     it("ignores errors already caught by a React error boundary", () => {
       configureOverlay({ catchRuntimeError: true });