@presto1314w/vite-devtools-browser 0.3.0 → 0.3.2

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-session.d.ts

@@ -8,13 +8,23 @@ export type HmrEvent = {
     message: string;
     path?: string;
 };
+export type RuntimeError = {
+    timestamp: number;
+    message: string;
+    stack?: string;
+    source?: string | null;
+    line?: number | null;
+    col?: number | null;
+};
 export type BrowserSessionState = {
     context: BrowserContext | null;
     page: Page | null;
     framework: BrowserFramework;
     extensionModeDisabled: boolean;
+    collectorInstalled: boolean;
     consoleLogs: string[];
     hmrEvents: HmrEvent[];
+    runtimeErrors: RuntimeError[];
     lastReactSnapshot: ReactNode[];
     lastModuleGraphUrls: string[] | null;
 };

package/dist/browser-session.js

@@ -13,8 +13,10 @@ export function createBrowserSessionState() {
         page: null,
         framework: "unknown",
         extensionModeDisabled: false,
+        collectorInstalled: false,
         consoleLogs: [],
         hmrEvents: [],
+        runtimeErrors: [],
         lastReactSnapshot: [],
         lastModuleGraphUrls: null,
     };
@@ -30,8 +32,10 @@ export function resetBrowserSessionState(state) {
     state.context = null;
     state.page = null;
     state.framework = "unknown";
+    state.collectorInstalled = false;
     state.consoleLogs.length = 0;
     state.hmrEvents.length = 0;
+    state.runtimeErrors.length = 0;
     state.lastModuleGraphUrls = null;
     state.lastReactSnapshot = [];
 }

package/dist/browser.d.ts

@@ -1,5 +1,5 @@
 import type { Page } from "playwright";
-import { type HmrEvent } from "./browser-session.js";
+import { type HmrEvent, type RuntimeError } from "./browser-session.js";
 import { resolveViaSourceMap } from "./sourcemap.js";
 import { EventQueue } from "./event-queue.js";
 export { contextUsable, isClosedTargetError, type HmrEvent } from "./browser-session.js";
@@ -19,6 +19,7 @@ export declare function cookies(cookies: {
 }[], domain: string): Promise<number>;
 export declare function close(): Promise<void>;
 export declare function recordConsoleMessage(logs: string[], events: HmrEvent[], type: string, message: string, maxLogs?: number, maxEvents?: number): void;
+export declare function recordRuntimeError(runtimeErrors: RuntimeError[], message: string, stack?: string, source?: string | null, line?: number | null, col?: number | null, logType?: string, maxErrors?: number): void;
 export declare function parseViteLog(message: string): HmrEvent;
 export declare function goto(url: string): Promise<string>;
 export declare function back(): Promise<void>;

package/dist/browser.js

@@ -12,6 +12,7 @@ const session = createBrowserSessionState();
 let eventQueue = null;
 const MAX_LOGS = 200;
 const MAX_HMR_EVENTS = 500;
+const MAX_RUNTIME_ERRORS = 50;
 export function setEventQueue(queue) {
     eventQueue = queue;
 }
