Consider using PrettyError for error messages

Webpack’s error messages are a bit hard to read and could use some formatting:

image

Have you guys considered using a package like PrettyError for formatting webpack’s error messages? PrettyError helps make stack traces more readable, and it’s very easy to integrate into other packages.

screenshot

You could also use RenderKid for formatting the rest of webpack’s logs. RenderKid has features like text-wrapping, so that lines of a paragraph wrap inside the paragraph’s margins, unlike this:

image

Both PrettyError and RenderKid can be customized with css-like rules, so that webpack can define a common theme for its console output, regardless of which plugin those messages come from.

ps. I’m the author of both packages, and I can help with the integration process.

Author: Fantashit

2 thoughts on “Consider using PrettyError for error messages

  1. A more relevant question would be: if I’m not a webpack/plugin developer, there’s really no value in these errors. As a developer I want to see one single error: what happened:

    • A loader failed to parse file X at line Y expecting Z.
    • webpack failed to find module M referenced from module N even though it looked at directories O, P and Q
    • etc.

    This entire stacktrace, and loaders’ stacktraces and any other stacktraces should be hidden by default and enabled through a -enable-verbose-logging switch.

    (I’m currently looking at easily 100 lines of a stacktrace including tens of lines of Parser.pp.<> at webpack/node_modules/acorn/dist/acorn.js and Storage.finished at node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js where I need only one single line: ERROR in [default] xxx.js:3:15 Expression expected.)

  2. We did implement what @dmitriid suggested. By default no stack trace is shown and only the relevant message. --display-error-details show the complete stack.

    In addition to this everybody is free to use PrettyError in the webpack.config.js. Just add require('pretty-error').start(); on top.

Comments are closed.