perf(vite): use disk logs with in-memory metadata (#400)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: webfansplz

docs/errors/VDT0003.md

@@ -0,0 +1,27 @@
+---
+outline: deep
+---
+
+# VDT0003: Inspect Storage Error
+
+## Message
+
+> Vite inspect storage failed while `{operation}`.
+
+## Cause
+
+The Vite inspect collector encountered a payload or plugin-call archive initialization, batched write, read, or shutdown failure.
+
+## Example
+
+Starting the Vite DevTools Vite UI plugin with an unwritable Vite cache directory can trigger this error.
+
+## Fix
+
+Restart the Vite dev server. If the error persists, clear the Vite cache directory and reinstall dependencies.
+
+## Source
+
+- [`packages/vite/src/node/inspect/store/index.ts`](https://github.com/vitejs/devtools/blob/main/packages/vite/src/node/inspect/store/index.ts) — the inspect store emits this when archive setup, batched writes, reads, or shutdown fail.
+- [`packages/vite/src/node/inspect/store/payload.ts`](https://github.com/vitejs/devtools/blob/main/packages/vite/src/node/inspect/store/payload.ts) — the payload archive emits this when an in-memory or file-backed payload cannot be read or written completely.
+- [`packages/vite/src/node/inspect/store/plugin-calls.ts`](https://github.com/vitejs/devtools/blob/main/packages/vite/src/node/inspect/store/plugin-calls.ts) — the plugin-call archive emits this when a binary event cannot be encoded, read, or written completely.

docs/errors/index.md

@@ -51,3 +51,4 @@ Emitted by `@vitejs/devtools-vite`.
 |------|-------|-------|
 | [VDT0001](./VDT0001) | error | Inspect Context Unavailable |
 | [VDT0002](./VDT0002) | error | Inspect Target Not Found |
+| [VDT0003](./VDT0003) | error | Inspect Storage Error |

packages/core/playground/vite.config.ts

@@ -17,6 +17,7 @@ import { hideDockWhenEmpty } from '../../core/src/node/plugins/auto-hide'
 // eslint-disable-next-line ts/ban-ts-comment
 // @ts-ignore ignore the type error
 import { DevToolsRolldownUI } from '../../rolldown/src/node'
+import { DevToolsViteUI } from '../../vite/src/node'
 
 declare module '@vitejs/devtools-kit' {
   interface DevToolsRpcSharedStates {
@@ -74,6 +75,7 @@ export default defineConfig({
       builtinDevTools: false,
     }),
     DevToolsRolldownUI(),
+    DevToolsViteUI(),
     UnoCSS(),
     Tracer({
       viteDevtools: true,

packages/vite/src/app/components/data/PluginDetailsLoader.vue

@@ -91,6 +91,12 @@ const parsedPaths = computed(() => props.modules.map((mod) => {
 }))
 const moduleTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
 
+function getModuleGraphLink(moduleId: string | undefined): string | false {
+  return moduleId
+    ? `/graph?module=${encodeURIComponent(moduleId)}`
+    : false
+}
+
 const _tree = computed(() => {
   const map = new Map<string, TreeNodeInput<PluginChartInfo | undefined>>()
   const maxDepth = 3
@@ -338,7 +344,7 @@ watch(() => settings.value.pluginDetailsViewType, () => {
             :id="child.text!"
             w-full border-none ws-nowrap
             :cwd="root"
-            :link="`/graph?module=${encodeURIComponent(child.text!)}`"
+            :link="getModuleGraphLink(child.meta?.graphModuleId)"
             hover="bg-active"
             border="~ base rounded" block px2 py1
           />

packages/vite/src/app/components/data/PluginDetailsTable.vue

@@ -41,7 +41,6 @@ const moduleTypeNameMap = computed(() => {
 
   return map
 })
-
 const filterModuleTypes = ref<string[]>(settings.value.pluginDetailsModuleTypes ?? searchFilterTypes.value.map(item => item.name))
 const selectedModuleTypes = computed(() => new Set(filterModuleTypes.value))
 const { state: durationSortType, next } = useCycleList(['', 'desc', 'asc'], {
@@ -97,6 +96,12 @@ function toggleDurationSortType() {
   next()
   settings.value.pluginDetailsDurationSortType = durationSortType.value
 }
+
+function getModuleGraphLink(moduleId: string | undefined): string | false {
+  return moduleId
+    ? `/graph?module=${encodeURIComponent(moduleId)}`
+    : false
+}
 </script>
 
 <template>
@@ -181,7 +186,7 @@ function toggleDurationSortType() {
             :id="item.module"
             w-full border-none ws-nowrap
             :cwd="root"
-            :link="`/graph?module=${encodeURIComponent(item.module)}`"
+            :link="getModuleGraphLink(item.graphModuleId)"
             hover="bg-active"
             border="~ base rounded" block px2 py1
           />