Send events to API when they exceed 64kb because that's the limit of …

…Fetch's keepalive=true

app/views/spectator_sport/shared/_script_tags.erb

@@ -8,13 +8,20 @@ or you can use record.mirror to access the mirror instance during recording.`;le
 </script>
 
 <script>
-  const POST_URL = '/spectator_sport/events';
-  const POST_INTERVAL_SECONDS = 15;
+  function lengthInUtf8Bytes(str) {
+    var m = encodeURIComponent(str).match(/%[89ABab]/g);
+    return str.length + (m ? m.length : 0);
+  }
 
   function generateRandomId() {
     return [...Array(40)].map(() => Math.random().toString(36)[2]).join('');
   }
 
+  const POST_PATH = '/spectator_sport/events';
+  const POST_URL = window.location.origin + POST_PATH;
+  const POST_INTERVAL_SECONDS = 15;
+  const KEEPALIVE_BYTE_LIMIT = 60000; // Fetch payloads >64kb cannot use keepalive: true
+
   const SESSION_ID_STORAGE_NAME = "spectator_sport_session_id";
   let sessionId = window.localStorage.getItem("spectator_sport_session_id");
   if (!sessionId) {
@@ -29,40 +36,58 @@ or you can use record.mirror to access the mirror instance during recording.`;le
     window.sessionStorage.setItem(WINDOW_ID_STORAGE_NAME, windowId);
   }
 
-  function postData(sessionId, windowId, events) {
+  function postData(sessionId, windowId, events, keepalive = true) {
     if (events.length === 0) {
       return
     }
 
-    const body = JSON.stringify({sessionId, windowId, events});
-    events.length = 0;
+    const body = JSON.stringify({sessionId, windowId, events: events });
 
     fetch(POST_URL, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      keepalive: true,
+      keepalive: keepalive,
       body,
+    }).catch((error) => {
+      console.error(error);
     });
   }
 
   function startRecording(sessionId, windowId) {
     const events = [];
-    const stopRecording = rrwebRecord({
+    let eventBytes = 0;
+
+    const stopRrwebRecording = rrwebRecord({
       emit(event) {
-        events.push(event);
+        const serializedEvent = JSON.stringify(event);
+        const newEventBytes = lengthInUtf8Bytes(serializedEvent);
+
+        if (eventBytes + newEventBytes > KEEPALIVE_BYTE_LIMIT) {
+          events.push(event);
+          postData(sessionId, windowId, events, false);
+          events.length = 0;
+          eventBytes = 0;
+        } else {
+          events.push(event);
+          eventBytes = eventBytes + newEventBytes;
+        }
       },
     });
 
-   const refreshInterval = setInterval(function() {
-      postData(sessionId, windowId, events);
+    const refreshInterval = setInterval(function () {
+      postData(sessionId, windowId, events, true);
+      events.length = 0;
+      eventBytes = 0;
     }, POST_INTERVAL_SECONDS * 1000);
 
-    return function() {
+    return function () {
       clearInterval(refreshInterval);
-      stopRecording();
-      postData(sessionId, windowId, events);
+      stopRrwebRecording();
+      postData(sessionId, windowId, events, true);
+      events.length = 0;
+      eventBytes = 0;
     }
   }