nuxt-devtools-observatory 0.1.31 → 0.1.33

package/dist/runtime/nitro/fetch-capture.js

@@ -1,14 +1,92 @@
-import { setResponseHeader } from "h3";
+import { getRequestURL, setResponseHeader } from "h3";
+import { addSsrPhaseSpan, createSsrRecord, drainSsrRecord } from "./ssr-trace-store.js";
+let _requestCounter = 0;
+function newRequestId() {
+  _requestCounter = (_requestCounter + 1) % 999999;
+  return `req_${Date.now()}_${_requestCounter}`;
+}
 export default function fetchCapturePlugin(nitroApp) {
-  nitroApp.hooks.hook("request", (event) => {
-    ;
-    event.__ssrFetchStart = performance.now();
+  nitroApp.hooks.hook("request", (...args) => {
+    const event = args[0];
+    const start = performance.now();
+    event.context.__ssrFetchStart = start;
+    let route = "/";
+    try {
+      route = getRequestURL(event).pathname;
+    } catch (error) {
+      console.error("Error getting request URL:", error);
+    }
+    const method = String(event.method ?? event.node?.req?.method ?? "GET").toUpperCase();
+    const requestId = newRequestId();
+    event.context.__observatoryRequestId = requestId;
+    createSsrRecord(requestId, route, method);
+    globalThis.__observatorySsrContext__ = {
+      __observatoryRequestId: requestId,
+      __ssrFetchStart: start
+    };
   });
-  nitroApp.hooks.hook("afterResponse", (event) => {
-    const start = event.__ssrFetchStart;
-    if (start) {
+  nitroApp.hooks.hook("afterResponse", (...args) => {
+    const hookStart = performance.now();
+    const event = args[0];
+    const start = event.context.__ssrFetchStart;
+    if (start !== void 0) {
       const ms = Math.round(performance.now() - start);
       setResponseHeader(event, "x-observatory-ssr-ms", String(ms));
     }
+    const requestId = event.context.__observatoryRequestId;
+    if (requestId) {
+      if (start !== void 0) {
+        const hookEnd = performance.now();
+        addSsrPhaseSpan(requestId, {
+          name: "ssr:afterResponse",
+          type: "server",
+          startMs: Math.max(hookStart - start, 0),
+          endMs: Math.max(hookEnd - start, 0),
+          metadata: {
+            hook: "afterResponse"
+          }
+        });
+      }
+      const durationMs = start !== void 0 ? Math.max(performance.now() - start, 0) : 0;
+      drainSsrRecord(requestId, durationMs);
+    }
+    const active = globalThis.__observatorySsrContext__;
+    if (active?.__observatoryRequestId === requestId) {
+      delete globalThis.__observatorySsrContext__;
+    }
+  });
+  nitroApp.hooks.hook("render:html", (...args) => {
+    const hookStart = performance.now();
+    const html = args[0];
+    const ctx = args[1];
+    const event = ctx?.event;
+    if (!event) {
+      return;
+    }
+    const requestId = event.context.__observatoryRequestId;
+    const start = event.context.__ssrFetchStart;
+    if (!requestId) {
+      return;
+    }
+    if (start !== void 0) {
+      const hookEnd = performance.now();
+      addSsrPhaseSpan(requestId, {
+        name: "ssr:render:html",
+        type: "server",
+        startMs: Math.max(hookStart - start, 0),
+        endMs: Math.max(hookEnd - start, 0),
+        metadata: {
+          hook: "render:html",
+          island: html.island === true
+        }
+      });
+    }
+    const durationMs = start !== void 0 ? Math.max(performance.now() - start, 0) : 0;
+    const record = drainSsrRecord(requestId, durationMs);
+    if (!record) {
+      return;
+    }
+    const json = JSON.stringify(record).replace(/<\/script>/gi, "<\\/script>");
+    html.bodyAppend.push(`<script id="__observatory_ssr_spans__" type="application/json">${json}<\/script>`);
   });
 }

package/dist/runtime/nitro/ssr-trace-store.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Per-request SSR trace collector.
+ *
+ * Each incoming SSR page request gets its own record keyed by a unique
+ * requestId (stored on H3 `event.context`). Spans are accumulated during the
+ * request lifecycle and drained once the HTML is rendered (via the
+ * `render:html` Nitro hook), so they can be injected into the page as inline
+ * JSON for the client plugin to pick up.
+ */
+export interface SsrSpan {
+    id: string;
+    name: string;
+    type: string;
+    /** Milliseconds relative to request start (0 = request began). */
+    startTime: number;
+    endTime?: number;
+    durationMs?: number;
+    status: 'ok' | 'error' | 'active';
+    metadata?: Record<string, unknown>;
+}
+export interface SsrTraceRecord {
+    traceId: string;
+    name: string;
+    spans: SsrSpan[];
+}
+/**
+ * Open a new per-request SSR record. A `navigation` span covering the full
+ * request is pre-populated; its end time is filled in when `drainSsrRecord`
+ * is called.
+ * @param {string} requestId - Unique identifier for the HTTP request, stored in `event.context`.
+ * @param {string} route - Request pathname (e.g. `/dashboard`).
+ * @param {string} method - HTTP method in upper-case (e.g. `GET`).
+ * @returns {SsrTraceRecord} The newly created `SsrTraceRecord` keyed by `requestId`.
+ */
+export declare function createSsrRecord(requestId: string, route: string, method: string): SsrTraceRecord;
+/**
+ * Append an SSR-side fetch span. `startMs` / `endMs` are milliseconds
+ * relative to request start (same origin as `createSsrRecord`).
+ * @param {string} requestId - The request identifier returned by `createSsrRecord`.
+ * @param {object} opts - Span options.
+ * @param {string} opts.url - The request URL or path that was fetched.
+ * @param {string} opts.method - HTTP method in upper-case (e.g. `GET`).
+ * @param {number} opts.startMs - Span start, in ms relative to the request start time.
+ * @param {number} opts.endMs - Span end, in ms relative to the request start time.
+ * @param {number} [opts.statusCode] - Optional HTTP response status code.
+ * @param {boolean} [opts.error] - Set to `true` to mark the span status as `error`.
+ */
+export declare function addSsrFetchSpan(requestId: string, opts: {
+    url: string;
+    method: string;
+    startMs: number;
+    endMs: number;
+    statusCode?: number;
+    error?: boolean;
+}): void;
+/**
+ * Append a generic SSR phase span (e.g. `render:html`, `afterResponse`) to
+ * an existing request record.
+ * @param {string} requestId - The request identifier returned by `createSsrRecord`.
+ * @param {object} opts - Span options.
+ * @param {string} opts.name - Human-readable span name.
+ * @param {string} [opts.type] - Span type. Defaults to `server`.
+ * @param {number} opts.startMs - Span start, in ms relative to request start.
+ * @param {number} opts.endMs - Span end, in ms relative to request start.
+ * @param {boolean} [opts.error] - Set to `true` to mark the span status as `error`.
+ * @param {Record<string, unknown>} [opts.metadata] - Additional metadata fields.
+ */
+export declare function addSsrPhaseSpan(requestId: string, opts: {
+    name: string;
+    type?: string;
+    startMs: number;
+    endMs: number;
+    error?: boolean;
+    metadata?: Record<string, unknown>;
+}): void;
+/**
+ * Finalize and remove the record for `requestId`. The pre-populated
+ * navigation span is closed with `durationMs`. Returns `undefined` if the
+ * requestId is unknown (e.g. non-page requests that never called
+ * `createSsrRecord`).
+ * @param {string} requestId - The request identifier returned by `createSsrRecord`.
+ * @param {number} durationMs - Total SSR request duration in milliseconds, used to close the navigation span.
+ * @returns {SsrTraceRecord | undefined} The completed `SsrTraceRecord`, or `undefined` if no record exists for `requestId`.
+ */
+export declare function drainSsrRecord(requestId: string, durationMs: number): SsrTraceRecord | undefined;

package/dist/runtime/nitro/ssr-trace-store.js

@@ -0,0 +1,84 @@
+const pending = /* @__PURE__ */ new Map();
+let _counter = 0;
+function newId(prefix) {
+  _counter = (_counter + 1) % 999999;
+  return `${prefix}_ssr_${Date.now()}_${_counter}`;
+}
+export function createSsrRecord(requestId, route, method) {
+  const record = {
+    traceId: newId("trace"),
+    name: `ssr:${route}`,
+    spans: [
+      {
+        id: newId("span"),
+        name: "ssr:navigation",
+        type: "navigation",
+        startTime: 0,
+        status: "active",
+        metadata: {
+          origin: "ssr",
+          route,
+          method
+        }
+      }
+    ]
+  };
+  pending.set(requestId, record);
+  return record;
+}
+export function addSsrFetchSpan(requestId, opts) {
+  const record = pending.get(requestId);
+  if (!record) {
+    return;
+  }
+  const durationMs = Math.max(opts.endMs - opts.startMs, 0);
+  record.spans.push({
+    id: newId("span"),
+    name: opts.url,
+    type: "fetch",
+    startTime: opts.startMs,
+    endTime: opts.endMs,
+    durationMs,
+    status: opts.error ? "error" : "ok",
+    metadata: {
+      origin: "ssr",
+      url: opts.url,
+      method: opts.method,
+      statusCode: opts.statusCode
+    }
+  });
+}
+export function addSsrPhaseSpan(requestId, opts) {
+  const record = pending.get(requestId);
+  if (!record) {
+    return;
+  }
+  const durationMs = Math.max(opts.endMs - opts.startMs, 0);
+  record.spans.push({
+    id: newId("span"),
+    name: opts.name,
+    type: opts.type ?? "server",
+    startTime: opts.startMs,
+    endTime: opts.endMs,
+    durationMs,
+    status: opts.error ? "error" : "ok",
+    metadata: {
+      origin: "ssr",
+      ...opts.metadata ?? {}
+    }
+  });
+}
+export function drainSsrRecord(requestId, durationMs) {
+  const record = pending.get(requestId);
+  pending.delete(requestId);
+  if (!record) {
+    return void 0;
+  }
+  const navSpan = record.spans[0];
+  if (navSpan) {
+    navSpan.endTime = durationMs;
+    navSpan.durationMs = durationMs;
+    navSpan.status = "ok";
+  }
+  return record;
+}

package/dist/runtime/plugin.js

@@ -45,10 +45,56 @@ export default defineNuxtPlugin(() => {
   if (config.transitionTracker) {
     registries.transition = setupTransitionRegistry();
   }
+  function mergeSsrSpans() {
+    if (!import.meta.client) {
+      return;
+    }
+    const el = document.getElementById("__observatory_ssr_spans__");
+    if (!el) {
+      return;
+    }
+    let record;
+    try {
+      record = JSON.parse(el.textContent ?? "");
+    } catch {
+      return;
+    }
+    if (!record?.traceId || !Array.isArray(record.spans)) {
+      return;
+    }
+    const navDurationMs = record.spans[0]?.durationMs ?? 0;
+    const traceStartTime = performance.now() - navDurationMs;
+    traceStore.createTrace({
+      id: record.traceId,
+      name: record.name,
+      startTime: traceStartTime,
+      metadata: { origin: "ssr" }
+    });
+    for (const span of record.spans) {
+      traceStore.addSpan({
+        id: span.id,
+        traceId: record.traceId,
+        name: span.name,
+        type: span.type,
+        startTime: traceStartTime + span.startTime,
+        endTime: span.endTime !== void 0 ? traceStartTime + span.endTime : void 0,
+        status: span.status,
+        metadata: { ...span.metadata ?? {}, origin: "ssr" }
+      });
+    }
+    traceStore.endTrace(record.traceId, {
+      endTime: traceStartTime + navDurationMs,
+      status: "ok",
+      metadata: { origin: "ssr" }
+    });
+  }
   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;
@@ -247,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/dist/runtime/tracing/trace.d.ts

@@ -1,4 +1,4 @@
-export type SpanType = 'render' | 'transition' | 'fetch' | 'composable' | 'navigation' | 'custom' | (string & {});
+export type SpanType = 'render' | 'component' | 'transition' | 'fetch' | 'composable' | 'navigation' | 'custom' | (string & {});
 export type SpanStatus = 'active' | 'ok' | 'error' | 'cancelled';
 export interface Span {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-devtools-observatory",
-    "version": "0.1.31",
+    "version": "0.1.33",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "license": "MIT",
     "repository": {
@@ -27,6 +27,10 @@
         "./runtime/fetch-registry": {
             "types": "./dist/runtime/composables/fetch-registry.d.ts",
             "import": "./dist/runtime/composables/fetch-registry.js"
+        },
+        "./runtime/async-data-instrumentation": {
+            "types": "./dist/runtime/instrumentation/asyncData.d.ts",
+            "import": "./dist/runtime/instrumentation/asyncData.js"
         }
     },
     "files": [
@@ -45,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",
@@ -69,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",
@@ -88,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",

package/client/.env

@@ -1,17 +0,0 @@
-# VITE_Observatory registry/configurable limits
-VITE_OBSERVATORY_FETCH_DASHBOARD=true
-VITE_OBSERVATORY_PROVIDE_INJECT_GRAPH=true
-VITE_OBSERVATORY_COMPOSABLE_TRACKER=true
-VITE_OBSERVATORY_RENDER_HEATMAP=true
-VITE_OBSERVATORY_TRANSITION_TRACKER=true
-VITE_OBSERVATORY_TRACE_VIEWER=true
-VITE_OBSERVATORY_MAX_FETCH_ENTRIES=200
-VITE_OBSERVATORY_MAX_PAYLOAD_BYTES=10000
-VITE_OBSERVATORY_MAX_TRANSITIONS=500
-VITE_OBSERVATORY_MAX_COMPOSABLE_HISTORY=50
-VITE_OBSERVATORY_MAX_COMPOSABLE_ENTRIES=300
-VITE_OBSERVATORY_MAX_RENDER_TIMELINE=100
-VITE_OBSERVATORY_HEATMAP_THRESHOLD_COUNT=3
-VITE_OBSERVATORY_HEATMAP_THRESHOLD_TIME=1600
-VITE_OBSERVATORY_HEATMAP_HIDE_INTERNALS=true
-VITE_OBSERVATORY_INSTRUMENT_SERVER=true