Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: formatting errors/warnings #3877

Merged
merged 4 commits into from Sep 24, 2021
Merged

fix: formatting errors/warnings #3877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f48f23
fix: formatting errors/warnings
alexander-akait Sep 24, 2021
7cae856
test: fix
alexander-akait Sep 24, 2021
22a0b1e
test: update
alexander-akait Sep 24, 2021
c85cd8f
test: update
alexander-akait Sep 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 19 additions & 15 deletions client-src/index.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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