nuxt-devtools-observatory 0.1.20 → 0.1.23

package/README.md

@@ -14,18 +14,49 @@ Nuxt DevTools extension providing five missing observability features:
 pnpm add nuxt-devtools-observatory
 ```
 
+You can configure all observability features and limits from your consuming project's `nuxt.config.ts` or `.env` file. All options in `.env.example` are supported as either environment variables or as properties under the `observatory` key in your Nuxt config. Options set in `nuxt.config.ts` take precedence over `.env` values.
+
+**Available options:**
+
+- `instrumentServer` (boolean) — Instrument the server for SSR/Nitro fetch and composable tracking (set via `OBSERVATORY_INSTRUMENT_SERVER` or `VITE_OBSERVATORY_INSTRUMENT_SERVER`)
+- `fetchDashboard` (boolean) — Enable useFetch dashboard
+- `provideInjectGraph` (boolean) — Enable provide/inject graph
+- `composableTracker` (boolean) — Enable composable tracker
+- `renderHeatmap` (boolean) — Enable render heatmap
+- `transitionTracker` (boolean) — Enable transition tracker
+- `heatmapThresholdCount` (number) — Highlight components with N+ renders in heatmap
+- `heatmapThresholdTime` (number) — Highlight components with render time above this (ms)
+- `heatmapHideInternals` (boolean) — Hide node_modules and internal components in the render heatmap for a cleaner view
+- `maxFetchEntries` (number) — Max fetch entries to keep in memory
+- `maxPayloadBytes` (number) — Max payload size (bytes) per fetch entry
+- `maxTransitions` (number) — Max transition entries to keep in memory
+- `maxComposableHistory` (number) — Max composable history events per entry
+- `maxComposableEntries` (number) — Max composable entries to keep in memory
+- `maxRenderTimeline` (number) — Max render timeline events per entry
+
+See `.env.example` for all environment variable names.
+
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
     modules: ['nuxt-devtools-observatory'],
 
     observatory: {
-        fetchDashboard: true,
-        provideInjectGraph: true,
-        composableTracker: true,
-        renderHeatmap: true,
-        transitionTracker: true,
-        heatmapThresholdCount: 5, // highlight components with 5+ renders
+        instrumentServer: true, // Instrument the server for SSR/Nitro fetch and composable tracking. Enable this when using SSR so server-side composable calls are captured. Disable for SPA projects to avoid double-registration caused by the transform running on both builds.
+        fetchDashboard: true, // Enable useFetch dashboard
+        provideInjectGraph: true, // Enable provide/inject graph
+        composableTracker: true, // Enable composable tracker
+        renderHeatmap: true, // Enable render heatmap
+        transitionTracker: true, // Enable transition tracker
+        heatmapThresholdCount: 5, // Highlight components with 5+ renders
+        heatmapThresholdTime: 1600, // Highlight components with render time above this (ms)
+        heatmapHideInternals: true, // Hide node_modules and internal components in the render heatmap
+        maxFetchEntries: 200, // Max fetch entries to keep in memory
+        maxPayloadBytes: 10000, // Max payload size (bytes) per fetch entry
+        maxTransitions: 500, // Max transition entries to keep in memory
+        maxComposableHistory: 50, // Max composable history events per entry
+        maxComposableEntries: 300, // Max composable entries to keep in memory
+        maxRenderTimeline: 100, // Max render timeline events per entry
     },
 
     devtools: { enabled: true },

package/client/.env

@@ -13,3 +13,4 @@ VITE_OBSERVATORY_MAX_RENDER_TIMELINE=100
 VITE_OBSERVATORY_HEATMAP_THRESHOLD_COUNT=3
 VITE_OBSERVATORY_HEATMAP_THRESHOLD_TIME=1600
 VITE_OBSERVATORY_HEATMAP_HIDE_INTERNALS=true
+VITE_OBSERVATORY_INSTRUMENT_SERVER=true

package/client/.env.example

@@ -13,3 +13,4 @@ VITE_OBSERVATORY_MAX_RENDER_TIMELINE=100
 VITE_OBSERVATORY_HEATMAP_THRESHOLD_COUNT=3
 VITE_OBSERVATORY_HEATMAP_THRESHOLD_TIME=1600
 VITE_OBSERVATORY_HEATMAP_HIDE_INTERNALS=true
+VITE_OBSERVATORY_INSTRUMENT_SERVER=true

package/dist/module.d.mts

@@ -1,6 +1,14 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
+    /**
+     * Instrument composables, provide/inject, fetch, and transitions on the
+     * server build as well as the client build. Enable this when using SSR so
+     * server-side composable calls are captured. Disable for SPA projects to
+     * avoid double-registration caused by the transform running on both builds.
+     * @default false
+     */
+    instrumentServer?: boolean;
     /**
      * Maximum number of fetch entries to keep in memory
      * @default 200
@@ -56,6 +64,11 @@ interface ModuleOptions {
      * @default true
      */
     transitionTracker?: boolean;
+    /**
+     * Hide node_modules/internal components in the render heatmap
+     * @default false
+     */
+    heatmapHideInternals?: boolean;
     /**
      * Minimum render count / ms threshold to highlight in the heatmap
      * @default 3

package/dist/module.json

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

package/dist/module.mjs

@@ -285,21 +285,42 @@ const traverse = _traverse.default ?? _traverse;
 const generate = _generate.default ?? _generate;
 const COMPOSABLE_RE = /\buse[A-Z]/;
 const SKIP_LIST = /* @__PURE__ */ new Set([
+  // useFetch family — tracked by the fetch dashboard
   "useFetch",
   "useAsyncData",
   "useLazyFetch",
   "useLazyAsyncData",
-  "useState",
-  "useRoute",
-  "useRouter",
+  // Nuxt auto-imports
+  "useCookie",
+  "useRequestEvent",
+  "useRequestHeaders",
+  "useRequestURL",
+  "useResponseHeader",
   "useNuxtApp",
   "useRuntimeConfig",
+  "useRoute",
+  "useRouter",
+  "useNuxtData",
+  "useError",
+  "useState",
+  "useAppConfig",
+  // Nuxt head
   "useHead",
   "useSeoMeta",
   "useServerSeoMeta",
-  "useNuxtData",
-  "useError",
-  "useRequestHeaders"
+  "useHeadSafe",
+  // Nuxt i18n (common plugin)
+  "useI18n",
+  "useLocalePath",
+  "useLocaleRoute",
+  // Vue built-ins
+  "useSlots",
+  "useAttrs",
+  "useModel",
+  "useTemplateRef",
+  "useId",
+  "useCssModule",
+  "useCssVars"
 ]);
 function composableTrackerPlugin() {
   return {
@@ -345,6 +366,14 @@ function composableTrackerPlugin() {
             if (SKIP_LIST.has(name)) {
               return;
             }
+            const binding = path.scope.getBinding(name);
+            if (binding?.path.isImportSpecifier() || binding?.path.isImportDefaultSpecifier()) {
+              const importDecl = binding.path.parentPath?.node;
+              const source = importDecl?.source?.value ?? "";
+              if (source && !source.startsWith(".") && !source.startsWith("/")) {
+                return;
+              }
+            }
             let parent = path.parentPath;
             let isWrapped = false;
             while (parent) {
@@ -514,27 +543,30 @@ function transitionTrackerPlugin() {
   };
 }
 
+const defaults = {
+  instrumentServer: process.env.OBSERVATORY_INSTRUMENT_SERVER === "true",
+  fetchDashboard: process.env.OBSERVATORY_FETCH_DASHBOARD === "true",
+  provideInjectGraph: process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH === "true",
+  composableTracker: process.env.OBSERVATORY_COMPOSABLE_TRACKER === "true",
+  renderHeatmap: process.env.OBSERVATORY_RENDER_HEATMAP === "true",
+  transitionTracker: process.env.OBSERVATORY_TRANSITION_TRACKER === "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,
+  maxPayloadBytes: process.env.OBSERVATORY_MAX_PAYLOAD_BYTES ? Number(process.env.OBSERVATORY_MAX_PAYLOAD_BYTES) : 1e4,
+  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,
+  maxRenderTimeline: process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100,
+  heatmapHideInternals: process.env.OBSERVATORY_HEATMAP_HIDE_INTERNALS === "true"
+};
 const module$1 = defineNuxtModule({
   meta: {
     name: "nuxt-devtools-observatory",
     configKey: "observatory",
     compatibility: { nuxt: "^3.0.0 || ^4.0.0" }
   },
-  defaults: {
-    fetchDashboard: true,
-    provideInjectGraph: true,
-    composableTracker: true,
-    renderHeatmap: true,
-    transitionTracker: 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,
-    maxPayloadBytes: process.env.OBSERVATORY_MAX_PAYLOAD_BYTES ? Number(process.env.OBSERVATORY_MAX_PAYLOAD_BYTES) : 1e4,
-    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,
-    maxRenderTimeline: process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100
-  },
+  defaults,
   setup(options, nuxt) {
     if (!nuxt.options.dev) {
       return;
@@ -544,11 +576,16 @@ const module$1 = defineNuxtModule({
     }
     const resolver = createResolver(import.meta.url);
     const resolved = {
+      ...defaults,
+      ...options,
+      // Allow runtime overrides via env
+      heatmapHideInternals: typeof process.env.OBSERVATORY_HEATMAP_HIDE_INTERNALS !== "undefined" ? process.env.OBSERVATORY_HEATMAP_HIDE_INTERNALS === "true" : typeof options.heatmapHideInternals !== "undefined" ? options.heatmapHideInternals : defaults.heatmapHideInternals,
       fetchDashboard: options.fetchDashboard ?? (process.env.OBSERVATORY_FETCH_DASHBOARD ? process.env.OBSERVATORY_FETCH_DASHBOARD === "true" : true),
       provideInjectGraph: options.provideInjectGraph ?? (process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH ? process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH === "true" : true),
       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),
+      instrumentServer: options.instrumentServer ?? (process.env.OBSERVATORY_INSTRUMENT_SERVER ? process.env.OBSERVATORY_INSTRUMENT_SERVER === "true" : 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),
       maxFetchEntries: options.maxFetchEntries ?? (process.env.OBSERVATORY_MAX_FETCH_ENTRIES ? Number(process.env.OBSERVATORY_MAX_FETCH_ENTRIES) : 200),
@@ -568,17 +605,18 @@ const module$1 = defineNuxtModule({
       aliases["nuxt-devtools-observatory/runtime/fetch-registry"] = resolver.resolve("./runtime/composables/fetch-registry");
       config.resolve = { ...config.resolve, alias: aliases };
     });
+    const vitePluginScope = resolved.instrumentServer ? { server: true, client: true } : { server: false, client: true };
     if (resolved.fetchDashboard) {
-      addVitePlugin(fetchInstrumentPlugin());
+      addVitePlugin(fetchInstrumentPlugin(), vitePluginScope);
     }
     if (resolved.provideInjectGraph) {
-      addVitePlugin(provideInjectPlugin());
+      addVitePlugin(provideInjectPlugin(), vitePluginScope);
     }
     if (resolved.composableTracker) {
-      addVitePlugin(composableTrackerPlugin());
+      addVitePlugin(composableTrackerPlugin(), vitePluginScope);
     }
     if (resolved.transitionTracker) {
-      addVitePlugin(transitionTrackerPlugin());
+      addVitePlugin(transitionTrackerPlugin(), vitePluginScope);
     }
     if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.renderHeatmap || resolved.transitionTracker) {
       addPlugin(resolver.resolve("./runtime/plugin"));
@@ -632,8 +670,7 @@ ${configScript}`);
       }
     });
     nuxt.options.runtimeConfig.public.observatory = {
-      heatmapThresholdCount: resolved.heatmapThresholdCount,
-      heatmapThresholdTime: resolved.heatmapThresholdTime,
+      instrumentServer: resolved.instrumentServer,
       clientOrigin,
       fetchDashboard: resolved.fetchDashboard,
       provideInjectGraph: resolved.provideInjectGraph,
@@ -645,7 +682,10 @@ ${configScript}`);
       maxTransitions: resolved.maxTransitions,
       maxComposableHistory: resolved.maxComposableHistory,
       maxComposableEntries: resolved.maxComposableEntries,
-      maxRenderTimeline: resolved.maxRenderTimeline
+      maxRenderTimeline: resolved.maxRenderTimeline,
+      heatmapHideInternals: resolved.heatmapHideInternals,
+      heatmapThresholdCount: resolved.heatmapThresholdCount,
+      heatmapThresholdTime: resolved.heatmapThresholdTime
     };
   }
 });

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

@@ -298,7 +298,7 @@ export function __trackComposable(name, callFn, meta) {
     return callFn();
   }
   const instance = getCurrentInstance();
-  const id = `${name}::${instance?.uid ?? "global"}::${meta.file}:${meta.line}::${Date.now()}::${Math.random().toString(36).slice(2, 7)}`;
+  const id = instance ? `${name}::${instance.uid}::${meta.file}:${meta.line}::${Date.now()}::${Math.random().toString(36).slice(2, 7)}` : `${name}::global::${meta.file}:${meta.line}`;
   const trackedIntervals = [];
   const clearedIntervals = /* @__PURE__ */ new Set();
   const alreadyPatched = !!window.setInterval.__obs;
@@ -373,7 +373,17 @@ export function __trackComposable(name, callFn, meta) {
     line: meta.line,
     route: registry.getRoute()
   };
-  registry.register(entry);
+  if (!instance && registry.getAll().some((e) => e.id === id)) {
+    registry.update(id, {
+      status: "mounted",
+      refs,
+      watcherCount: trackedWatchers.length,
+      intervalCount: trackedIntervals.length,
+      route: registry.getRoute()
+    });
+  } else {
+    registry.register(entry);
+  }
   if (instance) {
     registry.registerLiveRefs(id, liveRefMap);
     registry.registerRawRefs(id, rawRefMap);

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

@@ -1,11 +1,12 @@
+import { useRuntimeConfig } from "#app";
 export function setupRenderRegistry(nuxtApp, options = {}) {
   const entries = /* @__PURE__ */ new Map();
   const pendingTriggeredRenders = /* @__PURE__ */ new Set();
   const renderStartTimes = /* @__PURE__ */ new Map();
   let currentRoute = "/";
-  const hasEnv = typeof import.meta.env !== "undefined" && import.meta.env !== void 0;
-  const MAX_TIMELINE = hasEnv && import.meta.env?.VITE_OBSERVATORY_MAX_RENDER_TIMELINE ? Number(import.meta.env.VITE_OBSERVATORY_MAX_RENDER_TIMELINE) : 100;
-  const HIDE_INTERNALS = hasEnv && import.meta.env?.VITE_OBSERVATORY_HEATMAP_HIDE_INTERNALS !== void 0 ? import.meta.env.VITE_OBSERVATORY_HEATMAP_HIDE_INTERNALS === "true" : false;
+  const config = useRuntimeConfig().public.observatory;
+  const MAX_TIMELINE = config.maxRenderTimeline ?? 100;
+  const HIDE_INTERNALS = config.heatmapHideInternals ?? false;
   let dirty = true;
   let cachedSnapshot = "[]";
   function markDirty() {

package/package.json

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