Skip to content

Commit

Permalink
feat: show ws connection error (#9007)
Browse files Browse the repository at this point in the history
  • Loading branch information
sapphi-red authored Jul 9, 2022
1 parent 05b17df commit da7c3ae
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 5 deletions.
16 changes: 15 additions & 1 deletion packages/vite/src/client/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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__
Expand All @@ -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',
() => {
Expand Down
15 changes: 11 additions & 4 deletions packages/vite/src/node/plugins/clientInjections.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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))
Expand Down

0 comments on commit da7c3ae

Please sign in to comment.