@presto1314w/vite-devtools-browser 0.3.1 → 0.3.2

package/README.md

@@ -271,12 +271,13 @@ vite-browser eval <script>
 
 ## Current Boundaries
 
-`v0.3.1` is strong at:
+`v0.3.2` 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
 
 `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-collector.js

@@ -1,13 +1,15 @@
 export function initBrowserEventCollector() {
-    if (window.__vb_events)
-        return;
-    window.__vb_events = [];
-    window.__vb_push = (event) => {
-        const q = window.__vb_events;
-        q.push(event);
-        if (q.length > 1000)
-            q.shift();
-    };
+    if (!window.__vb_events) {
+        window.__vb_events = [];
+    }
+    if (!window.__vb_push) {
+        window.__vb_push = (event) => {
+            const q = window.__vb_events;
+            q.push(event);
+            if (q.length > 1000)
+                q.shift();
+        };
+    }
     const inferFramework = () => {
         if (window.__VUE__ || window.__VUE_DEVTOOLS_GLOBAL_HOOK__)
             return "vue";
@@ -117,15 +119,16 @@ export function initBrowserEventCollector() {
         }, 60);
     };
     const attachPiniaSubscriptions = () => {
-        if (window.__vb_pinia_attached)
-            return;
         const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
         const app = Array.isArray(hook?.apps) ? hook.apps[0] : null;
         const pinia = window.__PINIA__ || window.pinia || app?.config?.globalProperties?.$pinia;
         const registry = pinia?._s;
         if (!(registry instanceof Map) || registry.size === 0)
             return;
-        const attached = (window.__vb_pinia_attached = new Set());
+        const attached = window.__vb_pinia_attached ||
+            (window.__vb_pinia_attached = new Set());
+        const actionAttached = window.__vb_pinia_action_attached ||
+            (window.__vb_pinia_action_attached = new Set());
         registry.forEach((store, storeId) => {
             if (!store || typeof store.$subscribe !== "function" || attached.has(String(storeId)))
                 return;
@@ -161,10 +164,33 @@ export function initBrowserEventCollector() {
                     },
                 });
                 scheduleRender("store-update", { changedKeys });
-            }, { detached: true });
+            }, 
+            // Flush synchronously so the store event is recorded before a render-time failure
+            // can short-circuit the rest of Vue's update cycle.
+            { detached: true, flush: "sync" });
+            if (typeof store.$onAction === "function" && !actionAttached.has(String(storeId))) {
+                actionAttached.add(String(storeId));
+                store.$onAction(({ name, after }) => {
+                    after(() => {
+                        window.__vb_push({
+                            timestamp: Date.now(),
+                            type: "store-update",
+                            payload: {
+                                store: String(storeId),
+                                mutationType: typeof name === "string" && name.length > 0 ? `action:${name}` : "action",
+                                events: 0,
+                                changedKeys: [],
+                            },
+                        });
+                        scheduleRender("store-update");
+                    });
+                }, true);
+            }
         });
     };
     function attachViteListener() {
+        if (window.__vb_vite_listener_attached)
+            return true;
         const hot = window.__vite_hot;
         if (hot?.ws) {
             hot.ws.addEventListener("message", (e) => {
@@ -181,6 +207,7 @@ export function initBrowserEventCollector() {
                 }
                 catch { }
             });
+            window.__vb_vite_listener_attached = true;
             return true;
         }
         return false;
@@ -194,22 +221,28 @@ export function initBrowserEventCollector() {
             }
         }, 100);
     }
-    const origOnError = window.onerror;
-    window.onerror = (msg, src, line, col, err) => {
-        window.__vb_push({
-            timestamp: Date.now(),
-            type: "error",
-            payload: { message: String(msg), source: src, line, col, stack: err?.stack },
-        });
-        return origOnError ? origOnError(msg, src, line, col, err) : false;
-    };
-    window.addEventListener("unhandledrejection", (e) => {
-        window.__vb_push({
-            timestamp: Date.now(),
-            type: "error",
-            payload: { message: e.reason?.message, stack: e.reason?.stack },
+    if (!window.__vb_onerror_attached) {
+        const origOnError = window.onerror;
+        window.onerror = (msg, src, line, col, err) => {
+            window.__vb_push({
+                timestamp: Date.now(),
+                type: "error",
+                payload: { message: String(msg), source: src, line, col, stack: err?.stack },
+            });
+            return origOnError ? origOnError(msg, src, line, col, err) : false;
+        };
+        window.__vb_onerror_attached = true;
+    }
+    if (!window.__vb_unhandledrejection_attached) {
+        window.addEventListener("unhandledrejection", (e) => {
+            window.__vb_push({
+                timestamp: Date.now(),
+                type: "error",
+                payload: { message: e.reason?.message, stack: e.reason?.stack },
+            });
         });
-    });
+        window.__vb_unhandledrejection_attached = true;
+    }
     const observeDom = () => {
         const root = document.body || document.documentElement;
         if (!root || window.__vb_render_observer)
@@ -246,7 +279,9 @@ export function initBrowserEventCollector() {
     observeDom();
     patchHistory();
     attachPiniaSubscriptions();
-    window.setInterval(attachPiniaSubscriptions, 1000);
+    if (!window.__vb_pinia_retry_timer) {
+        window.__vb_pinia_retry_timer = window.setInterval(attachPiniaSubscriptions, 250);
+    }
     scheduleRender("initial-load");
 }
 export function readBrowserEvents() {

package/dist/browser.js

@@ -36,6 +36,7 @@ async function injectEventCollector(currentPage) {
  * Flush browser events into daemon event queue
  */
 export async function flushBrowserEvents(currentPage, queue) {
+    await currentPage.evaluate(initBrowserEventCollector);
     const raw = await currentPage.evaluate(readBrowserEvents);
     for (const e of raw) {
         queue.push(e);
@@ -275,6 +276,7 @@ export async function screenshot() {
 }
 export async function evaluate(script) {
     const currentPage = requireCurrentPage();
+    await currentPage.evaluate(initBrowserEventCollector);
     const result = await currentPage.evaluate(script);
     return JSON.stringify(result, null, 2);
 }

package/dist/cli.js

@@ -1,6 +1,16 @@
 #!/usr/bin/env node
 import { readFileSync } from "node:fs";
+import { realpathSync } from "node:fs";
+import { resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { send } from "./client.js";
+class CliExit extends Error {
+    code;
+    constructor(code) {
+        super(`CLI_EXIT:${code}`);
+        this.code = code;
+    }
+}
 export function normalizeUrl(value) {
     if (value.includes("://"))
         return value;
@@ -255,16 +265,36 @@ OPTIONS
 `;
 }
 function isEntrypoint(argv1) {
-    return Boolean(argv1 && import.meta.url.endsWith(argv1.replaceAll("\\", "/")));
+    if (!argv1)
+        return false;
+    try {
+        const current = realpathSync(fileURLToPath(import.meta.url));
+        const target = realpathSync(resolve(argv1));
+        return current === target;
+    }
+    catch {
+        return Boolean(argv1 && import.meta.url.endsWith(argv1.replaceAll("\\", "/")));
+    }
 }
 async function main() {
-    await runCli(process.argv, {
-        send,
-        readFile: readFileSync,
-        stdout: (text) => console.log(text),
-        stderr: (text) => console.error(text),
-        exit: (code) => process.exit(code),
-    });
+    try {
+        await runCli(process.argv, {
+            send,
+            readFile: readFileSync,
+            stdout: (text) => process.stdout.write(`${text}\n`),
+            stderr: (text) => process.stderr.write(`${text}\n`),
+            exit: ((code) => {
+                throw new CliExit(code);
+            }),
+        });
+    }
+    catch (error) {
+        if (error instanceof CliExit) {
+            process.exitCode = error.code;
+            return;
+        }
+        throw error;
+    }
 }
 if (isEntrypoint(process.argv[1])) {
     void main().catch((error) => {

package/dist/daemon.js

@@ -1,5 +1,6 @@
 import { createServer } from "node:net";
 import { mkdirSync, writeFileSync, rmSync } from "node:fs";
+import { setTimeout as sleep } from "node:timers/promises";
 import { fileURLToPath } from "node:url";
 import * as browser from "./browser.js";
 import { correlateErrorWithHMR, formatErrorCorrelationReport } from "./correlate.js";
@@ -18,19 +19,8 @@ export function cleanError(err) {
 }
 export function createRunner(api = browser) {
     return async function run(cmd) {
-        // Flush browser events to daemon queue before processing command
         const queue = api.getEventQueue();
-        if (queue) {
-            try {
-                const currentPage = api.getCurrentPage();
-                if (currentPage) {
-                    await api.flushBrowserEvents(currentPage, queue);
-                }
-            }
-            catch {
-                // Ignore flush errors (page might not be open yet)
-            }
-        }
+        await flushCurrentPageEvents(api, queue);
         // Browser control
         if (cmd.action === "open") {
             await api.open(cmd.url);
@@ -114,8 +104,8 @@ export function createRunner(api = browser) {
             return { ok: true, data };
         }
         if (cmd.action === "correlate-renders") {
-            const events = queue ? queue.window(cmd.windowMs ?? 5000) : [];
-            const data = formatPropagationTraceReport(correlateRenderPropagation(events));
+            const events = await getSettledEventWindow(api, queue, cmd.windowMs ?? 5000);
+            const data = formatPropagationTraceReport(await buildPropagationTrace(api, events));
             return { ok: true, data };
         }
         if (cmd.action === "diagnose-hmr") {
@@ -128,8 +118,8 @@ export function createRunner(api = browser) {
             return { ok: true, data };
         }
         if (cmd.action === "diagnose-propagation") {
-            const events = queue ? queue.window(cmd.windowMs ?? 5000) : [];
-            const data = formatPropagationDiagnosisReport(diagnosePropagation(correlateRenderPropagation(events)));
+            const events = await getSettledEventWindow(api, queue, cmd.windowMs ?? 5000);
+            const data = formatPropagationDiagnosisReport(diagnosePropagation(await buildPropagationTrace(api, events)));
             return { ok: true, data };
         }
         if (cmd.action === "logs") {
@@ -143,6 +133,10 @@ export function createRunner(api = browser) {
         }
         if (cmd.action === "eval") {
             const data = await api.evaluate(cmd.script);
+            await settleCurrentPage(api, 120);
+            await flushCurrentPageEvents(api, queue);
+            await settleCurrentPage(api, 180);
+            await flushCurrentPageEvents(api, queue);
             return { ok: true, data };
         }
         if (cmd.action === "network") {
@@ -152,6 +146,64 @@ export function createRunner(api = browser) {
         return { ok: false, error: `unknown action: ${cmd.action}` };
     };
 }
+async function buildPropagationTrace(api, events) {
+    const trace = correlateRenderPropagation(events);
+    if (!trace)
+        return null;
+    if (trace.errorMessages.length > 0)
+        return trace;
+    const currentError = String(await api.errors(false, false));
+    if (!currentError || currentError === "no errors")
+        return trace;
+    return {
+        ...trace,
+        errorMessages: [currentError, ...trace.errorMessages],
+    };
+}
+async function flushCurrentPageEvents(api, queue) {
+    if (!queue)
+        return;
+    try {
+        const currentPage = api.getCurrentPage();
+        if (currentPage) {
+            await api.flushBrowserEvents(currentPage, queue);
+        }
+    }
+    catch {
+        // Ignore flush errors (page might not be open yet)
+    }
+}
+async function getSettledEventWindow(api, queue, windowMs) {
+    if (!queue)
+        return [];
+    let events = queue.window(windowMs);
+    if (hasPropagationSignals(events))
+        return events;
+    for (const delayMs of [120, 300]) {
+        await settleCurrentPage(api, delayMs);
+        await flushCurrentPageEvents(api, queue);
+        events = queue.window(windowMs);
+        if (hasPropagationSignals(events))
+            return events;
+    }
+    return events;
+}
+function hasPropagationSignals(events) {
+    return events.some((event) => event.type === "render" || event.type === "store-update");
+}
+async function settleCurrentPage(api, delayMs) {
+    const currentPage = api.getCurrentPage();
+    if (!currentPage) {
+        await sleep(delayMs);
+        return;
+    }
+    try {
+        await currentPage.waitForTimeout(delayMs);
+    }
+    catch {
+        await sleep(delayMs);
+    }
+}
 export async function dispatchLine(line, socket, run = createRunner(), onClose) {
     let cmd;
     try {

package/dist/event-analysis.d.ts

@@ -27,6 +27,8 @@ export declare function getRenderLabel(payload: RenderEventPayload): string;
 export declare function getStoreName(payload: StoreUpdatePayload): string | null;
 export declare function getChangedKeys(payload: StoreUpdatePayload): string[];
 export declare function getStoreHints(payload: RenderEventPayload): string[];
+export declare function getRenderReason(payload: RenderEventPayload): string | null;
+export declare function getRenderChangedKeys(payload: RenderEventPayload): string[];
 export declare function getNetworkUrl(payload: NetworkEventPayload): string | null;
 export declare function getErrorMessage(payload: ErrorEventPayload): string | null;
 export declare function uniqueStrings(values: string[]): string[];

package/dist/event-analysis.js

@@ -59,6 +59,12 @@ export function getChangedKeys(payload) {
 export function getStoreHints(payload) {
     return payload.storeHints.filter((value) => value.length > 0);
 }
+export function getRenderReason(payload) {
+    return typeof payload.reason === "string" && payload.reason.length > 0 ? payload.reason : null;
+}
+export function getRenderChangedKeys(payload) {
+    return payload.changedKeys.filter((value) => value.length > 0);
+}
 export function getNetworkUrl(payload) {
     return payload.url.length > 0 ? payload.url : null;
 }

package/dist/trace.js

@@ -1,4 +1,4 @@
-import { extractModulesFromHmrEvent, getChangedKeys, getErrorEvents, getErrorMessage, getHmrEvents, getNetworkEvents, getNetworkUrl, getRenderEvents, getRenderLabel, getStoreHints, getStoreName, getStoreUpdateEvents, sortEventsChronologically, uniqueStrings, } from "./event-analysis.js";
+import { extractModulesFromHmrEvent, getChangedKeys, getErrorEvents, getErrorMessage, getHmrEvents, getNetworkEvents, getNetworkUrl, getRenderChangedKeys, getRenderEvents, getRenderLabel, getRenderReason, getStoreHints, getStoreName, getStoreUpdateEvents, sortEventsChronologically, uniqueStrings, } from "./event-analysis.js";
 export function correlateRenderPropagation(events) {
     const recent = sortEventsChronologically(events);
     const renderEvents = getRenderEvents(recent);
@@ -9,10 +9,24 @@ export function correlateRenderPropagation(events) {
     const networkEvents = getNetworkEvents(recent);
     const errorEvents = getErrorEvents(recent);
     const sourceModules = uniqueStrings(hmrEvents.flatMap(extractModulesFromHmrEvent));
-    const storeUpdates = uniqueStrings(storeEvents.map((event) => getStoreName(event.payload)).filter((value) => value != null));
-    const changedKeys = uniqueStrings(storeEvents.flatMap((event) => getChangedKeys(event.payload)));
-    const renderComponents = uniqueStrings(renderEvents.map((event) => getRenderLabel(event.payload)).filter(Boolean));
+    const explicitStoreUpdates = uniqueStrings(storeEvents.map((event) => getStoreName(event.payload)).filter((value) => value != null));
     const storeHints = uniqueStrings(renderEvents.flatMap((event) => getStoreHints(event.payload)));
+    const inferredStoreUpdates = explicitStoreUpdates.length > 0
+        ? explicitStoreUpdates
+        : uniqueStrings(renderEvents
+            .filter((event) => getRenderReason(event.payload) === "store-update")
+            .flatMap((event) => getStoreHints(event.payload)));
+    const storeUpdates = inferredStoreUpdates.length > 0
+        ? inferredStoreUpdates
+        : storeHints.length === 1
+            ? storeHints
+            : [];
+    const changedKeys = uniqueStrings(storeEvents.length > 0
+        ? storeEvents.flatMap((event) => getChangedKeys(event.payload))
+        : renderEvents
+            .filter((event) => getRenderReason(event.payload) === "store-update")
+            .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));
     const confidence = inferConfidence(sourceModules, storeUpdates, renderComponents, errorMessages);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@presto1314w/vite-devtools-browser",
-  "version": "0.3.1",
+  "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": [