fix: Implement flood control with 1024 max events

modules/index.js

@@ -34,10 +34,16 @@ const blocksMO = window.MutationObserver ? new MutationObserver(blocksMCB)
 // eslint-disable-next-line no-use-before-define, max-len
 const mediaMO = window.MutationObserver ? new MutationObserver(mediaMCB)
   /* c8 ignore next */ : {};
+/**
+ * Maximum number of events. The first call will be made by rum-js,
+ * leaving 1023 events for the enhancer to track
+ */
+let maxEvents = 1023;
 
 function trackCheckpoint(checkpoint, data, t) {
   const { weight, id } = window.hlx.rum;
-  if (isSelected) {
+  if (isSelected && maxEvents) {
+    maxEvents -= 1;
     const sendPing = (pdata = data) => {
       // eslint-disable-next-line object-curly-newline, max-len
       const body = JSON.stringify({ weight, id, referer: urlSanitizers[window.hlx.RUM_MASK_URL || 'path'](), checkpoint, t, ...data }, KNOWN_PROPERTIES);
@@ -301,17 +307,10 @@ function mediaMCB(mutations) {
 }
 
 function addTrackingFromConfig() {
-  let lastSource;
-  let lastTarget;
   document.addEventListener('click', (event) => {
-    const source = sourceSelector(event.target);
-    const target = targetSelector(event.target);
-    if (source !== lastSource || target !== lastTarget) {
-      sampleRUM('click', { target, source });
-      lastSource = source;
-      lastTarget = target;
-    }
+    sampleRUM('click', { target: targetSelector(event.target), source: sourceSelector(event.target) });
   });
+
   addCWVTracking();
   addFormTracking(window.document.body);
   addNavigationTracking();

test/it/click.test.html

@@ -12,19 +12,23 @@
     };
     // we log what's being sent to the "server"
     window.called = [];
+    // we need to track the number of events that have been sent
+    window.events = [];
     // and navigator.sendBeacon has been replaced with
     // a call to fakeSendBeacon
     window.fakeSendBeacon = function (url, payload) {
       // if payload is a string, we assume it's a JSON string
       if (typeof payload === 'string') {
         const data = JSON.parse(payload);
+        window.events.push(data);
         if (data.checkpoint === 'click') {
           window.called.push(data);
         }
       } else {
         // it's a blob
         payload.text().then((text) => {
           const data = JSON.parse(text);
+          window.events.push(data);
           if (data.checkpoint === 'click') {
             window.called.push(data);
           }
@@ -80,14 +84,6 @@
           assert(window.called.length === 3 , 'checkpoint for click on link missing');
           assert(window.called[2].source === 'a#alink', 'invalid target for alink checkpoint');
 
-          a.click();
-
-          await new Promise((resolve) => {
-            setTimeout(resolve, 100);
-          });
-
-          assert(window.called.length === 3 , '2 consecutive clicks on link should not trigger new checkpoint');
-
           const late = document.createElement('a');
           late.id = 'alatelink';
           late.onclick = (e) => { e.preventDefault(); };
@@ -98,9 +94,15 @@
           await new Promise((resolve) => {
             setTimeout(resolve, 100);
           });
-
           assert(window.called.length === 4 , 'checkpoint for click on late added link missing');
           assert(window.called[3].source === 'a#alatelink', 'invalid target for alatelink checkpoint');
+          // Test max events
+          const maxEvents = 1026 - window.events.length;
+          for (let i = 0; i < maxEvents; i++) {
+            a.click();
+            await new Promise((resolve) => setTimeout(resolve, 1));
+          }
+          assert(window.events.length === 1024 , '1025th event should not trigger new checkpoint');
         });
       });
     });