feat: show ws connection error (#9007)

Author: sapphi-red

packages/vite/src/client/client.ts

@@ -7,6 +7,7 @@ import '@vite/env'
 
 // injected by the hmr plugin when served
 declare const __BASE__: string
+declare const __SERVER_HOST__: string
 declare const __HMR_PROTOCOL__: string | null
 declare const __HMR_HOSTNAME__: string | null
 declare const __HMR_PORT__: number | null
@@ -20,6 +21,7 @@ console.debug('[vite] connecting...')
 const importMetaUrl = new URL(import.meta.url)
 
 // use server configuration, then fallback to inference
+const serverHost = __SERVER_HOST__
 const socketProtocol =
   __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
 const hmrPort = __HMR_PORT__
@@ -38,7 +40,19 @@ try {
     fallback = () => {
       // fallback to connecting directly to the hmr server
       // for servers which does not support proxying websocket
-      socket = setupWebSocket(socketProtocol, directSocketHost)
+      socket = setupWebSocket(socketProtocol, directSocketHost, () => {
+        const currentScriptHostURL = new URL(import.meta.url)
+        const currentScriptHost =
+          currentScriptHostURL.host +
+          currentScriptHostURL.pathname.replace(/@vite\/client$/, '')
+        console.error(
+          '[vite] failed to connect to websocket.\n' +
+            'your current setup:\n' +
+            `  (browser) ${currentScriptHost} <--[HTTP]--> ${serverHost} (server)\n` +
+            `  (browser) ${socketHost} <--[WebSocket (failing)]--> ${directSocketHost} (server)\n` +
+            'Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .'
+        )
+      })
       socket.addEventListener(
         'open',
         () => {

packages/vite/src/node/plugins/clientInjections.ts

@@ -17,6 +17,14 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
     name: 'vite:client-inject',
     async transform(code, id, options) {
       if (id === normalizedClientEntry || id === normalizedEnvEntry) {
+        const resolvedServerHostname = (
+          await resolveHostname(config.server.host)
+        ).name
+        const resolvedServerPort = config.server.port!
+        const devBase = config.base
+
+        const serverHost = `${resolvedServerHostname}:${resolvedServerPort}${devBase}`
+
         let hmrConfig = config.server.hmr
         hmrConfig = isObject(hmrConfig) ? hmrConfig : undefined
         const host = hmrConfig?.host || null
@@ -31,10 +39,8 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
           port ||= 24678
         }
 
-        const devBase = config.base
-        let directTarget =
-          hmrConfig?.host || (await resolveHostname(config.server.host)).name
-        directTarget += `:${hmrConfig?.port || config.server.port!}`
+        let directTarget = hmrConfig?.host || resolvedServerHostname
+        directTarget += `:${hmrConfig?.port || resolvedServerPort}`
         directTarget += devBase
 
         let hmrBase = devBase
@@ -46,6 +52,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
           .replace(`__MODE__`, JSON.stringify(config.mode))
           .replace(`__BASE__`, JSON.stringify(devBase))
           .replace(`__DEFINES__`, serializeDefine(config.define || {}))
+          .replace(`__SERVER_HOST__`, JSON.stringify(serverHost))
           .replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol))
           .replace(`__HMR_HOSTNAME__`, JSON.stringify(host))
           .replace(`__HMR_PORT__`, JSON.stringify(port))