@romanmatena/browsermonitor 2.0.0

package/src/monitor/page-monitoring.mjs

@@ -0,0 +1,199 @@
+/**
+ * Shared page monitoring: console, network (request/response) listeners.
+ * Used by both connect-mode and launch-mode.
+ */
+
+import { getTimestamp, getFullTimestamp } from '../logging/index.mjs';
+
+/** Non-fatal: navigation destroyed the context; we skip logging instead of crashing. */
+function isContextDestroyedError(e) {
+  const msg = (e && e.message) || String(e);
+  return /Execution context was destroyed|Target closed|Protocol error/.test(msg);
+}
+
+/**
+ * Attach console and network monitoring to a page.
+ * @param {import('puppeteer').Page} targetPage
+ * @param {Object} context
+ * @param {import('../logging.mjs').LogBuffer} context.logBuffer
+ * @param {() => boolean} context.getCollectingPaused
+ * @param {(fn: () => void) => void} context.setActivePageCleanup - setter for cleanup callback
+ * @param {string} [context.pageLabel] - optional label for multi-tab (e.g. "[tab 2] ")
+ */
+export function setupPageMonitoring(targetPage, context) {
+  const { logBuffer, getCollectingPaused, setActivePageCleanup, pageLabel = '' } = context;
+
+  const requestData = new Map();
+
+  const onConsole = async (msg) => {
+    try {
+      if (getCollectingPaused()) return;
+      const type = msg.type();
+      const timestamp = getTimestamp();
+
+      if (type === 'clear') {
+        logBuffer.clearConsoleBuffer();
+        logBuffer.printConsoleSeparator(pageLabel ? 'CONSOLE CLEARED' : 'CONSOLE CLEARED - Output reset');
+        return;
+      }
+
+      let text;
+      try {
+        const args = msg.args();
+        const serialized = await Promise.all(
+          args.map(async (arg) => {
+            try {
+              const val = await arg.jsonValue();
+              if (typeof val === 'object' && val !== null) return JSON.stringify(val);
+              return String(val);
+            } catch {
+              return arg.toString();
+            }
+          })
+        );
+        text = serialized.join(' ');
+      } catch {
+        text = msg.text();
+      }
+
+      if (logBuffer.shouldIgnore(text)) return;
+      if (logBuffer.isHmr(text)) {
+        logBuffer.printConsoleSeparator('HMR UPDATE - Code change detected');
+      }
+      const typeStr = type.toUpperCase().padEnd(7);
+      logBuffer.logConsole(`[${timestamp}] ${pageLabel}${typeStr} ${text}`);
+    } catch (e) {
+      if (isContextDestroyedError(e)) return;
+      throw e;
+    }
+  };
+
+  const onPageError = (error) => {
+    try {
+      if (getCollectingPaused()) return;
+      logBuffer.logConsole(`[${getTimestamp()}] ${pageLabel}[PAGE ERROR] ${error.message}`);
+    } catch (e) {
+      if (isContextDestroyedError(e)) return;
+      throw e;
+    }
+  };
+
+  const onRequest = (request) => {
+    try {
+      if (getCollectingPaused()) return;
+      const reqUrl = request.url();
+      const method = request.method();
+      const resourceType = request.resourceType();
+      const timestamp = getFullTimestamp();
+      const id = logBuffer.nextRequestId();
+      let postData = null;
+      try {
+        postData = request.postData();
+      } catch (e) {}
+      requestData.set(request, { id, startTime: Date.now(), method, resourceType });
+      logBuffer.saveRequestDetail(id, {
+        id, timestamp, method, resourceType, url: reqUrl,
+        request: { headers: request.headers(), postData },
+      });
+      logBuffer.logNetwork(`[${timestamp}] --> ${id} ${method} ${resourceType.toUpperCase().padEnd(10)} ${reqUrl}`);
+    } catch (e) {
+      if (isContextDestroyedError(e)) return;
+      throw e;
+    }
+  };
+
+  const onResponse = async (response) => {
+    try {
+      if (getCollectingPaused()) return;
+      const respUrl = response.url();
+      const status = response.status();
+      const timestamp = getFullTimestamp();
+      const req = response.request();
+      const data = req ? requestData.get(req) : null;
+      let duration = '';
+      let id = '?????';
+      if (data) {
+        const ms = Date.now() - data.startTime;
+        duration = ` (${ms}ms)`;
+        id = data.id;
+        requestData.delete(req);
+        const responseHeaders = response.headers();
+        let responseBody = null;
+        const contentType = responseHeaders['content-type'] || '';
+        const isTextBased =
+          contentType.includes('json') || contentType.includes('text') ||
+          contentType.includes('javascript') || contentType.includes('xml');
+        if (isTextBased) {
+          try {
+            responseBody = await response.text();
+            if (responseBody.length > 100000) {
+              responseBody = responseBody.substring(0, 100000) + '\n... [TRUNCATED]';
+            }
+          } catch (e) {
+            responseBody = `[Error reading body: ${e.message}]`;
+          }
+        } else {
+          responseBody = `[Binary content: ${contentType}]`;
+        }
+        logBuffer.updateRequestDetail(id, {
+          response: {
+            status,
+            statusText: response.statusText(),
+            headers: responseHeaders,
+            body: responseBody,
+            duration: ms,
+          },
+        });
+      }
+      logBuffer.logNetwork(`[${timestamp}] <-- ${id} ${status.toString().padStart(3)} ${respUrl}${duration}`);
+    } catch (e) {
+      if (isContextDestroyedError(e)) return;
+      throw e;
+    }
+  };
+
+  const onRequestFailed = (request) => {
+    try {
+      if (getCollectingPaused()) return;
+      const reqUrl = request.url();
+      const timestamp = getFullTimestamp();
+      const failure = request.failure();
+      const data = requestData.get(request);
+      let duration = '';
+      let id = '?????';
+      if (data) {
+        const ms = Date.now() - data.startTime;
+        duration = ` (${ms}ms)`;
+        id = data.id;
+        requestData.delete(request);
+        logBuffer.updateRequestDetail(id, { failed: { errorText: failure?.errorText, duration: ms } });
+      }
+      logBuffer.logNetwork(`[${timestamp}] [FAILED] ${id} ${reqUrl}: ${failure?.errorText}${duration}`);
+      if (!reqUrl.includes('oauth2/sign_in')) {
+        logBuffer.logConsole(`[${getTimestamp()}] [FAILED] ${reqUrl}: ${failure?.errorText}`);
+      }
+    } catch (e) {
+      if (isContextDestroyedError(e)) return;
+      throw e;
+    }
+  };
+
+  targetPage.on('console', onConsole);
+  targetPage.on('pageerror', onPageError);
+  targetPage.on('request', onRequest);
+  targetPage.on('response', onResponse);
+  targetPage.on('requestfailed', onRequestFailed);
+
+  const removeListeners = (p) => {
+    if (typeof p?.removeListener !== 'function') return;
+    p.removeListener('console', onConsole);
+    p.removeListener('pageerror', onPageError);
+    p.removeListener('request', onRequest);
+    p.removeListener('response', onResponse);
+    p.removeListener('requestfailed', onRequestFailed);
+  };
+  setActivePageCleanup(() => {
+    removeListeners(targetPage);
+    requestData.clear();
+  });
+}

