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

package/src/capvision-recorder/assets/capvision-plugins/network-replay.min.js

@@ -0,0 +1,434 @@
+/**
+ * RRWeb Network Replay Plugin
+ * Displays network activity in a floating panel during replay
+ * Based on: https://github.com/rrweb-io/rrweb/pull/1689
+ */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.rrwebPluginNetworkReplay = factory());
+})(this, (function () {
+  'use strict';
+
+  function getReplayNetworkPlugin(options) {
+    const opts = options || {};
+    const showPanel = opts.showPanel !== false;
+    const maxEntries = opts.maxEntries || 100;
+    const position = opts.position || 'bottom-right';
+
+    // Network entries storage
+    const networkEntries = [];
+    let panelElement = null;
+    let tableBody = null;
+    let isMinimized = false;
+
+    // Helper: Format duration
+    function formatDuration(ms) {
+      if (typeof ms !== 'number' || isNaN(ms)) return '-';
+      if (ms < 1000) return ms + 'ms';
+      return (ms / 1000).toFixed(2) + 's';
+    }
+
+    // Helper: Format size
+    function formatSize(bytes) {
+      if (typeof bytes !== 'number' || isNaN(bytes)) return '-';
+      if (bytes < 1024) return bytes + 'B';
+      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + 'KB';
+      return (bytes / (1024 * 1024)).toFixed(2) + 'MB';
+    }
+
+    // Helper: Truncate URL for display
+    function truncateURL(url, maxLength) {
+      if (!url) return '-';
+      if (url.length <= maxLength) return url;
+      return url.substring(0, maxLength - 3) + '...';
+    }
+
+    // Helper: Get status color
+    function getStatusColor(status) {
+      if (!status) return '#666';
+      if (status >= 200 && status < 300) return '#28a745';
+      if (status >= 300 && status < 400) return '#ffc107';
+      if (status >= 400 && status < 500) return '#dc3545';
+      if (status >= 500) return '#dc3545';
+      return '#666';
+    }
+
+    // Helper: Get method color
+    function getMethodColor(method) {
+      if (!method) return '#666';
+      const upperMethod = method.toUpperCase();
+      if (upperMethod === 'GET') return '#007bff';
+      if (upperMethod === 'POST') return '#28a745';
+      if (upperMethod === 'PUT') return '#ffc107';
+      if (upperMethod === 'DELETE') return '#dc3545';
+      if (upperMethod === 'PATCH') return '#17a2b8';
+      return '#666';
+    }
+
+    // Create panel HTML
+    function createPanel() {
+      if (!showPanel) return null;
+
+      const panel = document.createElement('div');
+      panel.id = 'rrweb-network-panel';
+      panel.style.cssText = `
+        position: fixed;
+        ${position.includes('right') ? 'right: 20px;' : 'left: 20px;'}
+        ${position.includes('bottom') ? 'bottom: 20px;' : 'top: 20px;'}
+        width: 600px;
+        max-height: 500px;
+        background: white;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        z-index: 10000;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        font-size: 12px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      `;
+
+      // Header
+      const header = document.createElement('div');
+      header.style.cssText = `
+        padding: 12px 16px;
+        background: #f8f9fa;
+        border-bottom: 1px solid #ddd;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: move;
+        user-select: none;
+      `;
+      
+      const title = document.createElement('div');
+      title.textContent = '🌐 Network Activity';
+      title.style.cssText = 'font-weight: 600; font-size: 14px; color: #333;';
+      
+      const controls = document.createElement('div');
+      controls.style.cssText = 'display: flex; gap: 8px; align-items: center;';
+      
+      const clearBtn = document.createElement('button');
+      clearBtn.textContent = 'Clear';
+      clearBtn.style.cssText = `
+        padding: 4px 8px;
+        font-size: 11px;
+        border: 1px solid #ddd;
+        background: white;
+        border-radius: 4px;
+        cursor: pointer;
+      `;
+      clearBtn.onclick = () => {
+        networkEntries.length = 0;
+        updateTable();
+      };
+      
+      const minimizeBtn = document.createElement('button');
+      minimizeBtn.textContent = isMinimized ? '▼' : '▲';
+      minimizeBtn.style.cssText = `
+        padding: 4px 8px;
+        font-size: 11px;
+        border: 1px solid #ddd;
+        background: white;
+        border-radius: 4px;
+        cursor: pointer;
+        min-width: 24px;
+      `;
+      minimizeBtn.onclick = () => {
+        isMinimized = !isMinimized;
+        minimizeBtn.textContent = isMinimized ? '▼' : '▲';
+        content.style.display = isMinimized ? 'none' : 'flex';
+      };
+      
+      controls.appendChild(clearBtn);
+      controls.appendChild(minimizeBtn);
+      header.appendChild(title);
+      header.appendChild(controls);
+      
+      // Content area
+      const content = document.createElement('div');
+      content.id = 'rrweb-network-content';
+      content.style.cssText = `
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+      `;
+      
+      // Table
+      const table = document.createElement('table');
+      table.style.cssText = `
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 11px;
+      `;
+      
+      // Table header
+      const thead = document.createElement('thead');
+      thead.style.cssText = 'background: #f8f9fa; position: sticky; top: 0; z-index: 10;';
+      const headerRow = document.createElement('tr');
+      ['Method', 'URL', 'Status', 'Duration', 'Size'].forEach(text => {
+        const th = document.createElement('th');
+        th.textContent = text;
+        th.style.cssText = 'padding: 8px; text-align: left; font-weight: 600; border-bottom: 2px solid #ddd;';
+        headerRow.appendChild(th);
+      });
+      thead.appendChild(headerRow);
+      
+      // Table body
+      tableBody = document.createElement('tbody');
+      table.appendChild(thead);
+      table.appendChild(tableBody);
+      content.appendChild(table);
+      
+      panel.appendChild(header);
+      panel.appendChild(content);
+      
+      // Make panel draggable
+      let isDragging = false;
+      let currentX, currentY, initialX, initialY;
+      
+      header.addEventListener('mousedown', (e) => {
+        isDragging = true;
+        initialX = e.clientX - panel.offsetLeft;
+        initialY = e.clientY - panel.offsetTop;
+      });
+      
+      document.addEventListener('mousemove', (e) => {
+        if (isDragging) {
+          currentX = e.clientX - initialX;
+          currentY = e.clientY - initialY;
+          panel.style.left = currentX + 'px';
+          panel.style.top = currentY + 'px';
+          panel.style.right = 'auto';
+          panel.style.bottom = 'auto';
+        }
+      });
+      
+      document.addEventListener('mouseup', () => {
+        isDragging = false;
+      });
+      
+      document.body.appendChild(panel);
+      return panel;
+    }
+
+    // Update table with network entries
+    function updateTable() {
+      if (!tableBody) return;
+      
+      // Clear existing rows
+      tableBody.innerHTML = '';
+      
+      // Show latest entries (up to maxEntries)
+      const entriesToShow = networkEntries.slice(-maxEntries);
+      
+      entriesToShow.forEach(entry => {
+        const row = document.createElement('tr');
+        row.style.cssText = 'border-bottom: 1px solid #eee;';
+        
+        // Method cell
+        const methodCell = document.createElement('td');
+        methodCell.textContent = entry.method || '-';
+        methodCell.style.cssText = `padding: 6px 8px; color: ${getMethodColor(entry.method)}; font-weight: 600;`;
+        
+        // URL cell
+        const urlCell = document.createElement('td');
+        urlCell.textContent = truncateURL(entry.url, 40);
+        urlCell.title = entry.url || '';
+        urlCell.style.cssText = 'padding: 6px 8px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;';
+        
+        // Status cell
+        const statusCell = document.createElement('td');
+        statusCell.textContent = entry.status || '-';
+        statusCell.style.cssText = `padding: 6px 8px; color: ${getStatusColor(entry.status)}; font-weight: 600;`;
+        
+        // Duration cell
+        const durationCell = document.createElement('td');
+        durationCell.textContent = formatDuration(entry.duration);
+        durationCell.style.cssText = 'padding: 6px 8px;';
+        
+        // Size cell
+        const sizeCell = document.createElement('td');
+        sizeCell.textContent = formatSize(entry.transferSize || entry.encodedBodySize);
+        sizeCell.style.cssText = 'padding: 6px 8px;';
+        
+        row.appendChild(methodCell);
+        row.appendChild(urlCell);
+        row.appendChild(statusCell);
+        row.appendChild(durationCell);
+        row.appendChild(sizeCell);
+        
+        tableBody.appendChild(row);
+      });
+      
+      // Scroll to bottom
+      if (tableBody.parentElement) {
+        const content = tableBody.parentElement.parentElement;
+        if (content) {
+          content.scrollTop = content.scrollHeight;
+        }
+      }
+    }
+
+    // Process network event
+    function processNetworkEvent(event) {
+      // Only handle plugin events for network
+      if (!event || event.type !== 6 || !event.data) return;
+      if (event.data?.plugin !== 'rrweb/network@1') return;
+      
+      // Try to get payload - handle nested structure (double-wrapped during RRWeb serialization)
+      let payload = null;
+      
+      // Check for nested structure first (double-wrapped during RRWeb serialization)
+      if (event.data?.payload?.data?.payload) {
+        const nestedPayload = event.data.payload.data.payload;
+        if (nestedPayload.type === 'request' || nestedPayload.type === 'response') {
+          payload = nestedPayload;
+        }
+      }
+      
+      // Fallback: Check for normal structure
+      if (!payload && event.data?.payload) {
+        const testPayload = event.data.payload;
+        if (testPayload.type === 'request' || testPayload.type === 'response') {
+          payload = testPayload;
+        }
+      }
+      
+      if (!payload) return;
+      
+      // Verify payload has the expected structure
+      if (typeof payload.type !== 'string' || (payload.type !== 'request' && payload.type !== 'response')) {
+        return;
+      }
+      
+      if (payload.type === 'request') {
+        // Create panel if not exists and showPanel is enabled
+        if (showPanel && !panelElement) {
+          panelElement = createPanel();
+        }
+        
+        // Store request entry
+        const entry = {
+          id: payload.id,
+          method: payload.method || 'GET',
+          url: payload.url || '',
+          timestamp: payload.timestamp || event.timestamp,
+          requestType: payload.requestType || 'unknown'
+        };
+        
+        // Find existing entry or create new
+        const existingIndex = networkEntries.findIndex(e => e.id === entry.id);
+        if (existingIndex >= 0) {
+          Object.assign(networkEntries[existingIndex], entry);
+        } else {
+          networkEntries.push(entry);
+        }
+        
+        // Limit entries
+        if (networkEntries.length > maxEntries * 2) {
+          networkEntries.shift();
+        }
+        
+        // Update table if panel is shown
+        if (showPanel) {
+          updateTable();
+        }
+      } else if (payload.type === 'response') {
+        // Create panel if not exists and showPanel is enabled
+        if (showPanel && !panelElement) {
+          panelElement = createPanel();
+        }
+        
+        // Update existing entry with response data
+        const entryIndex = networkEntries.findIndex(e => e.id === payload.id);
+        if (entryIndex >= 0) {
+          const entry = networkEntries[entryIndex];
+          entry.status = payload.status;
+          entry.statusText = payload.statusText;
+          entry.duration = payload.duration;
+          entry.error = payload.error;
+          
+          if (payload.performance) {
+            entry.transferSize = payload.performance.transferSize;
+            entry.encodedBodySize = payload.performance.encodedBodySize;
+            entry.decodedBodySize = payload.performance.decodedBodySize;
+          }
+          
+          // Update table if panel is shown
+          if (showPanel) {
+            updateTable();
+          }
+        } else {
+          // Response without request (shouldn't happen, but handle it)
+          // Create panel if not exists and showPanel is enabled
+          if (showPanel && !panelElement) {
+            panelElement = createPanel();
+          }
+          
+          const entry = {
+            id: payload.id,
+            method: 'UNKNOWN',
+            url: '',
+            status: payload.status,
+            statusText: payload.statusText,
+            duration: payload.duration,
+            timestamp: payload.timestamp || event.timestamp,
+            error: payload.error
+          };
+          
+          if (payload.performance) {
+            entry.transferSize = payload.performance.transferSize;
+            entry.encodedBodySize = payload.performance.encodedBodySize;
+            entry.decodedBodySize = payload.performance.decodedBodySize;
+          }
+          
+          networkEntries.push(entry);
+          
+          if (networkEntries.length > maxEntries * 2) {
+            networkEntries.shift();
+          }
+          
+          // Update table if panel is shown
+          if (showPanel) {
+            updateTable();
+          }
+        }
+      }
+    }
+
+    return {
+      name: 'rrweb/network@1',
+      handler(event, isSync, context) {
+        // Only handle plugin events for network
+        if (event.type !== 6 || event.data?.plugin !== 'rrweb/network@1') {
+          return;
+        }
+        
+        // Process the network event
+        processNetworkEvent(event);
+      },
+      onBuild() {
+        // Create panel when player is built
+        if (showPanel && !panelElement) {
+          panelElement = createPanel();
+        }
+      },
+      onDestroy() {
+        // Cleanup panel when player is destroyed
+        if (panelElement && panelElement.parentElement) {
+          panelElement.parentElement.removeChild(panelElement);
+          panelElement = null;
+          tableBody = null;
+        }
+        networkEntries.length = 0;
+      }
+    };
+  }
+
+  // Export function
+  return getReplayNetworkPlugin;
+}));