dev-inspector 1.0.0 → 1.0.1

package/README.md

@@ -28,6 +28,26 @@ initDevInspector({
 });
 ```
 
+## Important: Browser-only (SSR)
+
+Dev Inspector’s UI (`createPanel()` and the default `initDevInspector()` flow) requires a **browser environment** (it needs `document`).
+
+If your app uses **SSR** (Next.js, Remix, Nuxt, SvelteKit, etc.), do not call `initDevInspector()` at module scope on the server. Initialize it **client-side only** (e.g. in an effect, lifecycle hook, or a client-only component).
+
+Example (client-only init with dynamic import):
+
+```ts
+async function initInBrowser() {
+  if (typeof window === "undefined") return;
+  const { initDevInspector } = await import("dev-inspector");
+  initDevInspector({
+    panelOptions: { initiallyOpen: true, title: "Dev Inspector" },
+  });
+}
+
+initInBrowser();
+```
+
 If you want manual control, you can keep the returned handles:
 
 ```ts

package/lib/logger/networkLogger.js

@@ -24,6 +24,34 @@ function truncateString(value, maxLen) {
         return value;
     return value.slice(0, maxLen);
 }
+function coerceUrl(input) {
+    if (typeof input === "string")
+        return input;
+    if (!input)
+        return undefined;
+    if (typeof input.href === "string")
+        return input.href;
+    if (typeof input.url === "string")
+        return input.url;
+    return undefined;
+}
+function formatUrlForMessage(raw) {
+    var _a, _b;
+    if (!raw)
+        return "";
+    try {
+        const loc = globalThis;
+        const base = typeof ((_a = loc.location) === null || _a === void 0 ? void 0 : _a.href) === "string" ? loc.location.href : undefined;
+        const u = new URL(raw, base);
+        const origin = typeof ((_b = loc.location) === null || _b === void 0 ? void 0 : _b.origin) === "string" ? loc.location.origin : undefined;
+        if (origin && u.origin === origin)
+            return `${u.pathname}${u.search}${u.hash}`;
+        return u.href;
+    }
+    catch (_c) {
+        return raw;
+    }
+}
 async function readResponseBody(response, maxLen) {
     try {
         const text = await response.text();
@@ -34,13 +62,36 @@ async function readResponseBody(response, maxLen) {
     }
 }
 function makeMessage(entry) {
-    var _a, _b;
+    var _a;
     const m = (_a = entry.method) !== null && _a !== void 0 ? _a : "";
-    const u = (_b = entry.url) !== null && _b !== void 0 ? _b : "";
+    const u = formatUrlForMessage(entry.url);
     const s = typeof entry.status === "number" ? ` ${entry.status}` : "";
     const d = typeof entry.durationMs === "number" ? ` ${Math.round(entry.durationMs)}ms` : "";
     return `${m} ${u}${s}${d}`.trim();
 }
+function getFetchTimingDurationMs(url, startPerf) {
+    if (!url)
+        return undefined;
+    if (typeof performance === "undefined")
+        return undefined;
+    if (typeof performance.getEntriesByName !== "function")
+        return undefined;
+    const entries = performance.getEntriesByName(url);
+    if (!entries || entries.length === 0)
+        return undefined;
+    const candidates = entries.filter((e) => {
+        const rt = e;
+        const initiatorOk = typeof rt.initiatorType === "string" ? rt.initiatorType === "fetch" : true;
+        const startOk = typeof rt.startTime === "number" ? Math.abs(rt.startTime - startPerf) < 1000 : true;
+        return initiatorOk && startOk;
+    });
+    const chosen = (candidates.length > 0 ? candidates : entries)[(candidates.length > 0 ? candidates : entries).length - 1];
+    if (typeof chosen.duration === "number" && chosen.duration > 0)
+        return chosen.duration;
+    if (typeof chosen.responseEnd === "number" && typeof chosen.startTime === "number" && chosen.responseEnd > 0)
+        return chosen.responseEnd - chosen.startTime;
+    return undefined;
+}
 const xhrMeta = new WeakMap();
 function installNetworkLogger(options) {
     var _a, _b;
@@ -55,30 +106,28 @@ function installNetworkLogger(options) {
     const originalXhrSend = canXhr ? g.XMLHttpRequest.prototype.send : undefined;
     if (canFetch) {
         g.fetch = (async (...args) => {
-            var _a;
+            var _a, _b, _c;
             const start = now();
+            const startPerf = typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : start;
             const id = createId();
             let method;
             let url;
             let requestBody;
             try {
                 const [input, init] = args;
-                if (typeof input === "string")
-                    url = input;
-                else if (input && typeof input.url === "string")
-                    url = input.url;
+                url = coerceUrl(input);
                 const reqMethodFromInit = init === null || init === void 0 ? void 0 : init.method;
                 const reqMethodFromInput = input && typeof input.method === "string" ? input.method : undefined;
                 method = ((_a = reqMethodFromInit !== null && reqMethodFromInit !== void 0 ? reqMethodFromInit : reqMethodFromInput) !== null && _a !== void 0 ? _a : "GET").toUpperCase();
                 if (includeBodies && init && "body" in init)
                     requestBody = init.body;
             }
-            catch (_b) {
+            catch (_d) {
                 void 0;
             }
             try {
-                const res = await originalFetch(...args);
-                const durationMs = now() - start;
+                const res = await Reflect.apply(originalFetch, globalThis, args);
+                const durationMs = (_b = getFetchTimingDurationMs(url, startPerf)) !== null && _b !== void 0 ? _b : (now() - start);
                 const status = res.status;
                 let responseBody;
                 if (includeBodies) {
@@ -103,7 +152,7 @@ function installNetworkLogger(options) {
                 return res;
             }
             catch (err) {
-                const durationMs = now() - start;
+                const durationMs = (_c = getFetchTimingDurationMs(url, startPerf)) !== null && _c !== void 0 ? _c : (now() - start);
                 if (active) {
                     const entry = {
                         id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev-inspector",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "In-page devtools-style logger panel for web apps (console + network).",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -39,7 +39,6 @@
   "files": [
     "lib/**/*"
   ],
-  
   "devDependencies": {
     "@eslint/js": "^9.39.2",
     "eslint": "^9.39.2",