nuxt-devtools-observatory 0.1.28 → 0.1.31

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

@@ -1,10 +1,14 @@
 import { defineNuxtPlugin, useNuxtApp, useRuntimeConfig, useRouter } from "#app";
 import { nextTick } from "vue";
+import { setupComposableRegistry } from "./composables/composable-registry.js";
 import { setupFetchRegistry } from "./composables/fetch-registry.js";
 import { setupProvideInjectRegistry } from "./composables/provide-inject-registry.js";
-import { setupComposableRegistry } from "./composables/composable-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.28",
+    "version": "0.1.31",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "license": "MIT",
     "repository": {
@@ -34,16 +34,18 @@
         "client"
     ],
     "scripts": {
-        "dev": "nuxi dev playground",
-        "docs:dev": "pnpm --dir docs dev",
-        "docs:build": "pnpm --dir docs build",
-        "docs:generate": "pnpm --dir docs generate",
+        "dev": "concurrently -r -n client,nuxt \"pnpm dev:client\" \"nuxi dev playground\"",
+        "dev:client": "vite build --watch --config client/vite.config.ts",
+        "docs:clean": "rm -rf docs/.nuxt docs/.output",
+        "docs:dev": "pnpm docs:clean && pnpm --dir docs dev",
+        "docs:build": "pnpm docs:clean && pnpm --dir docs build",
+        "docs:generate": "pnpm docs:clean && pnpm --dir docs generate",
         "docs:preview": "pnpm --dir docs preview",
         "build:client": "vite build --config client/vite.config.ts",
         "build": "npm run build:client && nuxt-module-build build",
         "prepack": "npm run build",
         "lint": "eslint .",
-        "format": "prettier --write '**/*.{ts,vue,js,json}' --ignore-path .prettierignore && stylelint '**/*.{css,vue}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --fix && eslint --fix '**/*.{ts,vue,js}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**'",
+        "format": "prettier --write '**/*.{ts,vue,js,json}' --ignore-path .prettierignore && stylelint '**/*.{css,vue}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --fix && eslint --fix '**/*.{ts,vue,js}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --ignore-pattern 'docs/dist/**'",
         "typecheck": "vue-tsc --noEmit",
         "test": "vitest run",
         "test:watch": "vitest",
@@ -72,6 +74,7 @@
         "@types/node": "^25.5.0",
         "@vitejs/plugin-vue": "^6.0.0",
         "@vitest/coverage-v8": "^4.1.0",
+        "concurrently": "^9.2.1",
         "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-jsdoc": "^62.5.0",