@@ -25,12 +26,17 @@ export function getCurrentPage() {
  * Inject browser-side event collector into the page
  */
 async function injectEventCollector(currentPage) {
+    if (session.context && !session.collectorInstalled) {
+        await session.context.addInitScript(initBrowserEventCollector);
+        session.collectorInstalled = true;
+    }
     await currentPage.evaluate(initBrowserEventCollector);
 }
 /**
  * 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);
@@ -60,7 +66,15 @@ async function ensurePage() {
 }
 function attachListeners(currentPage) {
     currentPage.on("console", (msg) => {
-        recordConsoleMessage(session.consoleLogs, session.hmrEvents, msg.type(), msg.text());
+        const type = msg.type();
+        const message = msg.text();
+        recordConsoleMessage(session.consoleLogs, session.hmrEvents, type, message);
+        if (type === "error" || isVueUnhandledWarning(type, message)) {
+            recordRuntimeError(session.runtimeErrors, message, undefined, undefined, undefined, undefined);
+        }
+    });
+    currentPage.on("pageerror", (error) => {
+        recordRuntimeError(session.runtimeErrors, error.message, error.stack, undefined, undefined, undefined, "pageerror");
     });
 }
 export function recordConsoleMessage(logs, events, type, message, maxLogs = MAX_LOGS, maxEvents = MAX_HMR_EVENTS) {
@@ -75,6 +89,34 @@ export function recordConsoleMessage(logs, events, type, message, maxLogs = MAX_
     if (events.length > maxEvents)
         events.shift();
 }
+export function recordRuntimeError(runtimeErrors, message, stack, source, line, col, logType = "runtime-error", maxErrors = MAX_RUNTIME_ERRORS) {
+    const error = {
+        timestamp: Date.now(),
+        message,
+        stack,
+        source,
+        line,
+        col,
+    };
+    runtimeErrors.push(error);
+    if (runtimeErrors.length > maxErrors)
+        runtimeErrors.shift();
+    eventQueue?.push({
+        timestamp: error.timestamp,
+        type: "error",
+        payload: {
+            message,
+            stack,
+            source,
+            line,
+            col,
+        },
+    });
+    const details = stack ? `${message}\n${stack}` : message;
+    session.consoleLogs.push(`[${logType}] ${details}`);
+    if (session.consoleLogs.length > MAX_LOGS)
+        session.consoleLogs.shift();
+}
 export function parseViteLog(message) {
     const lower = message.toLowerCase();
     const event = {
@@ -198,15 +240,29 @@ export async function viteModuleGraph(filter, limit = 200, mode = "snapshot") {
 export async function errors(mapped = false, inlineSource = false) {
     const currentPage = requireCurrentPage();
     const errorInfo = await readOverlayError(currentPage);
-    if (!errorInfo)
+    const runtimeError = session.runtimeErrors[session.runtimeErrors.length - 1];
+    if (!errorInfo && !runtimeError)
         return "no errors";
-    const raw = `${errorInfo.message ?? "Vite error"}\n\n${errorInfo.stack ?? ""}`.trim();
+    const raw = errorInfo
+        ? `${errorInfo.message ?? "Vite error"}\n\n${errorInfo.stack ?? ""}`.trim()
+        : formatRuntimeError(runtimeError);
     if (!mapped)
         return raw;
     const origin = new URL(currentPage.url()).origin;
     const mappedStack = await mapStackTrace(raw, origin, inlineSource);
     return mappedStack;
 }
+function formatRuntimeError(error) {
+    const location = error.source && error.line != null && error.col != null
+        ? `\n\nat ${error.source}:${error.line}:${error.col}`
+        : "";
+    return `${error.message}${location}${error.stack ? `\n\n${error.stack}` : ""}`.trim();
+}
+function isVueUnhandledWarning(type, message) {
+    if (type !== "warning")
+        return false;
+    return /\[Vue warn\]: Unhandled error during execution/i.test(message);
+}
 export async function logs() {
     if (session.consoleLogs.length === 0)
         return "no logs";
@@ -220,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;
@@ -195,71 +205,101 @@ export function exit(io, res, msg) {
     io.exit(0);
 }
 export function printUsage() {
-    return `
-vite-browser - Programmatic access to Vue/React/Svelte DevTools and Vite dev server
-
-USAGE
-  vite-browser <command> [options]
-
-BROWSER CONTROL
-  open <url> [--cookies-json <file>]  Launch browser and navigate
-  close                               Close browser and daemon
-  goto <url>                          Full-page navigation
-  back                                Go back in history
-  reload                              Reload current page
-
-FRAMEWORK DETECTION
-  detect                              Detect framework (vue/react/svelte)
-
-VUE COMMANDS
-  vue tree [id]                       Show Vue component tree or inspect component
-  vue pinia [store]                   Show Pinia stores or inspect specific store
-  vue router                          Show Vue Router information
-
-REACT COMMANDS
-  react tree [id]                     Show React component tree or inspect component
-
-SVELTE COMMANDS
-  svelte tree [id]                    Show Svelte component tree or inspect component
-
-VITE COMMANDS
-  vite restart                        Restart Vite dev server
-  vite hmr                            Show HMR summary
-  vite hmr trace [--limit <n>]        Show HMR timeline
-  vite hmr clear                      Clear tracked HMR timeline
-  vite runtime                        Show Vite runtime status
-  vite module-graph [--filter <txt>] [--limit <n>]
-                                     Show loaded Vite module resources
-  vite module-graph trace [--filter <txt>] [--limit <n>]
-                                     Show module additions/removals since baseline
-  vite module-graph clear             Clear module-graph baseline
-  errors                              Show build/runtime errors
-  errors --mapped                     Show errors with source-map mapping
-  errors --mapped --inline-source     Include mapped source snippets
-  correlate errors [--window <ms>]    Correlate current errors with recent HMR events
-  correlate renders [--window <ms>]   Summarize recent render/update propagation evidence
-  correlate errors --mapped           Correlate mapped errors with recent HMR events
-  diagnose hmr [--window <ms>]        Diagnose HMR failures from runtime, errors, and trace data
-  diagnose hmr [--limit <n>]          Control how many recent HMR trace entries are inspected
-  diagnose propagation [--window <ms>]
-                                     Diagnose likely update -> render -> error propagation
-  logs                                Show dev server logs
-
-UTILITIES
-  screenshot                          Save screenshot to temp file
-  eval <script>                       Evaluate JavaScript in page context
-  network [idx]                       List network requests or inspect one
-
-OPTIONS
-  -h, --help                          Show this help message
+    return `
+vite-browser - Programmatic access to Vue/React/Svelte DevTools and Vite dev server
+
+USAGE
+  vite-browser <command> [options]
+
+BROWSER CONTROL
+  open <url> [--cookies-json <file>]  Launch browser and navigate
+  close                               Close browser and daemon
+  goto <url>                          Full-page navigation
+  back                                Go back in history
+  reload                              Reload current page
+
+FRAMEWORK DETECTION
+  detect                              Detect framework (vue/react/svelte)
+
+VUE COMMANDS
+  vue tree [id]                       Show Vue component tree or inspect component
+  vue pinia [store]                   Show Pinia stores or inspect specific store
+  vue router                          Show Vue Router information
+
+REACT COMMANDS
+  react tree [id]                     Show React component tree or inspect component
+
+SVELTE COMMANDS
+  svelte tree [id]                    Show Svelte component tree or inspect component
+
+VITE COMMANDS
+  vite restart                        Restart Vite dev server
+  vite hmr                            Show HMR summary
+  vite hmr trace [--limit <n>]        Show HMR timeline
+  vite hmr clear                      Clear tracked HMR timeline
+  vite runtime                        Show Vite runtime status
+  vite module-graph [--filter <txt>] [--limit <n>]
+                                     Show loaded Vite module resources
+  vite module-graph trace [--filter <txt>] [--limit <n>]
+                                     Show module additions/removals since baseline
+  vite module-graph clear             Clear module-graph baseline
+  errors                              Show build/runtime errors
+  errors --mapped                     Show errors with source-map mapping
+  errors --mapped --inline-source     Include mapped source snippets
+  correlate errors [--window <ms>]    Correlate current errors with recent HMR events
+  correlate renders [--window <ms>]   Summarize recent render/update propagation evidence
+  correlate errors --mapped           Correlate mapped errors with recent HMR events
+  diagnose hmr [--window <ms>]        Diagnose HMR failures from runtime, errors, and trace data
+  diagnose hmr [--limit <n>]          Control how many recent HMR trace entries are inspected
+  diagnose propagation [--window <ms>]
+                                     Diagnose likely update -> render -> error propagation
+  logs                                Show dev server logs
+
+UTILITIES
+  screenshot                          Save screenshot to temp file
+  eval <script>                       Evaluate JavaScript in page context
+  network [idx]                       List network requests or inspect one
+
+OPTIONS
+  -h, --help                          Show this help message
 `;
 }
-if (process.argv[1] && import.meta.url.endsWith(process.argv[1].replaceAll("\\", "/"))) {
-    await runCli(process.argv, {
-        send,
-        readFile: readFileSync,
-        stdout: (text) => console.log(text),
-        stderr: (text) => console.error(text),
-        exit: (code) => process.exit(code),
+function isEntrypoint(argv1) {
+    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() {
+    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) => {
+        const message = error instanceof Error ? error.message : String(error);
+        console.error(message);
+        process.exit(1);
     });
 }

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;
 }