fix: show error if vite client cannot be loaded

[benmccann]

Description

fixes #17418

Ensure that we show an error if /@vite/client cannot be loaded. Prior to this PR the error handler worked only with post middlewares. Now it works with all middlewares

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[bluwy]

I feel we could improve the DX by having the error overlay support a "standalone" mode or "non-dismissable" mode? That way the error overlay is non-dismissable (as there's no reason so), and if they accidentally clicked outside, they won't get a lousier UI.

I also think we should only render the fallback error if the error overlay fail to load? We should also add an additional message that the error overlay failed to load.

[benmccann]

Those sound like reasonable ideas, but are all more complicated to implement and are just UX niceties. Maybe we could move ahead with this to fix the core issue of having a blank page and then file an issue for the followup ideas

[bluwy]

I don't think the issue is urgent enough that we should go ahead with this middleground, since the error can be viewed from the terminal too? So I'm leaning on doing a proper fix instead 😬

[benmccann]

I also think we should only render the fallback error if the error overlay fail to load? We should also add an additional message that the error overlay failed to load.

I made both of these changes

I feel we could improve the DX by having the error overlay support a "standalone" mode or "non-dismissable" mode? That way the error overlay is non-dismissable (as there's no reason so), and if they accidentally clicked outside, they won't get a lousier UI.

This part really feels separate to me. The current PR is purely an improvement over the current state. In the cases where there previously was a blank page we're now showing an error and in the cases where the overlay was rendering it's exactly the same. I do like the idea of a non-dismissable mode, but think we could handle that in a separate PR

[bluwy]

Thanks! Yeah fair we can handle that separately 👍

[patak-dev]

I think we should merge this one so the issue is fixed, and we can improve it later on

[bluwy]

document.innerHTML = didn't work for me, I needed to use document.body.innerHTML. But anyways I used .appendChild directly since this would help with weird security stuff, and we don't have to concern of escaping much as we use .textContent. I also updated the view a bit. Now it looks like this:

I also tried inlining the overlay to prevent any requests, but that seemed tricky as we need it to go through the plugin pipeline (for any frameworks who want to edit it) and deal with constants that can only be replaced by the clientInjections plugin.

[benmccann]

Thank you @bluwy. I appreciate you taking the time to look at this and make additional improvements! The changes you made look good to me

[patak-dev]

Nice!