Skip to content

fix(overlay): render ansi formattet error messages correctly #3579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 9, 2021
+375 −99
Merged

fix(overlay): render ansi formattet error messages correctly #3579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e8b13cc
fix(overlay): render ansi formattet error messages correctly
Jul 31, 2021
5cb4923
fix(test): overlay.test update webpack 4 snapshot
Jul 31, 2021
df7ab6e
Merge branch 'master' into issue/3575-Error_overlay_html_encodes_the_…
alexander-akait Aug 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions client-src/overlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
// They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).

const ansiHTML = require("ansi-html");
const { encode } = require("html-entities");

const colors = {
reset: ["transparent", "transparent"],
Expand Down Expand Up @@ -135,16 +136,16 @@ function show(messages, type) {

// Make it look similar to our terminal.
const errorMessage = message.message || messages[0];
const text = ansiHTML(errorMessage);
const messageTextNode = document.createTextNode(text);
const text = ansiHTML(encode(errorMessage));
const messageTextNode = document.createElement("div");
messageTextNode.innerHTML = text;

entryElement.appendChild(typeElement);
entryElement.appendChild(document.createElement("br"));
entryElement.appendChild(document.createElement("br"));
entryElement.appendChild(messageTextNode);
entryElement.appendChild(document.createElement("br"));
entryElement.appendChild(document.createElement("br"));
entryElement.appendChild(document.createElement("br"));

containerElement.appendChild(entryElement);
});
Expand Down
11 changes: 11 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"del": "^6.0.0",
"express": "^4.17.1",
"graceful-fs": "^4.2.6",
"html-entities": "^2.3.2",
"http-proxy-middleware": "^2.0.0",
"internal-ip": "^6.2.0",
"ipaddr.js": "^2.0.1",
Expand Down
203 changes: 153 additions & 50 deletions test/e2e/__snapshots__/overlay.test.js.snap.webpack4
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,14 @@ exports[`overlay should not show initially, then show on an error and allow to c
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./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 &gt; \`;<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>
./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 &gt; \`;
</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -114,11 +117,14 @@ exports[`overlay should not show initially, then show on an error, then hide on
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./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 &gt; \`;<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>
./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 &gt; \`;
</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -193,11 +199,14 @@ exports[`overlay should not show initially, then show on an error, then show oth
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./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 &gt; \`;<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>
./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 &gt; \`;
</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -239,11 +248,14 @@ exports[`overlay should not show initially, then show on an error, then show oth
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./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 &gt; \`;a<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>
./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 &gt; \`;a
</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -365,12 +377,14 @@ exports[`overlay should show on a warning and error for initial compilation and
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span
><br /><br />&lt;strong&gt;strong&lt;/strong&gt;<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
<div>&lt;strong&gt;strong&lt;/strong&gt;</div>
<br /><br />
</div>
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span
><br /><br />&lt;strong&gt;strong&lt;/strong&gt;<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>&lt;strong&gt;strong&lt;/strong&gt;</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -431,24 +445,29 @@ exports[`overlay should show on a warning and error for initial compilation: ove
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
from compilation<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
<div>Warning from compilation</div>
<br /><br />
</div>
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
from compilation<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
<div>Warning from compilation</div>
<br /><br />
</div>
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
compilation. Can't find 'test' module.<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>Error from compilation. Can't find 'test' module.</div>
<br /><br />
</div>
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
compilation. Can't find 'test' module.<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>Error from compilation. Can't find 'test' module.</div>
<br /><br />
</div>
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
compilation. Can't find 'test' module.<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>Error from compilation. Can't find 'test' module.</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -509,8 +528,9 @@ exports[`overlay should show on a warning for initial compilation: overlay html
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
from compilation<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
<div>Warning from compilation</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -571,8 +591,9 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
from compilation<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
<div>Warning from compilation</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -633,8 +654,9 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
from compilation<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
<div>Warning from compilation</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -695,8 +717,9 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
from compilation<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
<div>Warning from compilation</div>
<br /><br />
</div>
</div>
</body>
Expand All @@ -722,6 +745,82 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
"
`;

exports[`overlay should show on an ansi formatted error for initial compilation: overlay html 1`] = `
"<body>
<div
id=\\"webpack-dev-server-client-overlay-div\\"
style=\\"
position: fixed;
box-sizing: border-box;
inset: 0px;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.85);
color: rgb(232, 232, 232);
font-family: Menlo, Consolas, monospace;
font-size: large;
padding: 2rem;
line-height: 1.2;
white-space: pre-wrap;
overflow: auto;
\\"
>
<span>Compiled with problems:</span
><button
style=\\"
background: transparent;
border: none;
font-size: 20px;
font-weight: bold;
color: white;
cursor: pointer;
float: right;
\\"
>
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>
<span
style=\\"
font-weight: normal;
opacity: 1;
color: #transparent;
background: #transparent;
\\"
>
<span style=\\"color: #6d7891\\"> 18 |</span>
<span style=\\"color: #ffd080\\">Render</span>
<span style=\\"color: #ffd080\\">ansi formatted text</span></span
>
</div>
<br /><br />
</div>
</div>
</body>
"
`;

exports[`overlay should show on an ansi formatted error for initial compilation: page html 1`] = `
"<body>
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
<iframe
id=\\"webpack-dev-server-client-overlay\\"
src=\\"about:blank\\"
style=\\"
position: fixed;
inset: 0px;
width: 100vw;
height: 100vh;
border: none;
z-index: 2147483647;
\\"
></iframe>
</body>
"
`;

exports[`overlay should show on an error for initial compilation: overlay html 1`] = `
"<body>
<div
Expand Down Expand Up @@ -757,8 +856,9 @@ exports[`overlay should show on an error for initial compilation: overlay html 1
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
compilation. Can't find 'test' module.<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>Error from compilation. Can't find 'test' module.</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -819,8 +919,9 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
compilation. Can't find 'test' module.<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>Error from compilation. Can't find 'test' module.</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -881,8 +982,9 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
compilation. Can't find 'test' module.<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
<div>Error from compilation. Can't find 'test' module.</div>
<br /><br />
</div>
</div>
</body>
Expand Down Expand Up @@ -943,8 +1045,9 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true
X</button
><br /><br />
<div>
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
from compilation<br /><br /><br />
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
<div>Warning from compilation</div>
<br /><br />
</div>
</div>
</body>
Expand Down
Loading