@graphty/remote-logger 1.2.3 → 1.3.0

package/src/bundle/browser-entry.ts

@@ -0,0 +1,157 @@
+/**
+ * Browser bundle entry point for the remote logger.
+ *
+ * When loaded as a script tag, this auto-initializes a RemoteLogClient
+ * that intercepts console methods and forwards them to the server.
+ *
+ * Server URL detection priority:
+ *   1. window.__REMOTE_LOG_SERVER_URL__ (injected by server when serving this file)
+ *   2. document.currentScript.src (parse origin from script tag URL)
+ *   3. window.location.origin (fallback)
+ *
+ * Exposes window.__remoteLogger__ for manual control.
+ * @module bundle/browser-entry
+ */
+
+import { RemoteLogClient } from "../client/RemoteLogClient.js";
+import { ConsoleCaptureUI } from "../ui/ConsoleCaptureUI.js";
+
+declare global {
+    interface Window {
+        __REMOTE_LOG_SERVER_URL__?: string;
+        __remoteLogger__?: RemoteLoggerGlobal;
+    }
+}
+
+type ConsoleMethod = "log" | "warn" | "error" | "info" | "debug";
+
+const CONSOLE_LEVEL_MAP: Record<ConsoleMethod, string> = {
+    log: "LOG",
+    warn: "WARN",
+    error: "ERROR",
+    info: "INFO",
+    debug: "DEBUG",
+};
+
+const INTERCEPTED_METHODS: ConsoleMethod[] = ["log", "warn", "error", "info", "debug"];
+
+export interface RemoteLoggerGlobal {
+    client: RemoteLogClient;
+    ui?: ConsoleCaptureUI;
+    destroy: () => void;
+}
+
+function detectServerUrl(): string | undefined {
+    if (typeof window !== "undefined" && window.__REMOTE_LOG_SERVER_URL__) {
+        return window.__REMOTE_LOG_SERVER_URL__;
+    }
+
+    if (typeof document !== "undefined" && document.currentScript) {
+        try {
+            const scriptUrl = new URL((document.currentScript as HTMLScriptElement).src);
+            return scriptUrl.origin;
+        } catch {
+            // Invalid URL, fall through
+        }
+    }
+
+    if (typeof window !== "undefined" && window.location) {
+        return window.location.origin;
+    }
+
+    return undefined;
+}
+
+function shouldShowUI(): boolean {
+    if (typeof document === "undefined" || !document.currentScript) {
+        return false;
+    }
+
+    try {
+        const {src} = (document.currentScript as HTMLScriptElement);
+        if (!src) {return false;}
+        const params = new URL(src).searchParams;
+        return params.get("ui") === "true";
+    } catch {
+        return false;
+    }
+}
+
+function formatArg(arg: unknown): string {
+    if (typeof arg === "string") {return arg;}
+    if (arg instanceof Error) {return `${arg.name}: ${arg.message}`;}
+    try {
+        return JSON.stringify(arg);
+    } catch {
+        return String(arg);
+    }
+}
+
+function formatArgs(args: unknown[]): string {
+    return args.map(formatArg).join(" ");
+}
+
+/**
+ * Initialize the remote logger, intercepting console methods.
+ * @returns The remote logger global object, or undefined if no server URL detected
+ */
+export function initRemoteLogger(): RemoteLoggerGlobal | undefined {
+    const serverUrl = detectServerUrl();
+    if (!serverUrl) {
+        console.warn("[RemoteLogger] Could not detect server URL. Set window.__REMOTE_LOG_SERVER_URL__ before loading.");
+        return undefined;
+    }
+
+    const client = new RemoteLogClient({
+        serverUrl,
+        sessionPrefix: "remote",
+        batchIntervalMs: 500,
+    });
+
+    const originalMethods: Record<ConsoleMethod, typeof console.log> = {} as Record<ConsoleMethod, typeof console.log>;
+
+    for (const method of INTERCEPTED_METHODS) {
+        // eslint-disable-next-line no-console
+        originalMethods[method] = console[method];
+
+        // eslint-disable-next-line no-console
+        console[method] = (...args: unknown[]) => {
+            originalMethods[method].apply(console, args);
+            const message = formatArgs(args);
+            client.log(CONSOLE_LEVEL_MAP[method], message);
+        };
+    }
+
+    let ui: ConsoleCaptureUI | undefined;
+    if (shouldShowUI()) {
+        ui = new ConsoleCaptureUI();
+    }
+
+    const destroy = (): void => {
+        for (const method of INTERCEPTED_METHODS) {
+            // eslint-disable-next-line no-console
+            console[method] = originalMethods[method];
+        }
+        void client.close();
+        if (ui) {
+            ui.destroy();
+        }
+        if (typeof window !== "undefined") {
+            delete window.__remoteLogger__;
+        }
+    };
+
+    const global: RemoteLoggerGlobal = { client, ui, destroy };
+
+    if (typeof window !== "undefined") {
+        window.__remoteLogger__ = global;
+    }
+
+    return global;
+}
+
+// Auto-initialize on load
+initRemoteLogger();
+
+// Re-export for manual use via the IIFE global
+export { ConsoleCaptureUI,RemoteLogClient };

