Page refresh loop when browser websocket is disabled

[devxzero]

Describe the bug

The demo app generated by Sveltekit causes a page refresh loop when accessing the default URL http://localhost:3000, and the webbrowser has websocket disabled. When accessing the URL, it immediately causes many page reloads per second, which can hit a server in performance.

Enabling websocket disables this problem in Firefox (latest version). The problem likely also occurs in other browsers when websocket is disabled.
A reason why a client may disable websocket, is security. Websocket makes it possible for remote sites to perform local portscans at clients: https://nullsweep.com/why-is-this-website-port-scanning-me/

Reproduction

Disable websocket in Firefox by going to URL: about:config and set network.websocket.max-connections to 0.

Then generate a project with:
npm init svelte@next my-svelte-app
I selected TypeScript: no, and left everything to default.
Then npm install, then run it with npm run dev, and go to http://localhost:3000.

The page will immediately into a refresh loop.

Logs

17:14:43.004 [vite] connecting... client.ts:22:8
17:14:43.008 Firefox can’t establish a connection to the server at ws://localhost:3000/. client.ts:28:15
17:14:43.009 [vite] server connection lost. polling for restart... client.ts:222:10
17:14:43.076
XHRGEThttp://localhost:3000/__vite_ping
[HTTP/1.1 200 OK 0ms]

17:14:43.129 Navigated to http://localhost:3000/
17:14:43.359 [vite] connecting... client.ts:22:8
17:14:43.364 Firefox can’t establish a connection to the server at ws://localhost:3000/. client.ts:28:15
17:14:43.364 [vite] server connection lost. polling for restart... client.ts:222:10
17:14:43.383
XHRGEThttp://localhost:3000/__vite_ping
[HTTP/1.1 200 OK 0ms]

17:14:43.415 Navigated to http://localhost:3000/
17:14:43.593 [vite] connecting... client.ts:22:8
17:14:43.598 Firefox can’t establish a connection to the server at ws://localhost:3000/. client.ts:28:15
17:14:43.598 [vite] server connection lost. polling for restart... client.ts:222:10
17:14:43.614
XHRGEThttp://localhost:3000/__vite_ping
[HTTP/1.1 200 OK 0ms]

17:14:43.654 Navigated to http://localhost:3000/
17:14:43.828 [vite] connecting... client.ts:22:8
17:14:43.832 Firefox can’t establish a connection to the server at ws://localhost:3000/. client.ts:28:15
17:14:43.832 [vite] server connection lost. polling for restart... client.ts:222:10
17:14:43.848
XHRGEThttp://localhost:3000/__vite_ping
[HTTP/1.1 200 OK 0ms]

17:14:43.889 Navigated to http://localhost:3000/
17:14:44.074 [vite] connecting... client.ts:22:8
17:14:44.080 Firefox can’t establish a connection to the server at ws://localhost:3000/. client.ts:28:15
17:14:44.081 [vite] server connection lost. polling for restart... client.ts:222:10
17:14:44.100
XHRGEThttp://localhost:3000/__vite_ping
[HTTP/1.1 200 OK 0ms]

17:14:44.147 Navigated to http://localhost:3000/
17:14:44.323 [vite] connecting... client.ts:22:8
17:14:44.329 Firefox can’t establish a connection to the server at ws://localhost:3000/. client.ts:28:15

System Info

Windows 11
Firefox 96.0
SvelteKit v1.0.0-next.228
create-svelte version 2.0.0-next.94

Severity

blocking all usage of SvelteKit

Additional Information

No response

[Conduitry]

This is Vite behavior. There are a bunch of issues on their repo related to HMR and the autorefresh when the browser can't reach the websocket server.

I just found the recent PR vitejs/vite#6090 which may be interesting.

There's not really anything that SvelteKit can do about this currently.

[Conduitry]

This is also only going to affect dev mode, not your production app. It won't matter if any of your users have websockets disabled. I'm closing this in favor of however Vite decides they want to improve the dev experience here when the HMR server is unreachable.

[devxzero]

Agreed. As a temporary workaround, the automatic page reloads caused Vite can be avoided by removing the location.reload() lines from node_modules/vite/dist/client/client.mjs.

[moisesbites]

I did the same at:

// ping server
socket.addEventListener('close', async ({ wasClean }) => {
    if (wasClean)
        return;
    console.log(`[vite] server connection lost. polling for restart...`);
    await waitForSuccessfulPing();
    //location.reload();
});

That's the only way I can work.