@ollie-shop/cli 1.5.0 → 1.6.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @ollie-shop/cli@1.5.0 build /home/runner/work/ollie-shop/ollie-shop/packages/cli
+> @ollie-shop/cli@1.6.0 build /home/runner/work/ollie-shop/ollie-shop/packages/cli
 > tsup
 
 CLI Building entry: src/index.tsx
@@ -9,5 +9,5 @@
 CLI Target: node22
 CLI Cleaning output folder
 ESM Build start
-ESM dist/index.js 105.76 KB
-ESM ⚡️ Build success in 353ms
+ESM dist/index.js 112.10 KB
+ESM ⚡️ Build success in 291ms

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ollie-shop/cli
 
+## 1.6.0
+
+### Minor Changes
+
+- df230be: Add a `--browser-logs` flag to `ollieshop start` that streams custom components' browser console logs and uncaught errors to the CLI terminal, attributed per component. Off by default — no console patching or overhead unless the flag is passed, and deploy bundles are unaffected.
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/index.js

@@ -115,6 +115,10 @@ function HelpCommand() {
       /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(Box, { width: 24, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "--no-open" }) }),
         /* @__PURE__ */ jsx(Text, { children: "start: don't auto-open Studio (also honored via CI env)" })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Box, { width: 24, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "--browser-logs" }) }),
+        /* @__PURE__ */ jsx(Text, { children: "start: stream custom components' browser console to terminal" })
       ] })
     ] }),
     /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, children: "Examples:" }) }),
@@ -122,6 +126,7 @@ function HelpCommand() {
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop login" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop start --stage dev" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop start --no-open" }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop start --browser-logs" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop whoami -o json" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "$ ollieshop schema store.create" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: '$ ollieshop store create --name "My Store" --platform vtex --platform-store-id mystore' }),
@@ -730,8 +735,106 @@ async function discoverComponents(options = {}) {
   }
   return components;
 }
+function browserLogBridge(endpoint) {
+  const target = JSON.stringify(endpoint);
+  return `(() => {
+  if (typeof window === "undefined" || window.__ollieLogBridge) return;
+  window.__ollieLogBridge = true;
+
+  const endpoint = ${target};
+  const SLOT_FRAME = /ollie-slot\\/([^.\\s:]+)\\.js/;
+  const LEVELS = ["log", "info", "warn", "error", "debug"];
+  const MAX_MESSAGE = 2000;
+  const MAX_BATCH = 20;
+  const FLUSH_MS = 200;
+
+  let queue = [];
+  let flushTimer = null;
+
+  function format(value) {
+    if (typeof value === "string") return value;
+    try {
+      return JSON.stringify(value);
+    } catch (_) {
+      return String(value);
+    }
+  }
+
+  function slotName(stack) {
+    const match = (stack || "").match(SLOT_FRAME);
+    return match ? match[1] : null;
+  }
+
+  function flush() {
+    if (flushTimer) {
+      clearTimeout(flushTimer);
+      flushTimer = null;
+    }
+    if (queue.length === 0) return;
+    const batch = queue;
+    queue = [];
+    try {
+      fetch(endpoint, {
+        method: "POST",
+        mode: "cors",
+        keepalive: true,
+        headers: { "Content-Type": "text/plain" },
+        body: JSON.stringify({ batch: batch }),
+      }).catch(function () {});
+    } catch (_) {}
+  }
+
+  function forward(level, component, args) {
+    try {
+      let message = args.map(format).join(" ");
+      if (message.length > MAX_MESSAGE) {
+        message = message.slice(0, MAX_MESSAGE) + " \u2026(truncated)";
+      }
+      queue.push({ level: level, component: component, message: message });
+      if (queue.length >= MAX_BATCH) {
+        flush();
+      } else if (!flushTimer) {
+        flushTimer = setTimeout(flush, FLUSH_MS);
+      }
+    } catch (_) {}
+  }
+
+  for (const level of LEVELS) {
+    const original = console[level]
+      ? console[level].bind(console)
+      : function () {};
+    console[level] = function () {
+      const args = Array.prototype.slice.call(arguments);
+      original.apply(null, args);
+      const component = slotName(new Error().stack);
+      if (component) forward(level, component, args);
+    };
+  }
+
+  window.addEventListener("error", function (event) {
+    const component = slotName(event.error && event.error.stack);
+    if (component) forward("error", component, [event.message]);
+  });
+
+  window.addEventListener("unhandledrejection", function (event) {
+    const reason = event.reason;
+    const component = slotName(reason && reason.stack);
+    if (component) {
+      const message = reason && reason.message ? reason.message : String(reason);
+      forward("error", component, [message]);
+    }
+  });
+
+  window.addEventListener("pagehide", flush);
+})();`;
+}
 async function createBuildContext(components, options = {}) {
-  const { cwd = process.cwd(), stage, onBuildEnd } = options;
+  const {
+    cwd = process.cwd(),
+    stage,
+    onBuildEnd,
+    browserLogsEndpoint
+  } = options;
   const outdir = path4.join(cwd, "node_modules/.ollie", "build");
   await fs4.mkdir(outdir, { recursive: true });
   const entryPoints = {};
@@ -789,7 +892,8 @@ async function createBuildContext(components, options = {}) {
     logLevel: "silent",
     // We handle logging ourselves
     jsx: "automatic",
-    plugins: [manifestPlugin]
+    plugins: [manifestPlugin],
+    ...browserLogsEndpoint ? { banner: { js: browserLogBridge(browserLogsEndpoint) } } : {}
   });
   return ctx;
 }
