nuxt-devtools-observatory 0.1.30 → 0.1.32

package/client/src/views/TransitionTimeline.vue

@@ -28,12 +28,7 @@ const filtered = computed(() => {
         list = list.filter((e) => e.phase === 'entered' || e.phase === 'left')
     }
 
-    return list.sort((a, b) => {
-        const aTime = a.endTime ?? a.startTime
-        const bTime = b.endTime ?? b.startTime
-
-        return bTime - aTime
-    })
+    return list.sort((a, b) => a.startTime - b.startTime)
 })
 
 const stats = computed(() => ({

package/dist/module.d.mts

@@ -71,6 +71,11 @@ interface ModuleOptions {
      * @default true
      */
     transitionTracker?: boolean;
+    /**
+     * Enable the trace viewer tab (per-route component + fetch + composable + render spans)
+     * @default true
+     */
+    traceViewer?: boolean;
     /**
      * Hide node_modules/internal components in the render heatmap
      * @default false

package/dist/module.json

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

package/dist/module.mjs

@@ -187,7 +187,7 @@ function fetchInstrumentPlugin() {
       if (!isVue && !id.endsWith(".ts") && !id.endsWith(".js")) {
         return;
       }
-      if (id.includes("node_modules") || id.includes("composable-registry") || id.includes("provide-inject-registry") || id.includes("fetch-registry")) {
+      if (id.includes("node_modules") || id.includes("composable-registry") || id.includes("provide-inject-registry") || id.includes("fetch-registry") || id.includes("instrumentation/asyncData")) {
         return;
       }
       let scriptCode = code;
@@ -210,9 +210,9 @@ function fetchInstrumentPlugin() {
         });
         let modified = false;
         let needsFetchCallHelper = false;
-        let needsFetchHandlerHelper = false;
+        let needsTracedAsyncDataHelper = false;
         const hasFetchCallImport = scriptCode.includes("__devFetchCall");
-        const hasFetchHandlerImport = scriptCode.includes("__devFetchHandler");
+        const hasTracedAsyncDataImport = scriptCode.includes("useTracedAsyncData");
         traverse$1(ast, {
           CallExpression(path) {
             if (path.node.__observatoryTransformed) {
@@ -225,7 +225,7 @@ function fetchInstrumentPlugin() {
             if (!FETCH_FNS.has(callee.name)) {
               return;
             }
-            if (path.parent && t.isCallExpression(path.parent) && t.isIdentifier(path.parent.callee) && ["__devFetchCall", "__devFetchHandler"].includes(path.parent.callee.name)) {
+            if (path.parent && t.isCallExpression(path.parent) && t.isIdentifier(path.parent.callee) && ["__devFetchCall", "useTracedAsyncData"].includes(path.parent.callee.name)) {
               return;
             }
             const originalName = callee.name;
@@ -273,40 +273,18 @@ function fetchInstrumentPlugin() {
               t.objectProperty(t.identifier("originalFn"), t.stringLiteral(originalName))
             ]);
             if ((originalName === "useAsyncData" || originalName === "useLazyAsyncData") && handlerArg) {
-              const wrappedHandler = t.arrowFunctionExpression(
-                [t.restElement(t.identifier("args"))],
-                t.conditionalExpression(
-                  t.logicalExpression(
-                    "&&",
-                    t.memberExpression(t.identifier("process"), t.identifier("dev")),
-                    t.memberExpression(t.identifier("process"), t.identifier("client"))
-                  ),
-                  t.callExpression(
-                    t.callExpression(t.identifier("__devFetchHandler"), [
-                      handlerArg,
-                      keyArg ?? t.stringLiteral(key),
-                      meta
-                    ]),
-                    [t.spreadElement(t.identifier("args"))]
-                  ),
-                  t.callExpression(handlerArg, [t.spreadElement(t.identifier("args"))])
-                )
-              );
-              wrappedHandler.__observatoryTransformed = true;
-              needsFetchHandlerHelper = true;
-              if (keyArg) {
-                const newCall = t.callExpression(t.identifier(originalName), [
-                  keyArg,
-                  wrappedHandler,
-                  optsArg ?? t.objectExpression([])
-                ]);
-                newCall.__observatoryTransformed = true;
-                path.replaceWith(newCall);
-              } else {
-                const newCall = t.callExpression(t.identifier(originalName), [wrappedHandler]);
-                newCall.__observatoryTransformed = true;
-                path.replaceWith(newCall);
-              }
+              const rewrittenArgs = keyArg ? [keyArg, handlerArg, optsArg ?? t.objectExpression([])] : [handlerArg];
+              const handlerIndex = keyArg ? 1 : 0;
+              const newCall = t.callExpression(t.identifier("useTracedAsyncData"), [
+                t.identifier(originalName),
+                t.arrayExpression(rewrittenArgs),
+                t.numericLiteral(handlerIndex),
+                keyArg ?? t.stringLiteral(key),
+                meta
+              ]);
+              newCall.__observatoryTransformed = true;
+              path.replaceWith(newCall);
+              needsTracedAsyncDataHelper = true;
               modified = true;
             } else {
               const newCall = t.callExpression(t.identifier("__devFetchCall"), [
@@ -325,12 +303,12 @@ function fetchInstrumentPlugin() {
         if (!modified) {
           return null;
         }
-        const importNames = [
-          needsFetchCallHelper && !hasFetchCallImport ? "__devFetchCall" : "",
-          needsFetchHandlerHelper && !hasFetchHandlerImport ? "__devFetchHandler" : ""
-        ].filter(Boolean);
-        const importStatement = importNames.length ? `import { ${importNames.join(", ")} } from 'nuxt-devtools-observatory/runtime/fetch-registry';
+        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) {
@@ -554,6 +532,7 @@ const defaults = {
   composableTracker: process.env.OBSERVATORY_COMPOSABLE_TRACKER === "true",
   renderHeatmap: process.env.OBSERVATORY_RENDER_HEATMAP === "true",
   transitionTracker: process.env.OBSERVATORY_TRANSITION_TRACKER === "true",
+  traceViewer: process.env.OBSERVATORY_TRACE_VIEWER === "true",
   heatmapThresholdCount: process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT) : 3,
   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,
@@ -591,6 +570,7 @@ const module$1 = defineNuxtModule({
       composableTracker: options.composableTracker ?? (process.env.OBSERVATORY_COMPOSABLE_TRACKER ? process.env.OBSERVATORY_COMPOSABLE_TRACKER === "true" : true),
       renderHeatmap: options.renderHeatmap ?? (process.env.OBSERVATORY_RENDER_HEATMAP ? process.env.OBSERVATORY_RENDER_HEATMAP === "true" : true),
       transitionTracker: options.transitionTracker ?? (process.env.OBSERVATORY_TRANSITION_TRACKER ? process.env.OBSERVATORY_TRANSITION_TRACKER === "true" : true),
+      traceViewer: options.traceViewer ?? (process.env.OBSERVATORY_TRACE_VIEWER ? process.env.OBSERVATORY_TRACE_VIEWER === "true" : true),
       instrumentServer: options.instrumentServer ?? (process.env.OBSERVATORY_INSTRUMENT_SERVER ? process.env.OBSERVATORY_INSTRUMENT_SERVER === "true" : nuxt.options.ssr !== false),
       heatmapThresholdCount: options.heatmapThresholdCount ?? (process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT) : 3),
       heatmapThresholdTime: options.heatmapThresholdTime ?? (process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME) : 1600),
@@ -611,6 +591,9 @@ const module$1 = defineNuxtModule({
         "./runtime/composables/provide-inject-registry"
       );
       aliases["nuxt-devtools-observatory/runtime/fetch-registry"] = resolver.resolve("./runtime/composables/fetch-registry");
+      aliases["nuxt-devtools-observatory/runtime/async-data-instrumentation"] = resolver.resolve(
+        "./runtime/instrumentation/asyncData"
+      );
       config.resolve = { ...config.resolve, alias: aliases };
     });
     const vitePluginScope = resolved.instrumentServer ? { server: true, client: true } : { server: false, client: true };
@@ -629,7 +612,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";
@@ -645,13 +628,15 @@ const module$1 = defineNuxtModule({
       composables: [],
       renders: [],
       transitions: [],
+      traces: [],
       features: {
         fetchDashboard: !!resolved.fetchDashboard,
         provideInjectGraph: !!resolved.provideInjectGraph,
         composableTracker: !!resolved.composableTracker,
         composableNavigationMode: resolved.composableNavigationMode,
         renderHeatmap: !!resolved.renderHeatmap,
-        transitionTracker: !!resolved.transitionTracker
+        transitionTracker: !!resolved.transitionTracker,
+        traceViewer: !!resolved.traceViewer
       }
     };
     let rpc = null;
@@ -730,6 +715,7 @@ ${configScript}`);
       composableTracker: resolved.composableTracker,
       renderHeatmap: resolved.renderHeatmap,
       transitionTracker: resolved.transitionTracker,
+      traceViewer: resolved.traceViewer,
       maxFetchEntries: resolved.maxFetchEntries,
       maxPayloadBytes: resolved.maxPayloadBytes,
       maxTransitions: resolved.maxTransitions,

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

@@ -1,14 +1,15 @@
 import { useRuntimeConfig } from "#app";
+import { traceStore } from "../tracing/traceStore.js";
 export function setupRenderRegistry(nuxtApp, options = {}) {
   const entries = /* @__PURE__ */ new Map();
-  const pendingTriggeredRenders = /* @__PURE__ */ new Set();
-  const renderStartTimes = /* @__PURE__ */ new Map();
   let currentRoute = "/";
   const config = useRuntimeConfig().public.observatory;
   const MAX_TIMELINE = config.maxRenderTimeline ?? 100;
   const HIDE_INTERNALS = config.heatmapHideInternals ?? false;
   let dirty = true;
   let cachedSnapshot = "[]";
+  let resetTimestamp = 0;
+  const liveElements = /* @__PURE__ */ new Map();
   function markDirty() {
     dirty = true;
   }
@@ -41,81 +42,27 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     }
     return entries.get(uid);
   }
-  const dirtyRects = /* @__PURE__ */ new Set();
-  function markRectDirty(uid) {
-    dirtyRects.add(uid);
-    markDirty();
-  }
-  function flushDirtyRects() {
-    if (dirtyRects.size === 0) {
+  function refreshEntryRect(uid) {
+    const entry = entries.get(uid);
+    if (!entry) {
       return;
     }
-    for (const uid of dirtyRects) {
-      const entry = entries.get(uid);
-      if (!entry) {
-        dirtyRects.delete(uid);
-        continue;
-      }
-      const el = _liveElements.get(uid);
-      if (!el) {
-        dirtyRects.delete(uid);
-        continue;
-      }
-      const rect = el.getBoundingClientRect?.();
-      entry.rect = rect ? {
-        x: Math.round(rect.x),
-        y: Math.round(rect.y),
-        width: Math.round(rect.width),
-        height: Math.round(rect.height),
-        top: Math.round(rect.top),
-        left: Math.round(rect.left)
-      } : void 0;
-      dirtyRects.delete(uid);
-    }
-  }
-  const _liveElements = /* @__PURE__ */ new Map();
-  function removeEntry(instance) {
-    const uid = instance.$.uid;
-    entries.delete(uid);
-    markDirty();
-  }
-  function startRenderTimer(uid) {
-    if (typeof performance === "undefined") {
-      return;
-    }
-    renderStartTimes.set(uid, performance.now());
-  }
-  function recordRenderDuration(entry, kind) {
-    if (typeof performance === "undefined") {
+    const el = liveElements.get(uid);
+    if (!el?.getBoundingClientRect) {
       return;
     }
-    const startedAt = renderStartTimes.get(entry.uid);
-    if (startedAt === void 0) {
-      return;
-    }
-    renderStartTimes.delete(entry.uid);
-    const durationMs = Math.max(performance.now() - startedAt, 0);
-    entry.totalMs += durationMs;
-    const totalEvents = (entry.rerenders ?? 0) + Math.max(entry.mountCount, 1);
-    entry.avgMs = Math.round(entry.totalMs / totalEvents * 10) / 10;
-    const lastTrigger = entry.triggers.length > 0 ? entry.triggers[entry.triggers.length - 1] : void 0;
-    const event = {
-      kind,
-      t: startedAt,
-      durationMs: Math.round(durationMs * 10) / 10,
-      triggerKey: kind === "update" && lastTrigger ? `${lastTrigger.type}: ${lastTrigger.key}` : void 0,
-      route: currentRoute
+    const rect = el.getBoundingClientRect();
+    entry.rect = {
+      x: Math.round(rect.x),
+      y: Math.round(rect.y),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      top: Math.round(rect.top),
+      left: Math.round(rect.left)
     };
-    entry.timeline.push(event);
-    if (entry.timeline.length > MAX_TIMELINE) {
-      entry.timeline.shift();
-    }
-    markDirty();
   }
   function reset() {
-    pendingTriggeredRenders.clear();
-    renderStartTimes.clear();
-    dirtyRects.clear();
+    resetTimestamp = performance.now();
     for (const entry of entries.values()) {
       entry.isPersistent = true;
       entry.rerenders = 0;
@@ -126,65 +73,82 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     }
     markDirty();
   }
+  function aggregateFromComponentSpans() {
+    const componentSpans = traceStore.getAllTraces().flatMap((trace) => trace.spans).filter((span) => 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 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 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 routeValue = span.metadata?.route;
+        const route = typeof routeValue === "string" && routeValue.length > 0 ? routeValue : entry.route;
+        return {
+          kind: lifecycle,
+          t: span.startTime,
+          durationMs: Math.round((span.durationMs ?? 0) * 10) / 10,
+          route
+        };
+      });
+      const mountCount = allSpans.filter((span) => span.metadata?.lifecycle === "mounted").length;
+      const rerenders = postResetSpans.filter((span) => span.metadata?.lifecycle !== "mounted").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;
+      entry.avgMs = Math.round(totalMs / eventsCount * 10) / 10;
+      entry.timeline = timeline;
+      entry.triggers = [];
+      refreshEntryRect(uid);
+    }
+  }
   nuxtApp.vueApp.mixin({
-    beforeMount() {
-      startRenderTimer(this.$.uid);
-    },
     mounted() {
       const entry = ensureEntry(this);
       if (!entry) {
         return;
       }
-      entry.mountCount++;
       const isHydration = options.isHydrating?.() ?? false;
-      if (isHydration && entry.mountCount === 1) {
+      if (isHydration && entry.mountCount === 0) {
         entry.isHydrationMount = true;
-      } else if (entry.mountCount > 1) {
-        entry.rerenders++;
-      }
-      _liveElements.set(entry.uid, this.$el);
-      markRectDirty(entry.uid);
-      if (!entry.isPersistent || entry.mountCount === 1) {
-        recordRenderDuration(entry, "mount");
-      } else {
-        renderStartTimes.delete(entry.uid);
       }
+      liveElements.set(entry.uid, this.$el);
+      refreshEntryRect(entry.uid);
       markDirty();
       emit("render:update", { uid: entry.uid, renders: entry.rerenders });
     },
-    beforeUpdate() {
-      startRenderTimer(this.$.uid);
-    },
-    renderTriggered({ key, type }) {
-      const entry = ensureEntry(this);
-      if (!entry) {
-        return;
-      }
-      entry.triggers.push({ key: String(key), type, timestamp: performance.now() });
-      pendingTriggeredRenders.add(entry.uid);
-      if (entry.triggers.length > 50) {
-        entry.triggers.shift();
-      }
-      markDirty();
-    },
     updated() {
       const entry = ensureEntry(this);
       if (!entry) {
         return;
       }
-      pendingTriggeredRenders.delete(entry.uid);
-      entry.rerenders++;
-      markRectDirty(entry.uid);
-      recordRenderDuration(entry, "update");
+      liveElements.set(entry.uid, this.$el);
+      refreshEntryRect(entry.uid);
       emit("render:update", { uid: entry.uid, renders: entry.rerenders });
+      markDirty();
     },
     unmounted() {
       const uid = this.$.uid;
-      pendingTriggeredRenders.delete(uid);
-      renderStartTimes.delete(uid);
-      dirtyRects.delete(uid);
-      _liveElements.delete(uid);
-      removeEntry(this);
+      liveElements.delete(uid);
+      entries.delete(uid);
+      markDirty();
       emit("render:remove", { uid });
     }
   });
@@ -215,14 +179,14 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     };
   }
   function getAll() {
-    flushDirtyRects();
+    aggregateFromComponentSpans();
     return [...entries.values()].map(sanitize);
   }
   function getSnapshot() {
     if (!dirty) {
       return cachedSnapshot;
     }
-    flushDirtyRects();
+    aggregateFromComponentSpans();
     try {
       cachedSnapshot = JSON.stringify([...entries.values()].map(sanitize)) ?? "[]";
     } catch {