@presto1314w/vite-devtools-browser 0.3.2 → 0.3.3

package/README.md

@@ -271,13 +271,15 @@ vite-browser eval <script>
 
 ## Current Boundaries
 
-`v0.3.2` is strong at:
+`v0.3.3` is strong at:
 - surfacing runtime state as structured shell output
 - linking current errors to recent HMR and module activity
 - detecting common HMR failure patterns with confidence levels
 - narrowing likely store/module -> render paths in Vue-first flows
 - capturing browser-side runtime errors even when the Vite overlay is absent
-- turning sparse live Vue/Pinia repro signals into actionable `store -> render -> error` guidance more reliably
+- correlating sparse HMR traces back to the right source module more reliably
+- retaining `changedKeys` and source-module hints when one side of the event stream is incomplete
+- clearing stale runtime errors after recovery so the current page lifecycle is easier to trust
 
 `correlate renders` and `diagnose propagation` are **high-confidence propagation clues**, not strict causal proof. They do not reliably trace deep chains like `store -> component A -> component B -> error` across arbitrary graphs, and intentionally fall back to conservative output when evidence is incomplete.
 

package/dist/browser.d.ts

@@ -7,6 +7,17 @@ export { formatHmrTrace, formatModuleGraphSnapshot, formatModuleGraphTrace, form
 export type ModuleGraphMode = "snapshot" | "trace" | "clear";
 export declare function setEventQueue(queue: EventQueue): void;
 export declare function getEventQueue(): EventQueue | null;
+export declare function getTrackedHmrEvents(windowMs?: number): Array<{
+    timestamp: number;
+    type: "hmr-update" | "hmr-error";
+    payload: {
+        path?: string;
+        message?: string;
+        updates?: Array<{
+            path?: string;
+        }>;
+    };
+}>;
 export declare function getCurrentPage(): Page | null;
 /**
  * Flush browser events into daemon event queue

package/dist/browser.js

@@ -19,6 +19,20 @@ export function setEventQueue(queue) {
 export function getEventQueue() {
     return eventQueue;
 }
+export function getTrackedHmrEvents(windowMs = 5000) {
+    const cutoff = Date.now() - windowMs;
+    return session.hmrEvents
+        .filter((event) => event.timestamp >= cutoff)
+        .map((event) => ({
+        timestamp: event.timestamp,
+        type: event.type === "error" ? "hmr-error" : "hmr-update",
+        payload: {
+            path: event.path,
+            message: event.message,
+            updates: event.path ? [{ path: event.path }] : [],
+        },
+    }));
+}
 export function getCurrentPage() {
     return getSessionPage(session);
 }
@@ -150,7 +164,7 @@ export async function goto(url) {
 }
 export async function back() {
     const currentPage = await ensurePage();
-    await currentPage.goBack({ waitUntil: "domcontentloaded" });
+    await navigateAndRefreshContext(currentPage, () => currentPage.goBack({ waitUntil: "domcontentloaded" }));
 }
 export async function reload() {
     const currentPage = await ensurePage();
@@ -317,8 +331,12 @@ function requireCurrentPage() {
 }
 async function navigateAndRefreshContext(currentPage, navigate, refreshFramework = false) {
     await navigate();
+    clearRuntimeErrors();
     await injectEventCollector(currentPage);
     if (refreshFramework) {
         await detectFramework();
     }
 }
+function clearRuntimeErrors() {
+    session.runtimeErrors.length = 0;
+}

package/dist/daemon.js

@@ -6,6 +6,7 @@ import * as browser from "./browser.js";
 import { correlateErrorWithHMR, formatErrorCorrelationReport } from "./correlate.js";
 import { diagnoseHMR, formatDiagnosisReport } from "./diagnose.js";
 import { diagnosePropagation, formatPropagationDiagnosisReport } from "./diagnose-propagation.js";
+import { extractModules } from "./event-analysis.js";
 import { socketDir, socketPath, pidFile } from "./paths.js";
 import { correlateRenderPropagation, formatPropagationTraceReport } from "./trace.js";
 import { EventQueue } from "./event-queue.js";
@@ -100,12 +101,20 @@ export function createRunner(api = browser) {
         if (cmd.action === "correlate-errors") {
             const errorText = String(await api.errors(Boolean(cmd.mapped), Boolean(cmd.inlineSource)));
             const events = queue ? queue.window(cmd.windowMs ?? 5000) : [];
-            const data = formatErrorCorrelationReport(errorText, errorText === "no errors" ? null : correlateErrorWithHMR(errorText, events, cmd.windowMs ?? 5000));
+            const fallbackHmrEvents = readTrackedHmrEvents(api, cmd.windowMs ?? 5000);
+            const hmrTraceText = String(await api.viteHMRTrace("trace", 20));
+            const fallbackModules = extractModules(hmrTraceText);
+            const baseCorrelation = errorText === "no errors"
+                ? null
+                : correlateErrorWithHMR(errorText, [...events, ...fallbackHmrEvents], cmd.windowMs ?? 5000);
+            const data = formatErrorCorrelationReport(errorText, errorText === "no errors"
+                ? null
+                : upgradeErrorCorrelation(baseCorrelation, fallbackModules, cmd.windowMs ?? 5000));
             return { ok: true, data };
         }
         if (cmd.action === "correlate-renders") {
             const events = await getSettledEventWindow(api, queue, cmd.windowMs ?? 5000);
-            const data = formatPropagationTraceReport(await buildPropagationTrace(api, events));
+            const data = formatPropagationTraceReport(await buildPropagationTrace(api, events, cmd.windowMs ?? 5000));
             return { ok: true, data };
         }
         if (cmd.action === "diagnose-hmr") {
@@ -119,7 +128,7 @@ export function createRunner(api = browser) {
         }
         if (cmd.action === "diagnose-propagation") {
             const events = await getSettledEventWindow(api, queue, cmd.windowMs ?? 5000);
-            const data = formatPropagationDiagnosisReport(diagnosePropagation(await buildPropagationTrace(api, events)));
+            const data = formatPropagationDiagnosisReport(diagnosePropagation(await buildPropagationTrace(api, events, cmd.windowMs ?? 5000)));
             return { ok: true, data };
         }
         if (cmd.action === "logs") {
@@ -146,20 +155,89 @@ export function createRunner(api = browser) {
         return { ok: false, error: `unknown action: ${cmd.action}` };
     };
 }
-async function buildPropagationTrace(api, events) {
-    const trace = correlateRenderPropagation(events);
+async function buildPropagationTrace(api, events, windowMs) {
+    const hmrTraceText = String(await api.viteHMRTrace("trace", 20));
+    const fallbackModules = extractModules(hmrTraceText);
+    const trace = correlateRenderPropagation([...events, ...readTrackedHmrEvents(api, windowMs)]);
     if (!trace)
         return null;
-    if (trace.errorMessages.length > 0)
-        return trace;
+    let augmented = trace;
+    if (augmented.sourceModules.length === 0 && fallbackModules.length > 0) {
+        augmented = {
+            ...augmented,
+            sourceModules: fallbackModules,
+        };
+    }
+    if (augmented.changedKeys.length === 0 && augmented.storeUpdates.length > 0) {
+        const inferredChangedKeys = await inferLikelyChangedKeys(api, augmented.storeUpdates[0]);
+        if (inferredChangedKeys.length > 0) {
+            augmented = {
+                ...augmented,
+                changedKeys: inferredChangedKeys,
+            };
+        }
+    }
+    if (augmented.errorMessages.length > 0)
+        return augmented;
     const currentError = String(await api.errors(false, false));
     if (!currentError || currentError === "no errors")
-        return trace;
+        return augmented;
+    return {
+        ...augmented,
+        errorMessages: [currentError, ...augmented.errorMessages],
+    };
+}
+function upgradeErrorCorrelation(correlation, fallbackModules, windowMs) {
+    if (fallbackModules.length === 0)
+        return correlation;
+    if (!correlation)
+        return synthesizeErrorCorrelation(fallbackModules, windowMs);
+    if (correlation.matchingModules.length > 0)
+        return correlation;
+    return synthesizeErrorCorrelation(fallbackModules, windowMs, correlation.relatedEvents);
+}
+function synthesizeErrorCorrelation(modules, windowMs, relatedEvents = []) {
+    if (modules.length === 0)
+        return null;
     return {
-        ...trace,
-        errorMessages: [currentError, ...trace.errorMessages],
+        summary: `HMR update observed within ${windowMs}ms of the current error`,
+        detail: `Matching modules: ${modules.join(", ")}\nRecent events considered: ${modules.length}`,
+        confidence: "high",
+        windowMs,
+        matchingModules: modules,
+        relatedEvents: relatedEvents.length > 0
+            ? relatedEvents
+            : modules.map((module) => ({
+                timestamp: Date.now(),
+                type: "hmr-update",
+                payload: {
+                    path: module,
+                    updates: [{ path: module }],
+                },
+            })),
     };
 }
+async function inferLikelyChangedKeys(api, storeName) {
+    try {
+        const raw = await api.evaluate(`(() => {
+        const store = window.__PINIA__?._s?.get(${JSON.stringify(storeName)});
+        if (!store) return [];
+        return Object.keys(store).filter((key) => store[key] === undefined);
+      })()`);
+        const parsed = JSON.parse(String(raw));
+        return Array.isArray(parsed) ? parsed.filter((value) => typeof value === "string" && value.length > 0) : [];
+    }
+    catch {
+        return [];
+    }
+}
+function readTrackedHmrEvents(api, windowMs) {
+    const reader = api.getTrackedHmrEvents;
+    if (typeof reader !== "function")
+        return [];
+    const events = reader(windowMs);
+    return Array.isArray(events) ? events : [];
+}
 async function flushCurrentPageEvents(api, queue) {
     if (!queue)
         return;

package/dist/trace.js

@@ -21,11 +21,12 @@ export function correlateRenderPropagation(events) {
         : storeHints.length === 1
             ? storeHints
             : [];
-    const changedKeys = uniqueStrings(storeEvents.length > 0
-        ? storeEvents.flatMap((event) => getChangedKeys(event.payload))
-        : renderEvents
+    const changedKeys = uniqueStrings([
+        ...storeEvents.flatMap((event) => getChangedKeys(event.payload)),
+        ...renderEvents
             .filter((event) => getRenderReason(event.payload) === "store-update")
-            .flatMap((event) => getRenderChangedKeys(event.payload)));
+            .flatMap((event) => getRenderChangedKeys(event.payload)),
+    ]);
     const renderComponents = uniqueStrings(renderEvents.map((event) => getRenderLabel(event.payload)).filter(Boolean));
     const networkUrls = uniqueStrings(networkEvents.map((event) => getNetworkUrl(event.payload)).filter((value) => value != null));
     const errorMessages = uniqueStrings(errorEvents.map((event) => getErrorMessage(event.payload)).filter((value) => value != null));

package/package.json

@@ -1,65 +1,63 @@
-{
-  "name": "@presto1314w/vite-devtools-browser",
-  "version": "0.3.2",
-  "description": "Runtime diagnostics CLI for Vite apps with event-stream correlation, HMR diagnosis, framework inspection, and mapped errors",
-  "license": "MIT",
-  "keywords": [
-    "vite",
-    "devtools",
-    "debugging",
-    "runtime-diagnostics",
-    "hmr",
-    "module-graph",
-    "sourcemap",
-    "vue",
-    "react",
-    "svelte",
-    "cli",
-    "ai-agents"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/MapleCity1314/vite-browser.git"
-  },
-  "homepage": "https://github.com/MapleCity1314/vite-browser#readme",
-  "bugs": {
-    "url": "https://github.com/MapleCity1314/vite-browser/issues"
-  },
-  "type": "module",
-  "engines": {
-    "node": ">=20"
-  },
-  "files": [
-    "dist"
-  ],
-  "bin": {
-    "vite-browser": "dist/cli.js"
-  },
-  "scripts": {
-    "start": "node --import tsx src/cli.ts",
-    "dev": "tsx src/cli.ts",
-    "typecheck": "tsc --noEmit",
-    "build": "tsc -p tsconfig.build.json",
-    "prepack": "pnpm build",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "test:evals": "vitest run --dir test/evals",
-    "test:evals:ci": "vitest run --dir test/evals --coverage --reporter=default",
-    "test:evals:e2e": "pnpm build && vitest run --config vitest.e2e.config.ts"
-  },
-  "dependencies": {
-    "playwright": "^1.50.0",
-    "source-map-js": "^1.2.1"
-  },
-  "devDependencies": {
-    "@types/node": "^22.0.0",
-    "@vitest/coverage-v8": "^4.0.18",
-    "@vue/devtools-kit": "^7.3.2",
-    "@vue/devtools-api": "^7.3.2",
-    "tsx": "^4.20.6",
-    "typescript": "^5.7.0",
-    "vitest": "^4.0.16"
-  },
-  "packageManager": "pnpm@10.29.2"
-}
+{
+  "name": "@presto1314w/vite-devtools-browser",
+  "version": "0.3.3",
+  "description": "Runtime diagnostics CLI for Vite apps with event-stream correlation, HMR diagnosis, framework inspection, and mapped errors",
+  "license": "MIT",
+  "keywords": [
+    "vite",
+    "devtools",
+    "debugging",
+    "runtime-diagnostics",
+    "hmr",
+    "module-graph",
+    "sourcemap",
+    "vue",
+    "react",
+    "svelte",
+    "cli",
+    "ai-agents"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MapleCity1314/vite-browser.git"
+  },
+  "homepage": "https://github.com/MapleCity1314/vite-browser#readme",
+  "bugs": {
+    "url": "https://github.com/MapleCity1314/vite-browser/issues"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=20"
+  },
+  "files": [
+    "dist"
+  ],
+  "bin": {
+    "vite-browser": "dist/cli.js"
+  },
+  "dependencies": {
+    "playwright": "^1.50.0",
+    "source-map-js": "^1.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vue/devtools-kit": "^7.3.2",
+    "@vue/devtools-api": "^7.3.2",
+    "tsx": "^4.20.6",
+    "typescript": "^5.7.0",
+    "vitest": "^4.0.16"
+  },
+  "scripts": {
+    "start": "node --import tsx src/cli.ts",
+    "dev": "tsx src/cli.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:evals": "vitest run --dir test/evals",
+    "test:evals:ci": "vitest run --dir test/evals --coverage --reporter=default",
+    "test:evals:e2e": "pnpm build && vitest run --config vitest.e2e.config.ts"
+  }
+}