nuxt-devtools-observatory 0.1.31 → 0.1.33

package/client/src/views/TransitionTimeline.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { useVirtualizationConfig } from '@observatory-client/composables/useVirtualizationConfig'
+import { useVirtualizationFlags } from '@observatory-client/composables/useVirtualizationFlags'
 import { useResizablePane } from '@observatory-client/composables/useResizablePane'
 import { useObservatoryData } from '@observatory-client/stores/observatory'
 import type { TransitionEntry } from '@observatory/types/snapshot'
@@ -10,10 +13,25 @@ const { paneWidth: detailWidth, onHandleMouseDown } = useResizablePane(260, 'obs
 type FilterMode = 'all' | 'cancelled' | 'active' | 'completed'
 const filter = ref<FilterMode>('all')
 const search = ref('')
-const selected = ref<TransitionEntry | null>(null)
+const selectedId = ref<string | null>(null)
+const tableScrollRef = ref<HTMLElement | null>(null)
+
+const { effective: virtualizationFlags } = useVirtualizationFlags()
+const { preset: virtualizationPreset } = useVirtualizationConfig({ rowHeight: 42, overscan: 6 })
+
+const entriesSorted = computed(() => [...entries.value].sort((a, b) => a.startTime - b.startTime))
+const entriesById = computed(() => new Map(entries.value.map((entry) => [entry.id, entry] as const)))
+
+const selected = computed(() => {
+    if (!selectedId.value) {
+        return null
+    }
+
+    return entriesById.value.get(selectedId.value) ?? null
+})
 
 const filtered = computed(() => {
-    let list = [...entries.value]
+    let list = entriesSorted.value
 
     if (search.value) {
         const q = search.value.toLowerCase()
@@ -28,7 +46,7 @@ const filtered = computed(() => {
         list = list.filter((e) => e.phase === 'entered' || e.phase === 'left')
     }
 
-    return list.sort((a, b) => a.startTime - b.startTime)
+    return list
 })
 
 const stats = computed(() => ({
@@ -64,6 +82,60 @@ const timelineGeometry = computed(() => {
     }))
 })
 
+const virtualizedRowsEnabled = computed(() => virtualizationFlags.value.transitions)
+
+const tableVirtualizerOptions = computed(() => ({
+    count: filtered.value.length,
+    getScrollElement: () => tableScrollRef.value,
+    estimateSize: () => virtualizationPreset.value.rowHeight,
+    overscan: virtualizationPreset.value.overscan,
+}))
+
+const tableVirtualizer = useVirtualizer(tableVirtualizerOptions)
+
+const tableVirtualItems = computed(() => {
+    if (!virtualizedRowsEnabled.value) {
+        return []
+    }
+
+    return tableVirtualizer.value.getVirtualItems()
+})
+
+const topTablePadding = computed(() => {
+    if (!virtualizedRowsEnabled.value || tableVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    return tableVirtualItems.value[0].start
+})
+
+const bottomTablePadding = computed(() => {
+    if (!virtualizedRowsEnabled.value || tableVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    const total = tableVirtualizer.value.getTotalSize()
+    const last = tableVirtualItems.value[tableVirtualItems.value.length - 1]
+
+    return Math.max(0, total - last.end)
+})
+
+const visibleRows = computed(() => {
+    if (!virtualizedRowsEnabled.value) {
+        return filtered.value.map((entry, index) => ({
+            entry,
+            geometry: timelineGeometry.value[index],
+        }))
+    }
+
+    return tableVirtualItems.value
+        .map((item) => ({
+            entry: filtered.value[item.index],
+            geometry: timelineGeometry.value[item.index],
+        }))
+        .filter((row): row is { entry: TransitionEntry; geometry: { left: number; width: number } } => Boolean(row.entry && row.geometry))
+})
+
 function phaseColor(phase: TransitionEntry['phase']): string {
     if (phase === 'entering' || phase === 'leaving') {
         return '#7f77dd'
@@ -166,7 +238,7 @@ function directionColor(e: TransitionEntry): string {
         <!-- Main content -->
         <div class="transition-timeline__content tracker-split">
             <!-- Timeline table -->
-            <div class="transition-timeline__table tracker-table-wrap">
+            <div ref="tableScrollRef" class="transition-timeline__table tracker-table-wrap">
                 <table class="data-table">
                     <thead>
                         <tr>
@@ -180,41 +252,56 @@ function directionColor(e: TransitionEntry): string {
                     </thead>
                     <tbody>
                         <tr
-                            v-for="(entry, i) in filtered"
-                            :key="entry.id"
-                            :class="{ selected: selected?.id === entry.id }"
-                            @click="selected = selected?.id === entry.id ? null : entry"
+                            v-if="virtualizedRowsEnabled && topTablePadding > 0"
+                            class="transition-timeline__virtual-spacer-row"
+                            aria-hidden="true"
+                        >
+                            <td colspan="6" :style="{ height: `${topTablePadding}px` }"></td>
+                        </tr>
+                        <tr
+                            v-for="row in visibleRows"
+                            :key="row.entry.id"
+                            :class="{ selected: selected?.id === row.entry.id }"
+                            @click="selectedId = selected?.id === row.entry.id ? null : row.entry.id"
                         >
                             <td>
-                                <span class="transition-timeline__name mono">{{ entry.transitionName }}</span>
+                                <span class="transition-timeline__name mono">{{ row.entry.transitionName }}</span>
                             </td>
                             <td>
-                                <span class="transition-timeline__direction mono" :style="{ color: directionColor(entry) }">
-                                    {{ directionLabel(entry) }}
+                                <span class="transition-timeline__direction mono" :style="{ color: directionColor(row.entry) }">
+                                    {{ directionLabel(row.entry) }}
                                 </span>
                             </td>
                             <td>
-                                <span class="badge" :class="phaseBadgeClass(entry.phase)">{{ entry.phase }}</span>
+                                <span class="badge" :class="phaseBadgeClass(row.entry.phase)">{{ row.entry.phase }}</span>
                             </td>
                             <td class="transition-timeline__duration mono">
-                                {{ entry.durationMs !== undefined ? entry.durationMs + 'ms' : '—' }}
+                                {{ row.entry.durationMs !== undefined ? row.entry.durationMs + 'ms' : '—' }}
                             </td>
-                            <td class="transition-timeline__component muted">{{ entry.parentComponent }}</td>
+                            <td class="transition-timeline__component muted">{{ row.entry.parentComponent }}</td>
                             <td class="transition-timeline__bar-cell">
                                 <div class="transition-timeline__bar-track">
                                     <div
                                         class="transition-timeline__bar-fill"
                                         :style="{
-                                            left: timelineGeometry[i]?.left + '%',
-                                            width: Math.max(timelineGeometry[i]?.width ?? 1, 1) + '%',
-                                            background: phaseColor(entry.phase),
-                                            opacity: entry.phase === 'entering' || entry.phase === 'leaving' ? '0.55' : '1',
+                                            left: row.geometry.left + '%',
+                                            width: Math.max(row.geometry.width, 1) + '%',
+                                            background: phaseColor(row.entry.phase),
+                                            opacity: row.entry.phase === 'entering' || row.entry.phase === 'leaving' ? '0.55' : '1',
                                         }"
                                     />
                                 </div>
                             </td>
                         </tr>
 
+                        <tr
+                            v-if="virtualizedRowsEnabled && bottomTablePadding > 0"
+                            class="transition-timeline__virtual-spacer-row"
+                            aria-hidden="true"
+                        >
+                            <td colspan="6" :style="{ height: `${bottomTablePadding}px` }"></td>
+                        </tr>
+
                         <tr v-if="!filtered.length">
                             <td colspan="6" class="tracker-empty-cell">
                                 {{
@@ -236,7 +323,7 @@ function directionColor(e: TransitionEntry): string {
                 <aside v-if="selected" class="transition-timeline__detail" :style="{ width: detailWidth + 'px' }">
                     <div class="transition-timeline__detail-header">
                         <span class="transition-timeline__detail-title">{{ selected.transitionName }}</span>
-                        <button class="transition-timeline__close-btn" @click="selected = null">✕</button>
+                        <button class="transition-timeline__close-btn" @click="selectedId = null">✕</button>
                     </div>
 
                     <div class="transition-timeline__detail-section">
@@ -392,6 +479,12 @@ function directionColor(e: TransitionEntry): string {
     border-radius: 0;
 }
 
+.transition-timeline__virtual-spacer-row td {
+    padding: 0;
+    border-bottom: 0;
+    background: transparent;
+}
+
 /* ── Timeline bar ────────────────────────────────────────────────────────── */
 .transition-timeline__bar-cell {
     width: 200px;

package/dist/module.d.mts

@@ -19,6 +19,11 @@ interface ModuleOptions {
      * @default 10000
      */
     maxPayloadBytes?: number;
+    /**
+     * Number of fetch rows to load per infinite-scroll step in the Fetch Dashboard.
+     * @default 20
+     */
+    fetchPageSize?: number;
     /**
      * Maximum number of transition entries to keep in memory
      * @default 500

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "0.1.31",
+  "version": "0.1.33",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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);
@@ -612,7 +606,7 @@ const module$1 = defineNuxtModule({
     if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.renderHeatmap || resolved.transitionTracker) {
       addPlugin(resolver.resolve("./runtime/plugin"));
     }
-    if (resolved.fetchDashboard) {
+    if (resolved.fetchDashboard || resolved.traceViewer && resolved.instrumentServer) {
       addServerPlugin(resolver.resolve("./runtime/nitro/fetch-capture"));
     }
     const base = "/__observatory";
@@ -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/composable-registry.d.ts

@@ -22,6 +22,11 @@ export interface ComposableEntry {
      * instances of this composable — indicates module-level (global) state.
      */
     sharedKeys: string[];
+    /**
+     * Stable per-composable-name identity group id for each shared key.
+     * Keys are ref/reactive key names; values are group ids like `group-1`.
+     */
+    sharedKeyGroups?: Record<string, string>;
     watcherCount: number;
     intervalCount: number;
     lifecycle: {
@@ -39,6 +44,19 @@ export interface ComposableEntry {
     /** Whether this composable is called from a layout component (persists across pages). */
     isLayoutComposable?: boolean;
 }
+interface SsrObservatoryEvent {
+    context?: {
+        __observatoryRequestId?: string;
+        __ssrFetchStart?: number;
+    };
+}
+export declare function __recordSsrComposableSpan(name: string, meta: {
+    file: string;
+    line: number;
+}, startTime: number, endTime: number, opts?: {
+    error?: unknown;
+    event?: SsrObservatoryEvent;
+}): void;
 /**
  * Registers a new composable entry, updates an existing one, or retrieves all entries.
  * @remarks The returned object exposes the following methods:
@@ -78,3 +96,4 @@ export declare function __trackComposable<T>(name: string, callFn: () => T, meta
     file: string;
     line: number;
 }): T;
+export {};

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

@@ -1,4 +1,32 @@
 import { isRef, isReactive, isReadonly, unref, computed, watchEffect, getCurrentInstance, onUnmounted } from "vue";
+import { addSsrPhaseSpan } from "../nitro/ssr-trace-store.js";
+function nowMs() {
+  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+export function __recordSsrComposableSpan(name, meta, startTime, endTime, opts = {}) {
+  const eventContext = opts.event?.context ?? globalThis.__observatorySsrContext__;
+  const requestId = eventContext?.__observatoryRequestId;
+  const requestStart = eventContext?.__ssrFetchStart;
+  if (!requestId || typeof requestStart !== "number") {
+    return;
+  }
+  const metadata = {
+    file: meta.file,
+    line: meta.line,
+    phase: "setup"
+  };
+  if (opts.error instanceof Error) {
+    metadata.errorMessage = opts.error.message;
+  }
+  addSsrPhaseSpan(requestId, {
+    name: `composable:${name}`,
+    type: "composable",
+    startMs: Math.max(startTime - requestStart, 0),
+    endMs: Math.max(endTime - requestStart, 0),
+    error: !!opts.error,
+    metadata
+  });
+}
 export function setupComposableRegistry() {
   const entries = /* @__PURE__ */ new Map();
   const liveRefs = /* @__PURE__ */ new Map();
@@ -38,14 +66,30 @@ export function setupComposableRegistry() {
     }
     nameCache = /* @__PURE__ */ new Map();
     sharedKeysCache.set(name, nameCache);
+    const identityIds = /* @__PURE__ */ new WeakMap();
+    let nextIdentity = 1;
+    const getIdentityGroup = (obj) => {
+      if (!obj || typeof obj !== "object") {
+        return void 0;
+      }
+      const target = obj;
+      const existing = identityIds.get(target);
+      if (existing) {
+        return existing;
+      }
+      const created = `group-${nextIdentity++}`;
+      identityIds.set(target, created);
+      return created;
+    };
     const peers = [...entries.entries()].filter(([, e]) => e.name === name);
     for (const [eid] of peers) {
       const ownRaw = rawRefs.get(eid);
       if (!ownRaw) {
-        nameCache.set(eid, []);
+        nameCache.set(eid, { keys: [], groups: {} });
         continue;
       }
       const shared = /* @__PURE__ */ new Set();
+      const groups = {};
       for (const [otherId] of peers) {
         if (otherId === eid) {
           continue;
@@ -57,12 +101,16 @@ export function setupComposableRegistry() {
         for (const [key, obj] of Object.entries(ownRaw)) {
           if (key in otherRaw && otherRaw[key] === obj) {
             shared.add(key);
+            const identity = getIdentityGroup(obj);
+            if (identity) {
+              groups[key] = identity;
+            }
           }
         }
       }
-      nameCache.set(eid, [...shared]);
+      nameCache.set(eid, { keys: [...shared], groups });
     }
-    return nameCache.get(id) ?? [];
+    return nameCache.get(id) ?? { keys: [], groups: {} };
   }
   let currentRoute = "/";
   function setRoute(path) {
@@ -197,6 +245,7 @@ export function setupComposableRegistry() {
         }
       ])
     );
+    const shared = getSharedKeys(entry.id, entry.name);
     return {
       id: entry.id,
       name: entry.name,
@@ -207,7 +256,8 @@ export function setupComposableRegistry() {
       leakReason: entry.leakReason,
       refs: freshRefs,
       history: entryHistory.get(entry.id) ?? [],
-      sharedKeys: getSharedKeys(entry.id, entry.name),
+      sharedKeys: shared.keys,
+      sharedKeyGroups: shared.groups,
       watcherCount: entry.watcherCount,
       intervalCount: entry.intervalCount,
       lifecycle: entry.lifecycle,
@@ -318,7 +368,15 @@ export function __trackComposable(name, callFn, meta) {
     return callFn();
   }
   if (!import.meta.client) {
-    return callFn();
+    const startTime = nowMs();
+    try {
+      const result2 = callFn();
+      __recordSsrComposableSpan(name, meta, startTime, nowMs());
+      return result2;
+    } catch (error) {
+      __recordSsrComposableSpan(name, meta, startTime, nowMs(), { error });
+      throw error;
+    }
   }
   const registry = window.__observatory__?.composable;
   if (!registry) {

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

@@ -8,6 +8,7 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
   const HIDE_INTERNALS = config.heatmapHideInternals ?? false;
   let dirty = true;
   let cachedSnapshot = "[]";
+  let resetTimestamp = 0;
   const liveElements = /* @__PURE__ */ new Map();
   function markDirty() {
     dirty = true;
@@ -61,6 +62,7 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     };
   }
   function reset() {
+    resetTimestamp = performance.now();
     for (const entry of entries.values()) {
       entry.isPersistent = true;
       entry.rerenders = 0;
@@ -72,23 +74,30 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     markDirty();
   }
   function aggregateFromComponentSpans() {
-    const componentSpans = traceStore.getAllTraces().flatMap((trace) => trace.spans).filter((span) => span.type === "component");
-    const spansByUid = /* @__PURE__ */ new Map();
+    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) {
       const uidValue = span.metadata?.uid;
       const uid = typeof uidValue === "number" ? uidValue : Number(uidValue);
       if (!Number.isFinite(uid)) {
         continue;
       }
-      const list = spansByUid.get(uid) ?? [];
-      list.push(span);
-      spansByUid.set(uid, list);
+      const allList = allSpansByUid.get(uid) ?? [];
+      allList.push(span);
+      allSpansByUid.set(uid, allList);
+      if (span.startTime >= resetTimestamp) {
+        const postList = postResetSpansByUid.get(uid) ?? [];
+        postList.push(span);
+        postResetSpansByUid.set(uid, postList);
+      }
     }
     for (const [uid, entry] of entries.entries()) {
-      const spans = spansByUid.get(uid) ?? [];
-      spans.sort((a, b) => a.startTime - b.startTime);
-      const timeline = spans.slice(-MAX_TIMELINE).map((span) => {
-        const lifecycle = span.metadata?.lifecycle === "mounted" ? "mount" : "update";
+      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 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 {
@@ -98,10 +107,11 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
           route
         };
       });
-      const mountCount = spans.filter((span) => span.metadata?.lifecycle === "mounted").length;
-      const rerenders = spans.filter((span) => span.metadata?.lifecycle !== "mounted").length;
-      const totalMs = spans.reduce((sum, span) => sum + (span.durationMs ?? 0), 0);
-      const eventsCount = Math.max(mountCount + rerenders, 1);
+      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;
       entry.rerenders = rerenders;
       entry.totalMs = Math.round(totalMs * 10) / 10;

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/nitro/fetch-capture.d.ts

@@ -1,7 +1,6 @@
-import type { H3Event } from 'h3';
 interface NitroAppLike {
     hooks: {
-        hook: (name: 'request' | 'afterResponse', handler: (event: H3Event) => void) => void;
+        hook: (name: string, handler: (...args: unknown[]) => void) => void;
     };
 }
 export default function fetchCapturePlugin(nitroApp: NitroAppLike): void;