HMR Overlay: Full-color error messages

[ryan-haskell]

Hello everyone! 👋

This is my first discussion post in the Vite community, and I want to start by thanking you all for the hard work you've put into making this free open-source tool for everyone. I totally understand if it doesn't align with Vite's design philosophy, but would love to hear your thoughts!

Context

I'm hoping to use Vite to power the dev server for a new framework I'm building for the Elm language. In the Elm community, we benefit from our compiler's friendly error messages.

The author of the language, Evan, has made the error messages really easy to read. One of the ways he does this is by strategically using color. This guides the reader's eyes to the most important parts of the error.

Here's a visual example of an Elm compiler error message:

My goal is to see error messages like these in the browser, with Vite's built-in HMR overlay. I'm currently using vite-plugin-elm, which allows me to use Vite with .elm files.

Problem

Here's an example of that same error message, but rendered today in Vite's HMR overlay with vite-plugin-elm:

As you can see, the error message is coming back completely red. This makes it more difficult to find the emphasized parts of the error.

I looked into the code powering "vite-plugin-elm", to see if I could make changes to the plugin, but discovered that the error color is a part of the core Vite experience.

Suggestion

By adjusting a local copy of the Vite source code, I was able to make Vite provide Elm error messages in the browser in full-color:

Although I was happy with my hack, an actual community solution needs to:

• Be backwards-compatible with other plugins
• Consider how this impacts Vite's terminal error output

Summary

Rather than trying to solve all those problems with code, I thought it would be a good idea to discuss the idea with the Vite community. Specifically, I'd love to understand:

• Is this feature a good fit for the Vite project?
• Is something like this already in-progress?
• What are some concerns or feedback you have for this change?

Thanks!
Ryan

[sapphi-red]

Looks nice to me!

• Is something like this already in-progress?

AFAIK there is not.

• What are some concerns or feedback you have for this change?

My only concern is about performance if it is going to use something like ansi-to-html. But I don't think it will affect it normally.

[ryan-haskell]

As an update for anyone who is interested, I was able to modify the vite-plugin-elm project to meet my needs, without any core changes to how Vite works!

• Instead of throwing an error for Vite's Error Overlay to render, I used server.ws.send('elm:error', ...) to make my own error overlay on the client side.

Vite's Plugin API and docs made this super easy to work with- and it enabled me to build this in a couple of hours.

The overlay is used in my open source project, so I wanted to share the related PR here:

• Add full color error message overlays elm-land/elm-land#3

Thanks again, Vite team!
Ryan

[FluidSense]

Have you considered making a Pull Request to vite-plugin-elm with your changes? 😄 I have looked into migrating to Vite in my Elm-projects, but the error messages being hard to read as all-red-on-dark-background has been a showstopper.

[patak-dev]

Hey @ryannhg, IMO this will be great as a feature in core if you still are interested. @sapphi-red performance should be fine if the processing is done on the server-side. We need to make sure that there the complexity remains low in the client.

Not directly related, but this is also something that could make a big diff. And there is also processing that needs to happen in the server for this to work:

• feat: runtime error overlay #6274

[ryan-haskell]

Hey @patak-dev, I would love to have this feature in core!

What are the next steps for adding this to Vite?

[patak-dev]

I think the best is to get a PR, so we can discuss there the implications and see if we get approval from the team. That I think it is a given if there aren't performance regression. I haven't looked at all the details, but what I would expect is that a node lib like @sapphi-red was proposing ansi-to-html is used to convert a colored error message to HTML before sending it to the browser. We could also check what others doing (are webpack or parcel already doing color error messages in the browser?) so we use the same libs they use. After that, it is a matter of checking that the current error overlay accepts the HTML string.

[Joyen12]

Hi guys, Has it been done ? I can't find the info about this. And this should be common sense that a msg red on black is not good UX. So I want to change it too, and yeah ofc I can change it in the source code but there should be an easy solution like using the config file or a plugin or something.
Thanks a lot