[Feature request] Show browser error overlay for runtime errors

I really like the browser error overlay that we get for compile errors (server.hmr.overlay). But runtime errors still appear only in console. It would be nice if runtime errors could also be displayed using the nice browser error overlay.

For example, it would be nice to get the overlay if I forgot to import ref:

<script setup>
    import HelloWorld from './components/HelloWorld.vue'

    const name = ref('Martin')
</script>

I’m talking about this overlay:

[janwirth]

The overlay is an overlay so it’s not replaced, it’s overlaid or am I missing something here?

This does the trick for me:

// REGISTER ERROR OVERLAY
const showErrorOverlay = err => {
    // must be within function call because that's when the element is defined for sure.
    const ErrorOverlay = customElements.get('vite-error-overlay')
    // don't open outside vite environment
    if (!ErrorOverlay) {return}
    console.log(err)
    const overlay = new ErrorOverlay(err)
    document.body.appendChild(overlay)
}

window.addEventListener('error', showErrorOverlay)
window.addEventListener('unhandledrejection', ({reason}) => showErrorOverlay(reason))

[TechAkayy]

Please prioritise this one, we are all spoilt by our previous experiences with webpack and other dev-servers. Really hard to live without the run-time overlay. Thanks!