Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from Jul 9, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 15 additions & 1 deletion packages/vite/src/client/client.ts
View file
Open in desktop
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
View file
Open in desktop
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