Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: formatting errors/warnings (#3877)
  • Loading branch information
alexander-akait committed Sep 24, 2021
1 parent 229d79d commit f0dbea0
Show file tree
Hide file tree
Showing 9 changed files with 155 additions and 90 deletions.
34 changes: 19 additions & 15 deletions client-src/index.js
Expand Up @@ -4,7 +4,7 @@ import webpackHotLog from "webpack/hot/log.js";
import stripAnsi from "./modules/strip-ansi/index.js";
import parseURL from "./utils/parseURL.js";
import socket from "./socket.js";
import { show, hide } from "./overlay.js";
import { formatProblem, show, hide } from "./overlay.js";
import { log, setLogLevel } from "./utils/log.js";
import sendMessage from "./utils/sendMessage.js";
import reloadApp from "./utils/reloadApp.js";
Expand Down Expand Up @@ -152,14 +152,16 @@ const onSocketMessage = {
warnings(warnings) {
log.warn("Warnings while compiling.");

const strippedWarnings = warnings.map((warning) =>
stripAnsi(warning.message ? warning.message : warning)
);
const printableWarnings = warnings.map((error) => {
const { header, body } = formatProblem("warning", error);

return `${header}\n${stripAnsi(body)}`;
});

sendMessage("Warnings", strippedWarnings);
sendMessage("Warnings", printableWarnings);

for (let i = 0; i < strippedWarnings.length; i++) {
log.warn(strippedWarnings[i]);
for (let i = 0; i < printableWarnings.length; i++) {
log.warn(printableWarnings[i]);
}

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

if (needShowOverlayForWarnings) {
show(warnings, "warnings");
show("warning", warnings);
}

reloadApp(options, status);
},
errors(errors) {
log.error("Errors while compiling. Reload prevented.");

const strippedErrors = errors.map((error) =>
stripAnsi(error.message ? error.message : error)
);
const printableErrors = errors.map((error) => {
const { header, body } = formatProblem("error", error);

return `${header}\n${stripAnsi(body)}`;
});

sendMessage("Errors", strippedErrors);
sendMessage("Errors", printableErrors);

for (let i = 0; i < strippedErrors.length; i++) {
log.error(strippedErrors[i]);
for (let i = 0; i < printableErrors.length; i++) {
log.error(printableErrors[i]);
}

const needShowOverlayForErrors =
Expand All @@ -192,7 +196,7 @@ const onSocketMessage = {
: options.overlay && options.overlay.errors;

if (needShowOverlayForErrors) {
show(errors, "errors");
show("error", errors);
}
},
error(error) {
Expand Down
42 changes: 35 additions & 7 deletions client-src/overlay.js
Expand Up @@ -124,20 +124,48 @@ function hide() {
containerElement = null;
}

function formatProblem(type, item) {
let header = type === "warning" ? "WARNING" : "ERROR";
let body = "";

if (typeof item === "string") {
body += item;
} else {
const file = item.file || "";
// eslint-disable-next-line no-nested-ternary
const moduleName = item.moduleName
? item.moduleName.indexOf("!") !== -1
? `${item.moduleName.replace(/^(\s|\S)*!/, "")} (${item.moduleName})`
: `${item.moduleName}`
: "";
const loc = item.loc;

header += `${
moduleName || file
? ` in ${
moduleName ? `${moduleName}${file ? ` (${file})` : ""}` : file
}${loc ? ` ${loc}` : ""}`
: ""
}`;
body += item.message || "";
}

return { header, body };
}

// Compilation with errors (e.g. syntax error or missing modules).
function show(messages, type) {
function show(type, messages) {
ensureOverlayExists(() => {
messages.forEach((message) => {
const entryElement = document.createElement("div");
const typeElement = document.createElement("span");
// ts-loader will output `error.file` for error file path, not in message
typeElement.innerText =
(type === "warnings" ? "Warning:" : "Error:") + (message.file || "");
const { header, body } = formatProblem(type, message);

typeElement.innerText = header;
typeElement.style.color = `#${colors.red}`;

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

messageTextNode.innerHTML = text;
Expand All @@ -154,4 +182,4 @@ function show(messages, type) {
});
}

export { show, hide };
export { formatProblem, show, hide };
9 changes: 6 additions & 3 deletions test/client/__snapshots__/index.test.js.snap.webpack4
Expand Up @@ -45,13 +45,16 @@ exports[`index should run onSocketMessage.warnings 2`] = `"Warnings"`;
exports[`index should run onSocketMessage.warnings 3`] = `
Array [
Array [
"warn1",
"HEADER warning
BODY: warning",
],
Array [
"warn2",
"HEADER warning
BODY: warning",
],
Array [
"warn3",
"HEADER warning
BODY: warning",
],
]
`;
Expand Down
9 changes: 6 additions & 3 deletions test/client/__snapshots__/index.test.js.snap.webpack5
Expand Up @@ -45,13 +45,16 @@ exports[`index should run onSocketMessage.warnings 2`] = `"Warnings"`;
exports[`index should run onSocketMessage.warnings 3`] = `
Array [
Array [
"warn1",
"HEADER warning
BODY: warning",
],
Array [
"warn2",
"HEADER warning
BODY: warning",
],
Array [
"warn3",
"HEADER warning
BODY: warning",
],
]
`;
Expand Down
3 changes: 3 additions & 0 deletions test/client/index.test.js
Expand Up @@ -39,6 +39,9 @@ describe("index", () => {
jest.setMock("../../client-src/overlay.js", {
hide: jest.fn(),
show: jest.fn(),
formatProblem: (item) => {
return { header: "HEADER warning", body: `BODY: ${item}` };
},
});
overlay = require("../../client-src/overlay");

Expand Down
30 changes: 20 additions & 10 deletions test/e2e/__snapshots__/logging.test.js.snap.webpack4
Expand Up @@ -19,7 +19,8 @@ Array [
"[webpack-dev-server] Hot Module Replacement enabled.",
"[webpack-dev-server] Live Reloading enabled.",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

Expand All @@ -30,7 +31,8 @@ Array [
"[webpack-dev-server] Hot Module Replacement enabled.",
"[webpack-dev-server] Live Reloading enabled.",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

Expand Down Expand Up @@ -122,15 +124,17 @@ exports[`logging should work and log only error (sockjs) 1`] = `
Array [
"Hey.",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

exports[`logging should work and log only error (ws) 1`] = `
Array [
"Hey.",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

Expand Down Expand Up @@ -166,19 +170,23 @@ exports[`logging should work and log warning and errors (sockjs) 1`] = `
Array [
"Hey.",
"[webpack-dev-server] Warnings while compiling.",
"[webpack-dev-server] Warning from compilation",
"[webpack-dev-server] WARNING
Warning from compilation",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

exports[`logging should work and log warning and errors (ws) 1`] = `
Array [
"Hey.",
"[webpack-dev-server] Warnings while compiling.",
"[webpack-dev-server] Warning from compilation",
"[webpack-dev-server] WARNING
Warning from compilation",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

Expand All @@ -189,7 +197,8 @@ Array [
"[webpack-dev-server] Hot Module Replacement enabled.",
"[webpack-dev-server] Live Reloading enabled.",
"[webpack-dev-server] Warnings while compiling.",
"[webpack-dev-server] Warning from compilation",
"[webpack-dev-server] WARNING
Warning from compilation",
]
`;

Expand All @@ -200,7 +209,8 @@ Array [
"[webpack-dev-server] Hot Module Replacement enabled.",
"[webpack-dev-server] Live Reloading enabled.",
"[webpack-dev-server] Warnings while compiling.",
"[webpack-dev-server] Warning from compilation",
"[webpack-dev-server] WARNING
Warning from compilation",
]
`;

Expand Down
30 changes: 20 additions & 10 deletions test/e2e/__snapshots__/logging.test.js.snap.webpack5
Expand Up @@ -19,7 +19,8 @@ Array [
"[webpack-dev-server] Hot Module Replacement enabled.",
"[webpack-dev-server] Live Reloading enabled.",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

Expand All @@ -30,7 +31,8 @@ Array [
"[webpack-dev-server] Hot Module Replacement enabled.",
"[webpack-dev-server] Live Reloading enabled.",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

Expand Down Expand Up @@ -122,15 +124,17 @@ exports[`logging should work and log only error (sockjs) 1`] = `
Array [
"Hey.",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

exports[`logging should work and log only error (ws) 1`] = `
Array [
"Hey.",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

Expand Down Expand Up @@ -166,19 +170,23 @@ exports[`logging should work and log warning and errors (sockjs) 1`] = `
Array [
"Hey.",
"[webpack-dev-server] Warnings while compiling.",
"[webpack-dev-server] Warning from compilation",
"[webpack-dev-server] WARNING
Warning from compilation",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

exports[`logging should work and log warning and errors (ws) 1`] = `
Array [
"Hey.",
"[webpack-dev-server] Warnings while compiling.",
"[webpack-dev-server] Warning from compilation",
"[webpack-dev-server] WARNING
Warning from compilation",
"[webpack-dev-server] Errors while compiling. Reload prevented.",
"[webpack-dev-server] Error from compilation",
"[webpack-dev-server] ERROR
Error from compilation",
]
`;

Expand All @@ -189,7 +197,8 @@ Array [
"[webpack-dev-server] Hot Module Replacement enabled.",
"[webpack-dev-server] Live Reloading enabled.",
"[webpack-dev-server] Warnings while compiling.",
"[webpack-dev-server] Warning from compilation",
"[webpack-dev-server] WARNING
Warning from compilation",
]
`;

Expand All @@ -200,7 +209,8 @@ Array [
"[webpack-dev-server] Hot Module Replacement enabled.",
"[webpack-dev-server] Live Reloading enabled.",
"[webpack-dev-server] Warnings while compiling.",
"[webpack-dev-server] Warning from compilation",
"[webpack-dev-server] WARNING
Warning from compilation",
]
`;

Expand Down

0 comments on commit f0dbea0

Please sign in to comment.