Skip to content

Commit e8b13cc

Browse files
Morten N.O. Nørgaard HenriksenMorten N.O. Nørgaard Henriksen
Morten N.O. Nørgaard Henriksen
authored and
Morten N.O. Nørgaard Henriksen
committed
fix(overlay): render ansi formattet error messages correctly
1 parent cce64d8 commit e8b13cc

File tree

5 files changed

+222
-49
lines changed

5 files changed

+222
-49
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
@@ -40,6 +40,7 @@
4040
"del": "^6.0.0",
4141
"express": "^4.17.1",
4242
"graceful-fs": "^4.2.6",
43+
"html-entities": "^2.3.2",
4344
"http-proxy-middleware": "^2.0.0",
4445
"internal-ip": "^6.2.0",
4546
"ipaddr.js": "^2.0.1",

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

Lines changed: 153 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +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 />Module
39-
parse failed: Unterminated template (1:1) You may need an appropriate
40-
loader to handle this file type, currently no loaders are configured to
41-
process this file. See 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+
Module parse failed: Unterminated template (1:1) You may need an
41+
appropriate loader to handle this file type, currently no loaders are
42+
configured to process this file. See
43+
https://webpack.js.org/concepts#loaders &gt; \`;
44+
</div>
45+
<br /><br />
4246
</div>
4347
</div>
4448
</body>
@@ -113,10 +117,14 @@ exports[`overlay should not show initially, then show on an error, then hide on
113117
X</button
114118
><br /><br />
115119
<div>
116-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Module
117-
parse failed: Unterminated template (1:1) You may need an appropriate
118-
loader to handle this file type, currently no loaders are configured to
119-
process this file. See 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+
Module parse failed: Unterminated template (1:1) You may need an
123+
appropriate loader to handle this file type, currently no loaders are
124+
configured to process this file. See
125+
https://webpack.js.org/concepts#loaders &gt; \`;
126+
</div>
127+
<br /><br />
120128
</div>
121129
</div>
122130
</body>
@@ -191,10 +199,14 @@ exports[`overlay should not show initially, then show on an error, then show oth
191199
X</button
192200
><br /><br />
193201
<div>
194-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Module
195-
parse failed: Unterminated template (1:1) You may need an appropriate
196-
loader to handle this file type, currently no loaders are configured to
197-
process this file. See 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+
Module parse failed: Unterminated template (1:1) You may need an
205+
appropriate loader to handle this file type, currently no loaders are
206+
configured to process this file. See
207+
https://webpack.js.org/concepts#loaders &gt; \`;
208+
</div>
209+
<br /><br />
198210
</div>
199211
</div>
200212
</body>
@@ -236,10 +248,14 @@ exports[`overlay should not show initially, then show on an error, then show oth
236248
X</button
237249
><br /><br />
238250
<div>
239-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Module
240-
parse failed: Unterminated template (1:1) You may need an appropriate
241-
loader to handle this file type, currently no loaders are configured to
242-
process this file. See 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+
Module parse failed: Unterminated template (1:1) You may need an
254+
appropriate loader to handle this file type, currently no loaders are
255+
configured to process this file. See
256+
https://webpack.js.org/concepts#loaders &gt; \`;a
257+
</div>
258+
<br /><br />
243259
</div>
244260
</div>
245261
</body>
@@ -361,12 +377,14 @@ exports[`overlay should show on a warning and error for initial compilation and
361377
X</button
362378
><br /><br />
363379
<div>
364-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span
365-
><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 />
366383
</div>
367384
<div>
368-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span
369-
><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 />
370388
</div>
371389
</div>
372390
</body>
@@ -427,24 +445,29 @@ exports[`overlay should show on a warning and error for initial compilation: ove
427445
X</button
428446
><br /><br />
429447
<div>
430-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
431-
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 />
432451
</div>
433452
<div>
434-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
435-
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 />
436456
</div>
437457
<div>
438-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
439-
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 />
440461
</div>
441462
<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 />
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 />
444466
</div>
445467
<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 />
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 />
448471
</div>
449472
</div>
450473
</body>
@@ -505,8 +528,9 @@ exports[`overlay should show on a warning for initial compilation: overlay html
505528
X</button
506529
><br /><br />
507530
<div>
508-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
509-
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 />
510534
</div>
511535
</div>
512536
</body>
@@ -567,8 +591,9 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl
567591
X</button
568592
><br /><br />
569593
<div>
570-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
571-
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 />
572597
</div>
573598
</div>
574599
</body>
@@ -629,8 +654,9 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
629654
X</button
630655
><br /><br />
631656
<div>
632-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
633-
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 />
634660
</div>
635661
</div>
636662
</body>
@@ -691,8 +717,9 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
691717
X</button
692718
><br /><br />
693719
<div>
694-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
695-
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 />
696723
</div>
697724
</div>
698725
</body>
@@ -718,6 +745,82 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
718745
"
719746
`;
720747

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+
721824
exports[`overlay should show on an error for initial compilation: overlay html 1`] = `
722825
"<body>
723826
<div
@@ -753,8 +856,9 @@ exports[`overlay should show on an error for initial compilation: overlay html 1
753856
X</button
754857
><br /><br />
755858
<div>
756-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
757-
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 />
758862
</div>
759863
</div>
760864
</body>
@@ -815,8 +919,9 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla
815919
X</button
816920
><br /><br />
817921
<div>
818-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
819-
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 />
820925
</div>
821926
</div>
822927
</body>
@@ -877,8 +982,9 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
877982
X</button
878983
><br /><br />
879984
<div>
880-
<span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />Error from
881-
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 />
882988
</div>
883989
</div>
884990
</body>
@@ -939,8 +1045,9 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true
9391045
X</button
9401046
><br /><br />
9411047
<div>
942-
<span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />Warning
943-
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 />
9441051
</div>
9451052
</div>
9461053
</body>

0 commit comments

Comments
 (0)