Skip to content

Log vfile messages in Webpack loader - #2683

Open
remcohaszing wants to merge 3 commits into
mainfrom
webpack-log-messages
Open

Log vfile messages in Webpack loader#2683
remcohaszing wants to merge 3 commits into
mainfrom
webpack-log-messages

Conversation

@remcohaszing

Copy link
Copy Markdown
Member

Initial checklist

  • I read the support docs
  • I read the contributing guide
  • I agree to follow the code of conduct
  • I searched issues and discussions and couldn’t find anything or linked relevant results below
  • I made sure the docs are up to date
  • I included tests (or that’s not needed)

Description of changes

Some of our integrations turn vfile messages into log messages for the tool they integrate with. This was missing from the Webpack loader. This change logs vfile messages in the Webpack loader.

For more information on Webpack logger severity, see https://webpack.js.org/api/logging/#logger-methods.

The Webpack logger allows you to log arbritrary values. These get stringified. However, this is extremely verbose. Instead, I decided to represent messaged with single-line strings. The logs contain a full file path with line number. I find this useful, because some terminal editors make this format clickable.

The following screenshot shows that it looks like

Webpack output with a warning and an info messages for 2 MDX files.

Some of our integrations turn vfile messages into log messages for the
tool they integrate with. This was missing from the Webpack loader. This
change logs vfile messages in the Webpack loader.

For more information on Webpack logger severity, see
https://webpack.js.org/api/logging/#logger-methods.

The Webpack logger allows you to log arbritrary values. These get
stringified. However, this is extremely verbose. Instead, I decided to
represent messaged with single-line strings. The logs contain a full
file path with line number. I find this useful, because some terminal
editors make this format clickable.
@github-actions github-actions Bot added 👋 phase/new Post is being triaged automatically 🤞 phase/open Post is being triaged manually and removed 👋 phase/new Post is being triaged automatically labels May 31, 2026
@remcohaszing remcohaszing added 🦋 type/enhancement This is great to have 🗄 area/interface This affects the public interface 🧒 semver/minor This is backwards-compatible change labels May 31, 2026
@codecov

codecov Bot commented May 31, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (c20db6a) to head (3754757).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #2683   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           21        21           
  Lines         2649      2649           
  Branches         2         2           
=========================================
  Hits          2649      2649           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

} else {
logger.warn(log)
}
}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Somewhat important:

  • Maybe a separate function, to build a message?

More options:

  • other than positional info (maybe also start/end), source/ruleId, maybe cause can be added?
    let text = message.reason
    if (message.cause) {
    text = `${text}:\n ${message.cause}`
    }
  • have you considered using reason instead of message? I think that’s the normal field in VFileMessage, IIRC message has a little more things (because it’s an Error)

There could of course be more (https://github.com/vfile/vfile-reporter/blob/270c90b69c836ed03aab5e49fc3fe93d372fe2cd/lib/index.js#L363), and that can be your answer to the above too, but things can be added too.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From https://webpack.js.org/api/logging/:

Warning

Avoid noise in the log! Keep in mind that multiple plugins and loaders are used together. Loaders are usually processing multiple files and are invoked for every file. Choose a logging level as low as possible to keep the log output informative.

So I decided to keep the logs minimal, but informative, on a single line.

The source and rule id are already logged.

It would be possible to log the cause, note, and url at a more verbose severity.

The message and reason properties of VFileMessage are assigned the same value, but I can use reason if your prefer.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think reason is better; that’s the one chosen for vfile-message; message is from Error / for Error compatibility

https://github.com/vfile/vfile-message/blob/2c782c8580c5b0a14baae19fa8badc628e567461/lib/index.js#L234

As for their warning: understandable, but I don’t think MDX should make that choice. I think plugins need to make that choice.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As for their warning: understandable, but I don’t think MDX should make that choice. I think plugins need to make that choice.

I don’t understand. This loader is where we do make the choice what to display to the user and how to format it. It’s up to the plugin what information to provide.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In short:
a user can intentionally use a plugin that provides a lot of info in logs.
Neither MDX nor Webpack should remove all that important info.
Only if there are options

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the option is the logger verbosity. We can log other fields at a different verbosity.

Also use `message.reason` instead of `message.message`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🗄 area/interface This affects the public interface 🤞 phase/open Post is being triaged manually 🧒 semver/minor This is backwards-compatible change 🦋 type/enhancement This is great to have

Development

Successfully merging this pull request may close these issues.

2 participants