package/src/monitor/tab-selection.mjs

@@ -0,0 +1,53 @@
+/**
+ * Tab selection UI: let user pick one page from a list (for connect/launch mode).
+ */
+
+import readline from 'readline';
+import { C, log } from '../utils/colors.mjs';
+
+export function ensureKeypressEvents() {
+  readline.emitKeypressEvents(process.stdin);
+  if (process.stdin.isTTY && !process.stdin.isRaw) {
+    process.stdin.setRawMode(true);
+  }
+}
+
+/**
+ * @param {import('puppeteer').Page[]} pages
+ * @returns {Promise<import('puppeteer').Page|null>}
+ */
+export function askUserToSelectPage(pages) {
+  ensureKeypressEvents();
+  console.log('');
+  pages.forEach((p, index) => {
+    const pageUrl = p.url();
+    const num = (index + 1).toString();
+    const displayUrl = pageUrl.length > 70 ? pageUrl.substring(0, 67) + '...' : pageUrl;
+    console.log(`  ${C.brightGreen}${num}${C.reset}. ${C.cyan}${displayUrl}${C.reset}`);
+  });
+  console.log('');
+  console.log(`  ${C.red}q${C.reset}. Cancel`);
+  console.log('');
+
+  return new Promise((resolve) => {
+    process.stdout.write(`${C.cyan}Select tab${C.reset} (${C.green}1-${pages.length}${C.reset}, ${C.red}q${C.reset}=cancel): `);
+    const handleKey = (str, key) => {
+      if (!key) return;
+      process.stdin.removeListener('keypress', handleKey);
+      const char = key.name || str;
+      process.stdout.write(char + '\n');
+      if (char === 'q') {
+        resolve(null);
+      } else {
+        const num = parseInt(char, 10);
+        if (num >= 1 && num <= pages.length) {
+          resolve(pages[num - 1]);
+        } else {
+          log.warn('Invalid selection');
+          resolve(null);
+        }
+      }
+    };
+    process.stdin.once('keypress', handleKey);
+  });
+}

