nuxt-devtools-observatory 0.1.32 → 0.1.33

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addServerPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addVitePlugin, addImports, addPlugin, addServerPlugin } from '@nuxt/kit';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
 import sirv from 'sirv';
 import { parse } from '@babel/parser';
@@ -209,10 +209,6 @@ function fetchInstrumentPlugin() {
           plugins: ["typescript"]
         });
         let modified = false;
-        let needsFetchCallHelper = false;
-        let needsTracedAsyncDataHelper = false;
-        const hasFetchCallImport = scriptCode.includes("__devFetchCall");
-        const hasTracedAsyncDataImport = scriptCode.includes("useTracedAsyncData");
         traverse$1(ast, {
           CallExpression(path) {
             if (path.node.__observatoryTransformed) {
@@ -284,7 +280,6 @@ function fetchInstrumentPlugin() {
               ]);
               newCall.__observatoryTransformed = true;
               path.replaceWith(newCall);
-              needsTracedAsyncDataHelper = true;
               modified = true;
             } else {
               const newCall = t.callExpression(t.identifier("__devFetchCall"), [
@@ -294,7 +289,6 @@ function fetchInstrumentPlugin() {
                 meta
               ]);
               newCall.__observatoryTransformed = true;
-              needsFetchCallHelper = true;
               path.replaceWith(newCall);
               modified = true;
             }
@@ -303,18 +297,12 @@ function fetchInstrumentPlugin() {
         if (!modified) {
           return null;
         }
-        const fetchImportNames = [needsFetchCallHelper && !hasFetchCallImport ? "__devFetchCall" : ""].filter(Boolean);
-        const fetchImportStatement = fetchImportNames.length ? `import { ${fetchImportNames.join(", ")} } from 'nuxt-devtools-observatory/runtime/fetch-registry';
-` : "";
-        const asyncDataImportStatement = needsTracedAsyncDataHelper && !hasTracedAsyncDataImport ? `import { useTracedAsyncData } from 'nuxt-devtools-observatory/runtime/async-data-instrumentation';
-` : "";
-        const importStatement = fetchImportStatement + asyncDataImportStatement;
         const output = generate$1(ast, { retainLines: true }, scriptCode);
         let finalCode;
         if (isVue) {
-          finalCode = code.slice(0, scriptStart) + importStatement + output.code + code.slice(scriptStart + scriptCode.length);
+          finalCode = code.slice(0, scriptStart) + output.code + code.slice(scriptStart + scriptCode.length);
         } else {
-          finalCode = importStatement + output.code;
+          finalCode = output.code;
         }
         return {
           code: finalCode,
@@ -537,6 +525,7 @@ const defaults = {
   heatmapThresholdTime: process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME) : 1600,
   maxFetchEntries: process.env.OBSERVATORY_MAX_FETCH_ENTRIES ? Number(process.env.OBSERVATORY_MAX_FETCH_ENTRIES) : 200,
   maxPayloadBytes: process.env.OBSERVATORY_MAX_PAYLOAD_BYTES ? Number(process.env.OBSERVATORY_MAX_PAYLOAD_BYTES) : 1e4,
+  fetchPageSize: process.env.OBSERVATORY_FETCH_PAGE_SIZE ? Number(process.env.OBSERVATORY_FETCH_PAGE_SIZE) : 20,
   maxTransitions: process.env.OBSERVATORY_MAX_TRANSITIONS ? Number(process.env.OBSERVATORY_MAX_TRANSITIONS) : 500,
   maxComposableHistory: process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY) : 50,
   maxComposableEntries: process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300,
@@ -576,6 +565,7 @@ const module$1 = defineNuxtModule({
       heatmapThresholdTime: options.heatmapThresholdTime ?? (process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME) : 1600),
       maxFetchEntries: options.maxFetchEntries ?? (process.env.OBSERVATORY_MAX_FETCH_ENTRIES ? Number(process.env.OBSERVATORY_MAX_FETCH_ENTRIES) : 200),
       maxPayloadBytes: options.maxPayloadBytes ?? (process.env.OBSERVATORY_MAX_PAYLOAD_BYTES ? Number(process.env.OBSERVATORY_MAX_PAYLOAD_BYTES) : 1e4),
+      fetchPageSize: options.fetchPageSize ?? (process.env.OBSERVATORY_FETCH_PAGE_SIZE ? Number(process.env.OBSERVATORY_FETCH_PAGE_SIZE) : 20),
       maxTransitions: options.maxTransitions ?? (process.env.OBSERVATORY_MAX_TRANSITIONS ? Number(process.env.OBSERVATORY_MAX_TRANSITIONS) : 500),
       maxComposableHistory: options.maxComposableHistory ?? (process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY) : 50),
       maxComposableEntries: options.maxComposableEntries ?? (process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300),
@@ -599,6 +589,10 @@ const module$1 = defineNuxtModule({
     const vitePluginScope = resolved.instrumentServer ? { server: true, client: true } : { server: false, client: true };
     if (resolved.fetchDashboard) {
       addVitePlugin(fetchInstrumentPlugin(), vitePluginScope);
+      addImports([
+        { name: "__devFetchCall", from: resolver.resolve("./runtime/composables/fetch-registry") },
+        { name: "useTracedAsyncData", from: resolver.resolve("./runtime/instrumentation/asyncData") }
+      ]);
     }
     if (resolved.provideInjectGraph) {
       addVitePlugin(provideInjectPlugin(), vitePluginScope);
@@ -634,6 +628,7 @@ const module$1 = defineNuxtModule({
         provideInjectGraph: !!resolved.provideInjectGraph,
         composableTracker: !!resolved.composableTracker,
         composableNavigationMode: resolved.composableNavigationMode,
+        fetchPageSize: resolved.fetchPageSize,
         renderHeatmap: !!resolved.renderHeatmap,
         transitionTracker: !!resolved.transitionTracker,
         traceViewer: !!resolved.traceViewer
@@ -691,13 +686,6 @@ const module$1 = defineNuxtModule({
       );
       rpc.broadcast.onSnapshot.asEvent(latestSnapshot);
     }, nuxt);
-    nuxt.hook("render:response", (response, { url }) => {
-      if (url.startsWith("/trackers") || url === "/" || url.startsWith("/index.html")) {
-        const configScript = `<script>window.__observatoryConfig = ${JSON.stringify(nuxt.options.runtimeConfig.public.observatory)};<\/script>`;
-        response.body = response.body.replace("<head>", `<head>
-${configScript}`);
-      }
-    });
     nuxt.hook("devtools:customTabs", (tabs) => {
       if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.renderHeatmap || resolved.transitionTracker) {
         tabs.push({
@@ -718,6 +706,7 @@ ${configScript}`);
       traceViewer: resolved.traceViewer,
       maxFetchEntries: resolved.maxFetchEntries,
       maxPayloadBytes: resolved.maxPayloadBytes,
+      fetchPageSize: resolved.fetchPageSize,
       maxTransitions: resolved.maxTransitions,
       maxComposableHistory: resolved.maxComposableHistory,
       maxComposableEntries: resolved.maxComposableEntries,

package/dist/runtime/composables/render-registry.js

@@ -74,7 +74,7 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     markDirty();
   }
   function aggregateFromComponentSpans() {
-    const componentSpans = traceStore.getAllTraces().flatMap((trace) => trace.spans).filter((span) => span.type === "component");
+    const componentSpans = traceStore.getAllTraces().flatMap((trace) => trace.spans).filter((span) => span.type === "render" || span.type === "component");
     const allSpansByUid = /* @__PURE__ */ new Map();
     const postResetSpansByUid = /* @__PURE__ */ new Map();
     for (const span of componentSpans) {
@@ -96,7 +96,8 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
       const allSpans = (allSpansByUid.get(uid) ?? []).sort((a, b) => a.startTime - b.startTime);
       const postResetSpans = (postResetSpansByUid.get(uid) ?? []).sort((a, b) => a.startTime - b.startTime);
       const timeline = postResetSpans.slice(-MAX_TIMELINE).map((span) => {
-        const lifecycle = span.metadata?.lifecycle === "mounted" ? "mount" : "update";
+        const isMountLifecycle = span.metadata?.lifecycle === "render:mount" || span.metadata?.lifecycle === "mounted";
+        const lifecycle = isMountLifecycle ? "mount" : "update";
         const routeValue = span.metadata?.route;
         const route = typeof routeValue === "string" && routeValue.length > 0 ? routeValue : entry.route;
         return {
@@ -106,8 +107,9 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
           route
         };
       });
-      const mountCount = allSpans.filter((span) => span.metadata?.lifecycle === "mounted").length;
-      const rerenders = postResetSpans.filter((span) => span.metadata?.lifecycle !== "mounted").length;
+      const isMountSpan = (span) => span.metadata?.lifecycle === "render:mount" || span.metadata?.lifecycle === "mounted";
+      const mountCount = allSpans.filter(isMountSpan).length;
+      const rerenders = postResetSpans.filter((span) => !isMountSpan(span)).length;
       const totalMs = postResetSpans.reduce((sum, span) => sum + (span.durationMs ?? 0), 0);
       const eventsCount = Math.max(postResetSpans.length, 1);
       entry.mountCount = mountCount;

package/dist/runtime/instrumentation/asyncData.d.ts

@@ -4,6 +4,6 @@ interface AsyncDataMeta {
     line: number;
     originalFn?: string;
 }
-type AnyFn = (...args: any[]) => any;
+type AnyFn = (...args: unknown[]) => unknown;
 export declare function useTracedAsyncData<TFn extends AnyFn>(originalFn: TFn, args: unknown[], handlerIndex: number, key: unknown, meta: AsyncDataMeta): ReturnType<TFn>;
 export {};

package/dist/runtime/instrumentation/fetch.d.ts

@@ -1,2 +1,8 @@
 import type { NuxtApp } from '#app';
-export declare function setupFetchInstrumentation(nuxtApp: NuxtApp): void;
+import type { FetchEntry } from '../composables/fetch-registry.js';
+type FetchRegistry = {
+    register: (entry: FetchEntry) => void;
+    update: (id: string, patch: Partial<FetchEntry>) => void;
+};
+export declare function setupFetchInstrumentation(nuxtApp: NuxtApp, fetchRegistry?: FetchRegistry): void;
+export {};

package/dist/runtime/instrumentation/fetch.js

@@ -27,7 +27,7 @@ function resolveErrorStatus(error) {
   return target?.response?.status ?? target?.statusCode ?? target?.status;
 }
 const WRAPPED_FETCH_FLAG = "__observatory_wrapped_fetch__";
-export function setupFetchInstrumentation(nuxtApp) {
+export function setupFetchInstrumentation(nuxtApp, fetchRegistry) {
   const original = nuxtApp.$fetch;
   if (!original) {
     return;
@@ -39,6 +39,7 @@ export function setupFetchInstrumentation(nuxtApp) {
     const url = resolveUrl(request);
     const method = resolveMethod(request, options);
     const startedAt = performance.now();
+    const entryId = `$fetch::${Date.now()}::${Math.random().toString(36).slice(2, 7)}`;
     const span = startSpan({
       name: "$fetch",
       type: "fetch",
@@ -49,6 +50,15 @@ export function setupFetchInstrumentation(nuxtApp) {
         status: "pending"
       }
     });
+    fetchRegistry?.register({
+      id: entryId,
+      key: url,
+      url,
+      status: "pending",
+      origin: "csr",
+      startTime: startedAt,
+      cached: false
+    });
     return Promise.resolve(original(request, options)).then((result) => {
       const durationMs = Math.max(performance.now() - startedAt, 0);
       span.end({
@@ -61,6 +71,11 @@ export function setupFetchInstrumentation(nuxtApp) {
           durationMs: Math.round(durationMs * 10) / 10
         }
       });
+      fetchRegistry?.update(entryId, {
+        status: "ok",
+        endTime: performance.now(),
+        ms: Math.round(durationMs * 10) / 10
+      });
       return result;
     }).catch((error) => {
       const durationMs = Math.max(performance.now() - startedAt, 0);
@@ -76,6 +91,12 @@ export function setupFetchInstrumentation(nuxtApp) {
           durationMs: Math.round(durationMs * 10) / 10
         }
       });
+      fetchRegistry?.update(entryId, {
+        status: "error",
+        endTime: performance.now(),
+        ms: Math.round(durationMs * 10) / 10,
+        error
+      });
       throw error;
     });
   });

package/dist/runtime/plugin.js

@@ -91,8 +91,10 @@ export default defineNuxtPlugin(() => {
   if (import.meta.client) {
     if (config.traceViewer) {
       setupComponentInstrumentation(nuxtApp);
-      setupFetchInstrumentation(nuxtApp);
+      setupFetchInstrumentation(nuxtApp, registries.fetch);
       mergeSsrSpans();
+    } else if (config.fetchDashboard) {
+      setupFetchInstrumentation(nuxtApp, registries.fetch);
     }
     delete window.__observatory__;
     window.__observatory__ = registries;
@@ -291,6 +293,7 @@ export default defineNuxtPlugin(() => {
       provideInjectGraph: !!registries.provideInject,
       composableTracker: !!registries.composable,
       composableNavigationMode,
+      fetchPageSize: typeof config.fetchPageSize === "number" ? config.fetchPageSize : 20,
       renderHeatmap: !!registries.render,
       transitionTracker: !!registries.transition,
       traceViewer: !!config.traceViewer

package/dist/runtime/test-bridge.d.ts

@@ -0,0 +1,18 @@
+import type { ObservatoryTestAPI } from '../../tests/verification/types/observatory.types.js';
+interface VueApp {
+    _context?: {
+        app?: {
+            _component?: unknown;
+        };
+    };
+}
+declare global {
+    interface Window {
+        __NUXT__?: {
+            vueApp?: VueApp;
+        };
+        __OBSERVATORY_TEST_BRIDGE?: ObservatoryTestAPI;
+    }
+}
+export declare function injectTestBridge(): void;
+export {};

package/dist/runtime/test-bridge.js

@@ -0,0 +1,86 @@
+function walkComponentTree(instance, counts) {
+  if (!instance) {
+    return;
+  }
+  const componentName = instance.type?.name ?? instance.type?.__name ?? "Anonymous";
+  if (instance.ctx?.__observatoryMountCount) {
+    const currentCount = counts.componentMounts[componentName] ?? 0;
+    counts.componentMounts[componentName] = currentCount + instance.ctx.__observatoryMountCount;
+  }
+  if (instance.subTree?.children) {
+    instance.subTree.children.forEach((child) => walkComponentTree(child, counts));
+  }
+}
+export function injectTestBridge() {
+  if (!import.meta.dev || typeof window === "undefined") {
+    return;
+  }
+  const bridge = {
+    async getTraces() {
+      const { traceStore } = await import("./tracing/traceStore.js");
+      return Array.from(traceStore.entries());
+    },
+    async getHeatmapData() {
+      const { renderRegistry } = await import("./composables/render-registry.js");
+      return renderRegistry.getData();
+    },
+    async getComposableEntries() {
+      const { composableRegistry } = await import("./composables/composable-registry.js");
+      return composableRegistry.getEntries();
+    },
+    async getFetchEntries() {
+      const { fetchRegistry } = await import("./composables/fetch-registry.js");
+      return fetchRegistry.getEntries();
+    },
+    async getProvideInjectGraph() {
+      const { provideInjectRegistry } = await import("./composables/provide-inject-registry.js");
+      return provideInjectRegistry.getGraph();
+    },
+    async getTransitionEntries() {
+      const { transitionRegistry } = await import("./composables/transition-registry.js");
+      return transitionRegistry.getEntries();
+    },
+    async getInternalCounts() {
+      const counts = {
+        componentMounts: {},
+        renderOperations: {},
+        fetchOperations: {}
+      };
+      const vueApp = window.__NUXT__?.vueApp;
+      if (!vueApp) {
+        return counts;
+      }
+      walkComponentTree(vueApp._context?.app?._component, counts);
+      return counts;
+    },
+    async clearAllData() {
+      const { traceStore } = await import("./tracing/traceStore.js");
+      const { renderRegistry } = await import("./composables/render-registry.js");
+      const { composableRegistry } = await import("./composables/composable-registry.js");
+      const { fetchRegistry } = await import("./composables/fetch-registry.js");
+      traceStore.clear();
+      renderRegistry.clear();
+      composableRegistry.clear();
+      fetchRegistry.clear();
+    },
+    async startRecording() {
+      const { traceStore } = await import("./tracing/traceStore.js");
+      traceStore.startRecording();
+    },
+    async stopRecording() {
+      const { traceStore } = await import("./tracing/traceStore.js");
+      traceStore.stopRecording();
+    },
+    async exportSnapshot() {
+      const snapshot = {
+        traces: await this.getTraces(),
+        heatmap: await this.getHeatmapData(),
+        composables: await this.getComposableEntries(),
+        fetches: await this.getFetchEntries(),
+        transitions: await this.getTransitionEntries()
+      };
+      return JSON.stringify(snapshot, null, 2);
+    }
+  };
+  window.__OBSERVATORY_TEST_BRIDGE = bridge;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-devtools-observatory",
-    "version": "0.1.32",
+    "version": "0.1.33",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "license": "MIT",
     "repository": {
@@ -49,14 +49,21 @@
         "build": "npm run build:client && nuxt-module-build build",
         "prepack": "npm run build",
         "lint": "eslint .",
-        "format": "prettier --write '**/*.{ts,vue,js,json}' --ignore-path .prettierignore && stylelint '**/*.{css,vue}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --fix && eslint --fix '**/*.{ts,vue,js}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --ignore-pattern 'docs/dist/**'",
+        "format": "prettier --write '**/*.{ts,vue,js,json}' --ignore-path .prettierignore && stylelint '**/*.{css,vue}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --ignore-pattern 'docs/dist/**' --fix && eslint --fix '**/*.{ts,vue,js}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --ignore-pattern 'docs/dist/**'",
         "typecheck": "vue-tsc --noEmit",
         "test": "vitest run",
         "test:watch": "vitest",
         "test:coverage": "vitest run --coverage",
         "test:screenshots": "playwright test scripts/playwright/screenshot-trackers.spec.ts",
         "test:e2e": "playwright test scripts/playwright/playground-pages.spec.ts",
-        "capture:screenshots": "node scripts/playwright/capture-observatory-screenshots.cjs"
+        "capture:screenshots": "node scripts/playwright/capture-observatory-screenshots.cjs",
+        "verify": "tsx scripts/run-verification.ts",
+        "verify:debug": "playwright test --debug",
+        "verify:ui": "playwright test --ui",
+        "verify:trace": "playwright test --trace on",
+        "verify:report": "playwright show-report",
+        "test:accuracy": "vitest run tests/verification/accuracy.test.ts",
+        "type-check": "tsc --noEmit --project tests/verification/tsconfig.json"
     },
     "dependencies": {
         "@babel/generator": "^7.29.1",
@@ -73,11 +80,13 @@
         "@nuxt/schema": "^3.0.0",
         "@pinia/nuxt": "^0.11.3",
         "@playwright/test": "^1.58.2",
+        "@tanstack/vue-virtual": "^3.13.12",
         "@types/babel__generator": "^7.27.0",
         "@types/babel__traverse": "^7.28.0",
         "@types/node": "^25.5.0",
         "@vitejs/plugin-vue": "^6.0.0",
         "@vitest/coverage-v8": "^4.1.0",
+        "@vitest/ui": "^4.1.4",
         "concurrently": "^9.2.1",
         "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
@@ -92,10 +101,12 @@
         "playwright": "^1.58.2",
         "postcss-html": "^1.8.1",
         "prettier": "^3.8.1",
+        "sinon": "^21.1.2",
         "sirv": "^3.0.2",
         "stylelint": "^17.4.0",
         "stylelint-config-standard": "^40.0.0",
         "stylelint-config-standard-vue": "^1.0.0",
+        "tsx": "^4.21.0",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.54.0",
         "unbuild": "^3.6.1",