Skip to content

Commit 9313454

Browse files
raixraix
authored
fix: render ansi formatted error messages correctly in overlay (#3579)
1 parent 2f54c31 commit 9313454

File tree

6 files changed

+375
-99
lines changed

6 files changed

+375
-99
lines changed

‎client-src/overlay.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
33

44
const ansiHTML = require("ansi-html");
5+
const { encode } = require("html-entities");
56

67
const colors = {
78
reset: ["transparent", "transparent"],
@@ -135,16 +136,16 @@ function show(messages, type) {
135136

136137
// Make it look similar to our terminal.
137138
const errorMessage = message.message || messages[0];
138-
const text = ansiHTML(errorMessage);
139-
const messageTextNode = document.createTextNode(text);
139+
const text = ansiHTML(encode(errorMessage));
140+
const messageTextNode = document.createElement("div");
141+
messageTextNode.innerHTML = text;
140142

141143
entryElement.appendChild(typeElement);
142144
entryElement.appendChild(document.createElement("br"));
143145
entryElement.appendChild(document.createElement("br"));
144146
entryElement.appendChild(messageTextNode);
145147
entryElement.appendChild(document.createElement("br"));
146148
entryElement.appendChild(document.createElement("br"));
147-
entryElement.appendChild(document.createElement("br"));
148149

149150
containerElement.appendChild(entryElement);
150151
});

‎package-lock.json

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"del": "^6.0.0",
4242
"express": "^4.17.1",
4343
"graceful-fs": "^4.2.6",
44+
"html-entities": "^2.3.2",
4445
"http-proxy-middleware": "^2.0.0",
4546
"internal-ip": "^6.2.0",
4647
"ipaddr.js": "^2.0.1",

‎test/e2e/__snapshots__/overlay.test.js.snap.webpack4

Lines changed: 153 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,14 @@ exports[`overlay should not show initially, then show on an error and allow to c
3535
X</button
3636
><br /><br />
3737
<div>
38-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./foo.js
39-
1:1 Module parse failed: Unterminated template (1:1) You may need an
40-
appropriate loader to handle this file type, currently no loaders are
41-
configured to process this file. See
42-
https://webpack.js.org/concepts#loaders &gt; \`;<br /><br /><br />
38+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
39+
<div>
40+
./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
41+
need an appropriate loader to handle this file type, currently no
42+
loaders are configured to process this file. See
43+
https://webpack.js.org/concepts#loaders &gt; \`;
44+
</div>
45+
<br /><br />
4346
</div>
4447
</div>
4548
</body>
@@ -114,11 +117,14 @@ exports[`overlay should not show initially, then show on an error, then hide on
114117
X</button
115118
><br /><br />
116119
<div>
117-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./foo.js
118-
1:1 Module parse failed: Unterminated template (1:1) You may need an
119-
appropriate loader to handle this file type, currently no loaders are
120-
configured to process this file. See
121-
https://webpack.js.org/concepts#loaders &gt; \`;<br /><br /><br />
120+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
121+
<div>
122+
./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
123+
need an appropriate loader to handle this file type, currently no
124+
loaders are configured to process this file. See
125+
https://webpack.js.org/concepts#loaders &gt; \`;
126+
</div>
127+
<br /><br />
122128
</div>
123129
</div>
124130
</body>
@@ -193,11 +199,14 @@ exports[`overlay should not show initially, then show on an error, then show oth
193199
X</button
194200
><br /><br />
195201
<div>
196-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./foo.js
197-
1:1 Module parse failed: Unterminated template (1:1) You may need an
198-
appropriate loader to handle this file type, currently no loaders are
199-
configured to process this file. See
200-
https://webpack.js.org/concepts#loaders &gt; \`;<br /><br /><br />
202+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
203+
<div>
204+
./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
205+
need an appropriate loader to handle this file type, currently no
206+
loaders are configured to process this file. See
207+
https://webpack.js.org/concepts#loaders &gt; \`;
208+
</div>
209+
<br /><br />
201210
</div>
202211
</div>
203212
</body>
@@ -239,11 +248,14 @@ exports[`overlay should not show initially, then show on an error, then show oth
239248
X</button
240249
><br /><br />
241250
<div>
242-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />./foo.js
243-
1:1 Module parse failed: Unterminated template (1:1) You may need an
244-
appropriate loader to handle this file type, currently no loaders are
245-
configured to process this file. See
246-
https://webpack.js.org/concepts#loaders &gt; \`;a<br /><br /><br />
251+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
252+
<div>
253+
./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
254+
need an appropriate loader to handle this file type, currently no
255+
loaders are configured to process this file. See
256+
https://webpack.js.org/concepts#loaders &gt; \`;a
257+
</div>
258+
<br /><br />
247259
</div>
248260
</div>
249261
</body>
@@ -365,12 +377,14 @@ exports[`overlay should show on a warning and error for initial compilation and
365377
X</button
366378
><br /><br />
367379
<div>
368-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span
369-
><br /><br />&lt;strong&gt;strong&lt;/strong&gt;<br /><br /><br />
380+
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
381+
<div>&lt;strong&gt;strong&lt;/strong&gt;</div>
382+
<br /><br />
370383
</div>
371384
<div>
372-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span
373-
><br /><br />&lt;strong&gt;strong&lt;/strong&gt;<br /><br /><br />
385+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
386+
<div>&lt;strong&gt;strong&lt;/strong&gt;</div>
387+
<br /><br />
374388
</div>
375389
</div>
376390
</body>
@@ -431,24 +445,29 @@ exports[`overlay should show on a warning and error for initial compilation: ove
431445
X</button
432446
><br /><br />
433447
<div>
434-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
435-
from compilation<br /><br /><br />
448+
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
449+
<div>Warning from compilation</div>
450+
<br /><br />
436451
</div>
437452
<div>
438-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
439-
from compilation<br /><br /><br />
453+
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
454+
<div>Warning from compilation</div>
455+
<br /><br />
440456
</div>
441457
<div>
442-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
443-
compilation. Can't find 'test' module.<br /><br /><br />
458+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
459+
<div>Error from compilation. Can't find 'test' module.</div>
460+
<br /><br />
444461
</div>
445462
<div>
446-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
447-
compilation. Can't find 'test' module.<br /><br /><br />
463+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
464+
<div>Error from compilation. Can't find 'test' module.</div>
465+
<br /><br />
448466
</div>
449467
<div>
450-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
451-
compilation. Can't find 'test' module.<br /><br /><br />
468+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
469+
<div>Error from compilation. Can't find 'test' module.</div>
470+
<br /><br />
452471
</div>
453472
</div>
454473
</body>
@@ -509,8 +528,9 @@ exports[`overlay should show on a warning for initial compilation: overlay html
509528
X</button
510529
><br /><br />
511530
<div>
512-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
513-
from compilation<br /><br /><br />
531+
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
532+
<div>Warning from compilation</div>
533+
<br /><br />
514534
</div>
515535
</div>
516536
</body>
@@ -571,8 +591,9 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl
571591
X</button
572592
><br /><br />
573593
<div>
574-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
575-
from compilation<br /><br /><br />
594+
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
595+
<div>Warning from compilation</div>
596+
<br /><br />
576597
</div>
577598
</div>
578599
</body>
@@ -633,8 +654,9 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
633654
X</button
634655
><br /><br />
635656
<div>
636-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
637-
from compilation<br /><br /><br />
657+
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
658+
<div>Warning from compilation</div>
659+
<br /><br />
638660
</div>
639661
</div>
640662
</body>
@@ -695,8 +717,9 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
695717
X</button
696718
><br /><br />
697719
<div>
698-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
699-
from compilation<br /><br /><br />
720+
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
721+
<div>Warning from compilation</div>
722+
<br /><br />
700723
</div>
701724
</div>
702725
</body>
@@ -722,6 +745,82 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
722745
"
723746
`;
724747

748+
exports[`overlay should show on an ansi formatted error for initial compilation: overlay html 1`] = `
749+
"<body>
750+
<div
751+
id=\\"webpack-dev-server-client-overlay-div\\"
752+
style=\\"
753+
position: fixed;
754+
box-sizing: border-box;
755+
inset: 0px;
756+
width: 100vw;
757+
height: 100vh;
758+
background-color: rgba(0, 0, 0, 0.85);
759+
color: rgb(232, 232, 232);
760+
font-family: Menlo, Consolas, monospace;
761+
font-size: large;
762+
padding: 2rem;
763+
line-height: 1.2;
764+
white-space: pre-wrap;
765+
overflow: auto;
766+
\\"
767+
>
768+
<span>Compiled with problems:</span
769+
><button
770+
style=\\"
771+
background: transparent;
772+
border: none;
773+
font-size: 20px;
774+
font-weight: bold;
775+
color: white;
776+
cursor: pointer;
777+
float: right;
778+
\\"
779+
>
780+
X</button
781+
><br /><br />
782+
<div>
783+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
784+
<div>
785+
<span
786+
style=\\"
787+
font-weight: normal;
788+
opacity: 1;
789+
color: #transparent;
790+
background: #transparent;
791+
\\"
792+
>
793+
<span style=\\"color: #6d7891\\"> 18 |</span>
794+
<span style=\\"color: #ffd080\\">Render</span>
795+
<span style=\\"color: #ffd080\\">ansi formatted text</span></span
796+
>
797+
</div>
798+
<br /><br />
799+
</div>
800+
</div>
801+
</body>
802+
"
803+
`;
804+
805+
exports[`overlay should show on an ansi formatted error for initial compilation: page html 1`] = `
806+
"<body>
807+
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
808+
<iframe
809+
id=\\"webpack-dev-server-client-overlay\\"
810+
src=\\"about:blank\\"
811+
style=\\"
812+
position: fixed;
813+
inset: 0px;
814+
width: 100vw;
815+
height: 100vh;
816+
border: none;
817+
z-index: 2147483647;
818+
\\"
819+
></iframe>
820+
</body>
821+
"
822+
`;
823+
725824
exports[`overlay should show on an error for initial compilation: overlay html 1`] = `
726825
"<body>
727826
<div
@@ -757,8 +856,9 @@ exports[`overlay should show on an error for initial compilation: overlay html 1
757856
X</button
758857
><br /><br />
759858
<div>
760-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
761-
compilation. Can't find 'test' module.<br /><br /><br />
859+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
860+
<div>Error from compilation. Can't find 'test' module.</div>
861+
<br /><br />
762862
</div>
763863
</div>
764864
</body>
@@ -819,8 +919,9 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla
819919
X</button
820920
><br /><br />
821921
<div>
822-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
823-
compilation. Can't find 'test' module.<br /><br /><br />
922+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
923+
<div>Error from compilation. Can't find 'test' module.</div>
924+
<br /><br />
824925
</div>
825926
</div>
826927
</body>
@@ -881,8 +982,9 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
881982
X</button
882983
><br /><br />
883984
<div>
884-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
885-
compilation. Can't find 'test' module.<br /><br /><br />
985+
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
986+
<div>Error from compilation. Can't find 'test' module.</div>
987+
<br /><br />
886988
</div>
887989
</div>
888990
</body>
@@ -943,8 +1045,9 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true
9431045
X</button
9441046
><br /><br />
9451047
<div>
946-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
947-
from compilation<br /><br /><br />
1048+
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
1049+
<div>Warning from compilation</div>
1050+
<br /><br />
9481051
</div>
9491052
</div>
9501053
</body>

0 commit comments

Comments
 (0)