@@ -800,11 +904,13 @@ async function startDevServer(options = {}) {
     cwd = process.cwd(),
     stage,
     onRequest,
-    onBuildEnd
+    onBuildEnd,
+    onBrowserLogs
   } = options;
   const servedir = path4.join(cwd, "node_modules/.ollie", "build");
   const componentsDir = path4.join(cwd, "components");
   const internalPort = port + 1;
+  const browserLogsEndpoint = onBrowserLogs ? `http://${host}:${port}/__log` : void 0;
   let activeStage = stage ?? "prod";
   let ctx = null;
   let entryNames = /* @__PURE__ */ new Set();
@@ -813,7 +919,8 @@ async function startDevServer(options = {}) {
     ctx = await createBuildContext(components, {
       cwd,
       stage: activeStage,
-      onBuildEnd
+      onBuildEnd,
+      browserLogsEndpoint
     });
     await ctx.rebuild();
     await ctx.watch();
@@ -1118,6 +1225,45 @@ data: ${payload}
       });
       return;
     }
+    if (url.pathname === "/__log" && req.method === "POST") {
+      if (!onBrowserLogs) {
+        res.statusCode = 404;
+        res.end();
+        return;
+      }
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+      res.setHeader("Access-Control-Allow-Private-Network", "true");
+      const MAX_LOG_BODY = 64 * 1024;
+      let body = "";
+      let aborted = false;
+      req.on("data", (chunk) => {
+        if (aborted) return;
+        body += chunk.toString();
+        if (body.length > MAX_LOG_BODY) {
+          aborted = true;
+          res.statusCode = 413;
+          res.end();
+          req.destroy();
+        }
+      });
+      req.on("end", () => {
+        if (aborted) return;
+        try {
+          const parsed2 = JSON.parse(body);
+          const batch = parsed2.batch;
+          const candidates = Array.isArray(batch) ? batch : [parsed2];
+          const entries = candidates.filter(
+            (entry) => typeof entry?.message === "string"
+          );
+          if (entries.length > 0) onBrowserLogs(entries);
+        } catch {
+        }
+        res.statusCode = 204;
+        res.end();
+      });
+      return;
+    }
     if (req.method === "OPTIONS") {
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
@@ -1222,13 +1368,16 @@ function StartCommand({ args }) {
   const [state, setState] = useState2({ status: "initializing" });
   const [components, setComponents] = useState2([]);
   const [logs, setLogs] = useState2([]);
+  const [browserLogs, setBrowserLogs] = useState2([]);
   const [buildCount, setBuildCount] = useState2(0);
   const [lastBuildTime, setLastBuildTime] = useState2(null);
   const logIdRef = useRef(0);
+  const browserLogIdRef = useRef(0);
   const rebuildRef = useRef(null);
   const stopRef = useRef(null);
   const stage = resolveStage(parseArg(args, "--stage", "-s"));
   const noOpen = args.includes("--no-open") || Boolean(process.env.CI);
+  const browserLogsEnabled = args.includes("--browser-logs");
   const isInteractive = Boolean(process.stdin.isTTY);
   const addLog = useCallback((log) => {
     setLogs((prev) => {
@@ -1251,6 +1400,18 @@ function StartCommand({ args }) {
     },
     [addLog]
   );
+  const addBrowserLogs = useCallback((entries) => {
+    if (entries.length === 0) return;
+    setBrowserLogs((prev) => {
+      const mapped = entries.map((entry) => ({
+        ...entry,
+        message: sanitizeLogMessage(entry.message),
+        id: ++browserLogIdRef.current,
+        timestamp: /* @__PURE__ */ new Date()
+      }));
+      return [...prev, ...mapped].slice(-MAX_LOGS);
+    });
+  }, []);
   useEffect2(() => {
     let mounted = true;
     async function init() {
@@ -1281,6 +1442,7 @@ function StartCommand({ args }) {
           port: PORT,
           stage,
           onRequest: handleRequest,
+          onBrowserLogs: browserLogsEnabled ? addBrowserLogs : void 0,
           onBuildEnd: (updatedComponents) => {
             setComponents(updatedComponents);
             setBuildCount((c) => c + 1);
@@ -1321,7 +1483,7 @@ function StartCommand({ args }) {
       mounted = false;
       stopRef.current?.();
     };
-  }, [stage, handleRequest, noOpen]);
+  }, [stage, handleRequest, addBrowserLogs, browserLogsEnabled, noOpen]);
   useInput(
     (input, key) => {
       if (input === "q" || input === "c" && key.ctrl) {
@@ -1378,6 +1540,7 @@ function StartCommand({ args }) {
       /* @__PURE__ */ jsx3(ComponentList, { components }),
       /* @__PURE__ */ jsx3(BuildInfo, { buildCount, lastBuildTime }),
       /* @__PURE__ */ jsx3(RequestLogs, { logs }),
+      browserLogsEnabled && /* @__PURE__ */ jsx3(BrowserLogs, { logs: browserLogs }),
       /* @__PURE__ */ jsx3(Footer, { interactive: isInteractive })
     ] })
   ] });
@@ -1506,6 +1669,38 @@ function RequestLogs({ logs }) {
     ] }, log.id)) })
   ] });
 }