package/src/mcp/mcp-server.ts

@@ -108,7 +108,29 @@ logger.interceptConsole();
 logger.log("INFO", "Hello from browser!");
 \`\`\`
 
-### Option 2: Raw fetch() calls
+### Option 2: Script tag (zero install)
+
+The server serves a browser-ready script that auto-configures itself.
+Get the script URL from logs_status - look for server.scriptUrl in the response.
+
+Add to HTML:
+\`\`\`html
+<script src="http://localhost:9080/remote-logger.js"></script>
+\`\`\`
+
+Or paste in browser console:
+\`\`\`javascript
+var s=document.createElement('script');s.src='http://localhost:9080/remote-logger.js';document.head.appendChild(s);
+\`\`\`
+
+The script automatically:
+- Intercepts all console.log/warn/error/info/debug calls
+- Sends them to the server it was loaded from (zero config)
+- Exposes window.__remoteLogger__ for manual control (e.g., window.__remoteLogger__.destroy())
+
+Add ?ui=true to the script URL to show a floating console capture widget.
+
+### Option 3: Raw fetch() calls
 
 \`\`\`typescript
 fetch("http://localhost:9080/log", {
@@ -123,6 +145,28 @@ fetch("http://localhost:9080/log", {
 });
 \`\`\`
 
+## Debugging Third-Party Websites
+
+The server includes a reverse proxy that injects the remote logger into any website.
+Get the proxy base URL from logs_status - look for server.proxyBaseUrl.
+
+To debug a third-party site, prepend the proxy base URL to the target URL:
+  {proxyBaseUrl}https://example.com/page
+
+Example: http://192.168.1.x:9080/proxy/https://example.com
+
+The proxy automatically:
+- Injects the remote-logger script into HTML responses
+- Strips Content-Security-Policy headers that would block the script
+- Forwards cookies, auth headers, and other request data
+- Passes non-HTML resources (CSS, JS, images) through unmodified
+
+Limitations:
+- Resources using absolute paths (e.g., /fonts/..., /media/...) bypass the base tag and return 404
+- JavaScript fetch() calls using absolute paths may bypass the proxy
+- OAuth redirect flows that check the origin domain will not work
+- WebSocket connections are not proxied (future enhancement)
+
 ## Querying Logs (MCP Tools)
 
 Once browser logs are flowing to the server:
@@ -138,8 +182,9 @@ Once browser logs are flowing to the server:
 
 ## Typical Debugging Workflow
 
-1. Call logs_status to verify server is running and get the endpoint URL
-2. Ensure the browser app is configured to send logs to that endpoint
+1. Call logs_status to verify server is running and get the endpoint URL, script URL, and proxy URL
+2. Add logging to the browser app using one of the options above (script tag is simplest)
+   - For third-party sites, use the proxy: navigate to {proxyBaseUrl}https://target-site.com
 3. Trigger the action in the browser you want to debug
 4. Call logs_get_recent to see what happened
 5. Use logs_search if looking for specific errors or messages`;

package/src/mcp/tools/logs-status.ts

@@ -61,9 +61,12 @@ export const logsStatusTool = {
     description:
         "Get the status of the remote log server. " +
         "Returns health metrics (uptime, session count, log count, memory usage), " +
-        "HTTP endpoint configuration (port, host, URL for browser clients), " +
+        "HTTP endpoint configuration (port, host, URL for browser clients, script URL for zero-config injection, " +
+        "proxy base URL for debugging third-party sites), " +
         "and retention settings (how long logs are kept before automatic cleanup). " +
         "Use this to verify the server is running, find the endpoint URL for configuring browser clients, " +
+        "get the script URL (server.scriptUrl) for injecting via a script tag, " +
+        "get the proxy URL (server.proxyBaseUrl) for debugging third-party sites, " +
         "or check server configuration.",
     inputSchema: logsStatusInputSchema,
 };

package/src/server/dual-server.ts

