diff --git a/client-src/overlay.js b/client-src/overlay.js index c4ceb97e5b..6daec9e009 100644 --- a/client-src/overlay.js +++ b/client-src/overlay.js @@ -137,6 +137,7 @@ function createMachine({ states, context, initial }, { actions }) { } } }, + getContext: () => currentContext, }; } @@ -149,15 +150,16 @@ function createMachine({ states, context, initial }, { actions }) { /** * @typedef {Object} CreateOverlayMachineOptions - * @property {(data: ShowOverlayData) => void} showOverlay + * @property {(data: ShowOverlayData, currentIndex: number) => void} showOverlay * @property {() => void} hideOverlay + * @property {(direction: 'prev' | 'next') => void} navigateErrors */ /** * @param {CreateOverlayMachineOptions} options */ const createOverlayMachine = (options) => { - const { hideOverlay, showOverlay } = options; + const { hideOverlay, showOverlay, navigateErrors } = options; return createMachine( { @@ -166,6 +168,7 @@ const createOverlayMachine = (options) => { level: "error", messages: [], messageSource: "build", + currentErrorIndex: 0, }, states: { hidden: { @@ -190,6 +193,10 @@ const createOverlayMachine = (options) => { target: "displayBuildError", actions: ["appendMessages", "showOverlay"], }, + NAVIGATE: { + target: "displayBuildError", + actions: ["navigateErrors"], + }, }, }, displayRuntimeError: { @@ -206,6 +213,10 @@ const createOverlayMachine = (options) => { target: "displayBuildError", actions: ["setMessages", "showOverlay"], }, + NAVIGATE: { + target: "displayRuntimeError", + actions: ["navigateErrors"], + }, }, }, }, @@ -217,6 +228,7 @@ const createOverlayMachine = (options) => { messages: [], level: "error", messageSource: "build", + currentErrorIndex: 0, }; }, appendMessages: (context, event) => { @@ -224,6 +236,7 @@ const createOverlayMachine = (options) => { messages: context.messages.concat(event.messages), level: event.level || context.level, messageSource: event.type === "RUNTIME_ERROR" ? "runtime" : "build", + currentErrorIndex: context.currentErrorIndex, }; }, setMessages: (context, event) => { @@ -231,10 +244,30 @@ const createOverlayMachine = (options) => { messages: event.messages, level: event.level || context.level, messageSource: event.type === "RUNTIME_ERROR" ? "runtime" : "build", + currentErrorIndex: 0, + }; + }, + navigateErrors: (context, event) => { + const totalErrors = context.messages.length; + let newIndex = context.currentErrorIndex; + + if (event.direction === "next") { + newIndex = (newIndex + 1) % totalErrors; + } else if (event.direction === "prev") { + newIndex = (newIndex - 1 + totalErrors) % totalErrors; + } + + navigateErrors(event.direction); + + return { + currentErrorIndex: newIndex, }; }, hideOverlay, - showOverlay, + showOverlay: (context) => { + showOverlay(context, context.currentErrorIndex); + return context; + }, }, }, ); @@ -289,18 +322,7 @@ const listenToUnhandledRejection = (callback) => { }; }; -// Styles are inspired by `react-error-overlay` - -const msgStyles = { - error: { - backgroundColor: "rgba(206, 17, 38, 0.1)", - color: "#fccfcf", - }, - warning: { - backgroundColor: "rgba(251, 245, 180, 0.1)", - color: "#fbf5b4", - }, -}; +// Updated styles to match the new design const iframeStyle = { position: "fixed", top: 0, @@ -312,6 +334,7 @@ const iframeStyle = { border: "none", "z-index": 9999999999, }; + const containerStyle = { position: "fixed", boxSizing: "border-box", @@ -321,50 +344,154 @@ const containerStyle = { bottom: 0, width: "100vw", height: "100vh", - fontSize: "large", - padding: "2rem 2rem 4rem 2rem", - lineHeight: "1.2", - whiteSpace: "pre-wrap", overflow: "auto", - backgroundColor: "rgba(0, 0, 0, 0.9)", + backgroundColor: "#1a1117", color: "white", + fontFamily: "sans-serif", + display: "flex", + flexDirection: "column", + minHeight: "100vh", }; + const headerStyle = { - color: "#e83b46", - fontSize: "2em", - whiteSpace: "pre-wrap", + backgroundColor: "#8b1538", + color: "white", + padding: "10px 20px", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + boxShadow: "0 2px 4px rgba(0,0,0,0.3)", + flexShrink: 0, + flexWrap: "wrap", + gap: "10px", + minHeight: "60px", +}; + +const logoContainerStyle = { + display: "flex", + alignItems: "center", + gap: "15px", + flex: "1 1 auto", + minWidth: "200px", + overflow: "visible", +}; + +const titleStyle = { + fontSize: "clamp(18px, 4vw, 24px)", + fontWeight: "normal", + margin: 0, + lineHeight: "1.2", +}; + +const navigationStyle = { + display: "flex", + alignItems: "center", + padding: "10px 20px", + justifyContent: "space-between", + gap: "10px", + backgroundColor: "transparent", + flexWrap: "wrap", + flexShrink: 0, + minHeight: "50px", +}; + +const navButtonStyle = { + backgroundColor: "#27272A", + color: "white", + border: "none", + padding: "8px 12px", + cursor: "pointer", + borderRadius: "2px", fontFamily: "sans-serif", - margin: "0 2rem 2rem 0", - flex: "0 0 auto", - maxHeight: "50%", - overflow: "auto", + fontSize: "clamp(12px, 3vw, 14px)", + display: "flex", + alignItems: "center", + gap: "5px", + minHeight: "36px", + whiteSpace: "nowrap", }; + const dismissButtonStyle = { color: "#ffffff", - lineHeight: "1rem", - fontSize: "1.5rem", - padding: "1rem", + padding: "6px 12px", cursor: "pointer", - position: "absolute", - right: 0, - top: 0, backgroundColor: "transparent", border: "none", + fontSize: "clamp(12px, 3vw, 14px)", + fontWeight: "bold", + display: "flex", + alignItems: "center", + flexShrink: 0, + whiteSpace: "nowrap", +}; + +const keyboardShortcutStyle = { + backgroundColor: "#B19DA3", + color: "#8b1538", + padding: "2px 5px", + borderRadius: "2px", + marginLeft: "5px", + fontSize: "clamp(10px, 2.5vw, 12px)", + fontWeight: "bold", }; -const msgTypeStyle = { + +const navKeyboardShortcutStyle = { + backgroundColor: "#3F3F46", + color: "white", + padding: "2px 6px", + borderRadius: "2px", + fontSize: "clamp(10px, 2.5vw, 12px)", + fontWeight: "normal", +}; + +const errorContentStyle = { + padding: "15px 20px", + flex: "1 1 auto", + overflow: "auto", + minHeight: 0, +}; + +const errorTypeStyle = { color: "#e83b46", - fontSize: "1.2em", - marginBottom: "1rem", + fontSize: "clamp(16px, 4vw, 20px)", + marginBottom: "15px", fontFamily: "sans-serif", + lineHeight: "1.3", + wordBreak: "break-word", }; -const msgTextStyle = { + +const errorMessageStyle = { lineHeight: "1.5", - fontSize: "1rem", + fontSize: "clamp(14px, 3.5vw, 16px)", fontFamily: "Menlo, Consolas, monospace", + whiteSpace: "pre-wrap", + wordBreak: "break-word", + overflowWrap: "break-word", }; -// ANSI HTML +const footerStyle = { + padding: "15px 20px", + color: "#aaa", + fontSize: "clamp(10px, 2.5vw, 12px)", + borderTop: "1px solid #333", + flexShrink: 0, + lineHeight: "1.4", +}; + +const logoStyle = { + width: "60px", + height: "60px", + marginRight: "15px", + flexShrink: 0, +}; + +const navButtonGroupStyle = { + display: "flex", + alignItems: "center", + gap: "10px", +}; +// ANSI HTML const colors = { reset: ["transparent", "transparent"], black: "181818", @@ -438,14 +565,23 @@ const createOverlay = (options) => { /** @type {HTMLDivElement | null | undefined} */ let containerElement; /** @type {HTMLDivElement | null | undefined} */ - let headerElement; + let errorContentElement; + /** @type {HTMLDivElement | null | undefined} */ + let navigationElement; + /** @type {HTMLDivElement | null | undefined} */ + let currentErrorCountElement; + /** @type {HTMLHeadingElement | null | undefined} */ + let titleElement; /** @type {Array<(element: HTMLDivElement) => void>} */ let onLoadQueue = []; /** @type {TrustedTypePolicy | undefined} */ let overlayTrustedTypesPolicy; + /** @type {Array<{ message: any, type: string }>} */ + let currentMessages = []; + /** @type {number} */ + let currentErrorIndex = 0; /** - * * @param {HTMLElement} element * @param {CSSStyleDeclaration} style */ @@ -455,6 +591,34 @@ const createOverlay = (options) => { }); } + /** + * Creates and returns an SVG element for the logo + * @returns {HTMLElement} + */ + function createLogo() { + const logoSvg = ` + + + + + `; + + const logoContainer = document.createElement("div"); + logoContainer.innerHTML = overlayTrustedTypesPolicy + ? overlayTrustedTypesPolicy.createHTML(logoSvg) + : logoSvg; + applyStyle(logoContainer, logoStyle); + return logoContainer; + } + + const overlayService = createOverlayMachine({ + showOverlay: (context, errorIndex) => { + show(context, errorIndex, options.trustedTypesPolicyName); + }, + hideOverlay: hide, + navigateErrors, + }); + /** * @param {string | null} trustedTypesPolicyName */ @@ -475,50 +639,127 @@ const createOverlay = (options) => { applyStyle(iframeContainerElement, iframeStyle); iframeContainerElement.onload = () => { - const contentElement = - /** @type {Document} */ - ( - /** @type {HTMLIFrameElement} */ - (iframeContainerElement).contentDocument - ).createElement("div"); - containerElement = - /** @type {Document} */ - ( - /** @type {HTMLIFrameElement} */ - (iframeContainerElement).contentDocument - ).createElement("div"); - - contentElement.id = "webpack-dev-server-client-overlay-div"; - applyStyle(contentElement, containerStyle); - - headerElement = document.createElement("div"); - - headerElement.innerText = "Compiled with problems:"; + const doc = /** @type {Document} */ ( + /** @type {HTMLIFrameElement} */ (iframeContainerElement) + .contentDocument + ); + + containerElement = doc.createElement("div"); + applyStyle(containerElement, containerStyle); + + // Create header + const headerElement = doc.createElement("div"); applyStyle(headerElement, headerStyle); - const closeButtonElement = document.createElement("button"); + // Logo and title + const logoContainer = doc.createElement("div"); + applyStyle(logoContainer, logoContainerStyle); + + const logo = createLogo(); + logoContainer.appendChild(logo); - applyStyle(closeButtonElement, dismissButtonStyle); + titleElement = doc.createElement("h1"); + titleElement.textContent = "Compiled with problems:"; + applyStyle(titleElement, titleStyle); + logoContainer.appendChild(titleElement); - closeButtonElement.innerText = "×"; - closeButtonElement.ariaLabel = "Dismiss"; - closeButtonElement.addEventListener("click", () => { - // eslint-disable-next-line no-use-before-define + headerElement.appendChild(logoContainer); + + // Dismiss button + const dismissContainer = doc.createElement("div"); + const dismissButton = doc.createElement("button"); + dismissButton.textContent = "DISMISS"; + applyStyle(dismissButton, dismissButtonStyle); + dismissButton.addEventListener("click", () => { overlayService.send({ type: "DISMISS" }); }); - contentElement.appendChild(headerElement); - contentElement.appendChild(closeButtonElement); - contentElement.appendChild(containerElement); + const escKeyElement = doc.createElement("span"); + escKeyElement.textContent = "ESC"; + applyStyle(escKeyElement, keyboardShortcutStyle); + dismissButton.appendChild(escKeyElement); + + dismissContainer.appendChild(dismissButton); + headerElement.appendChild(dismissContainer); + + containerElement.appendChild(headerElement); + + // Navigation bar + navigationElement = doc.createElement("div"); + applyStyle(navigationElement, navigationStyle); + + currentErrorCountElement = doc.createElement("div"); + currentErrorCountElement.className = "error-counter"; + currentErrorCountElement.textContent = "ERROR 0/0"; + navigationElement.appendChild(currentErrorCountElement); + + const navButtonGroup = doc.createElement("div"); + applyStyle(navButtonGroup, navButtonGroupStyle); + + // Previous button + const prevButton = doc.createElement("button"); + applyStyle(prevButton, navButtonStyle); + + const prevShortcut = doc.createElement("span"); + prevShortcut.textContent = "⌘ + ←"; + applyStyle(prevShortcut, navKeyboardShortcutStyle); - /** @type {Document} */ - ( - /** @type {HTMLIFrameElement} */ - (iframeContainerElement).contentDocument - ).body.appendChild(contentElement); + prevButton.appendChild(prevShortcut); + prevButton.appendChild(doc.createTextNode(" PREV")); + + prevButton.addEventListener("click", () => { + overlayService.send({ type: "NAVIGATE", direction: "prev" }); + }); + + // Next button + const nextButton = doc.createElement("button"); + applyStyle(nextButton, navButtonStyle); + + nextButton.appendChild(doc.createTextNode("NEXT ")); + + const nextShortcut = doc.createElement("span"); + nextShortcut.textContent = "⌘ + →"; + applyStyle(nextShortcut, navKeyboardShortcutStyle); + + nextButton.appendChild(nextShortcut); + + nextButton.addEventListener("click", () => { + overlayService.send({ type: "NAVIGATE", direction: "next" }); + }); + + navButtonGroup.appendChild(prevButton); + navButtonGroup.appendChild(nextButton); + navigationElement.appendChild(navButtonGroup); + + containerElement.appendChild(navigationElement); + + // Error content area + errorContentElement = doc.createElement("div"); + applyStyle(errorContentElement, errorContentStyle); + containerElement.appendChild(errorContentElement); + + // Footer + const footerElement = doc.createElement("div"); + footerElement.textContent = + "This screen is only visible in development only. It will not appear in production. Open your browser console to further inspect this error."; + applyStyle(footerElement, footerStyle); + containerElement.appendChild(footerElement); + + doc.body.appendChild(containerElement); + + // Add keyboard listeners + doc.addEventListener("keydown", (e) => { + if (e.key === "Escape") { + overlayService.send({ type: "DISMISS" }); + } else if (e.key === "ArrowLeft" && (e.metaKey || e.ctrlKey)) { + overlayService.send({ type: "NAVIGATE", direction: "prev" }); + } else if (e.key === "ArrowRight" && (e.metaKey || e.ctrlKey)) { + overlayService.send({ type: "NAVIGATE", direction: "next" }); + } + }); onLoadQueue.forEach((onLoad) => { - onLoad(/** @type {HTMLDivElement} */ (contentElement)); + onLoad(containerElement); }); onLoadQueue = []; @@ -535,12 +776,8 @@ const createOverlay = (options) => { */ function ensureOverlayExists(callback, trustedTypesPolicyName) { if (containerElement) { - containerElement.innerHTML = overlayTrustedTypesPolicy - ? overlayTrustedTypesPolicy.createHTML("") - : ""; // Everything is ready, call the callback right away. callback(containerElement); - return; } @@ -553,83 +790,141 @@ const createOverlay = (options) => { createContainer(trustedTypesPolicyName); } - // Successful compilation. + /** + * Navigates between errors + * @param {string} direction 'prev' or 'next' + */ + function navigateErrors(direction) { + if (!currentMessages.length) return; + + if (direction === "next") { + currentErrorIndex = (currentErrorIndex + 1) % currentMessages.length; + } else { + currentErrorIndex = + (currentErrorIndex - 1 + currentMessages.length) % + currentMessages.length; + } + + displayCurrentError(); + } + + /** + * Displays the current error based on the currentErrorIndex + */ + function displayCurrentError() { + if (!errorContentElement || !currentMessages.length) return; + + const message = currentMessages[currentErrorIndex]; + const { header, body } = formatProblem(message.type, message.message); + + // Update the error counter + if (currentErrorCountElement) { + currentErrorCountElement.textContent = `ERROR ${currentErrorIndex + 1}/${ + currentMessages.length + }`; + } + + // Clear previous content + errorContentElement.innerHTML = overlayTrustedTypesPolicy + ? overlayTrustedTypesPolicy.createHTML("") + : ""; + + // Create type element + const typeElement = document.createElement("div"); + typeElement.innerText = header; + applyStyle(typeElement, errorTypeStyle); + + if ( + typeof message.message === "object" && + message.message.moduleIdentifier + ) { + applyStyle(typeElement, { cursor: "pointer" }); + typeElement.setAttribute("data-can-open", true); + typeElement.addEventListener("click", () => { + fetch( + `/webpack-dev-server/open-editor?fileName=${message.message.moduleIdentifier}`, + ); + }); + } + + // Create message element + const messageTextNode = document.createElement("div"); + messageTextNode.className = "error-message"; + const text = ansiHTML(encode(body)); + messageTextNode.innerHTML = overlayTrustedTypesPolicy + ? overlayTrustedTypesPolicy.createHTML(text) + : text; + applyStyle(messageTextNode, errorMessageStyle); + + errorContentElement.appendChild(typeElement); + errorContentElement.appendChild(messageTextNode); + } + + // Hide overlay function hide() { if (!iframeContainerElement) { return; } - // Clean up and reset internal state. document.body.removeChild(iframeContainerElement); iframeContainerElement = null; containerElement = null; + errorContentElement = null; + navigationElement = null; + currentErrorCountElement = null; + titleElement = null; + currentMessages = []; + currentErrorIndex = 0; } - // Compilation with errors (e.g. syntax error or missing modules). /** - * @param {string} type - * @param {Array} messages + * Show overlay with errors + * @param {ShowOverlayData} data + * @param {number} errorIndex * @param {string | null} trustedTypesPolicyName - * @param {'build' | 'runtime'} messageSource */ - function show(type, messages, trustedTypesPolicyName, messageSource) { - ensureOverlayExists(() => { - headerElement.innerText = - messageSource === "runtime" - ? "Uncaught runtime errors:" - : "Compiled with problems:"; - - messages.forEach((message) => { - const entryElement = document.createElement("div"); - const msgStyle = - type === "warning" ? msgStyles.warning : msgStyles.error; - applyStyle(entryElement, { - ...msgStyle, - padding: "1rem 1rem 1.5rem 1rem", - }); - - const typeElement = document.createElement("div"); - const { header, body } = formatProblem(type, message); + function show(data, errorIndex, trustedTypesPolicyName) { + const { level = "error", messages, messageSource } = data; - typeElement.innerText = header; - applyStyle(typeElement, msgTypeStyle); - - if (message.moduleIdentifier) { - applyStyle(typeElement, { cursor: "pointer" }); - // element.dataset not supported in IE - typeElement.setAttribute("data-can-open", true); - typeElement.addEventListener("click", () => { - fetch( - `/webpack-dev-server/open-editor?fileName=${message.moduleIdentifier}`, - ); - }); + ensureOverlayExists(() => { + // Update the title based on message source + if (titleElement) { + titleElement.textContent = + messageSource === "runtime" + ? "Runtime Error" + : "Compiled with problems:"; + + if (containerElement && containerElement.firstChild) { + containerElement.style.backgroundColor = + messageSource === "runtime" ? "#1a1117" : "#18181B"; + containerElement.firstChild.style.backgroundColor = + messageSource === "runtime" ? "#8b1538" : "#18181B"; + + // Update ESC button color to match header background + const escElement = containerElement.querySelector("span"); + if (escElement && escElement.textContent === "ESC") { + escElement.style.color = + messageSource === "runtime" ? "#8b1538" : "#18181B"; + } } + } - // Make it look similar to our terminal. - const text = ansiHTML(encode(body)); - const messageTextNode = document.createElement("div"); - applyStyle(messageTextNode, msgTextStyle); - - messageTextNode.innerHTML = overlayTrustedTypesPolicy - ? overlayTrustedTypesPolicy.createHTML(text) - : text; + // Store messages for navigation + currentMessages = messages.map((message) => { + return { + type: level, + message, + }; + }); - entryElement.appendChild(typeElement); - entryElement.appendChild(messageTextNode); + currentErrorIndex = Math.min(errorIndex, currentMessages.length - 1); - /** @type {HTMLDivElement} */ - (containerElement).appendChild(entryElement); - }); + // Display the current error + displayCurrentError(); }, trustedTypesPolicyName); } - const overlayService = createOverlayMachine({ - showOverlay: ({ level = "error", messages, messageSource }) => - show(level, messages, options.trustedTypesPolicyName, messageSource), - hideOverlay: hide, - }); - if (options.catchRuntimeError) { /** * @param {Error | undefined} error diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 index 04a4b7bb9a..b7cf8b6bb5 100644 --- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 +++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 @@ -35,87 +35,235 @@ exports[`overlay should not show an error when "client.overlay.errors" is "false exports[`overlay should not show initially, then show on an error and allow to close: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+
-
ESC + +
+
+
+
ERROR 1/1
+
+
+ ⌘ + ← + PREV +
+
+
+
+ ERROR in ./foo.js 1:1 +
+
+ Module parse failed: Unterminated template (1:1) 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 > \`;
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -161,86 +309,234 @@ exports[`overlay should not show initially, then show on an error and allow to c exports[`overlay should not show initially, then show on an error, then hide on fix: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+
-
ESC + +
+
+
+
ERROR 1/1
+
+
+ ⌘ + ← + PREV +
+
+
+
+ ERROR in ./foo.js 1:1
+
+ Module parse failed: Unterminated template (1:1) 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 > \`; +
+
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error.
@@ -287,87 +583,235 @@ exports[`overlay should not show initially, then show on an error, then hide on exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+
-
ESC + +
+
+
+
ERROR 1/1
+
+
+ ⌘ + ← + PREV +
+
+
+
+ ERROR in ./foo.js 1:1 +
+
+ Module parse failed: Unterminated template (1:1) 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 > \`;
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -376,104 +820,252 @@ exports[`overlay should not show initially, then show on an error, then show oth exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: overlay html 2`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+
-
ESC + +
+
+
+
ERROR 1/1
+
+
+ ⌘ + ← + PREV
- - -" -`; - -exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html after fix error 1`] = ` -" -

webpack-dev-server is running...

- - -" -`; - -exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html initial 1`] = ` -" -

webpack-dev-server is running...

- +
+
+ ERROR in ./foo.js 1:1 +
+
+ Module parse failed: Unterminated template (1:1) 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 > \`;a +
+
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
+ + +" +`; + +exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html after fix error 1`] = ` +" +

webpack-dev-server is running...

+ + +" +`; + +exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html initial 1`] = ` +" +

webpack-dev-server is running...

+ " `; @@ -531,82 +1123,230 @@ exports[`overlay should not show overlay when Trusted Types are enabled, but pol exports[`overlay should show a warning after invalidation: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ WARNING +
+
+ Warning from compilation
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -636,109 +1376,230 @@ exports[`overlay should show a warning after invalidation: page html 1`] = ` exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

- ERROR -

-
+
+
+
+ DISMISSESC +
-
-
+
+
ERROR 1/2
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ ERROR +
+
+ <strong>strong</strong>
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -768,190 +1629,230 @@ exports[`overlay should show a warning and error for initial compilation and pro exports[`overlay should show a warning and error for initial compilation: overlay html 1`] = ` "
- Compiled with problems: -
- -
- ERROR + + + + +
-
- Warning from compilation -
+ Compiled with problems: +
-
-
- ERROR -
-
+
+ DISMISSESC +
-
-
+
+
ERROR 1/5
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → +
+
+
-
- ERROR -
-
- Error from compilation. Can't find 'test' module. -
+ ERROR
-
- ERROR -
-
- Error from compilation. Can't find 'test' module. -
+ Warning from compilation
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -981,82 +1882,230 @@ exports[`overlay should show a warning and error for initial compilation: page h exports[`overlay should show a warning and hide them after closing connection: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ WARNING +
+
+ Warning from compilation
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -1094,82 +2143,230 @@ exports[`overlay should show a warning and hide them after closing connection: p exports[`overlay should show a warning for initial compilation: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ WARNING +
+
+ Warning from compilation
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -1199,82 +2396,230 @@ exports[`overlay should show a warning for initial compilation: page html 1`] = exports[`overlay should show a warning when "client.overlay" is "true": overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ WARNING +
+
+ Warning from compilation
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -1304,82 +2649,230 @@ exports[`overlay should show a warning when "client.overlay" is "true": page htm exports[`overlay should show a warning when "client.overlay.errors" is "true": overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ WARNING +
+
+ Warning from compilation
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -1409,82 +2902,230 @@ exports[`overlay should show a warning when "client.overlay.errors" is "true": p exports[`overlay should show a warning when "client.overlay.warnings" is "true": overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ WARNING +
+
+ Warning from compilation
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -1514,93 +3155,241 @@ exports[`overlay should show a warning when "client.overlay.warnings" is "true": exports[`overlay should show an ansi formatted error for initial compilation: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

- ERROR -

-
+
+
+ +
+
+
+
ERROR 1/1
+
+
+ +
+
+
+
+ ERROR +
+
+ + 18 | + Render + ansi formatted text
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -1630,82 +3419,230 @@ exports[`overlay should show an ansi formatted error for initial compilation: pa exports[`overlay should show an error after invalidation: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ ERROR +
+
+ Error from compilation
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -1735,82 +3672,230 @@ exports[`overlay should show an error after invalidation: page html 1`] = ` exports[`overlay should show an error for initial compilation: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ ERROR +
+
+ Error from compilation. Can't find 'test' module.
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -1840,82 +3925,230 @@ exports[`overlay should show an error for initial compilation: page html 1`] = ` exports[`overlay should show an error when "client.overlay" is "true": overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → +
+
+
+ ERROR +
+
+ Error from compilation. Can't find 'test' module. +
+
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -1945,82 +4178,230 @@ exports[`overlay should show an error when "client.overlay" is "true": page html exports[`overlay should show an error when "client.overlay.errors" is "true": overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ ERROR +
+
+ Error from compilation. Can't find 'test' module.
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -2050,82 +4431,230 @@ exports[`overlay should show an error when "client.overlay.errors" is "true": pa exports[`overlay should show an error when "client.overlay.warnings" is "true": overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ WARNING +
+
+ Warning from compilation
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -2155,82 +4684,230 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true": exports[`overlay should show error for uncaught promise rejection: overlay html 1`] = ` "
- Uncaught runtime errors: -
- -
+ + + + + +
+

+ Runtime Error +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → +
+
+
+ ERROR +
+
+ Async error at <anonymous>:3:26 +
+
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -2239,83 +4916,231 @@ exports[`overlay should show error for uncaught promise rejection: overlay html exports[`overlay should show error for uncaught runtime error: overlay html 1`] = ` "
- Uncaught runtime errors: -
- -
+ + + + + +
+

+ Runtime Error +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ ERROR +
+
+ Injected error at throwError (<anonymous>:2:15) at + <anonymous>:3:9
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -2324,82 +5149,230 @@ exports[`overlay should show error for uncaught runtime error: overlay html 1`] exports[`overlay should show error when it is not filtered: overlay html 1`] = ` "
+
+
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+ +
+
+
- Compiled with problems: -
- -
-
- ERROR -
-
- Unfiltered error -
+ ERROR +
+
+ Unfiltered error
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -2429,82 +5402,143 @@ exports[`overlay should show error when it is not filtered: page html 1`] = ` exports[`overlay should show overlay when "Content-Security-Policy" is "default-src 'self'" was used: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

- ERROR -

-
+
+
+
+ X + +
+
+
+
+ ERROR +
+
+ Error from compilation. Can't find 'test' module.
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -2534,82 +5568,230 @@ exports[`overlay should show overlay when "Content-Security-Policy" is "default- exports[`overlay should show overlay when Trusted Types are enabled and the "require-trusted-types-for 'script'" header was used: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ ERROR +
+
+ Error from compilation. Can't find 'test' module.
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -2639,82 +5821,230 @@ exports[`overlay should show overlay when Trusted Types are enabled and the "req exports[`overlay should show overlay when Trusted Types are enabled: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ ERROR +
+
+ Error from compilation. Can't find 'test' module.
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" @@ -2744,82 +6074,230 @@ exports[`overlay should show overlay when Trusted Types are enabled: page html 1 exports[`overlay should show warning when it is not filtered: overlay html 1`] = ` "
- Compiled with problems: -
- -
+ + + + + +
+

+ Compiled with problems: +

+
+
+ +
+
+
+
ERROR 1/1
+
+
-
⌘ + ← + PREV
+ NEXT + ⌘ + → + +
+
+
+
+ WARNING +
+
+ Unfiltered warning
+
+ This screen is only visible in development only. It will not appear in + production. Open your browser console to further inspect this error. +
" diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js index 023b9a331a..1e57651c4c 100644 --- a/test/e2e/overlay.test.js +++ b/test/e2e/overlay.test.js @@ -1996,4 +1996,261 @@ describe("overlay", () => { await server.stop(); } }); + + it("should navigate between multiple errors using buttons and keyboard shortcuts", async () => { + const compiler = webpack(config); + + // Create multiple distinct errors for navigation testing + new ErrorPlugin("First error message").apply(compiler); + new ErrorPlugin("Second error message").apply(compiler); + new ErrorPlugin("Third error message").apply(compiler); + + const devServerOptions = { + port, + }; + const server = new Server(devServerOptions, compiler); + + await server.start(); + + const { page, browser } = await runBrowser(); + + try { + await page.goto(`http://localhost:${port}/`, { + waitUntil: "networkidle0", + }); + + // Delay for the overlay to appear + await delay(1000); + + // Get the overlay iframe and its content frame + const overlayHandle = await page.$("#webpack-dev-server-client-overlay"); + const overlayFrame = await overlayHandle.contentFrame(); + + // Check initial error counter display + let errorCounter = await overlayFrame.$eval( + ".error-counter", + (el) => el.textContent, + ); + expect(errorCounter).toBe("ERROR 1/3"); + + // Check initial error content + let errorContent = await overlayFrame.$eval( + ".error-message", + (el) => el.textContent, + ); + expect(errorContent).toContain("First error message"); + + // Test navigation button - next + const nextButton = await overlayFrame.$("button:nth-of-type(2)"); + await nextButton.click(); + await delay(100); + + // Verify we moved to second error + errorCounter = await overlayFrame.$eval( + ".error-counter", + (el) => el.textContent, + ); + expect(errorCounter).toBe("ERROR 2/3"); + errorContent = await overlayFrame.$eval( + ".error-message", + (el) => el.textContent, + ); + expect(errorContent).toContain("Second error message"); + + // Test navigation button - next (to third error) + await nextButton.click(); + await delay(100); + + // Verify we moved to third error + errorCounter = await overlayFrame.$eval( + ".error-counter", + (el) => el.textContent, + ); + expect(errorCounter).toBe("ERROR 3/3"); + errorContent = await overlayFrame.$eval( + ".error-message", + (el) => el.textContent, + ); + expect(errorContent).toContain("Third error message"); + + // Test navigation button - next (should cycle back to first error) + await nextButton.click(); + await delay(100); + + // Verify we cycled back to first error + errorCounter = await overlayFrame.$eval( + ".error-counter", + (el) => el.textContent, + ); + expect(errorCounter).toBe("ERROR 1/3"); + + // Test keyboard navigation - ⌘/Ctrl + → + await page.keyboard.down( + process.platform === "darwin" ? "Meta" : "Control", + ); + await page.keyboard.press("ArrowRight"); + await page.keyboard.up( + process.platform === "darwin" ? "Meta" : "Control", + ); + await delay(100); + + // Verify keyboard navigation worked + errorCounter = await overlayFrame.$eval( + ".error-counter", + (el) => el.textContent, + ); + expect(errorCounter).toBe("ERROR 2/3"); + + // Test keyboard navigation - ⌘/Ctrl + ← + await page.keyboard.down( + process.platform === "darwin" ? "Meta" : "Control", + ); + await page.keyboard.press("ArrowLeft"); + await page.keyboard.up( + process.platform === "darwin" ? "Meta" : "Control", + ); + await delay(100); + + // Verify keyboard navigation worked + errorCounter = await overlayFrame.$eval( + ".error-counter", + (el) => el.textContent, + ); + expect(errorCounter).toBe("ERROR 1/3"); + } catch (error) { + throw error; + } finally { + await browser.close(); + await server.stop(); + } + }); + + it("should navigate between multiple errors when Trusted Types are enabled", async () => { + const compiler = webpack(trustedTypesConfig); + + // Create multiple distinct errors for navigation testing + new ErrorPlugin("First error message").apply(compiler); + new ErrorPlugin("Second error message").apply(compiler); + new ErrorPlugin("Third error message").apply(compiler); + + const devServerOptions = { + port, + client: { + overlay: { + trustedTypesPolicyName: "webpack#dev-overlay", + }, + }, + }; + const server = new Server(devServerOptions, compiler); + + await server.start(); + + const { page, browser } = await runBrowser(); + + try { + const consoleMessages = []; + + page.on("console", (message) => { + consoleMessages.push(message.text()); + }); + + await page.goto(`http://localhost:${port}/`, { + waitUntil: "networkidle0", + }); + + // Delay for the overlay to appear + await delay(1000); + + // Get the overlay iframe and its content frame + const overlayHandle = await page.$("#webpack-dev-server-client-overlay"); + const overlayFrame = await overlayHandle.contentFrame(); + + // Check initial error counter display + let errorCounter = await overlayFrame.$eval( + ".error-counter", + (el) => el.textContent, + ); + expect(errorCounter).toBe("ERROR 1/3"); + + // Check initial error content + let errorContent = await overlayFrame.$eval( + ".error-message", + (el) => el.textContent, + ); + expect(errorContent).toContain("First error message"); + + // Test navigation button - next + const nextButton = await overlayFrame.$("button:nth-of-type(2)"); + await nextButton.click(); + await delay(100); + + // Verify we moved to second error + errorCounter = await overlayFrame.$eval( + ".error-counter", + (el) => el.textContent, + ); + expect(errorCounter).toBe("ERROR 2/3"); + errorContent = await overlayFrame.$eval( + ".error-message", + (el) => el.textContent, + ); + expect(errorContent).toContain("Second error message"); + + // Test keyboard navigation - ⌘/Ctrl + → + await page.keyboard.down( + process.platform === "darwin" ? "Meta" : "Control", + ); + await page.keyboard.press("ArrowRight"); + await page.keyboard.up( + process.platform === "darwin" ? "Meta" : "Control", + ); + await delay(100); + + // Verify we moved to third error + errorCounter = await overlayFrame.$eval( + ".error-counter", + (el) => el.textContent, + ); + expect(errorCounter).toBe("ERROR 3/3"); + errorContent = await overlayFrame.$eval( + ".error-message", + (el) => el.textContent, + ); + expect(errorContent).toContain("Third error message"); + + // Test keyboard navigation - ⌘/Ctrl + ← (going back to previous error) + await page.keyboard.down( + process.platform === "darwin" ? "Meta" : "Control", + ); + await page.keyboard.press("ArrowLeft"); + await page.keyboard.up( + process.platform === "darwin" ? "Meta" : "Control", + ); + await delay(100); + + // Verify we moved back to second error + errorCounter = await overlayFrame.$eval( + ".error-counter", + (el) => el.textContent, + ); + expect(errorCounter).toBe("ERROR 2/3"); + errorContent = await overlayFrame.$eval( + ".error-message", + (el) => el.textContent, + ); + expect(errorContent).toContain("Second error message"); + + // Ensure no Trusted Types violations were reported + expect( + consoleMessages.filter((item) => + /requires 'TrustedHTML' assignment/.test(item), + ), + ).toHaveLength(0); + } catch (error) { + throw error; + } finally { + await browser.close(); + await server.stop(); + } + }); });