fix: normalize asset prefix for socket if start with http

refactor: use URL obj

refactor: use URL canParse

Co-authored-by: Sebastian Silbermann <[email protected]>

refactor

packages/next/src/client/components/react-dev-overlay/internal/helpers/get-socket-url.ts

@@ -8,19 +8,19 @@ function getSocketProtocol(assetPrefix: string): string {
     protocol = new URL(assetPrefix).protocol
   } catch {}
 
-  return protocol === 'http:' ? 'ws' : 'wss'
+  return protocol === 'http:' ? 'ws:' : 'wss:'
 }
 
 export function getSocketUrl(assetPrefix: string | undefined): string {
-  const { hostname, port } = window.location
-  const protocol = getSocketProtocol(assetPrefix || '')
   const prefix = normalizedAssetPrefix(assetPrefix)
+  const protocol = getSocketProtocol(assetPrefix || '')
 
-  // if original assetPrefix is a full URL with protocol
-  // we just update to use the correct `ws` protocol
-  if (assetPrefix?.replace(/^\/+/, '').includes('://')) {
-    return `${protocol}://${prefix}`
+  if (URL.canParse(prefix)) {
+    // since normalized asset prefix is ensured to be a URL format,
+    // we can safely replace the protocol
+    return prefix.replace(/^http/, 'ws')
   }
 
-  return `${protocol}://${hostname}:${port}${prefix}`
+  const { hostname, port } = window.location
+  return `${protocol}//${hostname}${port ? `:${port}` : ''}${prefix}`
 }

packages/next/src/shared/lib/normalized-asset-prefix.ts

@@ -1,16 +1,19 @@
 export function normalizedAssetPrefix(assetPrefix: string | undefined): string {
+  // remove all leading slashes
   const escapedAssetPrefix = assetPrefix?.replace(/^\/+/, '') || false
 
-  // assetPrefix as a url
-  if (escapedAssetPrefix && escapedAssetPrefix.startsWith('://')) {
-    return escapedAssetPrefix.split('://', 2)[1]
-  }
-
-  // assetPrefix is set to `undefined` or '/'
+  // if an assetPrefix was '/', we return empty string
+  // because it could be an unnecessary trailing slash
   if (!escapedAssetPrefix) {
     return ''
   }
 
-  // assetPrefix is a common path but escaped so let's add one leading slash
+  if (URL.canParse(escapedAssetPrefix)) {
+    const { hostname, port, protocol, pathname } = new URL(escapedAssetPrefix)
+    return `${protocol}//${hostname}${port ? `:${port}` : ''}${pathname}`
+  }
+
+  // assuming assetPrefix here is a pathname-style,
+  // restore the leading slash
   return `/${escapedAssetPrefix}`
 }