parse-dashboard-analytics 7.4.1 → 7.4.4

package/Parse-Dashboard/browser-control/BrowserEventStream.js

@@ -0,0 +1,294 @@
+const WebSocket = require('ws');
+
+/**
+ * BrowserEventStream
+ *
+ * WebSocket server for streaming real-time browser events to AI agents.
+ * Broadcasts console logs, network activity, navigation events, and errors.
+ *
+ * Features:
+ * - Real-time event streaming via WebSocket
+ * - Per-session event filtering
+ * - Automatic cleanup on disconnect
+ * - Support for multiple clients per session
+ */
+class BrowserEventStream {
+  /**
+   * @param {http.Server} httpServer - HTTP server to attach WebSocket to
+   * @param {BrowserSessionManager} sessionManager - Session manager instance
+   */
+  constructor(httpServer, sessionManager) {
+    this.sessionManager = sessionManager;
+    this.clients = new Map(); // sessionId -> Set of WebSocket clients
+
+    // Create WebSocket server without path (we'll handle routing manually)
+    this.wss = new WebSocket.Server({
+      noServer: true,
+      clientTracking: true
+    });
+
+    // Handle WebSocket upgrade requests manually to support dynamic paths
+    // Path pattern: /browser-control/stream/:sessionId
+    httpServer.on('upgrade', (request, socket, head) => {
+      const pathname = new URL(request.url, 'http://localhost').pathname;
+
+      // Check if this is a browser-control stream request
+      if (pathname.startsWith('/browser-control/stream/')) {
+        this.wss.handleUpgrade(request, socket, head, (ws) => {
+          this.wss.emit('connection', ws, request);
+        });
+      }
+      // Let other upgrade requests pass through (don't destroy socket)
+    });
+
+    // Handle new WebSocket connections
+    this.wss.on('connection', (ws, req) => {
+      this.handleConnection(ws, req);
+    });
+
+    // Listen to session manager events
+    this.attachSessionListeners();
+
+    console.log('Browser Event Stream WebSocket server initialized');
+  }
+
+  /**
+   * Handle new WebSocket connection
+   * @private
+   */
+  handleConnection(ws, req) {
+    // Extract session ID from URL path
+    // Expected format: /browser-control/stream/sess_abc123
+    const sessionId = this.extractSessionId(req.url);
+
+    if (!sessionId) {
+      ws.close(1008, 'Session ID required in URL path: /browser-control/stream/:sessionId');
+      return;
+    }
+
+    // Validate session exists
+    if (!this.sessionManager.hasSession(sessionId)) {
+      ws.close(1008, `Invalid session ID: ${sessionId}`);
+      return;
+    }
+
+    // Track client for this session
+    if (!this.clients.has(sessionId)) {
+      this.clients.set(sessionId, new Set());
+    }
+    this.clients.get(sessionId).add(ws);
+
+    console.log(`Client connected to session ${sessionId} stream`);
+
+    // Send welcome message
+    this.sendToClient(ws, {
+      type: 'connected',
+      sessionId,
+      timestamp: Date.now(),
+      message: 'Connected to browser event stream'
+    });
+
+    // Handle client messages (optional commands)
+    ws.on('message', (data) => {
+      this.handleClientMessage(ws, sessionId, data);
+    });
+
+    // Handle disconnect
+    ws.on('close', () => {
+      const clients = this.clients.get(sessionId);
+      if (clients) {
+        clients.delete(ws);
+        if (clients.size === 0) {
+          this.clients.delete(sessionId);
+        }
+      }
+      console.log(`Client disconnected from session ${sessionId} stream`);
+    });
+
+    // Handle errors
+    ws.on('error', (error) => {
+      console.error(`WebSocket error for session ${sessionId}:`, error.message);
+    });
+  }
+
+  /**
+   * Extract session ID from WebSocket URL
+   * @private
+   */
+  extractSessionId(url) {
+    // URL format: /browser-control/stream/sess_abc123?query=params
+    const match = url.match(/\/browser-control\/stream\/([^?]+)/);
+    return match ? match[1] : null;
+  }
+
+  /**
+   * Handle messages from clients
+   * @private
+   */
+  handleClientMessage(ws, sessionId, data) {
+    try {
+      const message = JSON.parse(data.toString());
+
+      // Optional: Support simple commands via WebSocket
+      if (message.action === 'ping') {
+        this.sendToClient(ws, {
+          type: 'pong',
+          timestamp: Date.now()
+        });
+      }
+    } catch (error) {
+      console.error('Failed to parse client message:', error.message);
+    }
+  }
+
+  /**
+   * Attach listeners to session manager events
+   * @private
+   */
+  attachSessionListeners() {
+    // Console messages
+    this.sessionManager.on('console', (sessionId, data) => {
+      this.broadcast(sessionId, {
+        type: 'console',
+        level: data.level,
+        text: data.text,
+        timestamp: data.timestamp
+      });
+    });
+
+    // Page errors
+    this.sessionManager.on('error', (sessionId, data) => {
+      this.broadcast(sessionId, {
+        type: 'error',
+        message: data.message,
+        stack: data.stack,
+        timestamp: data.timestamp
+      });
+    });
+
+    // Network requests
+    this.sessionManager.on('network', (sessionId, data) => {
+      this.broadcast(sessionId, {
+        type: 'network',
+        method: data.method,
+        url: data.url,
+        status: data.status,
+        timestamp: data.timestamp
+      });
+    });
+
+    // Page navigation
+    this.sessionManager.on('navigation', (sessionId, data) => {
+      this.broadcast(sessionId, {
+        type: 'navigation',
+        url: data.url,
+        timestamp: data.timestamp
+      });
+    });
+
+    // Session events
+    this.sessionManager.on('session-created', ({ sessionId }) => {
+      this.broadcast(sessionId, {
+        type: 'session-event',
+        event: 'created',
+        sessionId,
+        timestamp: Date.now()
+      });
+    });
+
+    this.sessionManager.on('session-cleaned', ({ sessionId }) => {
+      this.broadcast(sessionId, {
+        type: 'session-event',
+        event: 'cleaned',
+        sessionId,
+        timestamp: Date.now()
+      });
+
+      // Close all client connections for this session
+      const clients = this.clients.get(sessionId);
+      if (clients) {
+        clients.forEach(ws => {
+          ws.close(1000, 'Session closed');
+        });
+        this.clients.delete(sessionId);
+      }
+    });
+
+    this.sessionManager.on('session-crashed', ({ sessionId }) => {
+      this.broadcast(sessionId, {
+        type: 'session-event',
+        event: 'crashed',
+        sessionId,
+        timestamp: Date.now()
+      });
+    });
+  }
+
+  /**
+   * Broadcast a message to all clients watching a session
+   * @param {string} sessionId - Session ID
+   * @param {Object} message - Message to broadcast
+   */
+  broadcast(sessionId, message) {
+    const clients = this.clients.get(sessionId);
+    if (!clients || clients.size === 0) {
+      return;
+    }
+
+    const payload = JSON.stringify(message);
+
+    clients.forEach(client => {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(payload);
+      }
+    });
+  }
+
+  /**
+   * Send a message to a specific client
+   * @private
+   */
+  sendToClient(ws, message) {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(message));
+    }
+  }
+
+  /**
+   * Get count of active connections per session
+   * @returns {Map} - sessionId -> client count
+   */
+  getConnectionCounts() {
+    const counts = new Map();
+    for (const [sessionId, clients] of this.clients.entries()) {
+      counts.set(sessionId, clients.size);
+    }
+    return counts;
+  }
+
+  /**
+   * Close all WebSocket connections
+   */
+  closeAll() {
+    this.wss.clients.forEach(client => {
+      client.close(1000, 'Server shutting down');
+    });
+    this.clients.clear();
+  }
+
+  /**
+   * Shutdown the WebSocket server
+   * @returns {Promise<void>}
+   */
+  async shutdown() {
+    return new Promise((resolve) => {
+      this.closeAll();
+      this.wss.close(() => {
+        console.log('Browser Event Stream shut down');
+        resolve();
+      });
+    });
+  }
+}
+
+module.exports = BrowserEventStream;