@@ -17,8 +17,9 @@ import * as path from "path";
 
 import { createMcpServer } from "../mcp/mcp-server.js";
 import { JsonlWriter } from "./jsonl-writer.js";
-import { createLogServer } from "./log-server.js";
+import { createLogServer, setProxy } from "./log-server.js";
 import { LogStorage, type ServerMode } from "./log-storage.js";
+import { createProxy, type ProxyInstance } from "./proxy.js";
 import { certFilesExist } from "./self-signed-cert.js";
 
 // ANSI color codes for terminal output
@@ -291,6 +292,7 @@ export async function createDualServer(options: DualServerOptions = {}): Promise
     let httpServer: http.Server | https.Server | undefined;
     let mcpServer: McpServer | undefined;
     let actualHttpPort: number | undefined;
+    let proxyInstance: ProxyInstance | undefined;
 
     // Track active connections for graceful shutdown
     const activeConnections = new Set<net.Socket>();
@@ -332,9 +334,8 @@ export async function createDualServer(options: DualServerOptions = {}): Promise
             });
         });
 
-        // Set short keep-alive timeout for tests (connections close faster)
-        httpServer.keepAliveTimeout = 1000;
-        httpServer.headersTimeout = 2000;
+        httpServer.keepAliveTimeout = 30000;
+        httpServer.headersTimeout = 35000;
 
         // Set server config in storage so MCP tools can report it
         // Determine protocol based on whether valid cert files were provided
@@ -366,13 +367,22 @@ export async function createDualServer(options: DualServerOptions = {}): Promise
                 }
             }
         }
+        const scriptUrl = `${protocol}://${endpointHost}:${actualHttpPort}/remote-logger.js`;
+        const proxyBaseUrl = `/proxy/`;
+
         storage.setServerConfig({
             httpPort: actualHttpPort,
             httpHost,
             protocol,
             httpEndpoint: `${protocol}://${endpointHost}:${actualHttpPort}/log`,
+            scriptUrl,
+            proxyBaseUrl: `${protocol}://${endpointHost}:${actualHttpPort}${proxyBaseUrl}`,
             mode,
         });
+
+        // Create and register the proxy instance
+        proxyInstance = createProxy(proxyBaseUrl, quiet);
+        setProxy(proxyInstance);
     }
 
     // Create and connect MCP server if enabled
@@ -400,6 +410,11 @@ export async function createDualServer(options: DualServerOptions = {}): Promise
             });
         }
 
+        // Close proxy
+        if (proxyInstance) {
+            proxyInstance.close();
+        }
+
         // Close JSONL writer only if we created it internally
         if (ownsJsonlWriter) {
             await jsonlWriter.close();

package/src/server/log-server.ts

@@ -18,10 +18,11 @@ import * as http from "http";
 import * as https from "https";
 import * as os from "os";
 import * as path from "path";
-import { URL } from "url";
+import { fileURLToPath,URL } from "url";
 
 import { JsonlWriter } from "./jsonl-writer.js";
 import { type LogEntry, LogStorage } from "./log-storage.js";
+import type { ProxyInstance } from "./proxy.js";
 import { certFilesExist, readCertFiles } from "./self-signed-cert.js";
 
 // Shared log storage instance
@@ -62,6 +63,55 @@ export function setLogStorage(storage: LogStorage): void {
     sharedStorage = storage;
 }
 
+// Shared proxy instance
+let sharedProxy: ProxyInstance | null = null;
+
+/**
+ * Set the shared proxy instance.
+ * @param proxy - The proxy instance to use
+ */
+export function setProxy(proxy: ProxyInstance): void {
+    sharedProxy = proxy;
+}
+
+
+// Browser bundle cache (loaded on first request)
+let browserBundleCache: string | null | undefined;
+
+function loadBrowserBundle(): string | null {
+    if (browserBundleCache !== undefined) {
+        return browserBundleCache;
+    }
+
+    const thisDir = path.dirname(fileURLToPath(import.meta.url));
+
+    // Try multiple locations: dist/ (when running from built output)
+    // and the package root dist/ (when running from source during tests)
+    const candidates = [
+        path.resolve(thisDir, "..", "remote-logger.browser.js"),
+        path.resolve(thisDir, "..", "..", "dist", "remote-logger.browser.js"),
+    ];
+
+    for (const candidate of candidates) {
+        try {
+            browserBundleCache = fs.readFileSync(candidate, "utf-8");
+            return browserBundleCache;
+        } catch {
+            // Try next candidate
+        }
+    }
+
+    browserBundleCache = null;
+    return browserBundleCache;
+}
+
+/**
+ * Reset the browser bundle cache. Used for testing.
+ */
+export function resetBrowserBundleCache(): void {
+    browserBundleCache = undefined;
+}
+
 // ANSI color codes for terminal output
 const colors = {
     reset: "\x1b[0m",
@@ -269,7 +319,36 @@ function handleRequest(
         return;
     }
 
-    // In logReceiveOnly mode, only /log and /health are available
+    // Serve browser-ready script bundle (available in all modes including logReceiveOnly)
+    if ((url === "/remote-logger.js" || url.startsWith("/remote-logger.js?")) && req.method === "GET") {
+        const bundle = loadBrowserBundle();
+        if (!bundle) {
+            res.writeHead(404, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: "Browser bundle not found. Run 'npm run build' first." }));
+            return;
+        }
+
+        const hostHeader = req.headers.host ?? `${host}:${port}`;
+        const serverUrl = `${protocol}://${hostHeader}`;
+        const configPrefix = `window.__REMOTE_LOG_SERVER_URL__="${serverUrl}";\n`;
+
+        res.writeHead(200, {
+            "Content-Type": "application/javascript",
+            "Cache-Control": "no-cache",
+        });
+        res.end(configPrefix + bundle);
+        return;
+    }
+
+    // Reverse proxy with auto-injection (available in all modes including logReceiveOnly)
+    if (url.startsWith("/proxy/") && sharedProxy) {
+        const targetUrl = decodeURIComponent(url.substring("/proxy/".length));
+        const hostHeader = req.headers.host ?? `${host}:${port}`;
+        sharedProxy.handleRequest(req, res, targetUrl, protocol, hostHeader);
+        return;
+    }
+
+    // In logReceiveOnly mode, only /log, /health, /remote-logger.js, and /proxy/ are available
     if (logReceiveOnly) {
         res.writeHead(404, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ error: "Not found (log receive only mode)" }));
