@capillarytech/cap-ui-dev-tools 1.0.0 → 1.2.0

package/src/capvision-recorder/core/CapVisionRecorder.js

@@ -0,0 +1,1338 @@
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+/**
+ * @typedef {Object} CapVisionRecorderConfig
+ * @property {boolean} [ENABLE_FEATURE] - Master feature flag - if false, recording and replay are completely disabled (default: true)
+ * @property {string[]} [enabledClusters] - Cluster/Environment filtering - only record for these clusters (empty = all)
+ * @property {string[]} [enabledModules] - Module filtering - only record for these modules (empty = all)
+ * @property {string[]} [enabledTestTypes] - Test type filtering - only record for these test types (default: ['smoke', 'sanity', 'regression'])
+ * @property {string} [capVisionScriptPath] - Path to CapVision script file
+ * @property {string} [consoleRecordPluginPath] - Path to console record plugin
+ * @property {string} [consoleReplayPluginPath] - Path to console replay plugin
+ * @property {string} [recordingsOutputDir] - Directory to save recordings
+ * @property {string} [sessionStorageKey] - Session storage key for events
+ * @property {number} [saveIntervalMs] - Auto-save interval in milliseconds
+ * @property {number} [checkoutIntervalMs] - Checkout/snapshot interval in milliseconds
+ * @property {number} [pageStabilizationDelayMs] - Delay after page navigation in milliseconds
+ * @property {number} [reinitCooldownMs] - Cooldown between re-initialization attempts in milliseconds
+ * @property {boolean} [recordCanvas] - Enable canvas recording
+ * @property {boolean} [maskAllInputs] - Mask all input fields for privacy
+ * @property {boolean} [collectFonts] - Collect custom fonts
+ * @property {boolean} [recordCrossOriginIframes] - Record cross-origin iframes
+ * @property {boolean} [useTempFile] - Use temporary file storage instead of sessionStorage
+ * @property {boolean} [recordConsole] - Enable console recording
+ * @property {Object} [consoleRecordOptions] - Console recording options
+ * @property {string[]} [consoleRecordOptions.level] - Console levels to record
+ * @property {number} [consoleRecordOptions.lengthThreshold] - Maximum log length
+ * @property {Object} [consoleRecordOptions.stringifyOptions] - Stringification options
+ * @property {number} [consoleRecordOptions.stringifyOptions.stringLengthLimit] - String length limit
+ * @property {number} [consoleRecordOptions.stringifyOptions.numOfKeysLimit] - Number of keys limit
+ * @property {string} [networkRecordPluginPath] - Path to network record plugin
+ * @property {string} [networkReplayPluginPath] - Path to network replay plugin
+ * @property {boolean} [recordNetwork] - Enable network recording
+ * @property {Object} [networkRecordOptions] - Network recording options
+ * @property {boolean} [networkRecordOptions.recordBody] - Record request/response bodies
+ * @property {boolean} [networkRecordOptions.recordHeaders] - Record request/response headers
+ * @property {boolean} [networkRecordOptions.recordInitiator] - Record stack traces
+ * @property {boolean} [networkRecordOptions.recordPerformance] - Record performance metrics
+ * @property {number} [networkRecordOptions.maxBodyLength] - Max body length before truncation
+ * @property {Function} [networkRecordOptions.ignoreRequestFn] - Filter function for requests
+ */
+
+/**
+ * Default CapVision Configuration
+ * @type {CapVisionRecorderConfig}
+ */
+const DEFAULT_CONFIG = {
+  ENABLE_FEATURE: true,
+  enabledClusters: [],
+  enabledModules: [],
+  enabledTestTypes: ['smoke', 'sanity', 'regression'],
+  
+  capVisionScriptPath: path.join(__dirname, '../assets/capvision.min.js'),
+  consoleRecordPluginPath: path.join(__dirname, '../assets/capvision-plugins/console-record.min.js'),
+  consoleReplayPluginPath: path.join(__dirname, '../assets/capvision-plugins/console-replay.min.js'),
+  networkRecordPluginPath: path.join(__dirname, '../assets/capvision-plugins/network-record.min.js'),
+  networkReplayPluginPath: path.join(__dirname, '../assets/capvision-plugins/network-replay.min.js'),
+  recordingsOutputDir: path.join(process.cwd(), 'reports', 'recordings'),
+  
+  sessionStorageKey: 'capvision_events',
+  saveIntervalMs: 60000,
+  checkoutIntervalMs: 30000,
+  pageStabilizationDelayMs: 500,
+  reinitCooldownMs: 3000,
+  recordCanvas: false,
+  maskAllInputs: true,
+  collectFonts: true,
+  recordCrossOriginIframes: false,
+  useTempFile: true,
+  
+  recordConsole: true,
+  consoleRecordOptions: {
+    level: ['log', 'info', 'warn', 'error'],
+    lengthThreshold: 10000,
+    stringifyOptions: {
+      stringLengthLimit: 10000,
+      numOfKeysLimit: 100
+    }
+  },
+  // Network recording options
+  recordNetwork: true,
+  networkRecordOptions: {
+    recordBody: true,
+    recordHeaders: true,
+    recordInitiator: true,
+    recordPerformance: true,
+    maxBodyLength: 10000,
+    ignoreRequestFn: (url, type) => {
+      // Ignore CapVision internal requests and common tracking/analytics
+      if (!url) return true;
+      if (url.includes('capvision')) return true;
+      if (url.includes('google-analytics')) return true;
+      if (url.includes('googletagmanager')) return true;
+      return false;
+    }
+  }
+};
+
+/**
+ * Browser Executor Interface - allows framework-agnostic browser execution
+ * @typedef {Object} BrowserExecutor
+ * @property {function(string|Function, ...*): Promise<*>} execute - Execute script in browser context
+ * @property {function(number): Promise<void>} pause - Pause execution for specified milliseconds
+ */
+
+/**
+ * CapVision Recorder Metadata
+ * @typedef {Object} RecordingMetadata
+ * @property {string} timestamp - ISO timestamp when recording was saved
+ * @property {number} totalEvents - Total number of events recorded
+ * @property {string} filename - Name of the saved recording file
+ */
+
+/**
+ * Framework-agnostic CapVision Recorder
+ * Works with WebdriverIO, Playwright, Puppeteer, or any browser automation tool
+ * @class
+ */
+class CapVisionRecorder {
+  /**
+   * Create a new CapVision Recorder instance
+   * @param {CapVisionRecorderConfig} [config={}] - Recorder configuration
+   */
+  constructor(config = {}) {
+    /** @type {CapVisionRecorderConfig} */
+    this.config = { ...DEFAULT_CONFIG, ...config };
+    
+    /** @type {string|null} */
+    this.tempFilePath = null;
+    
+    /** @type {NodeJS.Timeout|null} */
+    this.saveIntervalHandle = null;
+    
+    /** @type {string|null} */
+    this.currentTestType = null;
+    
+    /** @type {BrowserExecutor|null} */
+    this.browserExecutor = null;
+  }
+
+  /**
+   * Set browser executor for framework-agnostic execution
+   * @param {BrowserExecutor} executor - Browser executor instance
+   */
+  setBrowserExecutor(executor) {
+    this.browserExecutor = executor;
+  }
+
+  /**
+   * Update configuration
+   * @param {Partial<CapVisionRecorderConfig>} config - Configuration updates
+   */
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+
+  /**
+   * Get current configuration
+   * @returns {CapVisionRecorderConfig} Current configuration object
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+
+  /**
+   * Detect and set test type from test file path
+   * @param {string} testFilePath - Path to test file
+   * @returns {string|null} Detected test type or null
+   */
+  setTestTypeFromPath(testFilePath) {
+    if (!testFilePath) {
+      return null;
+    }
+
+    const match = testFilePath.match(/\/(smoke|sanity|regression)\//);
+    if (match) {
+      this.currentTestType = match[1];
+      console.log(`🟡 Detected test type from path: ${this.currentTestType}`);
+      return this.currentTestType;
+    }
+
+    console.log('🟡 Could not detect test type from path:', testFilePath);
+    return null;
+  }
+
+  /**
+   * Get the current test type
+   * @returns {string|null} Current test type or null
+   */
+  getCurrentTestType() {
+    return this.currentTestType;
+  }
+
+  /**
+   * Check if CapVision recording should be enabled for the current cluster
+   * @param {string} [currentCluster] - Override current cluster (defaults to process.env.cluster)
+   * @returns {boolean} True if enabled for cluster
+   */
+  isCapVisionEnabledForCluster(currentCluster) {
+    if (this.config.enabledClusters.length === 0) {
+      return true; // No filter means enabled for all
+    }
+
+    const cluster = currentCluster || process.env.cluster;
+    
+    if (!cluster) {
+      console.log('🟡 No cluster specified in environment, CapVision recording disabled');
+      return false;
+    }
+
+    const isEnabled = this.config.enabledClusters.includes(cluster);
+    
+    if (isEnabled) {
+      console.log(`🟢 CapVision recording enabled for cluster: ${cluster}`);
+    } else {
+      console.log(`🟡 CapVision recording disabled for cluster: ${cluster}`);
+    }
+    
+    return isEnabled;
+  }
+
+  /**
+   * Check if CapVision recording should be enabled for the current module
+   * @param {string} [currentModule] - Override current module (defaults to process.env.module)
+   * @returns {boolean} True if enabled for module
+   */
+  isCapVisionEnabledForModule(currentModule) {
+    if (this.config.enabledModules.length === 0) {
+      return true; // No filter means enabled for all
+    }
+
+    const module = currentModule || process.env.module;
+    
+    if (!module) {
+      console.log('🟡 No module specified in environment, CapVision recording disabled');
+      return false;
+    }
+
+    const isEnabled = this.config.enabledModules.includes(module);
+    
+    if (isEnabled) {
+      console.log(`🟢 CapVision recording enabled for module: ${module}`);
+    } else {
+      console.log(`🟡 CapVision recording disabled for module: ${module}`);
+    }
+    
+    return isEnabled;
+  }
+
+  /**
+   * Check if CapVision recording should be enabled for the current test type
+   * @returns {boolean} True if enabled for test type
+   */
+  isCapVisionEnabledForTestType() {
+    if (this.config.enabledTestTypes.length === 0) {
+      return true; // No filter means enabled for all
+    }
+
+    const currentTestType = this.getCurrentTestType();
+    
+    if (!currentTestType) {
+      console.log('🟡 No test type detected, CapVision recording disabled');
+      return false;
+    }
+
+    const isEnabled = this.config.enabledTestTypes.includes(currentTestType);
+    
+    if (isEnabled) {
+      console.log(`🟢 CapVision recording enabled for test type: ${currentTestType}`);
+    } else {
+      console.log(`🟡 CapVision recording disabled for test type: ${currentTestType}`);
+    }
+    
+    return isEnabled;
+  }
+
+  /**
+   * Check if CapVision recording should be enabled (checks all criteria)
+   * @param {string} [cluster] - Override cluster check
+   * @param {string} [module] - Override module check
+   * @returns {boolean} True if recording is enabled
+   */
+  isCapVisionEnabled(cluster, module) {
+    // Check master feature flag first
+    if (this.config.ENABLE_FEATURE === false) {
+      console.log('🟡 CapVision feature disabled (ENABLE_FEATURE=false)');
+      return false;
+    }
+    
+    const clusterEnabled = this.isCapVisionEnabledForCluster(cluster);
+    const moduleEnabled = this.isCapVisionEnabledForModule(module);
+    const testTypeEnabled = this.isCapVisionEnabledForTestType();
+    
+    const isEnabled = clusterEnabled && moduleEnabled && testTypeEnabled;
+    
+    if (isEnabled) {
+      console.log('🟢 CapVision recording enabled (all criteria met)');
+    } else {
+      const disabledReasons = [];
+      if (!clusterEnabled) disabledReasons.push('cluster');
+      if (!moduleEnabled) disabledReasons.push('module');
+      if (!testTypeEnabled) disabledReasons.push('test type');
+      console.log(`🟡 CapVision recording disabled (${disabledReasons.join(', ')} disabled)`);
+    }
+    
+    return isEnabled;
+  }
+
+  /**
+   * Clear all files in the recordings directory
+   */
+  clearRecordingsFolder() {
+    try {
+      const recordingsDir = this.config.recordingsOutputDir;
+      if (fs.existsSync(recordingsDir)) {
+        const files = fs.readdirSync(recordingsDir);
+        files.forEach((file) => {
+          fs.unlinkSync(path.join(recordingsDir, file));
+        });
+        console.log('🟢 Cleared recordings folder');
+      }
+    } catch (error) {
+      console.error('🔴 Failed to clear recordings folder:', error.message);
+    }
+  }
+
+  /**
+   * Save CapVision events to recordings directory
+   * @param {Array} events - Array of CapVision events
+   * @param {string} [testName='test'] - Name of the test
+   * @returns {string} Filename of saved recording
+   */
+  saveEventsToFile(events, testName = 'test') {
+    try {
+      console.log('🟡 Saving CapVision events to file...');
+
+      const recordingsDir = this.config.recordingsOutputDir;
+
+      if (!fs.existsSync(recordingsDir)) {
+        fs.mkdirSync(recordingsDir, { recursive: true });
+      }
+
+      // Sanitize test name
+      const sanitizedTestName = testName
+        .replace(/[^a-zA-Z0-9_-]/g, '_')
+        .replace(/_{2,}/g, '_')
+        .replace(/^_|_$/g, '');
+
+      // Find existing recordings for this test
+      const existingFiles = fs.readdirSync(recordingsDir);
+      const testFilePattern = new RegExp(`^${sanitizedTestName}-(\\d+)\\.json$`);
+      
+      let maxNumber = 0;
+      existingFiles.forEach((file) => {
+        const match = file.match(testFilePattern);
+        if (match) {
+          const num = parseInt(match[1], 10);
+          if (num > maxNumber) {
+            maxNumber = num;
+          }
+        }
+      });
+
+      // Generate new filename
+      const recordingNumber = maxNumber + 1;
+      const filename = `${sanitizedTestName}-${recordingNumber}.json`;
+      const filepath = path.join(recordingsDir, filename);
+
+      const eventsData = {
+        testName: testName,
+        recordingNumber: recordingNumber,
+        timestamp: new Date().toISOString(),
+        totalEvents: events.length,
+        events: events
+      };
+
+      fs.writeFileSync(filepath, JSON.stringify(eventsData, null, 2));
+      console.log(`🟢 Saved ${events.length} events to: ${filename}`);
+
+      return filename;
+
+    } catch (error) {
+      console.error('🔴 Failed to save CapVision events:', error.message);
+      throw error;
+    }
+  }
+
+  /**
+   * Create a temporary file for storing events during recording
+   * @private
+   * @returns {string} Path to temporary file
+   */
+  createTempFile() {
+    const tempDir = path.join(os.tmpdir(), 'capvision-recordings');
+    
+    if (!fs.existsSync(tempDir)) {
+      fs.mkdirSync(tempDir, { recursive: true });
+    }
+
+    const timestamp = Date.now();
+    const tempFileName = `capvision_temp_${timestamp}.json`;
+    const tempFilePath = path.join(tempDir, tempFileName);
+
+    fs.writeFileSync(tempFilePath, JSON.stringify([]), 'utf8');
+    console.log(`🟡 Created temp file: ${tempFilePath}`);
+
+    return tempFilePath;
+  }
+
+  /**
+   * Save events to temporary file
+   * @private
+   * @param {Array} events - Array of events to save
+   */
+  saveToTempFile(events) {
+    try {
+      if (this.tempFilePath) {
+        fs.writeFileSync(this.tempFilePath, JSON.stringify(events), 'utf8');
+      }
+    } catch (error) {
+      console.error('🔴 Failed to save events to temp file:', error.message);
+    }
+  }
+
+  /**
+   * Read events from temporary file
+   * @private
+   * @returns {Array} Array of events
+   */
+  readFromTempFile() {
+    try {
+      if (this.tempFilePath && fs.existsSync(this.tempFilePath)) {
+        const data = fs.readFileSync(this.tempFilePath, 'utf8');
+        const parsed = JSON.parse(data);
+        return Array.isArray(parsed) ? parsed : [];
+      }
+    } catch (error) {
+      console.warn('⚠️ Failed to read events from temp file:', error.message);
+    }
+    return [];
+  }
+
+  /**
+   * Delete temporary file
+   * @private
+   */
+  deleteTempFile() {
+    try {
+      if (this.tempFilePath && fs.existsSync(this.tempFilePath)) {
+        fs.unlinkSync(this.tempFilePath);
+        console.log('🟢 Temp file deleted');
+        this.tempFilePath = null;
+      }
+    } catch (error) {
+      console.warn('⚠️ Failed to delete temp file:', error.message);
+    }
+  }
+
+  /**
+   * Start CapVision recording session
+   * @async
+   * @returns {Promise<void>}
+   * @throws {Error} If browser executor not set
+   */
+  async startRecording() {
+    if (!this.browserExecutor) {
+      throw new Error('Browser executor not set. Call setBrowserExecutor() first.');
+    }
+
+    if (!this.isCapVisionEnabled()) {
+      console.log("🟡 Skipping CapVision recording (disabled by configuration)");
+      return;
+    }
+
+    console.log("🟡 Starting CapVision recording...");
+
+    // Create temp file if using file-based storage
+    if (this.config.useTempFile) {
+      this.tempFilePath = this.createTempFile();
+    }
+
+    // Read CapVision script from bundled file
+    let capVisionScriptCode = '';
+    try {
+      capVisionScriptCode = fs.readFileSync(this.config.capVisionScriptPath, 'utf8');
+    } catch (error) {
+      console.error('❌ Failed to load CapVision script file:', error.message);
+      throw new Error('Cannot start recording without CapVision script');
+    }
+
+    // Read console plugin code
+    let consolePluginCode = '';
+    if (this.config.recordConsole) {
+      try {
+        consolePluginCode = fs.readFileSync(this.config.consoleRecordPluginPath, 'utf8');
+      } catch (error) {
+        console.warn('⚠️ Failed to load console plugin file:', error.message);
+      }
+    }
+
+    // Read network plugin code
+    let networkPluginCode = '';
+    if (this.config.recordNetwork) {
+      try {
+        console.log('🟡 Loading network plugin from:', this.config.networkRecordPluginPath);
+        networkPluginCode = fs.readFileSync(this.config.networkRecordPluginPath, 'utf8');
+        console.log(`🟢 Network plugin code loaded: ${networkPluginCode.length} characters`);
+        if (networkPluginCode.length === 0) {
+          console.warn('⚠️ Network plugin file is empty!');
+        }
+      } catch (error) {
+        console.error('🔴 Failed to load network plugin file:', error.message);
+        console.error('🔴 File path:', this.config.networkRecordPluginPath);
+      }
+    } else {
+      console.log('🟡 Network recording disabled in config');
+    }
+
+    await this.browserExecutor.execute((config, capVisionScript, pluginCode, networkPluginCode) => {
+      // Initialize global state
+      window.capVisionInitialized = false;
+      window.capVisionLastCheckTime = Date.now();
+      window.capVisionEvents = [];
+      
+      console.log('🟢 Initialized empty events array for recording');
+
+      // Inject CapVision script
+      const injectScript = () => {
+        return new Promise((resolve) => {
+          if (window.rrweb) {
+            console.log('🟢 CapVision script already loaded');
+            resolve();
+            return;
+          }
+
+          try {
+            const script = document.createElement('script');
+            script.textContent = capVisionScript;
+            document.head.appendChild(script);
+            console.log('🟢 CapVision script injected from bundled file');
+            resolve();
+          } catch (error) {
+            console.error('❌ Failed to inject CapVision script:', error.message);
+            resolve();
+          }
+        });
+      };
+
+      // Inject Console Plugin
+      const injectConsolePlugin = (code) => {
+        return new Promise((resolve) => {
+          if (!config.recordConsole || !code) {
+            resolve();
+            return;
+          }
+
+          if (window.rrwebPluginConsoleRecord) {
+            resolve();
+            return;
+          }
+
+          try {
+            const script = document.createElement('script');
+            script.textContent = code;
+            document.head.appendChild(script);
+            resolve();
+          } catch (error) {
+            console.warn('⚠️ Failed to inject console plugin:', error.message);
+            resolve();
+          }
+        });
+      };
+
+      // Inject Network Record Plugin script
+      const injectNetworkPlugin = (pluginCode) => {
+        return new Promise((resolve) => {
+          if (!config.recordNetwork || !pluginCode) {
+            console.log('🟡 Network recording disabled or plugin code not available');
+            resolve();
+            return;
+          }
+
+          if (window.rrwebPluginNetworkRecord) {
+            console.log('🟢 Network plugin already loaded');
+            resolve();
+            return;
+          }
+
+          try {
+            console.log('🟡 Injecting network plugin script...');
+            console.log('🟡 Plugin code length:', pluginCode.length);
+            
+            // Try direct execution first (for immediate availability)
+            try {
+              eval(pluginCode);
+              if (window.rrwebPluginNetworkRecord) {
+                console.log('🟢 Network plugin loaded via eval');
+                resolve();
+                return;
+              }
+            } catch (evalError) {
+              console.warn('⚠️ Eval failed, trying script injection:', evalError);
+            }
+            
+            // Fallback: inject as script element
+            const script = document.createElement('script');
+            script.textContent = pluginCode;
+            script.onerror = (error) => {
+              console.error('🔴 Script onerror:', error);
+            };
+            document.head.appendChild(script);
+            
+            // Wait for script to execute and set window.rrwebPluginNetworkRecord
+            let checkCount = 0;
+            const checkInterval = setInterval(() => {
+              checkCount++;
+              if (window.rrwebPluginNetworkRecord) {
+                clearInterval(checkInterval);
+                console.log(`🟢 Network plugin script loaded successfully after ${checkCount * 50}ms`);
+                resolve();
+              } else if (checkCount > 20) {
+                // Stop checking after 1 second
+                clearInterval(checkInterval);
+                console.warn('⚠️ Network plugin script injected but function not found after 1s');
+                console.warn('⚠️ Script element:', script);
+                console.warn('⚠️ Script parent:', script.parentElement);
+                console.warn('⚠️ Window keys:', Object.keys(window).filter(k => k.includes('capvision') || k.includes('rrweb')));
+                resolve();
+              }
+            }, 50);
+          } catch (error) {
+            console.error('🔴 Failed to inject network plugin:', error.message);
+            console.error('🔴 Error stack:', error.stack);
+            resolve();
+          }
+        });
+      };
+
+      // Restore events from sessionStorage (fallback)
+      const restoreEventsFromStorage = () => {
+        if (!config.useTempFile) {
+          try {
+            const saved = sessionStorage.getItem(config.sessionStorageKey);
+            if (saved) {
+              const parsed = JSON.parse(saved);
+              if (Array.isArray(parsed) && parsed.length > 0) {
+                window.capVisionEvents = parsed;
+                console.log(`🟢 Restored ${parsed.length} events from sessionStorage`);
+              }
+            }
+          } catch (error) {
+            console.warn('⚠️ Failed to restore events from sessionStorage:', error.message);
+          }
+        }
+      };
+
+      // Save events to sessionStorage (fallback)
+      const saveEventsToStorage = () => {
+        if (!config.useTempFile && window.capVisionEvents && window.capVisionEvents.length > 0) {
+          try {
+            sessionStorage.setItem(config.sessionStorageKey, JSON.stringify(window.capVisionEvents));
+          } catch (error) {
+            console.warn('⚠️ Failed to save events to sessionStorage:', error.message);
+          }
+        }
+      };
+
+      // Wait for CapVision library to load
+      const waitForCapVision = () => {
+        return new Promise((resolve) => {
+          const check = () => {
+            if (window.rrweb && window.rrweb.record) {
+              resolve();
+            } else {
+              setTimeout(check, 100);
+            }
+          };
+          check();
+        });
+      };
+
+      // Get console plugin
+      const getConsolePlugin = () => {
+        try {
+          if (!config.recordConsole || !window.rrwebPluginConsoleRecord) {
+            return null;
+          }
+
+          const pluginModule = window.rrwebPluginConsoleRecord;
+          if (typeof pluginModule === 'function') {
+            return pluginModule(config.consoleRecordOptions);
+          }
+          if (pluginModule.getRecordConsolePlugin) {
+            return pluginModule.getRecordConsolePlugin(config.consoleRecordOptions);
+          }
+          if (pluginModule.default) {
+            return pluginModule.default(config.consoleRecordOptions);
+          }
+        } catch (error) {
+          console.warn('⚠️ Failed to initialize console plugin:', error.message);
+        }
+        return null;
+      };
+
+      // Get network plugin if available
+      const getNetworkPlugin = () => {
+        try {
+          if (!config.recordNetwork) {
+            console.log('🟡 Network recording disabled in config');
+            return null;
+          }
+          
+          if (!window.rrwebPluginNetworkRecord) {
+            console.warn('⚠️ Network plugin function not found on window object');
+            console.log('🟡 Available window properties:', Object.keys(window).filter(k => k.includes('capvision') || k.includes('rrweb')));
+            return null;
+          }
+
+          console.log('🟡 Initializing network plugin with options:', config.networkRecordOptions);
+
+          // Handle different export patterns
+          if (typeof window.rrwebPluginNetworkRecord === 'function') {
+            const plugin = window.rrwebPluginNetworkRecord(config.networkRecordOptions);
+            console.log('🟢 Network plugin initialized successfully (function pattern)');
+            console.log('🟡 Plugin structure:', {
+              name: plugin?.name,
+              hasObserver: typeof plugin?.observer === 'function',
+              keys: Object.keys(plugin || {})
+            });
+            return plugin;
+          }
+          if (window.rrwebPluginNetworkRecord.getRecordNetworkPlugin) {
+            const plugin = window.rrwebPluginNetworkRecord.getRecordNetworkPlugin(config.networkRecordOptions);
+            console.log('🟢 Network plugin initialized successfully (getRecordNetworkPlugin pattern)');
+            return plugin;
+          }
+          if (window.rrwebPluginNetworkRecord.default) {
+            const plugin = window.rrwebPluginNetworkRecord.default(config.networkRecordOptions);
+            console.log('🟢 Network plugin initialized successfully (default pattern)');
+            return plugin;
+          }
+          
+          console.warn('⚠️ Network plugin function found but no matching export pattern');
+          console.log('🟡 Plugin type:', typeof window.rrwebPluginNetworkRecord);
+          console.log('🟡 Plugin keys:', Object.keys(window.rrwebPluginNetworkRecord || {}));
+        } catch (error) {
+          console.error('🔴 Failed to initialize network plugin:', error.message);
+          console.error('🔴 Error stack:', error.stack);
+        }
+        return null;
+      };
+
+      // Start CapVision recorder
+      const startRecorder = () => {
+        waitForCapVision().then(() => {
+          if (window.rrwebRecorder) {
+            window.rrwebRecorder();
+          }
+
+          const plugins = [];
+          const consolePlugin = getConsolePlugin();
+          if (consolePlugin) {
+            plugins.push(consolePlugin);
+            console.log('🟢 Console recording enabled');
+          }
+          const networkPlugin = getNetworkPlugin();
+          if (networkPlugin) {
+            plugins.push(networkPlugin);
+            console.log('🟢 Network recording enabled');
+          }
+
+          window.rrwebRecorder = window.rrweb.record({
+            emit: (event) => {
+              window.capVisionEvents.push(event);
+              
+              if (!config.useTempFile) {
+                saveEventsToStorage();
+              }
+            },
+            checkoutEveryNms: config.checkoutIntervalMs,
+            recordCanvas: config.recordCanvas,
+            maskAllInputs: config.maskAllInputs,
+            maskInputOptions: {
+              password: true,
+              email: false,
+            },
+            collectFonts: config.collectFonts,
+            recordCrossOriginIframes: config.recordCrossOriginIframes,
+            plugins: plugins.length > 0 ? plugins : undefined
+          });
+
+          window.capVisionInitialized = true;
+          window.capVisionLastCheckTime = Date.now();
+          console.log('🟢 CapVision recording started');
+        });
+      };
+
+      // Setup persistence
+      const setupPersistence = () => {
+        window.addEventListener('beforeunload', () => {
+          if (!config.useTempFile) {
+            saveEventsToStorage();
+            console.log('🟡 Events saved to sessionStorage before unload');
+          }
+        });
+
+        const checkInterval = setInterval(() => {
+          // Check master feature flag first
+          if (config.ENABLE_FEATURE === false) {
+            console.log('🟡 CapVision feature disabled (ENABLE_FEATURE=false), stopping reinitialization checks');
+            clearInterval(checkInterval);
+            return;
+          }
+
+          const now = Date.now();
+          if (now - window.capVisionLastCheckTime < config.reinitCooldownMs) {
+            return;
+          }
+
+          window.capVisionLastCheckTime = now;
+
+          if (!window.capVisionInitialized || !window.rrwebRecorder) {
+            console.log('🟡 CapVision not active, attempting reinitialization...');
+
+            if (!document.querySelector('script[src*="capvision"]')) {
+              injectScript()
+                .then(() => injectConsolePlugin(pluginCode))
+                .then(() => injectNetworkPlugin(networkPluginCode))
+                .then(() => startRecorder())
+                .catch(console.error);
+            } else {
+              startRecorder();
+            }
+          }
+        }, config.saveIntervalMs);
+
+        window.capVisionCheckInterval = checkInterval;
+      };
+
+      // Main initialization
+      const initialize = async () => {
+        try {
+          setupPersistence();
+          await injectScript();
+          await injectConsolePlugin(pluginCode);
+          await injectNetworkPlugin(networkPluginCode);
+          restoreEventsFromStorage();
+          startRecorder();
+        } catch (error) {
+          console.error('🔴 Failed to initialize CapVision:', error.message);
+        }
+      };
+
+      initialize();
+    }, this.config, capVisionScriptCode, consolePluginCode, networkPluginCode);
+
+    // Setup Node.js-side periodic file save
+    if (this.config.useTempFile) {
+      this.saveIntervalHandle = setInterval(async () => {
+        try {
+          const events = await this.browserExecutor.execute(() => {
+            return window.capVisionEvents || [];
+          });
+          
+          if (events && events.length > 0) {
+            this.saveToTempFile(events);
+          }
+        } catch (error) {
+          console.warn('⚠️ Periodic file save failed:', error.message);
+        }
+      }, this.config.saveIntervalMs);
+
+      console.log(`🟢 Periodic file save enabled (every ${this.config.saveIntervalMs}ms)`);
+    }
+  }
+
+  /**
+   * Stop CapVision recording and save events
+   * @async
+   * @param {string} [testName='test'] - Name of the test for filename
+   * @param {boolean} [testPassed=true] - Whether the test passed. If true, recording is not saved permanently but temp file is still deleted
+   * @returns {Promise<RecordingMetadata>} Recording metadata
+   * @throws {Error} If browser executor not set
+   */
+  async stopRecordingAndSave(testName = 'test', testPassed = true) {
+    if (!this.browserExecutor) {
+      throw new Error('Browser executor not set. Call setBrowserExecutor() first.');
+    }
+
+    if (!this.isCapVisionEnabled()) {
+      console.log("🟡 Skipping CapVision stop (disabled by configuration)");
+      return {
+        timestamp: new Date().toISOString(),
+        totalEvents: 0,
+        filename: ''
+      };
+    }
+
+    console.log("🟡 Stopping CapVision recording and saving...");
+
+    // Clear periodic save interval
+    if (this.saveIntervalHandle) {
+      clearInterval(this.saveIntervalHandle);
+      this.saveIntervalHandle = null;
+      console.log('🟢 Periodic file save stopped');
+    }
+
+    // Final save
+    if (this.config.useTempFile) {
+      try {
+        console.log('🟡 Performing final save before stopping...');
+          const finalEvents = await this.browserExecutor.execute(() => {
+          return window.capVisionEvents || [];
+        });
+        
+        if (finalEvents && finalEvents.length > 0) {
+          this.saveToTempFile(finalEvents);
+          console.log(`🟢 Final save: ${finalEvents.length} events written to temp file`);
+        }
+      } catch (error) {
+        console.warn('⚠️ Final save failed:', error.message);
+      }
+    }
+
+    // Stop recorder and get metadata
+    const metadata = await this.browserExecutor.execute((config) => {
+        const eventCount = window.capVisionEvents ? window.capVisionEvents.length : 0;
+      const timestamp = new Date().toISOString();
+
+      // Stop recorder
+      if (window.rrwebRecorder) {
+        window.rrwebRecorder();
+        console.log('🟢 Recorder stopped');
+      }
+
+      // Clean up intervals
+          if (window.capVisionCheckInterval) {
+            clearInterval(window.capVisionCheckInterval);
+          }
+
+      // Clean up sessionStorage
+      if (!config.useTempFile) {
+        try {
+          sessionStorage.removeItem(config.sessionStorageKey);
+        } catch (error) {
+          console.warn('⚠️ Failed to clean sessionStorage:', error.message);
+        }
+      }
+
+      // Clear browser memory
+      window.capVisionEvents = [];
+      window.capVisionInitialized = false;
+
+      return {
+        timestamp: timestamp,
+        totalEvents: eventCount
+      };
+    }, this.config);
+
+    // Save to permanent location only if test failed
+    let savedFilename = '';
+    if (this.config.useTempFile && metadata.totalEvents > 0) {
+      try {
+        const events = this.readFromTempFile();
+        
+        if (events && events.length > 0) {
+          if (!testPassed) {
+            // Only save permanently if test failed
+            savedFilename = this.saveEventsToFile(events, testName);
+            console.log(`🟢 Saved ${events.length} events to: ${savedFilename} (test failed)`);
+          } else {
+            console.log(`🟡 Test passed - skipping permanent save (${events.length} events discarded)`);
+          }
+        }
+        
+        // Always delete temp file regardless of test result
+        this.deleteTempFile();
+        console.log('🟢 Temporary file cleaned up');
+      } catch (error) {
+        console.error('🔴 Failed to process events from temp file:', error.message);
+        // Still try to delete temp file even if there was an error
+        try {
+          this.deleteTempFile();
+        } catch (deleteError) {
+          console.warn('⚠️ Failed to delete temp file:', deleteError.message);
+        }
+      }
+    }
+
+    console.log(`🟢 Recording stopped. Captured ${metadata.totalEvents} events`);
+    
+    return {
+      timestamp: metadata.timestamp,
+      totalEvents: metadata.totalEvents,
+      filename: savedFilename
+    };
+  }
+
+  /**
+   * Re-initialize CapVision after browser refresh or navigation
+   * @async
+   * @returns {Promise<void>}
+   * @throws {Error} If browser executor not set
+   */
+  async ensureCapVisionIsActive() {
+    if (!this.browserExecutor) {
+      throw new Error('Browser executor not set. Call setBrowserExecutor() first.');
+    }
+
+    if (!this.isCapVisionEnabled()) {
+      console.log("🟡 Skipping CapVision re-initialization (disabled by configuration)");
+      return;
+    }
+
+    console.log("🟡 Re-initializing CapVision after page change...");
+
+    await this.browserExecutor.pause(this.config.pageStabilizationDelayMs);
+
+    // Read scripts
+    let capVisionScriptCode = '';
+    try {
+      capVisionScriptCode = fs.readFileSync(this.config.capVisionScriptPath, 'utf8');
+    } catch (error) {
+      console.error('❌ Failed to load CapVision script file:', error.message);
+      throw new Error('Cannot reinitialize recording without CapVision script');
+    }
+
+    let consolePluginCode = '';
+    if (this.config.recordConsole) {
+      try {
+        consolePluginCode = fs.readFileSync(this.config.consoleRecordPluginPath, 'utf8');
+      } catch (error) {
+        console.warn('⚠️ Failed to load console plugin file:', error.message);
+      }
+    }
+
+    // Read network plugin code
+    let networkPluginCode = '';
+    if (this.config.recordNetwork) {
+      try {
+        networkPluginCode = fs.readFileSync(this.config.networkRecordPluginPath, 'utf8');
+      } catch (error) {
+        console.warn('⚠️ Failed to load network plugin file:', error.message);
+      }
+    }
+
+    // Get event count
+    let eventCount = 0;
+    if (this.config.useTempFile) {
+      try {
+        const tempEvents = this.readFromTempFile();
+        eventCount = tempEvents ? tempEvents.length : 0;
+        console.log(`🟢 Will restore ${eventCount} events from temp file`);
+      } catch (error) {
+        console.warn('⚠️ Could not read temp file:', error.message);
+      }
+    }
+
+    await this.browserExecutor.execute((config, count, capVisionScript, pluginCode, networkPluginCode) => {
+      // Re-inject CapVision
+      const injectScript = () => {
+        return new Promise((resolve) => {
+          if (window.rrweb) {
+            console.log('🟢 CapVision script already loaded');
+            resolve();
+            return;
+          }
+
+          try {
+            const script = document.createElement('script');
+            script.textContent = capVisionScript;
+            document.head.appendChild(script);
+            console.log('🟢 CapVision script re-injected');
+            resolve();
+          } catch (error) {
+            console.error('❌ Failed to re-inject CapVision script:', error.message);
+            resolve();
+          }
+        });
+      };
+
+      const injectConsolePlugin = (code) => {
+        return new Promise((resolve) => {
+          if (!config.recordConsole || !code) {
+            resolve();
+            return;
+          }
+
+          if (window.rrwebPluginConsoleRecord) {
+            resolve();
+            return;
+          }
+
+          try {
+            const script = document.createElement('script');
+            script.textContent = code;
+            document.head.appendChild(script);
+            resolve();
+          } catch (error) {
+            console.warn('⚠️ Failed to inject console plugin:', error.message);
+            resolve();
+          }
+        });
+      };
+
+      const injectNetworkPlugin = (pluginCode) => {
+        return new Promise((resolve) => {
+          if (!config.recordNetwork || !pluginCode) {
+            console.log('🟡 Network recording disabled or plugin code not available');
+            resolve();
+            return;
+          }
+
+          if (window.rrwebPluginNetworkRecord) {
+            console.log('🟢 Network plugin already loaded');
+            resolve();
+            return;
+          }
+
+          try {
+            console.log('🟡 Injecting network plugin script (re-init)...');
+            console.log('🟡 Plugin code length:', pluginCode.length);
+            
+            // Try direct execution first (for immediate availability)
+            try {
+              eval(pluginCode);
+              if (window.rrwebPluginNetworkRecord) {
+                console.log('🟢 Network plugin loaded via eval (re-init)');
+                resolve();
+                return;
+              }
+            } catch (evalError) {
+              console.warn('⚠️ Eval failed, trying script injection:', evalError);
+            }
+            
+            // Fallback: inject as script element
+            const script = document.createElement('script');
+            script.textContent = pluginCode;
+            script.onerror = (error) => {
+              console.error('🔴 Script onerror:', error);
+            };
+            document.head.appendChild(script);
+            
+            // Wait for script to execute and set window.rrwebPluginNetworkRecord
+            let checkCount = 0;
+            const checkInterval = setInterval(() => {
+              checkCount++;
+              if (window.rrwebPluginNetworkRecord) {
+                clearInterval(checkInterval);
+                console.log(`🟢 Network plugin script loaded successfully after ${checkCount * 50}ms (re-init)`);
+                resolve();
+              } else if (checkCount > 20) {
+                // Stop checking after 1 second
+                clearInterval(checkInterval);
+                console.warn('⚠️ Network plugin script injected but function not found after 1s (re-init)');
+                console.warn('⚠️ Script element:', script);
+                console.warn('⚠️ Script parent:', script.parentElement);
+                console.warn('⚠️ Window keys:', Object.keys(window).filter(k => k.includes('capvision') || k.includes('rrweb')));
+                resolve();
+              }
+            }, 50);
+          } catch (error) {
+            console.error('🔴 Failed to inject network plugin:', error.message);
+            console.error('🔴 Error stack:', error.stack);
+            resolve();
+          }
+        });
+      };
+
+      const restoreEventsFromStorage = () => {
+        if (!window.capVisionEvents) {
+          window.capVisionEvents = [];
+        }
+
+        if (!config.useTempFile) {
+          try {
+            const saved = sessionStorage.getItem(config.sessionStorageKey);
+            if (saved) {
+              const parsed = JSON.parse(saved);
+              if (Array.isArray(parsed) && parsed.length > 0) {
+                window.capVisionEvents = parsed;
+                console.log(`🟢 Restored ${parsed.length} events from sessionStorage`);
+              }
+            }
+          } catch (error) {
+            console.warn('⚠️ Failed to restore events from sessionStorage:', error.message);
+          }
+        }
+      };
+
+      const initializeEventsForFileMode = () => {
+        if (config.useTempFile) {
+          window.capVisionEvents = [];
+          if (count > 0) {
+            console.log(`🟢 Temp file has ${count} events`);
+          }
+        }
+      };
+
+      const waitForCapVision = () => {
+        return new Promise((resolve) => {
+          const check = () => {
+            if (window.rrweb && window.rrweb.record) {
+              resolve();
+            } else {
+              setTimeout(check, 100);
+            }
+          };
+          check();
+        });
+      };
+
+      const getConsolePlugin = () => {
+        try {
+          if (!config.recordConsole || !window.rrwebPluginConsoleRecord) {
+            return null;
+          }
+
+          const pluginModule = window.rrwebPluginConsoleRecord;
+          if (typeof pluginModule === 'function') {
+            return pluginModule(config.consoleRecordOptions);
+          }
+          if (pluginModule.getRecordConsolePlugin) {
+            return pluginModule.getRecordConsolePlugin(config.consoleRecordOptions);
+          }
+          if (pluginModule.default) {
+            return pluginModule.default(config.consoleRecordOptions);
+          }
+        } catch (error) {
+          console.warn('⚠️ Failed to initialize console plugin:', error.message);
+        }
+        return null;
+      };
+
+      const getNetworkPlugin = () => {
+        try {
+          if (!config.recordNetwork || !window.rrwebPluginNetworkRecord) {
+            return null;
+          }
+
+          // Handle different export patterns
+          if (typeof window.rrwebPluginNetworkRecord === 'function') {
+            return window.rrwebPluginNetworkRecord(config.networkRecordOptions);
+          }
+          if (window.rrwebPluginNetworkRecord.getRecordNetworkPlugin) {
+            return window.rrwebPluginNetworkRecord.getRecordNetworkPlugin(config.networkRecordOptions);
+          }
+          if (window.rrwebPluginNetworkRecord.default) {
+            return window.rrwebPluginNetworkRecord.default(config.networkRecordOptions);
+          }
+        } catch (error) {
+          console.warn('⚠️ Failed to initialize network plugin:', error.message);
+        }
+        return null;
+      };
+
+      const startRecorder = () => {
+        if (window.rrwebRecorder) {
+          try {
+            window.rrwebRecorder();
+          } catch (e) {
+            console.warn('⚠️ Error stopping existing recorder:', e);
+          }
+        }
+
+        waitForCapVision().then(() => {
+          const plugins = [];
+          const consolePlugin = getConsolePlugin();
+          if (consolePlugin) {
+            plugins.push(consolePlugin);
+          }
+          const networkPlugin = getNetworkPlugin();
+          if (networkPlugin) {
+            plugins.push(networkPlugin);
+          }
+
+          window.rrwebRecorder = window.rrweb.record({
+            emit: (event) => {
+              window.capVisionEvents.push(event);
+
+              if (!config.useTempFile) {
+                try {
+                  sessionStorage.setItem(config.sessionStorageKey, JSON.stringify(window.capVisionEvents));
+                } catch (error) {
+                  console.warn('⚠️ Failed to save events to sessionStorage:', error.message);
+                }
+              }
+
+              if (window.capVisionEvents.length % 10 === 0) {
+                console.log(`🟡 Captured ${window.capVisionEvents.length} events`);
+              }
+            },
+            checkoutEveryNms: config.checkoutIntervalMs,
+            recordCanvas: config.recordCanvas,
+            maskAllInputs: config.maskAllInputs,
+            maskInputOptions: {
+              password: true,
+              email: false,
+            },
+            collectFonts: config.collectFonts,
+            recordCrossOriginIframes: config.recordCrossOriginIframes,
+            plugins: plugins.length > 0 ? plugins : undefined
+          });
+
+          window.capVisionInitialized = true;
+          window.capVisionLastCheckTime = Date.now();
+          console.log('🟢 CapVision re-started');
+        });
+      };
+
+      const reinitialize = async () => {
+        try {
+          console.log('🟡 Re-initializing...');
+          await injectScript();
+          await injectConsolePlugin(pluginCode);
+          await injectNetworkPlugin(networkPluginCode);
+          restoreEventsFromStorage();
+          initializeEventsForFileMode();
+          startRecorder();
+        } catch (error) {
+          console.error('🔴 Re-initialization failed:', error.message);
+        }
+      };
+
+      reinitialize();
+    }, this.config, eventCount, capVisionScriptCode, consolePluginCode, networkPluginCode);
+
+    console.log("🟢 Re-initialization complete");
+  }
+}
+
+// Export class and default config
+module.exports = {
+  CapVisionRecorder,
+  DEFAULT_CONFIG
+};
+