[✨] Enhanced Error Overlay [DX]

[zanettin]

Is your feature request related to a problem?

Enhance the current error overlay to increase DX

Describe the solution you'd like

Astro v2 just launched a new error overlay which provides additional informationen and a cleaner overview. To implement a custom overlay we would need to "opt-out" of the vite provided web component (vite-error-overlay) and create a custom solution.

things we could included if we want to implement this:

• qwikified look and feel (use qwik colors, fonts ,etc)
• show more lines of code in the trace
• highlight the row that contains the error
• reference the docs for certain issues
• "open in editor" link instead of the current file path link

Describe alternatives you've considered

Keep the existing one and lower the maintenance work 😄

Additional context

No response

[manucorporat]

Imo the error overlay is pretty good, astro 2 is a nice CSS, but the heavy work is in improving the error itself, not the overlay.

Vite overlay can be styled!
vitejs/vite#10234
PR welcome!

[zanettin]

@manucorporat still WIP and guess i'd need more exposures from the vite side, but do you have already some feedback? and sry i am not a designer 🤣

Current State

WIP State

• v1
  
• v2
  

things to adjust

• plugin:vite-plugin-qwik decrease font size (waiting for refactor: customize ErrorOverlay (part 2) vitejs/vite#11830)
• find out where to store the CSS so that also server errors on blank pages get these styles
• hide stack trace when no content is available
• add some icons
• logo?

Info

• Icons are from https://www.svgrepo.com/ and free to use