feat: show ws connection error and don't reload if ws connection did not success

[sapphi-red]

Description

#8650 introduced a fallback mechanism when the connection did not success.
This PR uses that to prevent reload if ws connection did not success.
Also this PR adds an error output when that happened.

fixes #8861 (because this PR will prevent reload if ws did not connect)
fixes #6089, close #6090 (because this PR will prevent reload if ws did not connect)

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[netlify]

✅ Deploy Preview for vite-docs-main canceled.

Name	Link
🔨 Latest commit	07543af
🔍 Latest deploy log	https://app.netlify.com/sites/vite-docs-main/deploys/62c973f725f7b100081c3e77

[patak-dev]

Would the auto-reconnect feature of Vite still work after this PR? (I think this isn't an accidental feature, no?)

Scenario:

• Vite client connects properly
• The server at one point is closed
• Vite client pings and fails
• Vite keeps pinging...
• The server is up again
• Next ping is successful and the page is reloaded

[sapphi-red]

Yes, it still works with that scenario.

Once websocket's readyState changes to OPEN, fallback function won't be called

vite/packages/vite/src/client/client.ts

Lines 78 to 101 in 07543af

	const socket = new WebSocket(`${protocol}://${hostAndPath}`, 'vite-hmr')
	let isOpened = false
	socket.addEventListener(
	'open',
	() => {
	isOpened = true
	},
	{ once: true }
	)
	// Listen for messages
	socket.addEventListener('message', async ({ data }) => {
	handleMessage(JSON.parse(data))
	})
	// ping server
	socket.addEventListener('close', async ({ wasClean }) => {
	if (wasClean) return
	if (!isOpened && onCloseWithoutOpen) {
	onCloseWithoutOpen()
	return
	}

• open event sets isOpened = true
• fallback function (param name is onCloseWithoutOpen) is called only when close event happened and isOpened is false

[sapphi-red]

One scenario that will no longer work is:

• Vite server starts but websocket server does not yet
• browser shows the page
• Vite client fails to connect websocket (since websocket server is not started yet)
• websocket server starts
• pinging/reload won't happen (pinging/reload was happening before)

[patak-dev]

Should we retry a few times so that scenario keeps working?

[sapphi-red]

I don't think we need to support this scenario. I didn't come up with an actual situation that this scenario will happen.

Vite starts server and ws server at the same time. So when /@vite/client is accessible by browser, ws is possible to connect.
This is same with middleware mode. To register the middleware, createServer needs to be called, and ws server is started inside that.

[niksy]

@sapphi-red

One scenario that will no longer work is:

• Vite server starts but websocket server does not yet
• browser shows the page
• Vite client fails to connect websocket (since websocket server is not started yet)
• websocket server starts
• pinging/reload won't happen (pinging/reload was happening before)

Is this the scenario where someone is using Nodemon to restart whole server? Because I have situation where Nodemon performs restarts, Vite loses WebSocket connection, and if it doesn’t find it again (e.g. Nodemon hasn’t started new application fast enough), page gets reloaded.

It would be nice to somehow either prevent reload, or try to ping for WebSocket connection few more times to prevent page reload.

[sapphi-red]

@niksy No, that's different from what I said.

For that case, I think implementing #5675 would work.

[niksy]

@sapphi-red any pointers on what needs to be done to implement this?

[sapphi-red]

@niksy I'll leave a comment on #5675 👍

[zanetarock]

@sapphi-red Hello, could there possibly be a reason why this fallback works for Chrome but not on Firefox/Safari? I deployed a vite server but for some reasons websocket doesn't work. Then on chrome I can see the error messages, but for Firefox/Safari the page keeps reloading.

[sapphi-red]

@zanetarock Without a reproduction, I don't know. Please create an issue.

[aparajita]

@sapphi-red Unfortunately this is not working with WebKit-based hybrid apps.

[patak-dev]

@aparajita please create a new bug report so we can properly track the issue, you can link to this PR in it. A comment on an old merged PR would probably end up lost quickly.