feat(networkLogs): optional request/response body capture with truncation\n\n- Core: add networkLogs.bodies options (request/response, maxBytes, allowContentTypes, prettyJson)\n- Core: capture fetch/XHR bodies with content-type allowlist and byte caps\n- Vite: propagate bodies options into virtual client; render snippets\n- Next: expose bodies options in BrowserEchoScript and client code\n- Nuxt: extend module options to include bodies passthrough\n- Discovery: constrain Vite discovery to cwd; fix tests (no default 5179 probe)

Author: regenrek

packages/core/src/client.ts

@@ -41,6 +41,14 @@ export function initBrowserEcho(opts: InitBrowserEchoOptions = {}) {
   // Optional: network capture (fetch + XHR)
   const networkEnabled = !!opts.networkLogs?.enabled;
   const networkFull = !!opts.networkLogs?.captureFull;
+  const bodiesCfg = opts.networkLogs?.bodies || {};
+  const bodyReqEnabled = !!bodiesCfg.request;
+  const bodyResEnabled = !!bodiesCfg.response;
+  const bodyMaxBytes = (bodiesCfg.maxBytes ?? 2048) | 0;
+  const bodyPrettyJson = bodiesCfg.prettyJson !== false;
+  const bodyAllowed: string[] = (Array.isArray(bodiesCfg.allowContentTypes) && bodiesCfg.allowContentTypes.length)
+    ? bodiesCfg.allowContentTypes.map((s) => String(s).toLowerCase())
+    : ['application/json', 'text/', 'application/x-www-form-urlencoded'];
   if (networkEnabled) {
     try { installFetchCapture(); } catch {}
     try { installXhrCapture(); } catch {}
@@ -146,31 +154,90 @@ export function initBrowserEcho(opts: InitBrowserEchoOptions = {}) {
       const start = performance.now();
       const method = (init?.method || (typeof input === 'object' && input?.method) || 'GET').toUpperCase();
       const url = normalizeUrlString(input);
-      const emit = (status: number, ok: boolean, extra?: string) => {
-        const dur = Math.max(0, Math.round(performance.now() - start));
+      const baseLine = (status: number, durMs: number) => {
         const statusText = isFinite(status as any) ? String(status) : 'ERR';
-        const text = `[NETWORK] [${method}] [${url || '(request)'}] [${statusText}] [${dur}ms]${extra ? ' ' + extra : ''}`;
-        enqueue({ level: ok ? 'info' : 'warn', text, time: Date.now(), tag: '[network]' });
+        return `[NETWORK] [${method}] [${url || '(request)'}] [${statusText}] [${durMs}ms]`;
+      };
+      const getReqSnippet = (): Promise<string> => {
+        if (!bodyReqEnabled) return Promise.resolve('');
+        try {
+          // Prefer Request.clone() if available
+          if (input && typeof input === 'object' && typeof (input as any).clone === 'function') {
+            const req: any = input;
+            const headers = (req.headers && typeof req.headers.get === 'function') ? req.headers : null;
+            const ct = getHeader(headers, 'content-type') || (init?.headers ? getHeader(init?.headers, 'content-type') : '');
+            if (!isAllowedContentType(ct)) return Promise.resolve('');
+            return req.clone().text().then((txt: string) => formatBodySnippet(txt, ct));
+          }
+          // Fallback to init.body as string/urlencoded
+          const ct = init?.headers ? getHeader(init.headers, 'content-type') : '';
+          const body = init?.body;
+          if (typeof body === 'string') {
+            if (!ct || isAllowedContentType(ct) || isLikelyText(body)) return Promise.resolve(formatBodySnippet(body, ct));
+          } else if (body && typeof (body as any).toString === 'function' && (body instanceof URLSearchParams)) {
+            const s = (body as URLSearchParams).toString();
+            const reqCt = ct || 'application/x-www-form-urlencoded';
+            if (isAllowedContentType(reqCt)) return Promise.resolve(formatBodySnippet(s, reqCt));
+          } else if (body && typeof (body as any).size === 'number') {
+            const size = Number((body as any).size) | 0;
+            return Promise.resolve(`[binary: ${size} bytes]`);
+          }
+        } catch {}
+        return Promise.resolve('');
+      };
+      const getResSnippet = (res: any): Promise<string> => {
+        if (!bodyResEnabled) return Promise.resolve('');
+        try {
+          const headers = res?.headers;
+          const ct = getHeader(headers, 'content-type');
+          if (!isAllowedContentType(ct)) return Promise.resolve('');
+          if (res && typeof res.clone === 'function') {
+            try {
+              const clone = res.clone();
+              if (clone && clone.body && typeof clone.body.getReader === 'function') {
+                return readStreamSnippet(clone, ct);
+              }
+              return clone.text().then((txt: string) => formatBodySnippet(txt, ct));
+            } catch {}
+          }
+        } catch {}
+        return Promise.resolve('');
       };
       try {
         const p = orig(input, init);
         return Promise.resolve(p).then((res: any) => {
-          try {
-            if (networkFull) {
-              const headers: any = {};
-              try { res.headers && res.headers.forEach && res.headers.forEach((v: string, k: string) => { headers[k] = v; }); } catch {}
-              emit(Number(res?.status ?? 0) | 0, !!res?.ok, `[size:${Number(res?.headers?.get?.('content-length') || 0) | 0}]`);
-            } else {
-              emit(Number(res?.status ?? 0) | 0, !!res?.ok);
-            }
-          } catch {}
+          const dur = Math.max(0, Math.round(performance.now() - start));
+          const statusNum = Number(res?.status ?? 0) | 0;
+          const ok = !!res?.ok;
+          const extra = networkFull ? ` [size:${Number(res?.headers?.get?.('content-length') || 0) | 0}]` : '';
+          // Prepare body snippets asynchronously
+          Promise.all([getReqSnippet(), getResSnippet(res)]).then(([reqS, resS]) => {
+            let line = baseLine(statusNum, dur) + extra;
+            if (reqS) line += `\n    req: ${reqS}`;
+            if (resS) line += `\n    res: ${resS}`;
+            enqueue({ level: ok ? 'info' : 'warn', text: line, time: Date.now(), tag: '[network]' });
+          }).catch(() => {
+            const line = baseLine(statusNum, dur) + extra;
+            enqueue({ level: ok ? 'info' : 'warn', text: line, time: Date.now(), tag: '[network]' });
+          });
           return res;
         }).catch((err: any) => {
-          emit(0, false, err?.message ? String(err.message) : 'fetch failed');
+          const dur = Math.max(0, Math.round(performance.now() - start));
+          Promise.resolve(getReqSnippet()).then((reqS) => {
+            let line = baseLine(0, dur);
+            line += ` fetch failed`;
+            if (reqS) line += `\n    req: ${reqS}`;
+            enqueue({ level: 'warn', text: line, time: Date.now(), tag: '[network]' });
+          }).catch(() => {
+            const line = baseLine(0, dur) + ' fetch failed';
+            enqueue({ level: 'warn', text: line, time: Date.now(), tag: '[network]' });
+          });
           throw err;
         });
       } catch (err: any) {
-        emit(0, false, err?.message ? String(err.message) : 'fetch failed');
+        const dur = Math.max(0, Math.round(performance.now() - start));
+        let line = baseLine(0, dur) + ' fetch failed';
+        enqueue({ level: 'warn', text: line, time: Date.now(), tag: '[network]' });
         throw err;
       }
     };
@@ -181,23 +248,58 @@ export function initBrowserEcho(opts: InitBrowserEchoOptions = {}) {
     if (!XHR || !XHR.prototype) return;
     const origOpen = XHR.prototype.open;
     const origSend = XHR.prototype.send;
+    const origSetHeader = XHR.prototype.setRequestHeader;
     XHR.prototype.open = function(method: string, url: string) {
       try { (this as any).__be_method__ = String(method || 'GET').toUpperCase(); } catch {}
       try { (this as any).__be_url__ = String(url || ''); } catch {}
       return origOpen.apply(this, arguments as any);
     } as any;
+    if (origSetHeader) {
+      XHR.prototype.setRequestHeader = function(name: string, value: string) {
+        try {
+          const k = String(name || '').toLowerCase();
+          if (k === 'content-type') { (this as any).__be_req_ct__ = String(value || ''); }
+        } catch {}
+        return origSetHeader.apply(this, arguments as any);
+      } as any;
+    }
     XHR.prototype.send = function() {
       const start = performance.now();
+      try { if (bodyReqEnabled) { (this as any).__be_req_body__ = arguments && arguments[0]; } } catch {}
       const onEnd = () => {
         try {
           const dur = Math.max(0, Math.round(performance.now() - start));
           const method = (this as any).__be_method__ || 'GET';
           const u = (this as any).__be_url__ || '';
           const status = Number((this as any).status ?? 0) | 0;
           const ok = status >= 200 && status < 400;
-          const extra = networkFull ? `ready:${(this as any).readyState}` : '';
-          const text = `[NETWORK] [${method}] [${u}] [${status || 'ERR'}] [${dur}ms]${extra ? ' ' + extra : ''}`;
-          enqueue({ level: ok ? 'info' : 'warn', text, time: Date.now(), tag: '[network]' });
+          const extra = networkFull ? ` ready:${(this as any).readyState}` : '';
+          let line = `[NETWORK] [${method}] [${u}] [${status || 'ERR'}] [${dur}ms]${extra}`;
+          // Bodies
+          if (bodyReqEnabled) {
+            try {
+              const reqCt = String((this as any).__be_req_ct__ || '').toLowerCase();
+              const reqBody = (this as any).__be_req_body__;
+              const reqSnippet = formatRequestBodySync(reqBody, reqCt);
+              if (reqSnippet) line += `\n    req: ${reqSnippet}`;
+            } catch {}
+          }
+          if (bodyResEnabled) {
+            try {
+              const resCt = String((this as any).getResponseHeader?.('Content-Type') || '').toLowerCase();
+              if (isAllowedContentType(resCt)) {
+                let snippet = '';
+                const rt = (this as any).responseType;
+                if (!rt || rt === 'text') {
+                  try { snippet = formatBodySnippet(String((this as any).responseText || ''), resCt); } catch {}
+                } else if (rt === 'json') {
+                  try { snippet = formatBodySnippet(JSON.stringify((this as any).response ?? null), 'application/json'); } catch {}
+                }
+                if (snippet) line += `\n    res: ${snippet}`;
+              }
+            } catch {}
+          }
+          enqueue({ level: ok ? 'info' : 'warn', text: line, time: Date.now(), tag: '[network]' });
         } catch {}
         try {
           this.removeEventListener('loadend', onEnd);
@@ -245,6 +347,120 @@ export function initBrowserEcho(opts: InitBrowserEchoOptions = {}) {
     });
   }
 
+  function getHeader(headers: any, name: string): string {
+    try {
+      if (!headers) return '';
+      const key = String(name).toLowerCase();
+      if (typeof headers.get === 'function') {
+        const v = headers.get(name) || headers.get(key) || '';
+        return String(v || '').toLowerCase();
+      }
+      if (Array.isArray(headers)) {
+        for (const [k, v] of headers) {
+          if (String(k).toLowerCase() === key) return String(v || '').toLowerCase();
+        }
+      }
+      if (typeof headers === 'object') {
+        for (const k of Object.keys(headers)) {
+          if (k.toLowerCase() === key) return String((headers as any)[k] || '').toLowerCase();
+        }
+      }
+    } catch {}
+    return '';
+  }
+
+  function isAllowedContentType(ct: string): boolean {
+    try {
+      const c = String(ct || '').toLowerCase();
+      if (!c) return false;
+      for (const a of bodyAllowed) {
+        const al = String(a);
+        if (c.startsWith(al)) return true;
+      }
+    } catch {}
+    return false;
+  }
+
+  function isLikelyText(s: string): boolean {
+    const trimmed = String(s || '').trim();
+    if (!trimmed) return true;
+    if (trimmed.startsWith('{') || trimmed.startsWith('[')) return true;
+    return /^[\x09\x0A\x0D\x20-\x7E\u00A0-\uFFFF]*$/.test(trimmed);
+  }
+
+  function formatBodySnippet(raw: string, contentType: string): string {
+    try {
+      let text = String(raw ?? '');
+      const ct = String(contentType || '').toLowerCase();
+      if (bodyPrettyJson && (ct.startsWith('application/json') || (text.trim().startsWith('{') || text.trim().startsWith('[')))) {
+        try { text = JSON.stringify(JSON.parse(text), null, 2); } catch {}
+      }
+      const enc = new TextEncoder();
+      const bytes = enc.encode(text);
+      if (bytes.length <= bodyMaxBytes) return text;
+      const sliced = bytes.slice(0, Math.max(0, bodyMaxBytes));
+      const dec = new TextDecoder();
+      const shown = dec.decode(sliced);
+      const extra = bytes.length - sliced.length;
+      return `${shown}… (+${extra} bytes)`;
+    } catch { return ''; }
+  }
+
+  function formatRequestBodySync(body: any, contentType: string): string {
+    try {
+      const ct = String(contentType || '').toLowerCase();
+      if (!ct || !isAllowedContentType(ct)) {
+        if (typeof body === 'string' && isLikelyText(body)) return formatBodySnippet(body, '');
+        return '';
+      }
+      if (typeof body === 'string') return formatBodySnippet(body, ct);
+      if (body instanceof URLSearchParams) return formatBodySnippet(body.toString(), 'application/x-www-form-urlencoded');
+      if (body && typeof body.size === 'number') return `[binary: ${Number(body.size) | 0} bytes]`;
+    } catch {}
+    return '';
+  }
+
+  async function readStreamSnippet(resClone: any, contentType: string): Promise<string> {
+    try {
+      const reader = resClone.body?.getReader?.();
+      if (!reader) return resClone.text().then((t: string) => formatBodySnippet(t, contentType));
+      const chunks: Uint8Array[] = [];
+      let received = 0;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        if (value) {
+          const v = value as Uint8Array;
+          if (received < bodyMaxBytes) {
+            const need = bodyMaxBytes - received;
+            chunks.push(need >= v.length ? v : v.slice(0, need));
+          }
+          received += v.length;
+          if (received >= bodyMaxBytes) {
+            try { reader.cancel && reader.cancel(); } catch {}
+            break;
+          }
+        }
+      }
+      const merged = mergeUint8Arrays(chunks);
+      const dec = new TextDecoder();
+      const shown = dec.decode(merged);
+      if (received <= bodyMaxBytes) return formatBodySnippet(shown, contentType);
+      const extra = received - merged.length;
+      return `${shown}… (+${extra} bytes)`;
+    } catch {
+      try { const t = await resClone.text(); return formatBodySnippet(t, contentType); } catch { return ''; }
+    }
+  }
+
+  function mergeUint8Arrays(arrays: Uint8Array[]): Uint8Array {
+    const total = arrays.reduce((n, a) => n + a.length, 0);
+    const out = new Uint8Array(total);
+    let off = 0;
+    for (const a of arrays) { out.set(a, off); off += a.length; }
+    return out;
+  }
+
   function randomId() {
     try {
       const arr = new Uint8Array(8);

packages/core/src/types.ts

@@ -7,5 +7,15 @@ export interface InitBrowserEchoOptions {
   tag?: string;
   batch?: { size?: number; interval?: number };
   stackMode?: 'full' | 'condensed' | 'none';
-  networkLogs?: { enabled?: boolean; captureFull?: boolean };
+  networkLogs?: {
+    enabled?: boolean;
+    captureFull?: boolean;
+    bodies?: {
+      request?: boolean;
+      response?: boolean;
+      maxBytes?: number;
+      allowContentTypes?: string[];
+      prettyJson?: boolean;
+    };
+  };
 }