package/src/monitor.mjs

@@ -0,0 +1,39 @@
+/**
+ * Browser Monitor - monitors browser console and network on dev server
+ *
+ * Modes:
+ * - Default (lazy): Stores logs in memory, writes to file on demand
+ *   Press 'd' to dump logs to files (auto-clears buffer after)
+ *   Press 'c' to clear memory buffer
+ *   Press 's' to show status
+ *   Press 'k' to kill Chrome and exit
+ *   Press 'q' to quit
+ * - Realtime (--realtime): Writes every event immediately to files
+ *
+ * Features:
+ * - Console output -> .browsermonitor/.puppeteer/console.log (filtered, with HMR detection)
+ * - Network requests -> .browsermonitor/.puppeteer/network-log/ directory
+ *   - .browsermonitor/.puppeteer/network.log - main log with request IDs
+ *   - {id}.json - detailed request/response for each request
+ * - DOM dump on /dump or key 'd' -> .browsermonitor/.puppeteer/dom.html (current JS-modified HTML structure)
+ * - Console clear detection (clears buffer/log file)
+ * - GUI browser mode (user can interact)
+ * - HTTP API for LLM integration (default port 60001)
+ *   - GET/POST /dump - Trigger dump of buffered logs
+ *   - GET /status - Get current buffer status
+ * - Proper cleanup on exit (SIGINT, SIGTERM, uncaughtException)
+ */
+
+// Re-export modes (implementations live in monitor/ to keep this file small)
+export { runJoinMode } from './monitor/join-mode.mjs';
+export { runOpenMode } from './monitor/open-mode.mjs';
+
+/**
+ * Run in Interactive Mode – delegates to monitor/interactive-mode.mjs with runOpenMode/runJoinMode to avoid circular deps.
+ */
+export async function runInteractiveMode(options = {}) {
+  const { runInteractiveMode: runInteractive } = await import('./monitor/interactive-mode.mjs');
+  const { runOpenMode } = await import('./monitor/open-mode.mjs');
+  const { runJoinMode } = await import('./monitor/join-mode.mjs');
+  return runInteractive(options, { runOpenMode, runJoinMode });
+}

package/src/os/README.md

@@ -0,0 +1,4 @@
+# Platform-specific code (os)
+
+- **wsl/** – WSL2 → Windows (Chrome detection, port proxy, diagnostics). Used when running from WSL and connecting to Chrome on Windows.
+- *(Later: linux, win, ssh as needed.)*