nuxt-devtools-observatory 0.1.30 → 0.1.31

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/plugin.js

@@ -5,6 +5,10 @@ import { setupFetchRegistry } from "./composables/fetch-registry.js";
 import { setupProvideInjectRegistry } from "./composables/provide-inject-registry.js";
 import { setupRenderRegistry } from "./composables/render-registry.js";
 import { setupTransitionRegistry } from "./composables/transition-registry.js";
+import { setupComponentInstrumentation } from "./instrumentation/component.js";
+import { setupFetchInstrumentation } from "./instrumentation/fetch.js";
+import { setupRouteInstrumentation } from "./instrumentation/route.js";
+import { traceStore } from "./tracing/traceStore.js";
 export default defineNuxtPlugin(() => {
   if (!import.meta.dev) {
     return;
@@ -42,6 +46,10 @@ export default defineNuxtPlugin(() => {
     registries.transition = setupTransitionRegistry();
   }
   if (import.meta.client) {
+    if (config.traceViewer) {
+      setupComponentInstrumentation(nuxtApp);
+      setupFetchInstrumentation(nuxtApp);
+    }
     delete window.__observatory__;
     window.__observatory__ = registries;
     const composableRegistry = registries.composable;
@@ -121,6 +129,11 @@ export default defineNuxtPlugin(() => {
   });
   if (import.meta.client) {
     const router = useRouter();
+    if (config.traceViewer) {
+      setupRouteInstrumentation(nuxtApp, {
+        getCurrentPath: () => router.currentRoute.value.path ?? "/"
+      });
+    }
     router.beforeEach(
       (_to, from) => {
         if (!from || from.name === void 0) {
@@ -175,7 +188,8 @@ export default defineNuxtPlugin(() => {
       fetch: Array.isArray(snapshot.fetch) ? snapshot.fetch.length : 0,
       composables: Array.isArray(snapshot.composables) ? snapshot.composables.length : 0,
       renders: Array.isArray(snapshot.renders) ? snapshot.renders.length : 0,
-      transitions: Array.isArray(snapshot.transitions) ? snapshot.transitions.length : 0
+      transitions: Array.isArray(snapshot.transitions) ? snapshot.transitions.length : 0,
+      traces: Array.isArray(snapshot.traces) ? snapshot.traces.length : 0
     });
     lastSnapshotSignature = JSON.stringify(snapshot);
     import.meta.hot.send("observatory:snapshot", snapshot);
@@ -207,13 +221,35 @@ export default defineNuxtPlugin(() => {
       const hasGetSnapshot = reg && typeof reg.getSnapshot === "function";
       snapshot[key === "composable" ? "composables" : key === "render" ? "renders" : key === "transition" ? "transitions" : key] = hasGetSnapshot ? safeParse(reg.getSnapshot(), fallback) : fallback;
     }
+    snapshot.traces = config.traceViewer ? traceStore.getAllTraces().map((trace) => ({
+      id: trace.id,
+      name: trace.name,
+      startTime: trace.startTime,
+      endTime: trace.endTime,
+      durationMs: trace.durationMs,
+      status: trace.status,
+      metadata: trace.metadata,
+      spans: trace.spans.map((span) => ({
+        id: span.id,
+        traceId: span.traceId,
+        parentSpanId: span.parentSpanId,
+        name: span.name,
+        type: span.type,
+        startTime: span.startTime,
+        endTime: span.endTime,
+        durationMs: span.durationMs,
+        status: span.status,
+        metadata: span.metadata
+      }))
+    })) : [];
     snapshot.features = {
       fetchDashboard: !!registries.fetch,
       provideInjectGraph: !!registries.provideInject,
       composableTracker: !!registries.composable,
       composableNavigationMode,
       renderHeatmap: !!registries.render,
-      transitionTracker: !!registries.transition
+      transitionTracker: !!registries.transition,
+      traceViewer: !!config.traceViewer
     };
     return snapshot;
   }

package/dist/runtime/tracing/context.d.ts

@@ -0,0 +1,9 @@
+declare const TRACE_CONTEXT_KEY = "__observatory_trace_context__";
+type TraceContextCarrier = {
+    [TRACE_CONTEXT_KEY]?: {
+        currentTraceId?: string;
+    };
+};
+export declare function setCurrentTraceId(traceId: string | undefined, carrier?: TraceContextCarrier): void;
+export declare function getCurrentTraceId(carrier?: TraceContextCarrier): string | undefined;
+export {};

package/dist/runtime/tracing/context.js

@@ -0,0 +1,15 @@
+const TRACE_CONTEXT_KEY = "__observatory_trace_context__";
+function getGlobalCarrier() {
+  return globalThis;
+}
+export function setCurrentTraceId(traceId, carrier) {
+  const target = carrier ?? getGlobalCarrier();
+  if (!target[TRACE_CONTEXT_KEY]) {
+    target[TRACE_CONTEXT_KEY] = {};
+  }
+  target[TRACE_CONTEXT_KEY].currentTraceId = traceId;
+}
+export function getCurrentTraceId(carrier) {
+  const target = carrier ?? getGlobalCarrier();
+  return target[TRACE_CONTEXT_KEY]?.currentTraceId;
+}

package/dist/runtime/tracing/trace.d.ts

@@ -0,0 +1,25 @@
+export type SpanType = 'render' | 'transition' | 'fetch' | 'composable' | 'navigation' | 'custom' | (string & {});
+export type SpanStatus = 'active' | 'ok' | 'error' | 'cancelled';
+export interface Span {
+    id: string;
+    traceId: string;
+    parentSpanId?: string;
+    name: string;
+    type: SpanType;
+    startTime: number;
+    endTime?: number;
+    durationMs?: number;
+    status: SpanStatus;
+    metadata?: Record<string, unknown>;
+}
+export type TraceStatus = 'active' | 'ok' | 'error' | 'cancelled';
+export interface Trace {
+    id: string;
+    name: string;
+    startTime: number;
+    endTime?: number;
+    durationMs?: number;
+    status: TraceStatus;
+    metadata?: Record<string, unknown>;
+    spans: Span[];
+}

package/dist/runtime/tracing/traceStore.d.ts

@@ -0,0 +1,39 @@
+import type { Span, SpanStatus, Trace, TraceStatus } from './trace.js';
+export interface CreateTraceInput {
+    id?: string;
+    name?: string;
+    startTime?: number;
+    metadata?: Record<string, unknown>;
+}
+export interface AddSpanInput {
+    id?: string;
+    traceId: string;
+    parentSpanId?: string;
+    name: string;
+    type: Span['type'];
+    startTime?: number;
+    endTime?: number;
+    status?: SpanStatus;
+    metadata?: Record<string, unknown>;
+}
+export interface EndTraceInput {
+    endTime?: number;
+    status?: TraceStatus;
+    metadata?: Record<string, unknown>;
+}
+export declare class TraceStore {
+    private readonly traces;
+    createTrace(input?: CreateTraceInput): Trace;
+    addSpan(input: AddSpanInput): Span;
+    endTrace(traceId: string, input?: EndTraceInput): Trace | null;
+    endSpan(spanId: string, traceId: string, input?: {
+        endTime?: number;
+        status?: SpanStatus;
+        metadata?: Record<string, unknown>;
+    }): Span | null;
+    getTrace(traceId: string): Trace | undefined;
+    getAllTraces(): Trace[];
+    clear(): void;
+    private ensureTrace;
+}
+export declare const traceStore: TraceStore;

package/dist/runtime/tracing/traceStore.js

@@ -0,0 +1,101 @@
+function createId(prefix) {
+  const random = Math.random().toString(36).slice(2, 10);
+  return `${prefix}_${Date.now()}_${random}`;
+}
+function computeDuration(startTime, endTime) {
+  return Math.max(endTime - startTime, 0);
+}
+export class TraceStore {
+  traces = /* @__PURE__ */ new Map();
+  createTrace(input = {}) {
+    const startTime = input.startTime ?? performance.now();
+    const trace = {
+      id: input.id ?? createId("trace"),
+      name: input.name ?? "trace",
+      startTime,
+      status: "active",
+      metadata: input.metadata,
+      spans: []
+    };
+    this.traces.set(trace.id, trace);
+    return trace;
+  }
+  addSpan(input) {
+    const trace = this.ensureTrace(input.traceId, input.startTime);
+    const startTime = input.startTime ?? performance.now();
+    const endTime = input.endTime;
+    const span = {
+      id: input.id ?? createId("span"),
+      traceId: trace.id,
+      parentSpanId: input.parentSpanId,
+      name: input.name,
+      type: input.type,
+      startTime,
+      endTime,
+      durationMs: endTime !== void 0 ? computeDuration(startTime, endTime) : void 0,
+      status: input.status ?? (endTime !== void 0 ? "ok" : "active"),
+      metadata: input.metadata
+    };
+    trace.spans.push(span);
+    if (trace.endTime !== void 0) {
+      trace.durationMs = computeDuration(trace.startTime, trace.endTime);
+    }
+    return span;
+  }
+  endTrace(traceId, input = {}) {
+    const trace = this.traces.get(traceId);
+    if (!trace) {
+      return null;
+    }
+    const endTime = input.endTime ?? performance.now();
+    trace.endTime = endTime;
+    trace.durationMs = computeDuration(trace.startTime, endTime);
+    trace.status = input.status ?? "ok";
+    if (input.metadata) {
+      trace.metadata = {
+        ...trace.metadata ?? {},
+        ...input.metadata
+      };
+    }
+    return trace;
+  }
+  endSpan(spanId, traceId, input = {}) {
+    const trace = this.traces.get(traceId);
+    if (!trace) {
+      return null;
+    }
+    const span = trace.spans.find((item) => item.id === spanId);
+    if (!span) {
+      return null;
+    }
+    const endTime = input.endTime ?? performance.now();
+    span.endTime = endTime;
+    span.durationMs = computeDuration(span.startTime, endTime);
+    span.status = input.status ?? "ok";
+    if (input.metadata) {
+      span.metadata = {
+        ...span.metadata ?? {},
+        ...input.metadata
+      };
+    }
+    return span;
+  }
+  getTrace(traceId) {
+    return this.traces.get(traceId);
+  }
+  getAllTraces() {
+    return [...this.traces.values()];
+  }
+  clear() {
+    this.traces.clear();
+  }
+  ensureTrace(traceId, startTime) {
+    const existing = this.traces.get(traceId);
+    if (existing) {
+      return existing;
+    }
+    const trace = this.createTrace({ id: traceId, startTime });
+    return trace;
+  }
+}
+export const traceStore = new TraceStore();

package/dist/runtime/tracing/tracing.d.ts

@@ -0,0 +1,27 @@
+import { type TraceStore } from './traceStore.js';
+import type { Span, SpanStatus, SpanType, Trace } from './trace.js';
+export interface StartSpanInput {
+    name: string;
+    type: SpanType;
+    traceId?: string;
+    parentSpanId?: string;
+    metadata?: Record<string, unknown>;
+    startTime?: number;
+}
+export interface EndSpanInput {
+    endTime?: number;
+    status?: SpanStatus;
+    metadata?: Record<string, unknown>;
+}
+export interface SpanHandle {
+    trace: Trace;
+    span: Span;
+    end: (input?: EndSpanInput) => Span;
+}
+export interface StartSpanOptions {
+    store?: TraceStore;
+    carrier?: object;
+    traceName?: string;
+    traceMetadata?: Record<string, unknown>;
+}
+export declare function startSpan(input: StartSpanInput, options?: StartSpanOptions): SpanHandle;

package/dist/runtime/tracing/tracing.js

@@ -0,0 +1,48 @@
+import { getCurrentTraceId, setCurrentTraceId } from "./context.js";
+import { traceStore } from "./traceStore.js";
+export function startSpan(input, options = {}) {
+  const store = options.store ?? traceStore;
+  const activeTraceId = input.traceId ?? getCurrentTraceId(options.carrier);
+  let trace = activeTraceId ? store.getTrace(activeTraceId) : void 0;
+  if (!trace) {
+    trace = store.createTrace({
+      id: activeTraceId,
+      name: options.traceName ?? input.name,
+      metadata: options.traceMetadata,
+      startTime: input.startTime
+    });
+  }
+  setCurrentTraceId(trace.id, options.carrier);
+  const span = store.addSpan({
+    traceId: trace.id,
+    parentSpanId: input.parentSpanId,
+    name: input.name,
+    type: input.type,
+    metadata: input.metadata,
+    startTime: input.startTime
+  });
+  let ended = false;
+  const end = (endInput = {}) => {
+    if (ended) {
+      return span;
+    }
+    const endedSpan = store.endSpan(span.id, trace.id, {
+      endTime: endInput.endTime,
+      status: endInput.status,
+      metadata: endInput.metadata
+    });
+    ended = true;
+    if (endedSpan) {
+      span.endTime = endedSpan.endTime;
+      span.durationMs = endedSpan.durationMs;
+      span.status = endedSpan.status;
+      span.metadata = endedSpan.metadata;
+    }
+    return span;
+  };
+  return {
+    trace,
+    span,
+    end
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-devtools-observatory",
-    "version": "0.1.30",
+    "version": "0.1.31",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "license": "MIT",
     "repository": {