docs: document networkLogs.bodies options and examples across core, Vite, Next, Nuxt, React

Author: regenrek

packages/core/README.md

@@ -45,7 +45,17 @@ initBrowserEcho({
   batch: { size: 20, interval: 300 },
   stackMode: 'condensed',
   // Opt-in network logging
-  networkLogs: { enabled: true, captureFull: false }
+  networkLogs: {
+    enabled: true,
+    captureFull: false,
+    bodies: {
+      request: true,
+      response: true,
+      maxBytes: 2048,
+      allowContentTypes: ['application/json', 'text/', 'application/x-www-form-urlencoded'],
+      prettyJson: true
+    }
+  }
 });
 ```
 
@@ -71,7 +81,17 @@ interface BrowserEchoOptions {
   truncate?: number;                 // default: 10_000 chars (Vite)
   fileLog?: { enabled?: boolean; dir?: string }; // Vite-only
   // network capture (opt-in)
-  networkLogs?: { enabled?: boolean; captureFull?: boolean }; // default disabled
+  networkLogs?: {
+    enabled?: boolean;
+    captureFull?: boolean;
+    bodies?: {
+      request?: boolean;
+      response?: boolean;
+      maxBytes?: number;                       // default 2048 bytes
+      allowContentTypes?: string[];            // default ['application/json','text/','application/x-www-form-urlencoded']
+      prettyJson?: boolean;                    // default true
+    };
+  }; // default disabled
 }
 ```
 

packages/next/README.md

@@ -60,7 +60,17 @@ interface BrowserEchoScriptProps {
   // batching
   batch?: { size?: number; interval?: number }; // default: 20 / 300ms
   // Opt-in network capture (fetch/XHR/WS)
-  networkLogs?: { enabled?: boolean; captureFull?: boolean };
+  networkLogs?: {
+    enabled?: boolean;
+    captureFull?: boolean;
+    bodies?: {
+      request?: boolean;
+      response?: boolean;
+      maxBytes?: number;                       // default 2048 bytes
+      allowContentTypes?: string[];            // default ['application/json','text/','application/x-www-form-urlencoded']
+      prettyJson?: boolean;                    // default true
+    };
+  };
 }
 ```
 
@@ -102,6 +112,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             stackMode="condensed"
             showSource={true}
             batch={{ size: 10, interval: 500 }}
+            networkLogs={{
+              enabled: true,
+              bodies: { request: true, response: true, maxBytes: 2048 }
+            }}
           />
         )}
       </head>

packages/nuxt/README.md

@@ -63,7 +63,17 @@ interface BrowserEchoNuxtOptions {
   batch?: { size?: number; interval?: number }; // default: 20 / 300ms
   stackMode?: 'full' | 'condensed' | 'none';    // default: 'condensed'
   // Opt-in network capture (fetch/XHR/WS)
-  networkLogs?: { enabled?: boolean; captureFull?: boolean };
+  networkLogs?: {
+    enabled?: boolean;
+    captureFull?: boolean;
+    bodies?: {
+      request?: boolean;
+      response?: boolean;
+      maxBytes?: number;                       // default 2048 bytes
+      allowContentTypes?: string[];            // default ['application/json','text/','application/x-www-form-urlencoded']
+      prettyJson?: boolean;                    // default true
+    };
+  };
 }
 ```
 
@@ -94,6 +104,11 @@ export default defineNuxtConfig({
     batch: { 
       size: 10,    // Send after 10 logs
       interval: 500 // Or after 500ms
+    },
+    // Enable network body snippets (opt-in)
+    networkLogs: {
+      enabled: true,
+      bodies: { request: true, response: true, maxBytes: 2048 }
     }
   }
 });

packages/react/README.md

@@ -70,6 +70,23 @@ ReactDOM.createRoot(document.getElementById('root')!).render(<Root />);
 You need a development server endpoint that accepts POST requests at `/__client-logs` and prints the received logs to your terminal. The React provider only handles the client side.
 
 Note: Network capture (fetch/XHR/WS) is available via `@browser-echo/core` and framework providers (Vite, Next, Nuxt). This React (non-Vite) package does not inject network capture on its own.
+If you use `initBrowserEcho` directly, you can also enable network body snippets via core options:
+
+```ts
+initBrowserEcho({
+  route: '/__client-logs',
+  networkLogs: {
+    enabled: true,
+    bodies: {
+      request: true,
+      response: true,
+      maxBytes: 2048,
+      allowContentTypes: ['application/json','text/','application/x-www-form-urlencoded'],
+      prettyJson: true
+    }
+  }
+});
+```
 
 Example Express.js endpoint:
 

packages/vite/README.md

@@ -21,6 +21,7 @@ This package provides a Vite plugin that includes dev middleware and a virtual m
 - Full stack trace support with multiple modes
 - Works with `index.html` or server-side rendered apps
  - Optional network capture (opt-in): fetch, XMLHttpRequest, WebSocket
+ - Optional request/response body snippets (opt-in) with safe truncation
 
 ## Installation
 
@@ -141,7 +142,17 @@ interface BrowserEchoViteOptions {
   };
   discoverMcp?: boolean;             // Enable MCP auto-discovery (default: true)
   discoveryRefreshMs?: number;       // Discovery refresh interval (default: 30000)
-  networkLogs?: { enabled?: boolean; captureFull?: boolean }; // default disabled
+  networkLogs?: {
+    enabled?: boolean;
+    captureFull?: boolean;
+    bodies?: {
+      request?: boolean;
+      response?: boolean;
+      maxBytes?: number;                       // default 2048 bytes
+      allowContentTypes?: string[];            // default ['application/json','text/','application/x-www-form-urlencoded']
+      prettyJson?: boolean;                    // default true
+    };
+  }; // default disabled
 }
 ```
 
@@ -172,6 +183,31 @@ browserEcho({
 })
 ```
 
+### Network body snippets (opt-in)
+
+```ts
+browserEcho({
+  networkLogs: {
+    enabled: true,
+    bodies: {
+      request: true,
+      response: true,
+      maxBytes: 2048,
+      allowContentTypes: ['application/json','text/','application/x-www-form-urlencoded'],
+      prettyJson: true
+    }
+  }
+})
+```
+
+Output example:
+
+```
+[NETWORK] [POST] [/api/users] [200] [18ms]
+    req: {"name":"Ada"}
+    res: { "id": 1, "name": "Ada" }
+```
+
 ### Disable MCP
 
 ```ts