Skip to content

Commit f0dbea0

Browse files
alexander-akaitalexander-akait
authored
fix: formatting errors/warnings (#3877)
1 parent 229d79d commit f0dbea0

9 files changed

+155
-90
lines changed

‎client-src/index.js

+19-15
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import webpackHotLog from "webpack/hot/log.js";
44
import stripAnsi from "./modules/strip-ansi/index.js";
55
import parseURL from "./utils/parseURL.js";
66
import socket from "./socket.js";
7-
import { show, hide } from "./overlay.js";
7+
import { formatProblem, show, hide } from "./overlay.js";
88
import { log, setLogLevel } from "./utils/log.js";
99
import sendMessage from "./utils/sendMessage.js";
1010
import reloadApp from "./utils/reloadApp.js";
@@ -152,14 +152,16 @@ const onSocketMessage = {
152152
warnings(warnings) {
153153
log.warn("Warnings while compiling.");
154154

155-
const strippedWarnings = warnings.map((warning) =>
156-
stripAnsi(warning.message ? warning.message : warning)
157-
);
155+
const printableWarnings = warnings.map((error) => {
156+
const { header, body } = formatProblem("warning", error);
157+
158+
return `${header}\n${stripAnsi(body)}`;
159+
});
158160

159-
sendMessage("Warnings", strippedWarnings);
161+
sendMessage("Warnings", printableWarnings);
160162

161-
for (let i = 0; i < strippedWarnings.length; i++) {
162-
log.warn(strippedWarnings[i]);
163+
for (let i = 0; i < printableWarnings.length; i++) {
164+
log.warn(printableWarnings[i]);
163165
}
164166

165167
const needShowOverlayForWarnings =
@@ -168,22 +170,24 @@ const onSocketMessage = {
168170
: options.overlay && options.overlay.warnings;
169171

170172
if (needShowOverlayForWarnings) {
171-
show(warnings, "warnings");
173+
show("warning", warnings);
172174
}
173175

174176
reloadApp(options, status);
175177
},
176178
errors(errors) {
177179
log.error("Errors while compiling. Reload prevented.");
178180

179-
const strippedErrors = errors.map((error) =>
180-
stripAnsi(error.message ? error.message : error)
181-
);
181+
const printableErrors = errors.map((error) => {
182+
const { header, body } = formatProblem("error", error);
183+
184+
return `${header}\n${stripAnsi(body)}`;
185+
});
182186

183-
sendMessage("Errors", strippedErrors);
187+
sendMessage("Errors", printableErrors);
184188

185-
for (let i = 0; i < strippedErrors.length; i++) {
186-
log.error(strippedErrors[i]);
189+
for (let i = 0; i < printableErrors.length; i++) {
190+
log.error(printableErrors[i]);
187191
}
188192

189193
const needShowOverlayForErrors =
@@ -192,7 +196,7 @@ const onSocketMessage = {
192196
: options.overlay && options.overlay.errors;
193197

194198
if (needShowOverlayForErrors) {
195-
show(errors, "errors");
199+
show("error", errors);
196200
}
197201
},
198202
error(error) {

‎client-src/overlay.js

+35-7
Original file line numberDiff line numberDiff line change
@@ -124,20 +124,48 @@ function hide() {
124124
containerElement = null;
125125
}
126126

127+
function formatProblem(type, item) {
128+
let header = type === "warning" ? "WARNING" : "ERROR";
129+
let body = "";
130+
131+
if (typeof item === "string") {
132+
body += item;
133+
} else {
134+
const file = item.file || "";
135+
// eslint-disable-next-line no-nested-ternary
136+
const moduleName = item.moduleName
137+
? item.moduleName.indexOf("!") !== -1
138+
? `${item.moduleName.replace(/^(\s|\S)*!/, "")} (${item.moduleName})`
139+
: `${item.moduleName}`
140+
: "";
141+
const loc = item.loc;
142+
143+
header += `${
144+
moduleName || file
145+
? ` in ${
146+
moduleName ? `${moduleName}${file ? ` (${file})` : ""}` : file
147+
}${loc ? ` ${loc}` : ""}`
148+
: ""
149+
}`;
150+
body += item.message || "";
151+
}
152+
153+
return { header, body };
154+
}
155+
127156
// Compilation with errors (e.g. syntax error or missing modules).
128-
function show(messages, type) {
157+
function show(type, messages) {
129158
ensureOverlayExists(() => {
130159
messages.forEach((message) => {
131160
const entryElement = document.createElement("div");
132161
const typeElement = document.createElement("span");
133-
// ts-loader will output `error.file` for error file path, not in message
134-
typeElement.innerText =
135-
(type === "warnings" ? "Warning:" : "Error:") + (message.file || "");
162+
const { header, body } = formatProblem(type, message);
163+
164+
typeElement.innerText = header;
136165
typeElement.style.color = `#${colors.red}`;
137166

138167
// Make it look similar to our terminal.
139-
const errorMessage = message.message || messages[0];
140-
const text = ansiHTML(encode(errorMessage));
168+
const text = ansiHTML(encode(body));
141169
const messageTextNode = document.createElement("div");
142170

143171
messageTextNode.innerHTML = text;
@@ -154,4 +182,4 @@ function show(messages, type) {
154182
});
155183
}
156184

157-
export { show, hide };
185+
export { formatProblem, show, hide };

‎test/client/__snapshots__/index.test.js.snap.webpack4

+6-3
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,16 @@ exports[`index should run onSocketMessage.warnings 2`] = `"Warnings"`;
4545
exports[`index should run onSocketMessage.warnings 3`] = `
4646
Array [
4747
Array [
48-
"warn1",
48+
"HEADER warning
49+
BODY: warning",
4950
],
5051
Array [
51-
"warn2",
52+
"HEADER warning
53+
BODY: warning",
5254
],
5355
Array [
54-
"warn3",
56+
"HEADER warning
57+
BODY: warning",
5558
],
5659
]
5760
`;

‎test/client/__snapshots__/index.test.js.snap.webpack5

+6-3
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,16 @@ exports[`index should run onSocketMessage.warnings 2`] = `"Warnings"`;
4545
exports[`index should run onSocketMessage.warnings 3`] = `
4646
Array [
4747
Array [
48-
"warn1",
48+
"HEADER warning
49+
BODY: warning",
4950
],
5051
Array [
51-
"warn2",
52+
"HEADER warning
53+
BODY: warning",
5254
],
5355
Array [
54-
"warn3",
56+
"HEADER warning
57+
BODY: warning",
5558
],
5659
]
5760
`;

‎test/client/index.test.js

+3
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ describe("index", () => {
3939
jest.setMock("../../client-src/overlay.js", {
4040
hide: jest.fn(),
4141
show: jest.fn(),
42+
formatProblem: (item) => {
43+
return { header: "HEADER warning", body: `BODY: ${item}` };
44+
},
4245
});
4346
overlay = require("../../client-src/overlay");
4447

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

+20-10
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ Array [
1919
"[webpack-dev-server] Hot Module Replacement enabled.",
2020
"[webpack-dev-server] Live Reloading enabled.",
2121
"[webpack-dev-server] Errors while compiling. Reload prevented.",
22-
"[webpack-dev-server] Error from compilation",
22+
"[webpack-dev-server] ERROR
23+
Error from compilation",
2324
]
2425
`;
2526

@@ -30,7 +31,8 @@ Array [
3031
"[webpack-dev-server] Hot Module Replacement enabled.",
3132
"[webpack-dev-server] Live Reloading enabled.",
3233
"[webpack-dev-server] Errors while compiling. Reload prevented.",
33-
"[webpack-dev-server] Error from compilation",
34+
"[webpack-dev-server] ERROR
35+
Error from compilation",
3436
]
3537
`;
3638

@@ -122,15 +124,17 @@ exports[`logging should work and log only error (sockjs) 1`] = `
122124
Array [
123125
"Hey.",
124126
"[webpack-dev-server] Errors while compiling. Reload prevented.",
125-
"[webpack-dev-server] Error from compilation",
127+
"[webpack-dev-server] ERROR
128+
Error from compilation",
126129
]
127130
`;
128131

129132
exports[`logging should work and log only error (ws) 1`] = `
130133
Array [
131134
"Hey.",
132135
"[webpack-dev-server] Errors while compiling. Reload prevented.",
133-
"[webpack-dev-server] Error from compilation",
136+
"[webpack-dev-server] ERROR
137+
Error from compilation",
134138
]
135139
`;
136140

@@ -166,19 +170,23 @@ exports[`logging should work and log warning and errors (sockjs) 1`] = `
166170
Array [
167171
"Hey.",
168172
"[webpack-dev-server] Warnings while compiling.",
169-
"[webpack-dev-server] Warning from compilation",
173+
"[webpack-dev-server] WARNING
174+
Warning from compilation",
170175
"[webpack-dev-server] Errors while compiling. Reload prevented.",
171-
"[webpack-dev-server] Error from compilation",
176+
"[webpack-dev-server] ERROR
177+
Error from compilation",
172178
]
173179
`;
174180

175181
exports[`logging should work and log warning and errors (ws) 1`] = `
176182
Array [
177183
"Hey.",
178184
"[webpack-dev-server] Warnings while compiling.",
179-
"[webpack-dev-server] Warning from compilation",
185+
"[webpack-dev-server] WARNING
186+
Warning from compilation",
180187
"[webpack-dev-server] Errors while compiling. Reload prevented.",
181-
"[webpack-dev-server] Error from compilation",
188+
"[webpack-dev-server] ERROR
189+
Error from compilation",
182190
]
183191
`;
184192

@@ -189,7 +197,8 @@ Array [
189197
"[webpack-dev-server] Hot Module Replacement enabled.",
190198
"[webpack-dev-server] Live Reloading enabled.",
191199
"[webpack-dev-server] Warnings while compiling.",
192-
"[webpack-dev-server] Warning from compilation",
200+
"[webpack-dev-server] WARNING
201+
Warning from compilation",
193202
]
194203
`;
195204

@@ -200,7 +209,8 @@ Array [
200209
"[webpack-dev-server] Hot Module Replacement enabled.",
201210
"[webpack-dev-server] Live Reloading enabled.",
202211
"[webpack-dev-server] Warnings while compiling.",
203-
"[webpack-dev-server] Warning from compilation",
212+
"[webpack-dev-server] WARNING
213+
Warning from compilation",
204214
]
205215
`;
206216

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

+20-10
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ Array [
1919
"[webpack-dev-server] Hot Module Replacement enabled.",
2020
"[webpack-dev-server] Live Reloading enabled.",
2121
"[webpack-dev-server] Errors while compiling. Reload prevented.",
22-
"[webpack-dev-server] Error from compilation",
22+
"[webpack-dev-server] ERROR
23+
Error from compilation",
2324
]
2425
`;
2526

@@ -30,7 +31,8 @@ Array [
3031
"[webpack-dev-server] Hot Module Replacement enabled.",
3132
"[webpack-dev-server] Live Reloading enabled.",
3233
"[webpack-dev-server] Errors while compiling. Reload prevented.",
33-
"[webpack-dev-server] Error from compilation",
34+
"[webpack-dev-server] ERROR
35+
Error from compilation",
3436
]
3537
`;
3638

@@ -122,15 +124,17 @@ exports[`logging should work and log only error (sockjs) 1`] = `
122124
Array [
123125
"Hey.",
124126
"[webpack-dev-server] Errors while compiling. Reload prevented.",
125-
"[webpack-dev-server] Error from compilation",
127+
"[webpack-dev-server] ERROR
128+
Error from compilation",
126129
]
127130
`;
128131

129132
exports[`logging should work and log only error (ws) 1`] = `
130133
Array [
131134
"Hey.",
132135
"[webpack-dev-server] Errors while compiling. Reload prevented.",
133-
"[webpack-dev-server] Error from compilation",
136+
"[webpack-dev-server] ERROR
137+
Error from compilation",
134138
]
135139
`;
136140

@@ -166,19 +170,23 @@ exports[`logging should work and log warning and errors (sockjs) 1`] = `
166170
Array [
167171
"Hey.",
168172
"[webpack-dev-server] Warnings while compiling.",
169-
"[webpack-dev-server] Warning from compilation",
173+
"[webpack-dev-server] WARNING
174+
Warning from compilation",
170175
"[webpack-dev-server] Errors while compiling. Reload prevented.",
171-
"[webpack-dev-server] Error from compilation",
176+
"[webpack-dev-server] ERROR
177+
Error from compilation",
172178
]
173179
`;
174180

175181
exports[`logging should work and log warning and errors (ws) 1`] = `
176182
Array [
177183
"Hey.",
178184
"[webpack-dev-server] Warnings while compiling.",
179-
"[webpack-dev-server] Warning from compilation",
185+
"[webpack-dev-server] WARNING
186+
Warning from compilation",
180187
"[webpack-dev-server] Errors while compiling. Reload prevented.",
181-
"[webpack-dev-server] Error from compilation",
188+
"[webpack-dev-server] ERROR
189+
Error from compilation",
182190
]
183191
`;
184192

@@ -189,7 +197,8 @@ Array [
189197
"[webpack-dev-server] Hot Module Replacement enabled.",
190198
"[webpack-dev-server] Live Reloading enabled.",
191199
"[webpack-dev-server] Warnings while compiling.",
192-
"[webpack-dev-server] Warning from compilation",
200+
"[webpack-dev-server] WARNING
201+
Warning from compilation",
193202
]
194203
`;
195204

@@ -200,7 +209,8 @@ Array [
200209
"[webpack-dev-server] Hot Module Replacement enabled.",
201210
"[webpack-dev-server] Live Reloading enabled.",
202211
"[webpack-dev-server] Warnings while compiling.",
203-
"[webpack-dev-server] Warning from compilation",
212+
"[webpack-dev-server] WARNING
213+
Warning from compilation",
204214
]
205215
`;
206216

0 commit comments

Comments
 (0)