@presto1314w/vite-devtools-browser 0.2.2 → 0.3.0

package/dist/correlate.d.ts

@@ -1,3 +1,4 @@
+import { type HmrVBEvent } from "./event-analysis.js";
 import type { VBEvent } from "./event-queue.js";
 export type CorrelationConfidence = "high" | "medium" | "low";
 export type ErrorCorrelation = {
@@ -6,7 +7,7 @@ export type ErrorCorrelation = {
     confidence: CorrelationConfidence;
     windowMs: number;
     matchingModules: string[];
-    relatedEvents: VBEvent[];
+    relatedEvents: HmrVBEvent[];
 };
 export type RenderNetworkCorrelation = {
     summary: string;

package/dist/correlate.js

@@ -1,21 +1,17 @@
-const MODULE_PATTERNS = [
-    /\/src\/[^\s"'`):]+/g,
-    /\/@fs\/[^\s"'`):]+/g,
-    /[A-Za-z]:\\[^:\n]+/g,
-];
+import { extractModules, extractModulesFromHmrEvent, getHmrEvents, getNetworkEvents, getRenderEvents, uniqueStrings, } from "./event-analysis.js";
 export function correlateErrorWithHMR(errorText, events, windowMs = 5000) {
-    const recentEvents = events.filter((event) => event.type === "hmr-update" || event.type === "hmr-error");
+    const recentEvents = getHmrEvents(events);
     if (recentEvents.length === 0)
         return null;
     const errorModules = extractModules(errorText);
     const matchedEvents = recentEvents.filter((event) => {
-        const modules = extractModulesFromEvent(event);
+        const modules = extractModulesFromHmrEvent(event);
         if (errorModules.length === 0)
             return event.type === "hmr-error";
         return modules.some((module) => errorModules.includes(module));
     });
     const relatedEvents = matchedEvents.length > 0 ? matchedEvents : recentEvents;
-    const matchingModules = unique(relatedEvents.flatMap((event) => extractModulesFromEvent(event)).filter((module) => errorModules.includes(module)));
+    const matchingModules = uniqueStrings(relatedEvents.flatMap((event) => extractModulesFromHmrEvent(event)).filter((module) => errorModules.includes(module)));
     const confidence = inferConfidence(errorModules, matchingModules, relatedEvents);
     const eventKind = relatedEvents.some((event) => event.type === "hmr-error") ? "HMR error" : "HMR update";
     const moduleText = matchingModules.length > 0
@@ -33,17 +29,17 @@ export function correlateErrorWithHMR(errorText, events, windowMs = 5000) {
     };
 }
 export function correlateRenderWithNetwork(events, requestThreshold = 3) {
-    const renderEvents = events.filter((event) => event.type === "render");
-    const networkEvents = events.filter((event) => event.type === "network");
+    const renderEvents = getRenderEvents(events);
+    const networkEvents = getNetworkEvents(events);
     if (renderEvents.length === 0 || networkEvents.length === 0)
         return null;
     const latestRender = renderEvents[renderEvents.length - 1];
     const start = latestRender.timestamp - 1000;
     const end = latestRender.timestamp + 1000;
     const overlappingNetwork = networkEvents.filter((event) => event.timestamp >= start && event.timestamp <= end);
-    const urls = unique(overlappingNetwork
+    const urls = uniqueStrings(overlappingNetwork
         .map((event) => event.payload.url)
-        .filter((url) => typeof url === "string"));
+        .filter((url) => typeof url === "string" && url.length > 0));
     if (overlappingNetwork.length < requestThreshold)
         return null;
     return {
@@ -64,14 +60,13 @@ export function formatErrorCorrelationReport(errorText, correlation) {
     return lines.join("\n");
 }
 function formatEventLine(event) {
-    const payload = event.payload;
-    const path = payload.path;
-    const message = payload.message;
+    const path = event.payload.path;
+    const message = event.payload.message;
     if (typeof path === "string")
         return `- ${event.type}: ${path}`;
     if (typeof message === "string")
         return `- ${event.type}: ${message}`;
-    return `- ${event.type}: ${JSON.stringify(payload)}`;
+    return `- ${event.type}: ${JSON.stringify(event.payload)}`;
 }
 function inferConfidence(errorModules, matchingModules, events) {
     if (matchingModules.length > 0)
@@ -82,29 +77,3 @@ function inferConfidence(errorModules, matchingModules, events) {
         return "low";
     return "medium";
 }
-function extractModulesFromEvent(event) {
-    const payload = event.payload;
-    const candidates = [];
-    if (typeof payload.path === "string")
-        candidates.push(payload.path);
-    if (typeof payload.message === "string")
-        candidates.push(payload.message);
-    if (Array.isArray(payload.updates)) {
-        for (const update of payload.updates) {
-            if (update && typeof update === "object" && typeof update.path === "string") {
-                candidates.push(update.path);
-            }
-        }
-    }
-    return unique(candidates.flatMap((candidate) => extractModules(candidate)));
-}
-function extractModules(text) {
-    const matches = MODULE_PATTERNS.flatMap((pattern) => text.match(pattern) ?? []);
-    return unique(matches.map(normalizeModulePath).filter(Boolean));
-}
-function normalizeModulePath(value) {
-    return value.replace(/[),.:]+$/, "");
-}
-function unique(values) {
-    return [...new Set(values)];
-}

package/dist/daemon.js

@@ -4,7 +4,9 @@ import { fileURLToPath } from "node:url";
 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 { socketDir, socketPath, pidFile } from "./paths.js";
+import { correlateRenderPropagation, formatPropagationTraceReport } from "./trace.js";
 import { EventQueue } from "./event-queue.js";
 import * as networkLog from "./network.js";
 export function cleanError(err) {
@@ -111,6 +113,11 @@ export function createRunner(api = browser) {
             const data = formatErrorCorrelationReport(errorText, errorText === "no errors" ? null : correlateErrorWithHMR(errorText, events, cmd.windowMs ?? 5000));
             return { ok: true, data };
         }
+        if (cmd.action === "correlate-renders") {
+            const events = queue ? queue.window(cmd.windowMs ?? 5000) : [];
+            const data = formatPropagationTraceReport(correlateRenderPropagation(events));
+            return { ok: true, data };
+        }
         if (cmd.action === "diagnose-hmr") {
             const errorText = String(await api.errors(Boolean(cmd.mapped), Boolean(cmd.inlineSource)));
             const runtimeText = String(await api.viteRuntimeStatus());
@@ -120,6 +127,11 @@ export function createRunner(api = browser) {
             const data = formatDiagnosisReport(diagnoseHMR({ errorText, runtimeText, hmrTraceText, correlation }));
             return { ok: true, data };
         }
+        if (cmd.action === "diagnose-propagation") {
+            const events = queue ? queue.window(cmd.windowMs ?? 5000) : [];
+            const data = formatPropagationDiagnosisReport(diagnosePropagation(correlateRenderPropagation(events)));
+            return { ok: true, data };
+        }
         if (cmd.action === "logs") {
             const data = await api.logs();
             return { ok: true, data };

package/dist/diagnose-propagation.d.ts

@@ -0,0 +1,10 @@
+import type { PropagationTrace } from "./trace.js";
+export type PropagationDiagnosis = {
+    status: "pass" | "warn" | "fail";
+    confidence: "high" | "medium" | "low";
+    summary: string;
+    detail: string;
+    suggestion: string;
+};
+export declare function diagnosePropagation(trace: PropagationTrace | null): PropagationDiagnosis;
+export declare function formatPropagationDiagnosisReport(result: PropagationDiagnosis): string;

package/dist/diagnose-propagation.js

@@ -0,0 +1,58 @@
+export function diagnosePropagation(trace) {
+    if (!trace) {
+        return {
+            status: "warn",
+            confidence: "low",
+            summary: "No propagation trace is available yet.",
+            detail: "The current event window does not contain render/update events, so propagation reasoning cannot start.",
+            suggestion: "Reproduce the issue once, then rerun `vite-browser correlate renders` or `vite-browser diagnose propagation`.",
+        };
+    }
+    if (trace.storeUpdates.length > 0 && trace.renderComponents.length > 0 && trace.errorMessages.length > 0) {
+        const changedKeys = trace.changedKeys.length > 0 ? ` Changed keys: ${trace.changedKeys.join(", ")}.` : "";
+        return {
+            status: "fail",
+            confidence: trace.confidence,
+            summary: "A plausible store -> render -> error propagation path was found.",
+            detail: `Start with store ${trace.storeUpdates[0]}, then inspect ${trace.renderComponents[0]} as the nearest affected component.${changedKeys}`,
+            suggestion: "Verify the recent store mutation first, then check whether the affected component or a dependent effect turns that state change into the visible failure.",
+        };
+    }
+    if (trace.sourceModules.length > 0 && trace.renderComponents.length > 0 && trace.errorMessages.length > 0) {
+        const storeHint = trace.storeHints.length > 0 ? ` Store hint: ${trace.storeHints[0]}.` : "";
+        return {
+            status: "fail",
+            confidence: trace.confidence,
+            summary: "A plausible update -> render -> error propagation path was found.",
+            detail: `Start with ${trace.sourceModules[0]}, then inspect ${trace.renderComponents[0]} as the nearest affected component.${storeHint}`,
+            suggestion: "Verify the updated source module first, then confirm whether the affected component consumes stale props, store state, or side effects.",
+        };
+    }
+    if (trace.renderComponents.length > 0 && trace.networkUrls.length > 1) {
+        return {
+            status: "warn",
+            confidence: trace.confidence,
+            summary: "Render activity overlaps with repeated network work.",
+            detail: `Observed render activity around ${trace.networkUrls.length} network request target(s).`,
+            suggestion: "Check whether rerenders are retriggering data fetches or invalidating derived state more often than expected.",
+        };
+    }
+    return {
+        status: "pass",
+        confidence: trace.confidence,
+        summary: "Propagation data is present but not yet conclusive.",
+        detail: "The current trace shows render activity, but not enough linked source/error evidence for a stronger diagnosis.",
+        suggestion: "Use the render correlation output to narrow the likely component path, then inspect source updates and runtime errors together.",
+    };
+}
+export function formatPropagationDiagnosisReport(result) {
+    return [
+        "# Propagation Diagnosis",
+        "",
+        `Status: ${result.status}`,
+        `Confidence: ${result.confidence}`,
+        result.summary,
+        result.detail,
+        `Suggestion: ${result.suggestion}`,
+    ].join("\n");
+}

package/dist/event-analysis.d.ts

@@ -0,0 +1,32 @@
+import type { ErrorEventPayload, HmrEventPayload, NetworkEventPayload, RenderEventPayload, StoreUpdatePayload, VBEvent } from "./event-queue.js";
+export type HmrVBEvent = Extract<VBEvent, {
+    type: "hmr-update" | "hmr-error";
+}>;
+export type RenderVBEvent = Extract<VBEvent, {
+    type: "render";
+}>;
+export type StoreUpdateVBEvent = Extract<VBEvent, {
+    type: "store-update";
+}>;
+export type NetworkVBEvent = Extract<VBEvent, {
+    type: "network";
+}>;
+export type ErrorVBEvent = Extract<VBEvent, {
+    type: "error";
+}>;
+export declare function sortEventsChronologically(events: VBEvent[]): VBEvent[];
+export declare function getHmrEvents(events: VBEvent[]): HmrVBEvent[];
+export declare function getRenderEvents(events: VBEvent[]): RenderVBEvent[];
+export declare function getStoreUpdateEvents(events: VBEvent[]): StoreUpdateVBEvent[];
+export declare function getNetworkEvents(events: VBEvent[]): NetworkVBEvent[];
+export declare function getErrorEvents(events: VBEvent[]): ErrorVBEvent[];
+export declare function extractModules(text: string): string[];
+export declare function extractModulesFromHmrPayload(payload: HmrEventPayload): string[];
+export declare function extractModulesFromHmrEvent(event: HmrVBEvent): string[];
+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 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

@@ -0,0 +1,75 @@
+const MODULE_PATTERNS = [
+    /\/src\/[^\s"'`):]+/g,
+    /\/@fs\/[^\s"'`)]+/g,
+    /[A-Za-z]:\\[^:\n]+/g,
+];
+export function sortEventsChronologically(events) {
+    return events.slice().sort((left, right) => left.timestamp - right.timestamp);
+}
+export function getHmrEvents(events) {
+    return events.filter((event) => event.type === "hmr-update" || event.type === "hmr-error");
+}
+export function getRenderEvents(events) {
+    return events.filter((event) => event.type === "render");
+}
+export function getStoreUpdateEvents(events) {
+    return events.filter((event) => event.type === "store-update");
+}
+export function getNetworkEvents(events) {
+    return events.filter((event) => event.type === "network");
+}
+export function getErrorEvents(events) {
+    return events.filter((event) => event.type === "error");
+}
+export function extractModules(text) {
+    const matches = MODULE_PATTERNS.flatMap((pattern) => text.match(pattern) ?? []);
+    return uniqueStrings(matches.map(normalizeModulePath).filter(Boolean));
+}
+export function extractModulesFromHmrPayload(payload) {
+    const candidates = [];
+    if (typeof payload.path === "string")
+        candidates.push(payload.path);
+    if (typeof payload.message === "string")
+        candidates.push(payload.message);
+    if (Array.isArray(payload.updates)) {
+        for (const update of payload.updates) {
+            if (typeof update?.path === "string") {
+                candidates.push(update.path);
+            }
+        }
+    }
+    return uniqueStrings(candidates.flatMap(extractModules));
+}
+export function extractModulesFromHmrEvent(event) {
+    return extractModulesFromHmrPayload(event.payload);
+}
+export function getRenderLabel(payload) {
+    if (payload.path.length > 0)
+        return payload.path;
+    if (payload.component.length > 0)
+        return payload.component;
+    return "anonymous-render";
+}
+export function getStoreName(payload) {
+    return payload.store.length > 0 ? payload.store : null;
+}
+export function getChangedKeys(payload) {
+    return payload.changedKeys.filter((value) => value.length > 0);
+}
+export function getStoreHints(payload) {
+    return payload.storeHints.filter((value) => value.length > 0);
+}
+export function getNetworkUrl(payload) {
+    return payload.url.length > 0 ? payload.url : null;
+}
+export function getErrorMessage(payload) {
+    return typeof payload.message === "string" && payload.message.length > 0 ? payload.message : null;
+}
+export function uniqueStrings(values) {
+    return [...new Set(values)];
+}
+function normalizeModulePath(value) {
+    return value
+        .replace(/:\d+:\d+$/, "")
+        .replace(/[),.:]+$/, "");
+}

package/dist/event-queue.d.ts

@@ -1,9 +1,74 @@
-export type VBEventType = 'hmr-update' | 'hmr-error' | 'module-change' | 'network' | 'error' | 'render';
-export interface VBEvent {
+export type HmrEventPayload = {
+    type?: string;
+    path?: string;
+    message?: string;
+    updates?: Array<{
+        path?: string;
+    }>;
+    [key: string]: unknown;
+};
+export type StoreUpdatePayload = {
+    store: string;
+    mutationType: string;
+    events: number;
+    changedKeys: string[];
+};
+export type NetworkEventPayload = {
+    url: string;
+    method?: string;
+    status?: number;
+    ms?: number;
+};
+export type ErrorEventPayload = {
+    message?: string;
+    source?: string | null;
+    line?: number | null;
+    col?: number | null;
+    stack?: string;
+};
+export type RenderEventPayload = {
+    component: string;
+    path: string;
+    framework: "vue" | "react" | "svelte" | "unknown";
+    reason: string;
+    mutationCount: number;
+    storeHints: string[];
+    changedKeys: string[];
+};
+export type ModuleChangePayload = {
+    path?: string;
+    [key: string]: unknown;
+};
+export type VBEvent = {
     timestamp: number;
-    type: VBEventType;
-    payload: unknown;
-}
+    type: "hmr-update";
+    payload: HmrEventPayload;
+} | {
+    timestamp: number;
+    type: "hmr-error";
+    payload: HmrEventPayload;
+} | {
+    timestamp: number;
+    type: "module-change";
+    payload: ModuleChangePayload;
+} | {
+    timestamp: number;
+    type: "store-update";
+    payload: StoreUpdatePayload;
+} | {
+    timestamp: number;
+    type: "network";
+    payload: NetworkEventPayload;
+} | {
+    timestamp: number;
+    type: "error";
+    payload: ErrorEventPayload;
+} | {
+    timestamp: number;
+    type: "render";
+    payload: RenderEventPayload;
+};
+export type VBEventType = VBEvent["type"];
 export declare class EventQueue {
     private events;
     private readonly maxSize;

package/dist/trace.d.ts

@@ -0,0 +1,15 @@
+import type { VBEvent } from "./event-queue.js";
+export type PropagationTrace = {
+    summary: string;
+    confidence: "high" | "medium" | "low";
+    sourceModules: string[];
+    storeUpdates: string[];
+    changedKeys: string[];
+    renderComponents: string[];
+    storeHints: string[];
+    networkUrls: string[];
+    errorMessages: string[];
+    events: VBEvent[];
+};
+export declare function correlateRenderPropagation(events: VBEvent[]): PropagationTrace | null;
+export declare function formatPropagationTraceReport(trace: PropagationTrace | null): string;

package/dist/trace.js

@@ -0,0 +1,75 @@
+import { extractModulesFromHmrEvent, getChangedKeys, getErrorEvents, getErrorMessage, getHmrEvents, getNetworkEvents, getNetworkUrl, getRenderEvents, getRenderLabel, getStoreHints, getStoreName, getStoreUpdateEvents, sortEventsChronologically, uniqueStrings, } from "./event-analysis.js";
+export function correlateRenderPropagation(events) {
+    const recent = sortEventsChronologically(events);
+    const renderEvents = getRenderEvents(recent);
+    if (renderEvents.length === 0)
+        return null;
+    const hmrEvents = getHmrEvents(recent);
+    const storeEvents = getStoreUpdateEvents(recent);
+    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 storeHints = uniqueStrings(renderEvents.flatMap((event) => getStoreHints(event.payload)));
+    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);
+    const eventCount = hmrEvents.length + storeEvents.length + renderEvents.length + networkEvents.length + errorEvents.length;
+    return {
+        summary: sourceModules.length > 0 || storeUpdates.length > 0
+            ? `Recent source/store updates likely propagated through ${renderComponents.length || 1} render step(s).`
+            : `Render activity observed${errorMessages.length > 0 ? " near the current failure" : ""}.`,
+        confidence,
+        sourceModules,
+        storeUpdates,
+        changedKeys,
+        renderComponents,
+        storeHints,
+        networkUrls,
+        errorMessages,
+        events: recent.slice(-Math.max(eventCount, 1)),
+    };
+}
+export function formatPropagationTraceReport(trace) {
+    const lines = ["# Render Correlation"];
+    if (!trace) {
+        lines.push("", "No render/update events available in the current event window.");
+        return lines.join("\n");
+    }
+    lines.push("", `Confidence: ${trace.confidence}`, trace.summary, "");
+    lines.push("## Source Updates");
+    lines.push(...formatList(trace.sourceModules));
+    if (trace.storeUpdates.length > 0) {
+        lines.push("", "## Store Updates", ...formatList(trace.storeUpdates));
+    }
+    if (trace.changedKeys.length > 0) {
+        lines.push("", "## Changed Keys", ...formatList(trace.changedKeys));
+    }
+    lines.push("");
+    lines.push("## Render Path");
+    lines.push(...formatList(trace.renderComponents));
+    if (trace.storeHints.length > 0) {
+        lines.push("", "## Store Hints", ...formatList(trace.storeHints));
+    }
+    if (trace.networkUrls.length > 0) {
+        lines.push("", "## Network Activity", ...formatList(trace.networkUrls));
+    }
+    if (trace.errorMessages.length > 0) {
+        lines.push("", "## Errors", ...formatList(trace.errorMessages));
+    }
+    return lines.join("\n");
+}
+function inferConfidence(sourceModules, storeUpdates, renderComponents, errorMessages) {
+    if ((sourceModules.length > 0 || storeUpdates.length > 0) && renderComponents.length > 0 && errorMessages.length > 0)
+        return "high";
+    if (renderComponents.length > 0 && (sourceModules.length > 0 || storeUpdates.length > 0 || errorMessages.length > 0))
+        return "medium";
+    return "low";
+}
+function formatList(values) {
+    if (values.length === 0)
+        return ["(none)"];
+    return values.map((value) => `- ${value}`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@presto1314w/vite-devtools-browser",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Runtime diagnostics CLI for Vite apps with event-stream correlation, HMR diagnosis, framework inspection, and mapped errors",
   "license": "MIT",
   "keywords": [