+function sanitizeLogMessage(message) {
+  let out = "";
+  for (const ch of message) {
+    const code = ch.codePointAt(0) ?? 0;
+    out += code < 32 || code >= 127 && code <= 159 ? " " : ch;
+    if (out.length >= 2e3) break;
+  }
+  return out;
+}
+function browserLogColor(level) {
+  if (level === "error") return "red";
+  if (level === "warn") return "yellow";
+  if (level === "info") return "cyan";
+  return "gray";
+}
+function BrowserLogs({ logs }) {
+  return /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Browser Logs:" }),
+    /* @__PURE__ */ jsx3(Box3, { marginLeft: 2, flexDirection: "column", children: logs.length === 0 ? /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "No browser logs yet..." }) : logs.map((log) => /* @__PURE__ */ jsxs3(Box3, { children: [
+      /* @__PURE__ */ jsxs3(Text3, { color: browserLogColor(log.level), children: [
+        log.level.toUpperCase(),
+        " "
+      ] }),
+      log.component && /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+        "[",
+        log.component,
+        "] "
+      ] }),
+      /* @__PURE__ */ jsx3(Text3, { children: log.message })
+    ] }, log.id)) })
+  ] });
+}
 function Footer({ interactive = true }) {
   if (!interactive) {
     return /* @__PURE__ */ jsx3(Box3, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "Headless (no TTY) \u2014 Ctrl+C to stop" }) });
