nuxt-devtools-observatory 0.1.30 → 0.1.32

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

@@ -1,65 +1,140 @@
 import { h, defineComponent, getCurrentInstance, onUnmounted, Transition as VueTransition } from "vue";
+import { startSpan } from "../tracing/tracing.js";
+import { traceStore } from "../tracing/traceStore.js";
 const MAX_TRANSITIONS = typeof process !== "undefined" && process.env.OBSERVATORY_MAX_TRANSITIONS ? Number(process.env.OBSERVATORY_MAX_TRANSITIONS) : 500;
 export function setupTransitionRegistry() {
-  const entries = /* @__PURE__ */ new Map();
+  const activeSpans = /* @__PURE__ */ new Map();
+  const entryState = /* @__PURE__ */ new Map();
   let dirty = true;
   let cachedSnapshot = "[]";
   function markDirty() {
     dirty = true;
   }
   function register(entry) {
-    if (entries.size >= MAX_TRANSITIONS) {
-      const oldestKey = entries.keys().next().value;
-      if (oldestKey !== void 0) {
-        entries.delete(oldestKey);
-      }
-    }
-    entries.set(entry.id, entry);
+    const spanHandle = startSpan({
+      name: `transition:${entry.transitionName}`,
+      type: "transition",
+      metadata: {
+        id: entry.id,
+        transitionName: entry.transitionName,
+        parentComponent: entry.parentComponent,
+        direction: entry.direction,
+        phase: entry.phase,
+        cancelled: entry.cancelled,
+        appear: entry.appear,
+        mode: entry.mode
+      },
+      startTime: entry.startTime
+    });
+    activeSpans.set(entry.id, spanHandle);
+    entryState.set(entry.id, {
+      id: entry.id,
+      transitionName: entry.transitionName,
+      parentComponent: entry.parentComponent,
+      direction: entry.direction,
+      phase: entry.phase,
+      startTime: entry.startTime,
+      endTime: entry.endTime,
+      cancelled: entry.cancelled,
+      appear: entry.appear,
+      mode: entry.mode
+    });
     markDirty();
     emit("transition:register", entry);
   }
   function clear() {
-    entries.clear();
+    activeSpans.clear();
+    entryState.clear();
     markDirty();
     emit("transition:clear", {});
   }
   function update(id, patch) {
-    const existing = entries.get(id);
+    const existing = entryState.get(id);
     if (!existing) {
       return;
     }
     const updated = { ...existing, ...patch };
-    if (patch.endTime !== void 0) {
-      updated.durationMs = Math.round((patch.endTime - existing.startTime) * 10) / 10;
+    entryState.set(id, updated);
+    const active = activeSpans.get(id);
+    if (active) {
+      active.span.metadata = {
+        ...active.span.metadata ?? {},
+        id: updated.id,
+        transitionName: updated.transitionName,
+        parentComponent: updated.parentComponent,
+        direction: updated.direction,
+        phase: updated.phase,
+        cancelled: updated.cancelled,
+        appear: updated.appear,
+        mode: updated.mode
+      };
+      if (patch.endTime !== void 0) {
+        active.end({
+          endTime: patch.endTime,
+          status: patch.cancelled === true ? "cancelled" : "ok",
+          metadata: {
+            phase: updated.phase,
+            cancelled: updated.cancelled
+          }
+        });
+        activeSpans.delete(id);
+      }
     }
-    entries.set(id, updated);
     markDirty();
-    emit("transition:update", updated);
+    emit("transition:update", toTransitionEntry(updated, active?.span));
   }
-  function sanitize(entry) {
+  function toTransitionEntry(base, span) {
+    const durationMs = span?.durationMs ?? (base.endTime !== void 0 ? Math.round((base.endTime - base.startTime) * 10) / 10 : void 0);
     return {
-      id: entry.id,
-      transitionName: entry.transitionName,
-      parentComponent: entry.parentComponent,
-      direction: entry.direction,
-      phase: entry.phase,
-      startTime: entry.startTime,
-      endTime: entry.endTime,
-      durationMs: entry.durationMs,
-      cancelled: entry.cancelled,
-      appear: entry.appear,
-      mode: entry.mode
+      id: base.id,
+      transitionName: base.transitionName,
+      parentComponent: base.parentComponent,
+      direction: base.direction,
+      phase: base.phase,
+      startTime: base.startTime,
+      endTime: base.endTime,
+      durationMs,
+      cancelled: base.cancelled,
+      appear: base.appear,
+      mode: base.mode
     };
   }
   function getAll() {
-    return [...entries.values()].map(sanitize);
+    const spans = traceStore.getAllTraces().flatMap((trace) => trace.spans).filter((span) => span.type === "transition").sort((a, b) => a.startTime - b.startTime);
+    const entries = spans.map((span) => {
+      const metadata = span.metadata ?? {};
+      const id = typeof metadata.id === "string" ? metadata.id : span.id;
+      const transitionName = typeof metadata.transitionName === "string" ? metadata.transitionName : "default";
+      const parentComponent = typeof metadata.parentComponent === "string" ? metadata.parentComponent : "unknown";
+      const direction = metadata.direction === "leave" ? "leave" : "enter";
+      const knownPhase = metadata.phase;
+      const phase = knownPhase === "entering" || knownPhase === "entered" || knownPhase === "leaving" || knownPhase === "left" || knownPhase === "enter-cancelled" || knownPhase === "leave-cancelled" || knownPhase === "interrupted" ? knownPhase : span.endTime ? direction === "enter" ? "entered" : "left" : direction === "enter" ? "entering" : "leaving";
+      return {
+        id,
+        transitionName,
+        parentComponent,
+        direction,
+        phase,
+        startTime: span.startTime,
+        endTime: span.endTime,
+        durationMs: span.durationMs,
+        cancelled: metadata.cancelled === true || span.status === "cancelled",
+        appear: metadata.appear === true,
+        mode: typeof metadata.mode === "string" ? metadata.mode : void 0
+      };
+    });
+    const overflow = entries.length - MAX_TRANSITIONS;
+    if (overflow > 0) {
+      return entries.slice(overflow);
+    }
+    return entries;
   }
   function getSnapshot() {
     if (!dirty) {
       return cachedSnapshot;
     }
     try {
-      cachedSnapshot = JSON.stringify([...entries.values()].map(sanitize)) ?? "[]";
+      cachedSnapshot = JSON.stringify(getAll()) ?? "[]";
     } catch {
       cachedSnapshot = "[]";
     }

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

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

package/dist/runtime/instrumentation/asyncData.js

@@ -0,0 +1,49 @@
+import { startSpan } from "../tracing/tracing.js";
+function getNormalizedKey(key) {
+  return typeof key === "string" && key.length > 0 ? key : "useAsyncData";
+}
+export function useTracedAsyncData(originalFn, args, handlerIndex, key, meta) {
+  if (!import.meta.dev || !import.meta.client) {
+    return originalFn(...args);
+  }
+  const nextArgs = [...args];
+  const originalHandler = nextArgs[handlerIndex];
+  if (typeof originalHandler !== "function") {
+    return originalFn(...args);
+  }
+  const normalizedKey = getNormalizedKey(key);
+  nextArgs[handlerIndex] = (...handlerArgs) => {
+    const span = startSpan({
+      name: meta.originalFn ?? "useAsyncData",
+      type: "fetch",
+      metadata: {
+        key: normalizedKey,
+        status: "pending",
+        file: meta.file,
+        line: meta.line,
+        source: "async-data"
+      }
+    });
+    return Promise.resolve(originalHandler(...handlerArgs)).then((result) => {
+      span.end({
+        status: "ok",
+        metadata: {
+          key: normalizedKey,
+          status: "ok"
+        }
+      });
+      return result;
+    }).catch((error) => {
+      span.end({
+        status: "error",
+        metadata: {
+          key: normalizedKey,
+          status: "error",
+          errorMessage: error instanceof Error ? error.message : String(error)
+        }
+      });
+      throw error;
+    });
+  };
+  return originalFn(...nextArgs);
+}

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

@@ -0,0 +1,2 @@
+import type { NuxtApp } from '#app';
+export declare function setupComponentInstrumentation(nuxtApp: NuxtApp): void;

package/dist/runtime/instrumentation/component.js

@@ -0,0 +1,126 @@
+import { startSpan } from "../tracing/tracing.js";
+const instrumentedApps = /* @__PURE__ */ new WeakSet();
+const renderStartTimes = /* @__PURE__ */ new WeakMap();
+function getComponentFile(instance) {
+  return instance.$.type.__file;
+}
+function getComponentName(instance) {
+  const type = instance.$.type;
+  if (type.__name && type.__name.length > 0) {
+    return type.__name;
+  }
+  if (type.name && type.name.length > 0) {
+    return type.name;
+  }
+  if (type.__file) {
+    const fileName = type.__file.split("/").pop() ?? type.__file;
+    return fileName.replace(/\.[^.]+$/, "");
+  }
+  return "AnonymousComponent";
+}
+function shouldTrack(instance) {
+  const file = getComponentFile(instance);
+  if (!file) {
+    return false;
+  }
+  return !file.includes("node_modules");
+}
+function trackLifecycle(instance, lifecycle) {
+  if (!shouldTrack(instance)) {
+    return;
+  }
+  const componentName = getComponentName(instance);
+  const file = getComponentFile(instance);
+  const uid = instance.$.uid;
+  const route = typeof window !== "undefined" ? window.location.pathname : "/";
+  const span = startSpan({
+    name: `component:${lifecycle}`,
+    type: "component",
+    metadata: {
+      lifecycle,
+      componentName,
+      uid,
+      file,
+      route,
+      status: "ok"
+    }
+  });
+  span.end({
+    status: "ok",
+    metadata: {
+      lifecycle,
+      componentName,
+      uid,
+      file,
+      route,
+      status: "ok"
+    }
+  });
+}
+function trackRender(instance, phase, startTime, endTime) {
+  if (!shouldTrack(instance)) {
+    return;
+  }
+  const componentName = getComponentName(instance);
+  const file = getComponentFile(instance);
+  const uid = instance.$.uid;
+  const route = typeof window !== "undefined" ? window.location.pathname : "/";
+  const span = startSpan({
+    name: "component:render",
+    type: "render",
+    startTime,
+    metadata: {
+      lifecycle: `render:${phase}`,
+      componentName,
+      uid,
+      file,
+      route
+    }
+  });
+  span.end({
+    endTime,
+    status: "ok",
+    metadata: {
+      lifecycle: `render:${phase}`,
+      componentName,
+      uid,
+      file,
+      route
+    }
+  });
+}
+export function setupComponentInstrumentation(nuxtApp) {
+  const app = nuxtApp.vueApp;
+  if (instrumentedApps.has(app)) {
+    return;
+  }
+  instrumentedApps.add(app);
+  app.mixin({
+    beforeMount() {
+      if (shouldTrack(this)) {
+        renderStartTimes.set(this, performance.now());
+      }
+    },
+    mounted() {
+      const startTime = renderStartTimes.get(this);
+      renderStartTimes.delete(this);
+      if (startTime !== void 0) {
+        trackRender(this, "mount", startTime, performance.now());
+      }
+      trackLifecycle(this, "mounted");
+    },
+    beforeUpdate() {
+      if (shouldTrack(this)) {
+        renderStartTimes.set(this, performance.now());
+      }
+    },
+    updated() {
+      const startTime = renderStartTimes.get(this);
+      renderStartTimes.delete(this);
+      if (startTime !== void 0) {
+        trackRender(this, "update", startTime, performance.now());
+      }
+      trackLifecycle(this, "updated");
+    }
+  });
+}

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

@@ -0,0 +1,2 @@
+import type { NuxtApp } from '#app';
+export declare function setupFetchInstrumentation(nuxtApp: NuxtApp): void;

package/dist/runtime/instrumentation/fetch.js

@@ -0,0 +1,89 @@
+import { startSpan } from "../tracing/tracing.js";
+function resolveUrl(input) {
+  if (typeof input === "string") {
+    return input;
+  }
+  if (input && typeof input === "object" && "url" in input) {
+    const maybeUrl = input.url;
+    return typeof maybeUrl === "string" ? maybeUrl : String(maybeUrl ?? "");
+  }
+  return String(input ?? "");
+}
+function resolveMethod(input, options) {
+  const method = options?.method;
+  if (typeof method === "string" && method.length > 0) {
+    return method.toUpperCase();
+  }
+  if (input && typeof input === "object" && "method" in input) {
+    const requestMethod = input.method;
+    if (typeof requestMethod === "string" && requestMethod.length > 0) {
+      return requestMethod.toUpperCase();
+    }
+  }
+  return "GET";
+}
+function resolveErrorStatus(error) {
+  const target = error;
+  return target?.response?.status ?? target?.statusCode ?? target?.status;
+}
+const WRAPPED_FETCH_FLAG = "__observatory_wrapped_fetch__";
+export function setupFetchInstrumentation(nuxtApp) {
+  const original = nuxtApp.$fetch;
+  if (!original) {
+    return;
+  }
+  if (original[WRAPPED_FETCH_FLAG]) {
+    return;
+  }
+  const wrapped = ((request, options) => {
+    const url = resolveUrl(request);
+    const method = resolveMethod(request, options);
+    const startedAt = performance.now();
+    const span = startSpan({
+      name: "$fetch",
+      type: "fetch",
+      metadata: {
+        source: "$fetch",
+        url,
+        method,
+        status: "pending"
+      }
+    });
+    return Promise.resolve(original(request, options)).then((result) => {
+      const durationMs = Math.max(performance.now() - startedAt, 0);
+      span.end({
+        status: "ok",
+        metadata: {
+          source: "$fetch",
+          url,
+          method,
+          status: "ok",
+          durationMs: Math.round(durationMs * 10) / 10
+        }
+      });
+      return result;
+    }).catch((error) => {
+      const durationMs = Math.max(performance.now() - startedAt, 0);
+      const statusCode = resolveErrorStatus(error);
+      span.end({
+        status: "error",
+        metadata: {
+          source: "$fetch",
+          url,
+          method,
+          status: "error",
+          statusCode,
+          durationMs: Math.round(durationMs * 10) / 10
+        }
+      });
+      throw error;
+    });
+  });
+  Object.assign(wrapped, original);
+  wrapped[WRAPPED_FETCH_FLAG] = true;
+  nuxtApp.$fetch = wrapped;
+  const globalTarget = globalThis;
+  if (typeof globalTarget.$fetch === "function") {
+    globalTarget.$fetch = wrapped;
+  }
+}

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

@@ -0,0 +1,6 @@
+import type { NuxtApp } from '#app';
+export interface RouteInstrumentationOptions {
+    getCurrentPath: () => string;
+    carrier?: object;
+}
+export declare function setupRouteInstrumentation(nuxtApp: NuxtApp, options: RouteInstrumentationOptions): void;

package/dist/runtime/instrumentation/route.js

@@ -0,0 +1,41 @@
+import { getCurrentTraceId, setCurrentTraceId } from "../tracing/context.js";
+import { traceStore } from "../tracing/traceStore.js";
+export function setupRouteInstrumentation(nuxtApp, options) {
+  let activeTraceId;
+  const getRoutePath = () => {
+    const path = options.getCurrentPath();
+    return path && path.length > 0 ? path : "/";
+  };
+  nuxtApp.hook("page:start", () => {
+    if (activeTraceId) {
+      traceStore.endTrace(activeTraceId, { status: "cancelled" });
+      activeTraceId = void 0;
+    }
+    const route = getRoutePath();
+    const previousRoute = getCurrentTraceId(options.carrier);
+    const trace = traceStore.createTrace({
+      name: `route:${route}`,
+      metadata: {
+        kind: "route-navigation",
+        route,
+        previousTraceId: previousRoute
+      }
+    });
+    activeTraceId = trace.id;
+    setCurrentTraceId(trace.id, options.carrier);
+  });
+  nuxtApp.hook("page:finish", () => {
+    if (!activeTraceId) {
+      return;
+    }
+    const route = getRoutePath();
+    traceStore.endTrace(activeTraceId, {
+      status: "ok",
+      metadata: {
+        route
+      }
+    });
+    setCurrentTraceId(void 0, options.carrier);
+    activeTraceId = void 0;
+  });
+}

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;

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>`);
   });
 }