fix(script): harden lifecycle and SDK loading (#850)

Author: harlan-zw

packages/devtools-app/composables/rpc.ts

@@ -4,15 +4,15 @@ import type { $Fetch } from 'nitropack/types'
 import type { Ref } from 'vue'
 import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 import { ofetch } from 'ofetch'
-import { onScopeDispose, ref, watch, watchEffect } from 'vue'
+import { ref, watch, watchEffect } from 'vue'
 import { firstPartyData, isConnected, path, query, refreshSources, standaloneUrl, syncScripts, version } from './state'
 
 export const appFetch: Ref<$Fetch | undefined> = ref()
 export const devtools: Ref<NuxtDevtoolsClient | undefined> = ref()
 export const colorMode: Ref<'dark' | 'light'> = ref('dark')
 
 export interface DevtoolsConnectionOptions {
-  onConnected?: (client: any) => void
+  onConnected?: (client: any) => void | (() => void)
   onRouteChange?: (route: any) => void
 }
 
@@ -27,66 +27,111 @@ const STANDALONE_POLL_INTERVAL = 2000
  * - **Embedded**: running inside Nuxt DevTools iframe (automatic)
  * - **Standalone**: running directly in a browser tab with a manual dev server URL
  */
-export function useDevtoolsConnection(options: DevtoolsConnectionOptions = {}): void {
+export function useDevtoolsConnection(options: DevtoolsConnectionOptions = {}): () => void {
   const inIframe = window.parent !== window
+  let disposed = false
+  const connectionCleanups: Array<() => void> = []
+  let pollTimer: ReturnType<typeof setInterval> | undefined
+  let pollController: AbortController | undefined
+
+  const stopPolling = () => {
+    if (pollTimer) {
+      clearInterval(pollTimer)
+      pollTimer = undefined
+    }
+    pollController?.abort()
+    pollController = undefined
+  }
+
+  const cleanupConnection = () => {
+    connectionCleanups.splice(0).forEach(cleanup => cleanup())
+    devtools.value = undefined
+    appFetch.value = undefined
+    isConnected.value = false
+  }
 
   // Embedded mode: connect via devtools-kit iframe client
+  let stopClientConnection = () => {}
   if (inIframe) {
-    onDevtoolsClientConnected(async (client) => {
+    stopClientConnection = onDevtoolsClientConnected((client) => {
+      if (disposed)
+        return
+      stopPolling()
+      cleanupConnection()
       isConnected.value = true
       // @ts-expect-error untyped
       appFetch.value = client.host.app.$fetch
-      watchEffect(() => {
+      connectionCleanups.push(watchEffect(() => {
         colorMode.value = client.host.app.colorMode.value
-      })
+      }))
       devtools.value = client.devtools
-      options.onConnected?.(client)
+      const cleanupConnected = options.onConnected?.(client)
+      if (cleanupConnected)
+        connectionCleanups.push(cleanupConnected)
 
       if (options.onRouteChange) {
         const $route = client.host.nuxt.vueApp.config.globalProperties?.$route
         options.onRouteChange($route)
         const removeAfterEach = client.host.nuxt.$router.afterEach((route: any) => {
           options.onRouteChange!(route)
         })
-        // Clean up when devtools client disconnects
-        // @ts-expect-error app:unmount exists at runtime but is not in RuntimeNuxtHooks
-        client.host.nuxt.hook('app:unmount', removeAfterEach)
+        connectionCleanups.push(removeAfterEach)
       }
-    })
+      // @ts-expect-error app:unmount exists at runtime but is not in RuntimeNuxtHooks
+      connectionCleanups.push(client.host.nuxt.hook('app:unmount', cleanupConnection))
+    }) || (() => {})
   }
 
   // Standalone mode: create appFetch from manually entered URL and poll for state
-  let pollTimer: ReturnType<typeof setInterval> | undefined
+  const poll = async (url: string) => {
+    // A slow/unreachable app must not accumulate overlapping interval requests.
+    if (pollController)
+      return
+    const controller = new AbortController()
+    pollController = controller
+    try {
+      await pollStandaloneState(url, controller.signal)
+    }
+    finally {
+      if (pollController === controller)
+        pollController = undefined
+    }
+  }
 
-  watch(() => standaloneUrl.value, (url) => {
+  const stopStandaloneWatch = watch(() => standaloneUrl.value, (url) => {
     // Clean up previous polling
-    if (pollTimer) {
-      clearInterval(pollTimer)
-      pollTimer = undefined
-    }
+    stopPolling()
 
     if (url && !isConnected.value) {
       appFetch.value = ofetch.create({ baseURL: url }) as unknown as $Fetch
       // Use system color scheme preference
       colorMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
       refreshSources()
       // Start polling the standalone API for script state
-      pollStandaloneState(url)
-      pollTimer = setInterval(pollStandaloneState, STANDALONE_POLL_INTERVAL, url)
+      void poll(url)
+      pollTimer = setInterval(() => void poll(url), STANDALONE_POLL_INTERVAL)
     }
   }, { immediate: true })
 
-  onScopeDispose(() => {
-    if (pollTimer) {
-      clearInterval(pollTimer)
-    }
-  })
+  return () => {
+    if (disposed)
+      return
+    disposed = true
+    stopPolling()
+    stopStandaloneWatch()
+    stopClientConnection()
+    cleanupConnection()
+  }
 }
 
-async function pollStandaloneState(baseUrl: string) {
+async function pollStandaloneState(baseUrl: string, signal: AbortSignal) {
+  const timeoutController = new AbortController()
+  const timeout = setTimeout(() => timeoutController.abort(), 3000)
+  const onAbort = () => timeoutController.abort()
+  signal.addEventListener('abort', onAbort, { once: true })
   try {
     const res = await fetch(`${baseUrl}${STANDALONE_API_PATH}`, {
-      signal: AbortSignal.timeout(3000),
+      signal: timeoutController.signal,
     })
     if (!res.ok)
       return
@@ -106,15 +151,29 @@ async function pollStandaloneState(baseUrl: string) {
   catch {
     // Standalone API not available or not enabled, silently ignore
   }
+  finally {
+    clearTimeout(timeout)
+    signal.removeEventListener('abort', onAbort)
+  }
 }
 
-useDevtoolsConnection({
+const disposeConnection = useDevtoolsConnection({
   onConnected: (client) => {
-    client.host.nuxt.hooks.hook('scripts:updated', (ctx: any) => {
+    const stopScriptsHook = client.host.nuxt.hooks.hook('scripts:updated', (ctx: any) => {
       syncScripts(ctx.scripts)
     })
     version.value = client.host.nuxt.$config.public['nuxt-scripts'].version
     firstPartyData.value = client.host.nuxt.$config.public['nuxt-scripts-devtools'] || null
     syncScripts(client.host.nuxt._scripts || {})
+    return stopScriptsHook
   },
 })
+
+function disposeModuleConnection() {
+  window.removeEventListener('beforeunload', disposeModuleConnection)
+  disposeConnection()
+}
+
+window.addEventListener('beforeunload', disposeModuleConnection, { once: true })
+if (import.meta.hot)
+  import.meta.hot.dispose(disposeModuleConnection)

packages/devtools-app/composables/state.ts

@@ -84,6 +84,7 @@ export const version = ref<string | null>(null)
 export const firstPartyData = ref<FirstPartyDevtoolsData | null>(null)
 
 let _lastSyncedScripts: any[] | null = null
+const scriptFetches = new Map<string, AbortController>()
 
 export async function initRegistry() {
   scriptRegistry.value = await _registryPromise
@@ -107,9 +108,16 @@ export function syncScripts(_scripts: any[]) {
   if (!_scripts || typeof _scripts !== 'object') {
     _lastSyncedScripts = null
     scripts.value = {}
+    pruneScriptState(new Set())
     return
   }
   _lastSyncedScripts = _scripts
+  const activeSources = new Set(
+    Object.values(_scripts)
+      .map((script: any) => script?.src)
+      .filter((src): src is string => typeof src === 'string' && !!src),
+  )
+  pruneScriptState(activeSources)
   scripts.value = Object.fromEntries(
     Object.entries({ ..._scripts })
       .map(([key, script]: [string, any]) => {
@@ -124,9 +132,13 @@ export function syncScripts(_scripts: any[]) {
           script.loadTime = msToHumanReadable(loadedAt - loadingAt)
         const scriptSizeKey = script.src
         // Skip size fetching in standalone mode (cross-origin fetch blocked by CORS)
-        if (!scriptSizes[scriptSizeKey] && script.src && !isStandalone.value) {
-          fetchScript(script.src)
+        if (!scriptSizes[scriptSizeKey] && !scriptErrors[scriptSizeKey] && script.src && !isStandalone.value && !scriptFetches.has(scriptSizeKey)) {
+          const controller = new AbortController()
+          scriptFetches.set(scriptSizeKey, controller)
+          fetchScript(script.src, controller.signal)
             .then((res) => {
+              if (controller.signal.aborted || !activeSources.has(scriptSizeKey))
+                return
               if (res.size) {
                 scriptSizes[scriptSizeKey] = res.size
                 script.size = res.size
@@ -136,12 +148,31 @@ export function syncScripts(_scripts: any[]) {
                 script.error = scriptErrors[scriptSizeKey]
               }
             })
+            .finally(() => {
+              if (scriptFetches.get(scriptSizeKey) === controller)
+                scriptFetches.delete(scriptSizeKey)
+            })
         }
         return [key, script]
       }),
   )
 }
 
+function pruneScriptState(activeSources: Set<string>) {
+  for (const [src, controller] of scriptFetches) {
+    if (!activeSources.has(src)) {
+      controller.abort()
+      scriptFetches.delete(src)
+    }
+  }
+  for (const state of [scriptSizes, scriptErrors, scriptTabs]) {
+    for (const src of Object.keys(state)) {
+      if (!activeSources.has(src))
+        delete state[src]
+    }
+  }
+}
+
 // Script status helper (handles both reactive refs from embedded mode and plain strings from standalone)
 export function getScriptStatus(script: any): string {
   const status = script?.$script?.status

packages/devtools-app/utils/fetch.ts

@@ -1,5 +1,8 @@
-export async function fetchScript(url: string) {
-  const compressedResponse = await fetch(url, { headers: { 'Accept-Encoding': 'gzip' } }).catch((err) => {
+export async function fetchScript(url: string, signal?: AbortSignal) {
+  const compressedResponse = await fetch(url, {
+    headers: { 'Accept-Encoding': 'gzip' },
+    signal,
+  }).catch((err) => {
     return {
       size: null,
       error: err,
@@ -9,6 +12,7 @@ export async function fetchScript(url: string) {
     return compressedResponse as { size: null, error: Error }
   }
   if (!compressedResponse.ok) {
+    await cancelResponseBody(compressedResponse)
     return {
       size: null,
       error: new Error(`Failed to fetch ${compressedResponse.status} ${compressedResponse.statusText}`),
@@ -17,9 +21,19 @@ export async function fetchScript(url: string) {
   // Guard against measuring HTML error pages as script sizes
   const contentType = compressedResponse.headers.get('Content-Type') || ''
   if (contentType.includes('text/html')) {
+    await cancelResponseBody(compressedResponse)
     return { size: null }
   }
-  const size = await getResponseSize(compressedResponse)
+  let size: number | null
+  try {
+    size = await getResponseSize(compressedResponse)
+  }
+  catch (error) {
+    return {
+      size: null,
+      error: error instanceof Error ? error : new Error(String(error)),
+    }
+  }
   if (!size) {
     return {
       size: null,
@@ -31,23 +45,38 @@ export async function fetchScript(url: string) {
 }
 
 async function getResponseSize(response: Response) {
-  const reader = response.body?.getReader()
   const contentLength = response.headers.get('Content-Length')
 
   if (contentLength) {
+    await cancelResponseBody(response)
     return Number(contentLength)
   }
+  const reader = response.body?.getReader()
   if (!reader) {
     return null
   }
-  let total = 0
-  let done = false
-  while (!done) {
-    const data = await reader.read()
-    done = data.done
-    total += data.value?.length || 0
+  try {
+    let total = 0
+    let done = false
+    while (!done) {
+      const data = await reader.read()
+      done = data.done
+      total += data.value?.length || 0
+    }
+    return total > 0 ? total : null
+  }
+  finally {
+    reader.releaseLock()
+  }
+}
+
+async function cancelResponseBody(response: Response) {
+  try {
+    await response.body?.cancel()
+  }
+  catch {
+    // The response is being discarded, so cancellation failure is non-fatal.
   }
-  return total > 0 ? total : null
 }
 
 function bytesToSize(bytes: number) {