@@ -1542,7 +1737,7 @@ function App({ command, args }) {
   }
 }
 function VersionCommand() {
-  const version = "1.5.0" ? "1.5.0" : "unknown";
+  const version = "1.6.0" ? "1.6.0" : "unknown";
   return /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsxs4(Text4, { children: [
     "ollieshop v",
     version

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollie-shop/cli",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Ollie Shop CLI - Development tools for custom checkouts",
   "type": "module",
   "main": "dist/index.js",

package/src/commands/help.tsx

@@ -151,6 +151,14 @@ export function HelpCommand() {
           </Box>
           <Text>start: don't auto-open Studio (also honored via CI env)</Text>
         </Box>
+        <Box>
+          <Box width={24}>
+            <Text color="yellow">--browser-logs</Text>
+          </Box>
+          <Text>
+            start: stream custom components' browser console to terminal
+          </Text>
+        </Box>
       </Box>
 
       <Box marginTop={1}>
@@ -160,6 +168,7 @@ export function HelpCommand() {
         <Text dimColor>$ ollieshop login</Text>
         <Text dimColor>$ ollieshop start --stage dev</Text>
         <Text dimColor>$ ollieshop start --no-open</Text>
+        <Text dimColor>$ ollieshop start --browser-logs</Text>
         <Text dimColor>$ ollieshop whoami -o json</Text>
         <Text dimColor>$ ollieshop schema store.create</Text>
         <Text dimColor>

package/src/commands/start.tsx

@@ -4,6 +4,7 @@ import open from "open";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { loadConfig, resolveStage } from "../utils/config.js";
 import {
+  type BrowserLogEntry,
   type ComponentInfo,
   discoverComponents,
   startDevServer,
@@ -22,6 +23,14 @@ interface RequestLog {
   timestamp: Date;
 }
 
+interface BrowserLog {
+  id: number;
+  level: string;
+  component?: string;
+  message: string;
+  timestamp: Date;
+}
+
 type ServerState =
   | { status: "initializing" }
   | { status: "discovering" }
@@ -51,9 +60,11 @@ export function StartCommand({ args }: StartCommandProps) {
   const [state, setState] = useState<ServerState>({ status: "initializing" });
   const [components, setComponents] = useState<ComponentInfo[]>([]);
   const [logs, setLogs] = useState<RequestLog[]>([]);
+  const [browserLogs, setBrowserLogs] = useState<BrowserLog[]>([]);
   const [buildCount, setBuildCount] = useState(0);
   const [lastBuildTime, setLastBuildTime] = useState<Date | null>(null);
   const logIdRef = useRef(0);
+  const browserLogIdRef = useRef(0);
   const rebuildRef = useRef<(() => Promise<void>) | null>(null);
   const stopRef = useRef<(() => Promise<void>) | null>(null);
 
@@ -63,6 +74,7 @@ export function StartCommand({ args }: StartCommandProps) {
   // agent spawns the dev server and drives its own harness instead. Also honored
   // via the conventional CI env var.
   const noOpen = args.includes("--no-open") || Boolean(process.env.CI);
+  const browserLogsEnabled = args.includes("--browser-logs");
   // Keyboard shortcuts need raw mode, which Ink can only enable on a TTY stdin.
   // When spawned headless (agent/CI/backgrounded), stdin isn't a TTY — guard the
   // input handler so the server runs instead of crashing with "Raw mode is not
@@ -92,6 +104,19 @@ export function StartCommand({ args }: StartCommandProps) {
     [addLog],
   );
 
+  const addBrowserLogs = useCallback((entries: BrowserLogEntry[]) => {
+    if (entries.length === 0) return;
+    setBrowserLogs((prev) => {
+      const mapped = entries.map((entry) => ({
+        ...entry,
+        message: sanitizeLogMessage(entry.message),
+        id: ++browserLogIdRef.current,
+        timestamp: new Date(),
+      }));
+      return [...prev, ...mapped].slice(-MAX_LOGS);
+    });
+  }, []);
+
   // Initialize server
   useEffect(() => {
     let mounted = true;
@@ -134,6 +159,7 @@ export function StartCommand({ args }: StartCommandProps) {
           port: PORT,
           stage,
           onRequest: handleRequest,
+          onBrowserLogs: browserLogsEnabled ? addBrowserLogs : undefined,
           onBuildEnd: (updatedComponents) => {
             setComponents(updatedComponents);
             setBuildCount((c) => c + 1);
@@ -181,7 +207,7 @@ export function StartCommand({ args }: StartCommandProps) {
       mounted = false;
       stopRef.current?.();
     };
-  }, [stage, handleRequest, noOpen]);
+  }, [stage, handleRequest, addBrowserLogs, browserLogsEnabled, noOpen]);
 
   // Handle keyboard input (only when attached to a TTY — see isInteractive above)
   useInput(
@@ -255,6 +281,7 @@ export function StartCommand({ args }: StartCommandProps) {
           <ComponentList components={components} />
           <BuildInfo buildCount={buildCount} lastBuildTime={lastBuildTime} />
           <RequestLogs logs={logs} />
+          {browserLogsEnabled && <BrowserLogs logs={browserLogs} />}
           <Footer interactive={isInteractive} />
         </>
       )}
@@ -404,6 +431,46 @@ function RequestLogs({ logs }: { logs: RequestLog[] }) {
   );
 }
 
+function sanitizeLogMessage(message: string): string {
+  let out = "";
+  for (const ch of message) {
+    const code = ch.codePointAt(0) ?? 0;
+    out += code < 0x20 || (code >= 0x7f && code <= 0x9f) ? " " : ch;
+    if (out.length >= 2000) break;
+  }
+  return out;
+}
+
+function browserLogColor(level: string): string {
+  if (level === "error") return "red";
+  if (level === "warn") return "yellow";
+  if (level === "info") return "cyan";
+  return "gray";
+}
+
+function BrowserLogs({ logs }: { logs: BrowserLog[] }) {
+  return (
+    <Box marginTop={1} flexDirection="column">
+      <Text bold>Browser Logs:</Text>
+      <Box marginLeft={2} flexDirection="column">
+        {logs.length === 0 ? (
+          <Text dimColor>No browser logs yet...</Text>
+        ) : (
+          logs.map((log) => (
+            <Box key={log.id}>
+              <Text color={browserLogColor(log.level)}>
+                {log.level.toUpperCase()}{" "}
+              </Text>
+              {log.component && <Text dimColor>[{log.component}] </Text>}
+              <Text>{log.message}</Text>
+            </Box>
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}
+
 function Footer({ interactive = true }: { interactive?: boolean }) {
   if (!interactive) {
     return (

package/src/utils/esbuild.ts

@@ -213,10 +213,111 @@ export interface BuildResult {
   buildTime: number;
 }
 
+export interface BrowserLogEntry {
+  level: string;
+  component?: string;
+  message: string;
+}
+
+function browserLogBridge(endpoint: string): string {
+  const target = JSON.stringify(endpoint);
+  return `(() => {
+  if (typeof window === "undefined" || window.__ollieLogBridge) return;
+  window.__ollieLogBridge = true;
+
+  const endpoint = ${target};
+  const SLOT_FRAME = /ollie-slot\\/([^.\\s:]+)\\.js/;
+  const LEVELS = ["log", "info", "warn", "error", "debug"];
+  const MAX_MESSAGE = 2000;
+  const MAX_BATCH = 20;
+  const FLUSH_MS = 200;
+
+  let queue = [];
+  let flushTimer = null;
+
+  function format(value) {
+    if (typeof value === "string") return value;
+    try {
+      return JSON.stringify(value);
+    } catch (_) {
+      return String(value);
+    }
+  }
+
+  function slotName(stack) {
+    const match = (stack || "").match(SLOT_FRAME);
+    return match ? match[1] : null;
+  }
+
+  function flush() {
+    if (flushTimer) {
+      clearTimeout(flushTimer);
+      flushTimer = null;
+    }
+    if (queue.length === 0) return;
+    const batch = queue;
+    queue = [];
+    try {
+      fetch(endpoint, {
+        method: "POST",
+        mode: "cors",
+        keepalive: true,
+        headers: { "Content-Type": "text/plain" },
+        body: JSON.stringify({ batch: batch }),
+      }).catch(function () {});
+    } catch (_) {}
+  }
+
+  function forward(level, component, args) {
+    try {
+      let message = args.map(format).join(" ");
+      if (message.length > MAX_MESSAGE) {
+        message = message.slice(0, MAX_MESSAGE) + " …(truncated)";
+      }
+      queue.push({ level: level, component: component, message: message });
+      if (queue.length >= MAX_BATCH) {
+        flush();
+      } else if (!flushTimer) {
+        flushTimer = setTimeout(flush, FLUSH_MS);
+      }
+    } catch (_) {}
+  }
+
+  for (const level of LEVELS) {
+    const original = console[level]
+      ? console[level].bind(console)
+      : function () {};
+    console[level] = function () {
+      const args = Array.prototype.slice.call(arguments);
+      original.apply(null, args);
+      const component = slotName(new Error().stack);
+      if (component) forward(level, component, args);
+    };
+  }
+
+  window.addEventListener("error", function (event) {
+    const component = slotName(event.error && event.error.stack);
+    if (component) forward("error", component, [event.message]);
+  });
+
+  window.addEventListener("unhandledrejection", function (event) {
+    const reason = event.reason;
+    const component = slotName(reason && reason.stack);
+    if (component) {
+      const message = reason && reason.message ? reason.message : String(reason);
+      forward("error", component, [message]);
+    }
+  });
+
+  window.addEventListener("pagehide", flush);
+})();`;
+}
+
 export interface CreateBuildContextOptions {
   cwd?: string;
   stage?: string;
   onBuildEnd?: (components: ComponentInfo[], result: BuildResult) => void;
+  browserLogsEndpoint?: string;
 }
 
 /**
@@ -227,7 +328,12 @@ export async function createBuildContext(
   components: ComponentInfo[],
   options: CreateBuildContextOptions = {},
 ): Promise<esbuild.BuildContext> {
-  const { cwd = process.cwd(), stage, onBuildEnd } = options;
+  const {
+    cwd = process.cwd(),
+    stage,
+    onBuildEnd,
+    browserLogsEndpoint,
+  } = options;
   const outdir = path.join(cwd, "node_modules/.ollie", "build");
 
   // Ensure output directory exists
@@ -303,6 +409,9 @@ export async function createBuildContext(
     logLevel: "silent", // We handle logging ourselves
     jsx: "automatic",
     plugins: [manifestPlugin],
+    ...(browserLogsEndpoint
+      ? { banner: { js: browserLogBridge(browserLogsEndpoint) } }
+      : {}),
   });
 
   return ctx;
@@ -327,6 +436,7 @@ export async function startDevServer(
     stage?: string;
     onRequest?: (args: esbuild.ServeOnRequestArgs) => void;
     onBuildEnd?: (components: ComponentInfo[], result: BuildResult) => void;
+    onBrowserLogs?: (entries: BrowserLogEntry[]) => void;
   } = {},
 ): Promise<
   ServeResult & { rebuild: () => Promise<void>; stop: () => Promise<void> }
@@ -338,11 +448,15 @@ export async function startDevServer(
     stage,
     onRequest,
     onBuildEnd,
+    onBrowserLogs,
   } = options;
 
   const servedir = path.join(cwd, "node_modules/.ollie", "build");
   const componentsDir = path.join(cwd, "components");
   const internalPort = port + 1;
+  const browserLogsEndpoint = onBrowserLogs
+    ? `http://${host}:${port}/__log`
+    : undefined;
 
   // The active stage is mutable: the admin can switch it at runtime via POST /stage.
   let activeStage = stage ?? "prod";
@@ -356,6 +470,7 @@ export async function startDevServer(
       cwd,
       stage: activeStage,
       onBuildEnd,
+      browserLogsEndpoint,
     });
     await ctx.rebuild();
     await ctx.watch();
@@ -731,6 +846,50 @@ export async function startDevServer(
       return;
     }
 
+    if (url.pathname === "/__log" && req.method === "POST") {
+      if (!onBrowserLogs) {
+        res.statusCode = 404;
+        res.end();
+        return;
+      }
+
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+      res.setHeader("Access-Control-Allow-Private-Network", "true");
+
+      const MAX_LOG_BODY = 64 * 1024;
+      let body = "";
+      let aborted = false;
+      req.on("data", (chunk) => {
+        if (aborted) return;
+        body += chunk.toString();
+        if (body.length > MAX_LOG_BODY) {
+          aborted = true;
+          res.statusCode = 413;
+          res.end();
+          req.destroy();
+        }
+      });
+      req.on("end", () => {
+        if (aborted) return;
+        try {
+          const parsed: unknown = JSON.parse(body);
+          const batch = (parsed as { batch?: unknown }).batch;
+          const candidates: unknown[] = Array.isArray(batch) ? batch : [parsed];
+          const entries = candidates.filter(
+            (entry): entry is BrowserLogEntry =>
+              typeof (entry as BrowserLogEntry)?.message === "string",
+          );
+          if (entries.length > 0) onBrowserLogs(entries);
+        } catch {
+          // Ignore malformed log payloads
+        }
+        res.statusCode = 204;
+        res.end();
+      });
+      return;
+    }
+
     // Handle CORS preflight
     if (req.method === "OPTIONS") {
       res.setHeader("Access-Control-Allow-Origin", "*");