cryptique-sdk 1.2.19 → 1.2.20

package/lib/esm/index.js

@@ -3912,6 +3912,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
 
       history.pushState = function(...args) {
         originalPushState.apply(history, args);
+        // Notify page_summary exit-type tracker that an SPA navigation occurred
+        try { window.dispatchEvent(new CustomEvent('cq:spa-navigation')); } catch (_) {}
         // Use requestAnimationFrame for better timing with React Router
         requestAnimationFrame(() => {
           self.track();
@@ -3920,6 +3922,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
 
       history.replaceState = function(...args) {
         originalReplaceState.apply(history, args);
+        // Notify page_summary exit-type tracker (replaceState = SPA redirect)
+        try { window.dispatchEvent(new CustomEvent('cq:spa-navigation')); } catch (_) {}
         // Use requestAnimationFrame for better timing with React Router
         requestAnimationFrame(() => {
           self.track();
@@ -5286,12 +5290,33 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
                 : null;
             } catch (e) {}
 
+            // Collect top-3 slowest resources to pinpoint what is causing slow LCP/FCP.
+            // Each entry: { name (URL), initiator_type, duration_ms, transfer_size_kb }
+            // Only includes same-origin resources or entries where the timing is exposed
+            // (cross-origin resources without Timing-Allow-Origin return duration = 0
+            //  and are excluded as they carry no actionable signal).
+            let slowestResources = [];
+            try {
+              const resources = performance.getEntriesByType('resource');
+              slowestResources = resources
+                .filter(r => r.duration > 0) // exclude zero-duration cross-origin entries
+                .sort((a, b) => b.duration - a.duration)
+                .slice(0, 3)
+                .map(r => ({
+                  name:             r.name.split('?')[0].slice(-120), // trim query string + cap length
+                  initiator_type:   r.initiatorType || 'other',       // script, css, img, fetch, xmlhttprequest…
+                  duration_ms:      Math.round(r.duration),
+                  transfer_size_kb: r.transferSize ? Math.round(r.transferSize / 1024) : null
+                }));
+            } catch (_) {}
+
             EventsManager.trackAutoEvent('page_performance', {
-              lcp: vitals.lcp,
-              cls: vitals.cls,
-              inp: vitals.inp,
-              fcp: vitals.fcp,
-              ttfb: vitals.ttfb
+              lcp:               vitals.lcp,
+              cls:               vitals.cls,
+              inp:               vitals.inp,
+              fcp:               vitals.fcp,
+              ttfb:              vitals.ttfb,
+              slowest_resources: slowestResources  // [] when none available
             });
           }, 1500);
         });
@@ -5301,54 +5326,108 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
 
     /**
      * ErrorTracker - Tracks JavaScript errors
-     * Emits as queryable auto events (js_error) instead of session-level JSONB
+     * Emits as queryable auto events (js_error) instead of session-level JSONB.
+     *
+     * Improvements over original:
+     *  - error_class: extracts the constructor name (TypeError, ReferenceError, etc.)
+     *    so the AI can categorise errors without parsing message strings.
+     *  - Session-level deduplication: same error (same message + source + line)
+     *    fires at most once per 10 s to prevent event floods from looping errors.
+     *  - last_event_name: name of the most-recently tracked auto event, giving a
+     *    lightweight "what was the user doing just before the crash" signal.
      */
     startErrorTracking() {
       try {
+        // Deduplication: hash → last-fired timestamp (ms)
+        const recentErrors = new Map();
+        const ERROR_DEDUPE_MS = 10000; // suppress repeats within 10 s
+
+        // Lightweight "preceding action" tracker — updated by trackAutoEvent callers
+        // via a module-level variable so it's always current.
+        if (!EventsManager._lastAutoEventName) {
+          EventsManager._lastAutoEventName = '';
+        }
+
+        const dedupeKey = (msg, src, line) =>
+          `${msg}|${src}|${line}`.slice(0, 200);
+
+        const shouldSuppress = (key) => {
+          const last = recentErrors.get(key);
+          if (!last) return false;
+          return (Date.now() - last) < ERROR_DEDUPE_MS;
+        };
+
+        const markSeen = (key) => recentErrors.set(key, Date.now());
+
+        // Extract class name from the error object's constructor, e.g. "TypeError"
+        const getErrorClass = (errObj) => {
+          if (!errObj) return 'Error';
+          try { return errObj.constructor?.name || 'Error'; } catch (_) { return 'Error'; }
+        };
+
         window.addEventListener('error', (event) => {
+          const msg  = event.message || '';
+          const src  = event.filename || '';
+          const line = event.lineno  || 0;
+          const key  = dedupeKey(msg, src, line);
+          if (shouldSuppress(key)) return;
+          markSeen(key);
+
           EventsManager.trackAutoEvent('js_error', {
-            error_type: 'javascript_error',
-            message: event.message || '',
-            source: event.filename || '',
-            line: event.lineno || 0,
-            column: event.colno || 0,
-            stack: event.error?.stack || ''
+            error_type:       'javascript_error',
+            error_class:      getErrorClass(event.error),
+            message:          msg,
+            source:           src,
+            line:             line,
+            column:           event.colno || 0,
+            stack:            event.error?.stack || '',
+            last_event_name:  EventsManager._lastAutoEventName || ''
           });
         });
 
-        // Track unhandled promise rejections
+        // Unhandled promise rejections (fetch failures that aren't caught, async throws, etc.)
         window.addEventListener('unhandledrejection', (event) => {
+          const msg  = event.reason?.message || String(event.reason || 'Unknown error');
+          const key  = dedupeKey(msg, '', 0);
+          if (shouldSuppress(key)) return;
+          markSeen(key);
+
           EventsManager.trackAutoEvent('js_error', {
-            error_type: 'unhandled_promise_rejection',
-            message: event.reason?.message || String(event.reason || 'Unknown error'),
-            stack: event.reason?.stack || String(event.reason || '')
+            error_type:      'unhandled_promise_rejection',
+            error_class:     getErrorClass(event.reason),
+            message:         msg,
+            stack:           event.reason?.stack || String(event.reason || ''),
+            last_event_name: EventsManager._lastAutoEventName || ''
           });
         });
       } catch (error) {
-        }
+      }
     },
 
     /**
-     * NetworkTracker - Tracks network errors (XHR only)
+     * NetworkTracker - Tracks network errors (XHR + fetch)
+     *
+     * XHR: only wraps SDK calls to sdkapi.cryptique.io (unchanged behaviour).
      *
-     * NOTE:
-     * We intentionally do NOT wrap window.fetch here, to avoid confusing
-     * browser DevTools attribution for third‑party requests. All SDK
-     * fetch-based calls to the SDK API backend (sdkapi.cryptique.io) are already
-     * error-handled inside APIClient.send(), so fetch wrapping is redundant.
+     * fetch: wraps window.fetch to track HTTP ≥ 400 responses and network
+     * failures for same-origin requests made by the host application.
+     * Third-party (cross-origin) fetches are passed through untouched to
+     * minimise DevTools attribution noise. The SDK's own fetch calls via
+     * APIClient.send() are already error-handled and are excluded by the
+     * same-origin guard (they go to sdkapi.cryptique.io, not the app origin).
      */
     startNetworkTracking() {
       try {
-        // Track XMLHttpRequest errors - only intercept calls to our own backend
+        // ── XHR: unchanged — only track SDK backend calls ──────────────────
         const originalXHROpen = XMLHttpRequest.prototype.open;
         const originalXHRSend = XMLHttpRequest.prototype.send;
-        
+
         XMLHttpRequest.prototype.open = function(method, url, ...args) {
           this._cryptiqueMethod = method;
           this._cryptiqueUrl = url;
           return originalXHROpen.apply(this, [method, url, ...args]);
         };
-        
+
         XMLHttpRequest.prototype.send = function(...args) {
           const startTime = Date.now();
           const xhr = this;
@@ -5357,7 +5436,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           if (!xhr._cryptiqueUrl || !xhr._cryptiqueUrl.includes('sdkapi.cryptique.io')) {
             return originalXHRSend.apply(this, args);
           }
-          
+
           xhr.addEventListener('load', function() {
             if (xhr.status >= 400) {
               EventsManager.trackAutoEvent('network_error', {
@@ -5379,11 +5458,77 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
               duration_ms: Date.now() - startTime
             });
           });
-          
+
           return originalXHRSend.apply(this, args);
         };
-      } catch (error) {
+
+        // ── fetch: track same-origin HTTP errors from the host application ──
+        // We intercept only same-origin (or explicitly relative) URLs so that
+        // third-party CDN / analytics / auth calls are never touched.
+        const originalFetch = window.fetch;
+        if (typeof originalFetch === 'function') {
+          window.fetch = function(input, init) {
+            const startTime = Date.now();
+
+            // Resolve the URL string regardless of whether input is a string,
+            // URL object, or Request object.
+            let urlStr = '';
+            try {
+              urlStr = (input instanceof Request ? input.url : String(input)) || '';
+            } catch (_) {}
+
+            // Determine if same-origin (relative URLs are always same-origin)
+            let isSameOrigin = false;
+            try {
+              if (urlStr.startsWith('/') || urlStr.startsWith('./') || urlStr.startsWith('../')) {
+                isSameOrigin = true;
+              } else {
+                const parsed = new URL(urlStr, window.location.href);
+                isSameOrigin = parsed.origin === window.location.origin;
+              }
+            } catch (_) {}
+
+            // Skip SDK's own backend calls — already handled by APIClient.send()
+            if (urlStr.includes('sdkapi.cryptique.io')) {
+              return originalFetch.apply(this, arguments);
+            }
+
+            // Pass cross-origin calls through untouched
+            if (!isSameOrigin) {
+              return originalFetch.apply(this, arguments);
+            }
+
+            const method = (init?.method || (input instanceof Request ? input.method : 'GET') || 'GET').toUpperCase();
+
+            return originalFetch.apply(this, arguments).then(
+              (response) => {
+                if (response.status >= 400) {
+                  EventsManager.trackAutoEvent('network_error', {
+                    url:          urlStr,
+                    method:       method,
+                    status:       response.status,
+                    status_text:  `HTTP ${response.status} Error`,
+                    duration_ms:  Date.now() - startTime
+                  });
+                }
+                return response;
+              },
+              (err) => {
+                // Network-level failure (offline, DNS, CORS preflight, etc.)
+                EventsManager.trackAutoEvent('network_error', {
+                  url:         urlStr,
+                  method:      method,
+                  status:      0,
+                  status_text: 'Fetch Network Error',
+                  duration_ms: Date.now() - startTime
+                });
+                throw err; // re-throw so the calling code still gets the error
+              }
+            );
+          };
         }
+      } catch (error) {
+      }
     },
 
     /**
@@ -5656,8 +5801,54 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         let clsScore                  = 0;
         let longTasksCount            = 0;
         let maxLongTaskMs             = 0;
+        let longTaskTimestamps        = []; // [{start_ms, duration_ms}] capped at 20
         let inpMs                     = 0;
 
+        // ── Exit type detection ─────────────────────────────────────────────
+        // Classifies HOW the user left this page so the AI can distinguish
+        // explicit rejection (back-button) from fatigue (tab-close) from
+        // internal navigation (SPA route change or page refresh).
+        //
+        // Values:
+        //   'back_forward'    – browser back/forward button (popstate)
+        //   'spa_navigation'  – SPA pushState / replaceState route change
+        //   'reload'          – page refresh (F5 / Ctrl+R / location.reload)
+        //   'tab_close'       – tab or window closed (beforeunload, no subsequent nav)
+        //   'unknown'         – couldn't be determined (visibilitychange, iOS Safari, etc.)
+        let pageExitType = 'unknown';
+
+        window.addEventListener('popstate', () => {
+          pageExitType = 'back_forward';
+        }, { once: true });
+
+        // Intercept SPA navigation — hook into the already-overridden pushState /
+        // replaceState (the overrides were applied in Section 11: SessionTracker).
+        // We listen to the 'cq:spa-navigation' custom event that we dispatch below,
+        // rather than overriding pushState a second time.
+        // Detect by watching for our own navigation event (fired by SessionTracker).
+        window.addEventListener('cq:spa-navigation', () => {
+          if (pageExitType === 'unknown') pageExitType = 'spa_navigation';
+        }, { once: true });
+
+        // Detect reload via PerformanceNavigationTiming.type === 'reload'
+        try {
+          const navEntry = performance.getEntriesByType('navigation')[0];
+          if (navEntry && navEntry.type === 'reload') {
+            // The CURRENT page was reached by reload; if user reloads again
+            // we'll see another 'reload' on the next load — set a provisional flag.
+            pageExitType = 'reload_arrived'; // overridden by popstate/spa if applicable
+          }
+        } catch (_) {}
+
+        window.addEventListener('beforeunload', () => {
+          // beforeunload fires for tab-close AND for hard navigations (link clicks,
+          // address-bar entry). SPA navigations do NOT fire it. popstate fires
+          // before pagehide for back/forward so the flag is already set.
+          if (pageExitType === 'unknown' || pageExitType === 'reload_arrived') {
+            pageExitType = 'tab_close';
+          }
+        });
+
         const pageLoadTime  = Date.now();
         let lastSigScrollY  = window.scrollY;
         let lastSigDir      = 0; // 1=down, -1=up
@@ -5689,6 +5880,16 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             for (const e of list.getEntries()) {
               longTasksCount++;
               if (e.duration > maxLongTaskMs) maxLongTaskMs = Math.round(e.duration);
+              // Record when each long task started (ms since page load, same reference
+              // frame as first_interaction_ms) so the AI can correlate main-thread
+              // blocking with the moment a user first tried to interact.
+              // Cap at 20 — pathological pages sample the earliest 20 tasks.
+              if (longTaskTimestamps.length < 20) {
+                longTaskTimestamps.push({
+                  start_ms:    Math.round(e.startTime),
+                  duration_ms: Math.round(e.duration)
+                });
+              }
             }
           }).observe({ type: 'longtask', buffered: true });
         } catch (_) {}
@@ -5929,6 +6130,11 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
               .sort((a, b) => b.dwell_ms - a.dwell_ms)
               .slice(0, 20);
 
+            // Finalise exit_type: if it's still the provisional reload_arrived value
+            // (user reloaded this page and didn't navigate away via back/spa), keep it
+            // as 'reload' since the beforeunload didn't fire (e.g. visibilitychange path).
+            const finalExitType = pageExitType === 'reload_arrived' ? 'reload' : pageExitType;
+
             EventsManager.trackAutoEvent('page_summary', {
               scroll_reversals:              scrollReversals,
               scroll_reversal_depths:        scrollReversalDepths,
@@ -5945,7 +6151,9 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
               cls_score:                     clsScore,
               long_tasks_count:              longTasksCount,
               max_long_task_ms:              maxLongTaskMs,
+              long_task_timestamps:          longTaskTimestamps,
               inp_ms:                        inpMs,
+              exit_type:                     finalExitType,
               document_height: document.documentElement.scrollHeight || document.body.scrollHeight || 0,
               document_width:  document.documentElement.scrollWidth  || document.body.scrollWidth  || 0,
               viewport_width:  window.innerWidth,
@@ -6652,6 +6860,13 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
      */
     async trackAutoEvent(eventName, autoEventData = {}, elementData = {}) {
       try {
+        // Keep a running record of the last auto-event name so that js_error
+        // events can include a "last_event_name" field for context.
+        // Skip error-category events themselves to avoid circular noise.
+        if (eventName && eventName !== 'js_error' && eventName !== 'network_error') {
+          EventsManager._lastAutoEventName = eventName;
+        }
+
         // Check if auto events should be tracked (silently skip if disabled)
         if (!shouldTrackAutoEvents()) {
           return; // Silently skip - don't log to avoid console spam
@@ -7330,8 +7545,23 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       let clickCount = 0;
       let lastClickTime = 0;
       let lastClickElement = null;
+      let rageStartTime = 0;   // Timestamp of the first click in the current rage sequence
+      let rageTimer = null;    // Debounce timer — fires ONE rage_click after sequence ends
       const pendingDeadClicks = new Map(); // Track clicks that might be dead clicks
 
+      // MutationObserver counter — incremented on ANY DOM change.
+      // Dead-click detection compares the count at click-time vs 800 ms later:
+      // if nothing changed (URL stable + zero new mutations) it's a true dead click.
+      // This prevents false positives in SPAs where interactions update the DOM
+      // without changing the URL (modals, dropdowns, cart updates, tab panels, etc.).
+      let domMutationCount = 0;
+      try {
+        new MutationObserver(() => { domMutationCount++; })
+          .observe(document.documentElement, {
+            childList: true, subtree: true, attributes: true, characterData: false
+          });
+      } catch (_) {}
+
       // Helper function to check if element is interactive
       const isInteractiveElement = (el) => {
         if (!el) return false;
@@ -7421,31 +7651,60 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           elementData.image_height = element.naturalHeight || null;
         }
 
-        // Detect rage clicks (multiple clicks on same element quickly)
+        // Detect rage clicks — fire exactly ONE event per sequence when the burst ends.
+        // A "sequence" is N rapid clicks on the same element within 1 s of each other.
+        // We debounce 800 ms after the last click so the event carries the FINAL count
+        // and the total time-span from first to last click (not just the last interval).
         if (element === lastClickElement && now - lastClickTime < 1000) {
           clickCount++;
+
           if (clickCount >= 3) {
-            const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
-            const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
-            const docHeight = Math.min(Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 25000);
-            const docWidth = Math.min(Math.max(document.body.scrollWidth, document.documentElement.scrollWidth), 25000);
-            EventsManager.trackAutoEvent('rage_click', {
-              click_coordinates: { x: event.clientX, y: event.clientY },
-              page_x: event.pageX,
-              page_y: event.pageY,
-              scroll_x: scrollX,
-              scroll_y: scrollY,
-              document_height: docHeight,
-              document_width: docWidth,
-              click_count: clickCount,
-              time_span: now - lastClickTime,
-              element_area: element.offsetWidth * element.offsetHeight,
-              element_category: elementCategory
-            }, elementData).catch(err => {
-              });
+            // Cancel any previously scheduled fire — sequence is still ongoing
+            if (rageTimer) { clearTimeout(rageTimer); rageTimer = null; }
+
+            // Snapshot mutable values at the time of THIS click
+            const snapScrollX   = window.scrollX != null ? window.scrollX : window.pageXOffset;
+            const snapScrollY   = window.scrollY != null ? window.scrollY : window.pageYOffset;
+            const snapDocHeight = Math.min(Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 25000);
+            const snapDocWidth  = Math.min(Math.max(document.body.scrollWidth,  document.documentElement.scrollWidth),  25000);
+            const snapClientX   = event.clientX;
+            const snapClientY   = event.clientY;
+            const snapPageX     = event.pageX;
+            const snapPageY     = event.pageY;
+            const snapElemData  = Object.assign({}, elementData);
+            const snapCategory  = elementCategory;
+            const snapArea      = element.offsetWidth * element.offsetHeight;
+            const snapAriaLabel = element.getAttribute('aria-label') || null;
+            const snapStartTime = rageStartTime;
+            const snapNow       = now;
+
+            // Fire after 800 ms of inactivity — reads the FINAL clickCount from closure
+            rageTimer = setTimeout(() => {
+              rageTimer = null;
+              EventsManager.trackAutoEvent('rage_click', {
+                click_coordinates: { x: snapClientX, y: snapClientY },
+                page_x:            snapPageX,
+                page_y:            snapPageY,
+                scroll_x:          snapScrollX,
+                scroll_y:          snapScrollY,
+                document_height:   snapDocHeight,
+                document_width:    snapDocWidth,
+                click_count:       clickCount,          // final count for the whole sequence
+                time_span:         snapNow - snapStartTime, // first→last click duration
+                element_area:      snapArea,
+                element_category:  snapCategory,
+                aria_label:        snapAriaLabel
+              }, snapElemData).catch(() => {});
+              // Reset sequence state after the event is dispatched
+              clickCount = 0;
+              lastClickElement = null;
+            }, 800);
           }
         } else {
-          clickCount = 1;
+          // New element or gap > 1 s — start a fresh sequence
+          if (rageTimer) { clearTimeout(rageTimer); rageTimer = null; }
+          clickCount    = 1;
+          rageStartTime = now;
         }
 
         // Check if this might be a dead click (non-interactive element)
@@ -7469,6 +7728,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             elementCategory,
             timestamp: now,
             url: window.location.href,
+            snapshotMutationCount: domMutationCount, // DOM state at click time
             clickX,
             clickY,
             page_x: event.pageX,
@@ -7479,13 +7739,17 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             document_width: docWidth
           });
           
-          // Check after 1 second if navigation occurred or if it's still a dead click
+          // Check after 800 ms: if URL unchanged AND DOM unchanged → true dead click.
+          // Using 800 ms (down from 1 s) tightens the window while still allowing
+          // async renders (React setState, animations) to complete before we decide.
           setTimeout(() => {
             checkNavigation();
-            
+
             const pendingClick = pendingDeadClicks.get(clickId);
-            if (pendingClick && window.location.href === pendingClick.url) {
-              // No navigation occurred, this is a dead click
+            if (pendingClick &&
+                window.location.href === pendingClick.url &&
+                domMutationCount === pendingClick.snapshotMutationCount) {
+              // No URL change AND no DOM mutations → confirmed dead click
               pendingDeadClicks.delete(clickId);
               
               EventsManager.trackAutoEvent('dead_click', {
@@ -7505,10 +7769,10 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
                 console.error('❌ [AutoEvents] Failed to track dead_click:', err);
               });
             } else if (pendingClick) {
-              // Navigation occurred, not a dead click
+              // URL changed or DOM mutated — interaction was real, not a dead click
               pendingDeadClicks.delete(clickId);
             }
-          }, 1000);
+          }, 800);
         }
 
         // Track regular click with enhanced data (viewport + page-relative for heatmaps)