fix(devtools): scope storage watchers to avoid EMFILE (#934)

Author: onmax

packages/devtools/src/server-rpc/server-routes.ts

@@ -1,9 +1,11 @@
 import type { Nitro } from 'nitropack'
 import type { NuxtDevtoolsServerContext, ServerFunctions, ServerRouteInfo } from '../types'
 import { debounce } from 'perfect-debounce'
+import { watchStorageMount } from './storage-watch'
 
 export function setupServerRoutesRPC({ nuxt, refresh }: NuxtDevtoolsServerContext) {
   let nitro: Nitro
+  let unwatchStorage: (() => Promise<void> | void) | undefined
 
   let cache: ServerRouteInfo[] | null = null
 
@@ -18,13 +20,22 @@ export function setupServerRoutesRPC({ nuxt, refresh }: NuxtDevtoolsServerContex
     refresh('getServerRoutes')
   })
 
-  nuxt.hook('ready', () => {
-    nitro?.storage.watch((event, key) => {
+  nuxt.hook('ready', async () => {
+    if (!nitro)
+      return
+
+    await unwatchStorage?.()
+    unwatchStorage = await watchStorageMount(nitro.storage, 'src', (_event, key) => {
       if (key.startsWith('src:api:') || key.startsWith('src:routes:'))
         refreshDebounced()
     })
   })
 
+  nuxt.hook('close', async () => {
+    await unwatchStorage?.()
+    unwatchStorage = undefined
+  })
+
   function scan() {
     if (cache)
       return cache

packages/devtools/src/server-rpc/server-tasks.ts

@@ -1,9 +1,11 @@
 import type { Nitro } from 'nitropack'
 import type { NuxtDevtoolsServerContext, ScannedNitroTasks, ServerFunctions } from '../types'
 import { debounce } from 'perfect-debounce'
+import { watchStorageMount } from './storage-watch'
 
 export function setupServerTasksRPC({ nuxt, refresh }: NuxtDevtoolsServerContext) {
   let nitro: Nitro
+  let unwatchStorage: (() => Promise<void> | void) | undefined
 
   let cache: ScannedNitroTasks | null = null
 
@@ -18,13 +20,22 @@ export function setupServerTasksRPC({ nuxt, refresh }: NuxtDevtoolsServerContext
     refresh('getServerTasks')
   })
 
-  nuxt.hook('ready', () => {
-    nitro?.storage.watch((event, key) => {
+  nuxt.hook('ready', async () => {
+    if (!nitro)
+      return
+
+    await unwatchStorage?.()
+    unwatchStorage = await watchStorageMount(nitro.storage, 'src', (_event, key) => {
       if (key.startsWith('src:tasks:'))
         refreshDebounced()
     })
   })
 
+  nuxt.hook('close', async () => {
+    await unwatchStorage?.()
+    unwatchStorage = undefined
+  })
+
   function scan() {
     if (cache)
       return cache

packages/devtools/src/server-rpc/storage-watch.ts

@@ -0,0 +1,19 @@
+import type { Storage } from 'unstorage'
+import { normalizeBaseKey, normalizeKey } from 'unstorage'
+
+export type UnwatchStorageMount = () => Promise<void> | void
+type WatchEvent = 'update' | 'remove'
+type WatchCallback = (event: WatchEvent, key: string) => void
+
+export async function watchStorageMount(storage: Storage, mountName: string, onChange: WatchCallback): Promise<UnwatchStorageMount> {
+  const mountKey = normalizeBaseKey(mountName)
+  const mount = storage.getMount(mountKey)
+  if (!mount || normalizeBaseKey(mount.base) !== mountKey || !mount.driver?.watch)
+    return () => {}
+
+  const unwatch = await mount.driver.watch((event: WatchEvent, key: string) => {
+    const fullKey = key.startsWith(mountKey) ? key : `${mountKey}${key}`
+    onChange(event, normalizeKey(fullKey))
+  })
+  return unwatch ?? (() => {})
+}

packages/devtools/src/server-rpc/storage.ts

@@ -1,6 +1,7 @@
 import type { StorageMounts } from 'nitropack'
 import type { Storage, StorageValue } from 'unstorage'
 import type { NuxtDevtoolsServerContext, ServerFunctions } from '../types'
+import { watchStorageMount } from './storage-watch'
 
 const IGNORE_STORAGE_MOUNTS = ['root', 'build', 'src', 'cache']
 function shouldIgnoreStorageKey(key: string) {
@@ -15,32 +16,44 @@ export function setupStorageRPC({
   const storageMounts: StorageMounts = {}
 
   let storage: Storage | undefined
+  let unwatchStorageMounts: Array<() => Promise<void> | void> = []
 
   nuxt.hook('nitro:init', (nitro) => {
     storage = nitro.storage
 
-    nuxt.hook('ready', () => {
-      storage!.watch((event, key) => {
-        if (shouldIgnoreStorageKey(key))
-          return
-        rpc.broadcast.callHook.asEvent('storage:key:update', key, event)
-      })
-    })
-
     // Taken from https://github.com/unjs/nitro/blob/d83f2b65165d7ba996e7ef129ea99ff5b551dccc/src/storage.ts#L7-L10
     // Waiting for https://github.com/unjs/unstorage/issues/53
     const mounts = {
       ...nitro.options.storage,
       ...nitro.options.devStorage,
     }
 
+    for (const key of Object.keys(storageMounts))
+      delete storageMounts[key]
+
     for (const name of Object.keys(mounts)) {
       if (shouldIgnoreStorageKey(name))
         continue
       storageMounts[name] = mounts[name]!
     }
   })
 
+  nuxt.hook('ready', async () => {
+    const activeStorage = storage
+    if (!activeStorage)
+      return
+    await Promise.all(unwatchStorageMounts.map(unwatch => unwatch()))
+    unwatchStorageMounts = await Promise.all(Object.keys(storageMounts).map(mountName =>
+      watchStorageMount(activeStorage, mountName, (event, key) => {
+        rpc.broadcast.callHook.asEvent('storage:key:update', key, event)
+      })))
+  })
+
+  nuxt.hook('close', async () => {
+    await Promise.all(unwatchStorageMounts.map(unwatch => unwatch()))
+    unwatchStorageMounts = []
+  })
+
   return {
     async getStorageMounts() {
       return storageMounts