@devskin/browser-sdk 1.0.13 → 1.0.15

package/dist/devskin.cjs.js

@@ -5566,7 +5566,7 @@ class RRWebRecorder {
         }
         try {
             console.log('[RRWeb] Starting session recording:', this.sessionId);
-            console.log('[RRWeb] SDK Version: 1.0.13');
+            console.log('[RRWeb] SDK Version: 1.0.14');
             this.stopFn = record({
                 emit: (event) => {
                     // DEBUG: Log ALL event types to diagnose issue
@@ -5755,7 +5755,18 @@ class Transport {
                 acc[e.type] = (acc[e.type] || 0) + 1;
                 return acc;
             }, {});
+            // Calculate payload size
+            const payload = {
+                session_id: sessionId,
+                events,
+                timestamp: new Date().toISOString(),
+                apiKey: this.config.apiKey,
+                appId: this.config.appId,
+            };
+            const payloadSize = new Blob([JSON.stringify(payload)]).size;
+            const payloadSizeMB = (payloadSize / 1024 / 1024).toFixed(2);
             console.log(`[DevSkin SDK] Sending ${events.length} recording events:`, eventTypes);
+            console.log(`[DevSkin SDK] Payload size: ${payloadSizeMB} MB (${payloadSize} bytes)`);
             console.log(`[DevSkin SDK] First 3 events:`, events.slice(0, 3).map(e => ({ type: e.type, timestamp: e.timestamp })));
             // Check if this batch contains FullSnapshot (type 2)
             const hasFullSnapshot = events.some(e => e.type === 2);
@@ -5764,11 +5775,21 @@ class Transport {
             let lastError = null;
             for (let attempt = 1; attempt <= maxRetries; attempt++) {
                 try {
-                    yield this.sendToBackend('/v1/rum/recordings', {
-                        session_id: sessionId,
-                        events,
-                        timestamp: new Date().toISOString(),
-                    });
+                    // Use XMLHttpRequest for large payloads (more reliable than fetch for large data)
+                    if (payloadSize > 100000) { // > 100KB
+                        yield this.sendToBackendXHR('/v1/rum/recordings', {
+                            session_id: sessionId,
+                            events,
+                            timestamp: new Date().toISOString(),
+                        });
+                    }
+                    else {
+                        yield this.sendToBackend('/v1/rum/recordings', {
+                            session_id: sessionId,
+                            events,
+                            timestamp: new Date().toISOString(),
+                        });
+                    }
                     console.log(`[DevSkin SDK] ✅ Recording events sent successfully${attempt > 1 ? ` (attempt ${attempt})` : ''}`);
                     return; // Success, exit
                 }
@@ -5843,6 +5864,57 @@ class Transport {
                 return '/v1/analytics/events';
         }
     }
+    sendToBackendXHR(endpoint, data) {
+        return __awaiter$1(this, void 0, void 0, function* () {
+            const url = `${this.apiUrl}${endpoint}`;
+            const payload = Object.assign(Object.assign({}, data), { apiKey: this.config.apiKey, appId: this.config.appId, environment: this.config.environment, release: this.config.release });
+            // Apply beforeSend hook if provided
+            if (this.config.beforeSend) {
+                const processed = this.config.beforeSend(payload);
+                if (!processed) {
+                    // Hook returned null, don't send
+                    return;
+                }
+            }
+            return new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', url, true);
+                xhr.setRequestHeader('Content-Type', 'application/json');
+                xhr.setRequestHeader('Authorization', `Bearer ${this.config.apiKey}`);
+                xhr.onload = () => {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        if (this.config.debug) {
+                            console.log('[DevSkin] Data sent successfully via XHR:', endpoint);
+                        }
+                        resolve();
+                    }
+                    else {
+                        console.error('[DevSkin] XHR HTTP Error:', xhr.status, xhr.responseText);
+                        reject(new Error(`HTTP ${xhr.status}: ${xhr.statusText}`));
+                    }
+                };
+                xhr.onerror = () => {
+                    console.error('[DevSkin] XHR network error:', endpoint);
+                    reject(new Error('Network error'));
+                };
+                xhr.ontimeout = () => {
+                    console.error('[DevSkin] XHR timeout:', endpoint);
+                    reject(new Error('Request timeout'));
+                };
+                // Set a generous timeout for large payloads (30 seconds)
+                xhr.timeout = 30000;
+                try {
+                    const body = JSON.stringify(payload);
+                    console.log(`[DevSkin SDK] Using XMLHttpRequest for large payload (${(body.length / 1024).toFixed(2)} KB)`);
+                    xhr.send(body);
+                }
+                catch (error) {
+                    console.error('[DevSkin] Failed to send XHR request:', error);
+                    reject(error);
+                }
+            });
+        });
+    }
     sendToBackend(endpoint_1, data_1) {
         return __awaiter$1(this, arguments, void 0, function* (endpoint, data, useBeacon = false) {
             const url = `${this.apiUrl}${endpoint}`;