package/Parse-Dashboard/browser-control/BrowserSessionManager.js

@@ -0,0 +1,304 @@
+const EventEmitter = require('events');
+const puppeteer = require('puppeteer');
+
+/**
+ * BrowserSessionManager
+ *
+ * Manages persistent Puppeteer browser instances for AI agent verification.
+ * Each session represents an isolated browser with its own page and event listeners.
+ *
+ * Features:
+ * - Create/manage multiple browser sessions
+ * - Track session activity with automatic timeout
+ * - Capture console logs, errors, and network events
+ * - Handle browser crashes with recovery logic
+ */
+class BrowserSessionManager extends EventEmitter {
+  constructor(options = {}) {
+    super();
+    this.sessions = new Map(); // sessionId -> { browser, page, metadata }
+    this.sessionTimeout = options.sessionTimeout || 30 * 60 * 1000; // 30 minutes default
+    this.maxSessions = options.maxSessions || 5;
+
+    // Start cleanup interval to remove inactive sessions
+    this.cleanupInterval = setInterval(() => {
+      this.cleanupInactiveSessions();
+    }, 60000); // Check every minute
+  }
+
+  /**
+   * Create a new browser session
+   * @param {Object} options - Configuration options
+   * @param {boolean} options.headless - Run in headless mode (default: true)
+   * @param {number} options.width - Browser width (default: 1280)
+   * @param {number} options.height - Browser height (default: 720)
+   * @param {number} options.slowMo - Slow down operations by N milliseconds
+   * @returns {Promise<Object>} - { sessionId, page, browser }
+   */
+  async createSession(options = {}) {
+    // Check session limit
+    if (this.sessions.size >= this.maxSessions) {
+      throw new Error(`Maximum number of sessions (${this.maxSessions}) reached`);
+    }
+
+    const headless = options.headless ?? (process.env.BROWSER_HEADLESS !== 'false');
+    const slowMo = options.slowMo || parseInt(process.env.BROWSER_SLOW_MO) || 0;
+
+    try {
+      // Launch Puppeteer browser
+      const browser = await puppeteer.launch({
+        headless: headless ? 'new' : false,
+        args: [
+          '--no-sandbox',
+          '--disable-setuid-sandbox',
+          '--disable-dev-shm-usage'
+        ],
+        defaultViewport: {
+          width: options.width || 1280,
+          height: options.height || 720
+        },
+        slowMo
+      });
+
+      // Create new page
+      const page = await browser.newPage();
+
+      // Generate unique session ID
+      const sessionId = `sess_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+      // Set up event listeners
+      this.attachPageListeners(sessionId, page);
+
+      // Handle browser disconnect/crash
+      browser.on('disconnected', () => {
+        this.handleBrowserCrash(sessionId);
+      });
+
+      // Store session
+      const sessionData = {
+        browser,
+        page,
+        createdAt: Date.now(),
+        lastActivity: Date.now(),
+        options,
+        crashed: false
+      };
+      this.sessions.set(sessionId, sessionData);
+
+      this.emit('session-created', { sessionId, options });
+
+      return { sessionId, page, browser };
+    } catch (error) {
+      throw new Error(`Failed to create browser session: ${error.message}`);
+    }
+  }
+
+  /**
+   * Attach event listeners to page for logging and debugging
+   * @private
+   */
+  attachPageListeners(sessionId, page) {
+    // Console messages
+    page.on('console', msg => {
+      const data = {
+        level: msg.type(),
+        text: msg.text(),
+        timestamp: Date.now()
+      };
+      this.emit('console', sessionId, data);
+    });
+
+    // Page errors
+    page.on('pageerror', error => {
+      const data = {
+        message: error.message,
+        stack: error.stack,
+        timestamp: Date.now()
+      };
+      this.emit('error', sessionId, data);
+    });
+
+    // Network requests
+    page.on('requestfinished', request => {
+      const response = request.response();
+      if (response) {
+        const data = {
+          method: request.method(),
+          url: request.url(),
+          status: response.status(),
+          timestamp: Date.now()
+        };
+        this.emit('network', sessionId, data);
+      }
+    });
+
+    // Page navigation
+    page.on('framenavigated', frame => {
+      if (frame === page.mainFrame()) {
+        const data = {
+          url: frame.url(),
+          timestamp: Date.now()
+        };
+        this.emit('navigation', sessionId, data);
+      }
+    });
+  }
+
+  /**
+   * Get an existing session and update its last activity time
+   * @param {string} sessionId - The session ID
+   * @returns {Object} - Session data
+   * @throws {Error} - If session not found
+   */
+  getSession(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (!session) {
+      throw new Error(`Session ${sessionId} not found or expired`);
+    }
+    if (session.crashed) {
+      throw new Error(`Session ${sessionId} has crashed`);
+    }
+
+    // Update last activity
+    session.lastActivity = Date.now();
+    return session;
+  }
+
+  /**
+   * Get all active sessions
+   * @returns {Array} - Array of session info objects
+   */
+  getAllSessions() {
+    const sessions = [];
+    for (const [sessionId, data] of this.sessions.entries()) {
+      sessions.push({
+        sessionId,
+        createdAt: data.createdAt,
+        lastActivity: data.lastActivity,
+        uptime: Date.now() - data.createdAt,
+        crashed: data.crashed,
+        pageUrl: data.page?.url?.() || 'unknown'
+      });
+    }
+    return sessions;
+  }
+
+  /**
+   * Check if a session exists
+   * @param {string} sessionId - The session ID
+   * @returns {boolean}
+   */
+  hasSession(sessionId) {
+    return this.sessions.has(sessionId);
+  }
+
+  /**
+   * Clean up a specific session
+   * @param {string} sessionId - The session ID
+   * @returns {Promise<boolean>} - True if session was cleaned up
+   */
+  async cleanup(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (!session) {
+      return false;
+    }
+
+    try {
+      // Close page first
+      if (session.page && !session.page.isClosed()) {
+        await session.page.close();
+      }
+
+      // Close browser
+      if (session.browser && session.browser.isConnected()) {
+        await session.browser.close();
+      }
+    } catch (error) {
+      console.error(`Error cleaning up session ${sessionId}:`, error.message);
+    } finally {
+      // Remove from sessions map
+      this.sessions.delete(sessionId);
+      this.emit('session-cleaned', { sessionId });
+    }
+
+    return true;
+  }
+
+  /**
+   * Clean up all sessions
+   * @returns {Promise<void>}
+   */
+  async cleanupAll() {
+    const sessionIds = Array.from(this.sessions.keys());
+    await Promise.all(sessionIds.map(id => this.cleanup(id)));
+  }
+
+  /**
+   * Clean up inactive sessions based on timeout
+   * @private
+   */
+  cleanupInactiveSessions() {
+    const now = Date.now();
+
+    // Collect inactive session IDs first to avoid mutating this.sessions during iteration
+    const inactiveSessionIds = [];
+    for (const [sessionId, session] of this.sessions.entries()) {
+      if (now - session.lastActivity > this.sessionTimeout) {
+        inactiveSessionIds.push(sessionId);
+      }
+    }
+
+    // Clean up collected sessions outside the iteration
+    if (inactiveSessionIds.length > 0) {
+      console.log(`Cleaning up ${inactiveSessionIds.length} inactive session(s)`);
+
+      Promise.allSettled(
+        inactiveSessionIds.map(sessionId => this.cleanup(sessionId))
+      ).then(results => {
+        results.forEach((result, index) => {
+          if (result.status === 'rejected') {
+            console.error(`Failed to cleanup session ${inactiveSessionIds[index]}:`, result.reason);
+          }
+        });
+      });
+    }
+  }
+
+  /**
+   * Handle browser crash
+   * @private
+   */
+  handleBrowserCrash(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (session) {
+      session.crashed = true;
+      this.emit('session-crashed', { sessionId });
+      console.error(`Browser session ${sessionId} crashed`);
+
+      // Clean up after a short delay
+      setTimeout(() => {
+        this.cleanup(sessionId).catch(err => {
+          console.error(`Failed to cleanup crashed session ${sessionId}:`, err);
+        });
+      }, 5000);
+    }
+  }
+
+  /**
+   * Shutdown the session manager and clean up all sessions
+   * @returns {Promise<void>}
+   */
+  async shutdown() {
+    // Stop cleanup interval
+    if (this.cleanupInterval) {
+      clearInterval(this.cleanupInterval);
+    }
+
+    // Clean up all sessions
+    await this.cleanupAll();
+
+    this.emit('shutdown');
+  }
+}
+
+module.exports = BrowserSessionManager;