@@ -377,17 +456,21 @@ function printBanner(host: string, port: number, useHttps: boolean): void {
     // eslint-disable-next-line no-console
     console.log(`${colors.yellow}API Endpoints:${colors.reset}`);
     // eslint-disable-next-line no-console
-    console.log(`  ${colors.cyan}POST /log         ${colors.reset} - Receive logs from browser`);
+    console.log(`  ${colors.cyan}POST /log              ${colors.reset} - Receive logs from browser`);
+    // eslint-disable-next-line no-console
+    console.log(`  ${colors.cyan}GET  /remote-logger.js ${colors.reset} - Browser-ready auto-config script`);
+    // eslint-disable-next-line no-console
+    console.log(`  ${colors.cyan}*    /proxy/<url>      ${colors.reset} - Reverse proxy with script injection`);
     // eslint-disable-next-line no-console
-    console.log(`  ${colors.cyan}GET  /logs        ${colors.reset} - Get all logs as JSON`);
+    console.log(`  ${colors.cyan}GET  /logs             ${colors.reset} - Get all logs as JSON`);
     // eslint-disable-next-line no-console
-    console.log(`  ${colors.cyan}GET  /logs/recent ${colors.reset} - Get last 50 logs (?n=100 for more)`);
+    console.log(`  ${colors.cyan}GET  /logs/recent      ${colors.reset} - Get last 50 logs (?n=100 for more)`);
     // eslint-disable-next-line no-console
-    console.log(`  ${colors.cyan}GET  /logs/errors ${colors.reset} - Get only error logs`);
+    console.log(`  ${colors.cyan}GET  /logs/errors      ${colors.reset} - Get only error logs`);
     // eslint-disable-next-line no-console
-    console.log(`  ${colors.cyan}POST /logs/clear  ${colors.reset} - Clear all logs`);
+    console.log(`  ${colors.cyan}POST /logs/clear       ${colors.reset} - Clear all logs`);
     // eslint-disable-next-line no-console
-    console.log(`  ${colors.cyan}GET  /health      ${colors.reset} - Health check`);
+    console.log(`  ${colors.cyan}GET  /health           ${colors.reset} - Health check`);
     // eslint-disable-next-line no-console
     console.log("");
     // eslint-disable-next-line no-console

package/src/server/log-storage.ts

@@ -141,6 +141,10 @@ export interface ServerConfig {
     protocol: "http" | "https";
     /** Full URL for browser clients to send logs to */
     httpEndpoint: string;
+    /** URL to the browser-ready auto-config script */
+    scriptUrl?: string;
+    /** Base URL for the reverse proxy (e.g., "http://host:port/proxy/") */
+    proxyBaseUrl?: string;
     /** Server mode (mcp-only, http-only, or dual) */
     mode: ServerMode;
 }