Skip to content

Commit

Permalink
fix: render ansi formatted error messages correctly in overlay (#3579)
Browse files Browse the repository at this point in the history
  • Loading branch information
@raix
raix committed Aug 9, 2021
1 parent 2f54c31 commit 9313454
Show file tree
Hide file tree
Showing 6 changed files with 375 additions and 99 deletions.
7 changes: 4 additions & 3 deletions client-src/overlay.js
View file
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

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
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
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

0 comments on commit 9313454

Please sign in to comment.