noibu-react-native 0.2.2 → 0.2.4

package/dist/pageVisit/pageVisitEventHTTP.js

@@ -1,112 +1,98 @@
-import { getMaxSubstringAllowed, asString } from '../utils/function.js';
 import { timestampWrapper } from '../utils/date.js';
-import { InputMonitor } from '../monitors/inputMonitor.js';
-import { HTTP_METHOD_ATT_NAME, MAX_HTTP_DATA_EVENT_COUNT, PV_SEQ_ATT_NAME, HTTP_DATA_METROPLEX_TYPE, HTTP_EVENT_TYPE, PAGE_VISIT_HTTP_DATA_ATT_NAME } from '../constants.js';
+import { HTTP_RESP_CODE_ATT_NAME, HTTP_RESP_TIME_ATT_NAME, HTTP_METHOD_ATT_NAME, URL_ATT_NAME, PV_SEQ_ATT_NAME, PAGE_VISIT_HTTP_DATA_ATT_NAME, HTTP_DATA_METROPLEX_TYPE, HTTP_EVENT_TYPE, MAX_HTTP_DATA_EVENT_COUNT, MAX_HTTP_DATA_IF_ERROR_EVENT_COUNT } from '../constants.js';
 import { PageVisit } from './pageVisit.js';
 import StoredMetrics from '../api/storedMetrics.js';
 import MetroplexSocket from '../api/metroplexSocket.js';
-import { noibuLog } from '../utils/log.js';
+import { getMaxSubstringAllowed, asString, safeTrim } from '../utils/function.js';
+import { EventDebouncer } from './EventDebouncer.js';
 
 /** @module PageVisitEventHTTP */
-
 /**
  * Determines if a response is a failure
- * @param  {number} code
  */
 function isHttpCodeFailure(code) {
-  if (typeof code !== 'number') {
-    return true;
-  }
-
-  return code >= 400 || code <= 0;
+    if (typeof code !== 'number') {
+        return true;
+    }
+    return code >= 400 || code <= 0;
 }
-
 /** Class representing a PageVisitEventHTTP */
 class PageVisitEventHTTP {
-  /**
-   * Creates an instance of the http event for the pv
-   * @param  {} httpEvent
-   * @param  {} httpData
-   */
-  constructor(httpEvent, httpData) {
-    const mutatedHttpEvent = httpEvent;
-    // TODO: implement attribute checking in this function
-    // we force the response time to at least be 0 if it is negative or if its not present
-    if (!mutatedHttpEvent.resp_time || mutatedHttpEvent.resp_time < 0) {
-      mutatedHttpEvent.resp_time = 0;
-    }
-
-    // setting the method to be upper case
-    mutatedHttpEvent[HTTP_METHOD_ATT_NAME] =
-      httpEvent[HTTP_METHOD_ATT_NAME].toUpperCase();
-
-    mutatedHttpEvent.url = getMaxSubstringAllowed(
-      asString(mutatedHttpEvent.url),
-    );
-
-    this.httpEvent = mutatedHttpEvent;
-    this.httpData = httpData;
-  }
-
-  /** Saves the HTTP event to the pageVisit Queue */
-  saveHTTPEvent() {
-    noibuLog('saveHTTPEvent');
-    // we do not store http events that have empty urls
-    if (
-      !this.httpEvent ||
-      !this.httpEvent.url ||
-      this.httpEvent.url.trim() === ''
-    ) {
-      noibuLog('saveHTTPEvent dropped due to empty url');
-      return;
+    /**
+     * Creates an instance of the http event for the pv
+     */
+    constructor(httpEvent, httpData, isGqlError = false) {
+        /** if no value or it's less than 0, fallback to 0 */
+        const validate = (value) => (!value || value < 0 ? 0 : value);
+        this.httpEvent = {
+            [HTTP_RESP_CODE_ATT_NAME]: validate(httpEvent[HTTP_RESP_CODE_ATT_NAME]),
+            [HTTP_RESP_TIME_ATT_NAME]: validate(httpEvent[HTTP_RESP_TIME_ATT_NAME]),
+            [HTTP_METHOD_ATT_NAME]: (httpEvent[HTTP_METHOD_ATT_NAME] || 'get').toUpperCase(),
+            [URL_ATT_NAME]: getMaxSubstringAllowed(asString(httpEvent[URL_ATT_NAME])),
+        };
+        this.httpData = httpData;
+        this.isGqlError = isGqlError;
     }
-    // we register an http event
-    StoredMetrics.getInstance().addHttpEvent();
-
-    // send http data down to metroplex
-    if (this.httpData) {
-      noibuLog('saveHTTPEvent got httpData, working');
-      // add the sequence number to both events
-      const sequenceNumber = StoredMetrics.getInstance().httpSequenceNumber;
-      // restrict total number of events collected per page visit to ensure we don't
-      // blow up memory and storage usage
-      if (sequenceNumber < MAX_HTTP_DATA_EVENT_COUNT) {
-        this.httpData[PV_SEQ_ATT_NAME] = sequenceNumber;
-        this.httpEvent[PV_SEQ_ATT_NAME] = sequenceNumber;
-        // increment the count
-        StoredMetrics.getInstance().addHttpData();
-
-        const metroplexMsg = {};
-        metroplexMsg[PAGE_VISIT_HTTP_DATA_ATT_NAME] = this.httpData;
-        MetroplexSocket.getInstance().sendMessage(
-          HTTP_DATA_METROPLEX_TYPE,
-          metroplexMsg,
-        );
-      } else {
-        noibuLog(
-          'saveHTTPEvent have collected more than the max number of http requests for this page visit, so increment the over request limit count',
-        );
-        // have collected more than the max number of http requests for this
-        // page visit, so increment the over request limit count
-        StoredMetrics.getInstance().addHttpDataOverLimit();
-      }
+    /** Saves the HTTP event to the pageVisit Queue */
+    saveHTTPEvent() {
+        // we do not store http events that have empty urls
+        if (!this.httpEvent || !safeTrim(this.httpEvent[URL_ATT_NAME])) {
+            return;
+        }
+        // we register an http event
+        StoredMetrics.getInstance().addHttpEvent();
+        const status = this.httpEvent[HTTP_RESP_CODE_ATT_NAME];
+        // send http data down to metroplex
+        if (this.httpData) {
+            // add the sequence number to both events
+            const sequenceNumber = StoredMetrics.getInstance().httpSequenceNumber;
+            const isSendAllowed = PageVisitEventHTTP.isSendAllowed(status, sequenceNumber, this.isGqlError);
+            // restrict total number of events collected per page visit to ensure we don't
+            // blow up memory and storage usage
+            if (isSendAllowed) {
+                this.httpData[PV_SEQ_ATT_NAME] = sequenceNumber;
+                this.httpEvent[PV_SEQ_ATT_NAME] = sequenceNumber;
+                // increment the count
+                StoredMetrics.getInstance().addHttpData();
+                const metroplexMsg = {
+                    [PAGE_VISIT_HTTP_DATA_ATT_NAME]: this.httpData,
+                };
+                MetroplexSocket.getInstance().sendMessage(HTTP_DATA_METROPLEX_TYPE, metroplexMsg);
+            }
+            else {
+                // have collected more than the max number of http requests for this
+                // page visit, so increment the over request limit count
+                StoredMetrics.getInstance().addHttpDataOverLimit();
+            }
+        }
+        // if this was an error, send immediately so we don't lose it
+        if (isHttpCodeFailure(status)) {
+            PageVisit.getInstance().addPageVisitEvent({
+                event: this.httpEvent,
+                occurredAt: new Date(timestampWrapper(Date.now())).toISOString(),
+            }, HTTP_EVENT_TYPE);
+            return;
+        }
+        // debounce event
+        EventDebouncer.getInstance().addEvent(this.httpEvent, HTTP_EVENT_TYPE);
     }
-    // if this was an error, send immediately so we don't lose it
-    if (isHttpCodeFailure(this.httpEvent.code)) {
-      noibuLog('saveHTTPEvent is an error, sending immediately');
-      PageVisit.getInstance().addPageVisitEvent(
-        {
-          event: this.httpEvent,
-          occurredAt: new Date(timestampWrapper(Date.now())).toISOString(),
-        },
-        HTTP_EVENT_TYPE,
-      );
-      return;
+    /**
+     * Checks if sending data is allowed based on the HTTP status code and count.
+     * status - The HTTP status code to evaluate.
+     * count - The count of events to consider.
+     * isGqlError - Whether the context is considered as a GQL error.
+     * Returns `true` if sending data is allowed, `false` otherwise.
+     */
+    static isSendAllowed(status, count, isGqlError = false) {
+        const isFailure = isHttpCodeFailure(status) || isGqlError;
+        const isSuccess = !isFailure;
+        if (isSuccess) {
+            if (count < MAX_HTTP_DATA_EVENT_COUNT) {
+                return true;
+            }
+        }
+        return isFailure && count < MAX_HTTP_DATA_IF_ERROR_EVENT_COUNT;
     }
-
-    // debounce event
-    InputMonitor.getInstance().addEvent(this.httpEvent, HTTP_EVENT_TYPE);
-  }
 }
 
 export { PageVisitEventHTTP, isHttpCodeFailure };

package/dist/react/ErrorBoundary.js

@@ -13,7 +13,24 @@ const INITIAL_STATE = {
  * @extends {Component<ErrorBoundaryProps, ErrorBoundaryState>}
  */
 class ErrorBoundary extends React.Component {
-    state = INITIAL_STATE;
+    constructor() {
+        super(...arguments);
+        this.state = INITIAL_STATE;
+        /**
+         * Callback from fallback to reset the error boundary
+         * @param  {} =>void=(
+         */
+        this.resetErrorBoundary = () => {
+            const { onReset } = this.props;
+            const { error, componentStack, eventId } = this.state;
+            if (onReset) {
+                if (typeof componentStack === 'string') {
+                    onReset(error, componentStack, eventId);
+                }
+            }
+            this.setState(INITIAL_STATE);
+        };
+    }
     /**
      * Lifecycle hook on mount
      * @returns void
@@ -57,20 +74,6 @@ class ErrorBoundary extends React.Component {
             }
         }
     }
-    /**
-     * Callback from fallback to reset the error boundary
-     * @param  {} =>void=(
-     */
-    resetErrorBoundary = () => {
-        const { onReset } = this.props;
-        const { error, componentStack, eventId } = this.state;
-        if (onReset) {
-            if (typeof componentStack === 'string') {
-                onReset(error, componentStack, eventId);
-            }
-        }
-        this.setState(INITIAL_STATE);
-    };
     /**
      *
      * Renders the fallback ui

package/dist/sessionRecorder/nativeSessionRecorderSubscription.js

@@ -32,7 +32,7 @@ function initialize(projectId, config) {
     }
     nativeModuleEmitter = new NativeEventEmitter(NativeSessionRecorder);
     // applying default values
-    const { userId = null, logLevel = LogLevel.None, allowMeteredNetworkUsage = false, enableWebViewCapture = true, allowedDomains = ['*'], disableOnLowEndDevices = false, maximumDailyNetworkUsageInMB = null, } = config ?? {};
+    const { userId = null, logLevel = LogLevel.None, allowMeteredNetworkUsage = false, enableWebViewCapture = true, allowedDomains = ['*'], disableOnLowEndDevices = false, maximumDailyNetworkUsageInMB = null, } = config !== null && config !== void 0 ? config : {};
     if (!SupportedPlatforms.includes(Platform.OS)) {
         noibuLog(`Noibu - Session recording supports ${SupportedPlatforms.join(', ')} only for now.`);
         return;
@@ -43,13 +43,14 @@ function initialize(projectId, config) {
     }
     // We use two parameters because the react method parameters do not accept nullable primitive types.
     const enableDailyNetworkUsageLimit = maximumDailyNetworkUsageInMB != null;
-    const refinedMaximumDailyNetworkUsageInMB = maximumDailyNetworkUsageInMB ?? 0;
+    const refinedMaximumDailyNetworkUsageInMB = maximumDailyNetworkUsageInMB !== null && maximumDailyNetworkUsageInMB !== void 0 ? maximumDailyNetworkUsageInMB : 0;
     NativeSessionRecorder.initialize(projectId, userId, logLevel, allowMeteredNetworkUsage, enableWebViewCapture, allowedDomains, disableOnLowEndDevices, enableDailyNetworkUsageLimit, refinedMaximumDailyNetworkUsageInMB);
 }
 function subscribeToNativeEvent(callback) {
     if (!nativeModuleEmitter) {
         throw new Error('You have to initialize Noibu Session Recorder first');
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     nativeModuleEmitter.addListener('noibuRecordingEvent', callback);
     // return () => subscription.remove();
     return () => { };

package/dist/sessionRecorder/sessionRecorder.js

@@ -1,30 +1,21 @@
+import { __awaiter } from 'tslib';
 import { strToU8, zlibSync, strFromU8 } from 'fflate';
 import { LogLevel, initialize, subscribeToNativeEvent } from './nativeSessionRecorderSubscription.js';
 import StoredMetrics from '../api/storedMetrics.js';
 import ClientConfig from '../api/clientConfig.js';
 import { stringifyJSON } from '../utils/function.js';
-import { SEVERITY, POST_METRICS_EVENT_NAME, MAX_TIME_FOR_RECORDER_USER_EVENTS, MAX_RECORDER_EVENT_BUFFER, MAX_TIME_FOR_UNSENT_DATA_MILLIS, VIDEO_FRAG_ATT_NAME, PV_SEQ_ATT_NAME, LENGTH_ATT_NAME, CSS_URLS_ATT_NAME, VIDEO_METROPLEX_TYPE, PAGE_VISIT_VID_FRAG_ATT_NAME } from '../constants.js';
+import { MAX_TIME_FOR_RECORDER_USER_EVENTS, SEVERITY, MAX_RECORDER_EVENT_BUFFER, MAX_TIME_FOR_UNSENT_DATA_MILLIS, VIDEO_FRAG_ATT_NAME, PV_SEQ_ATT_NAME, LENGTH_ATT_NAME, CSS_URLS_ATT_NAME, VIDEO_METROPLEX_TYPE, PAGE_VISIT_VID_FRAG_ATT_NAME, POST_METRICS_EVENT_NAME } from '../constants.js';
 import MetroplexSocket from '../api/metroplexSocket.js';
 import { addSafeEventListener } from '../utils/eventlistener.js';
 import { noibuLog } from '../utils/log.js';
 
 /** Singleton class to record user sessions */
 class SessionRecorder {
-    static instance;
-    eventBuffer;
-    vfCounter;
-    didSetupRecorder;
-    isVideoLengthNegativeInvalid;
-    lastFragPostTimestamp;
-    pauseTimeout;
-    lastRecordedTimestamp;
-    firstRecordedTimestamp;
-    recordStopper;
-    freezingEvents = false;
     /**
      * Creates an instance of the session recorder
      */
     constructor() {
+        this.freezingEvents = false;
         this.eventBuffer = [];
         this.vfCounter = 0;
         this.didSetupRecorder = false;
@@ -94,21 +85,23 @@ class SessionRecorder {
     /**
      * Starts recording the user session
      */
-    async recordUserSession() {
-        // check if inactive before starting any recording
-        noibuLog('recordUserSession');
-        if ((await MetroplexSocket.getInstance().closeIfInactive()) ||
-            StoredMetrics.getInstance().didCutVideo) {
-            return;
-        }
-        // making sure we are not attempting to call this method
-        // multiple times.
-        if (this.didSetupRecorder) {
-            return;
-        }
-        StoredMetrics.getInstance().setDidStartVideo();
-        this.recordStopper = subscribeToNativeEvent(this.handleRecorderEvent.bind(this));
-        this.didSetupRecorder = true;
+    recordUserSession() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // check if inactive before starting any recording
+            noibuLog('recordUserSession');
+            if ((yield MetroplexSocket.getInstance().closeIfInactive()) ||
+                StoredMetrics.getInstance().didCutVideo) {
+                return;
+            }
+            // making sure we are not attempting to call this method
+            // multiple times.
+            if (this.didSetupRecorder) {
+                return;
+            }
+            StoredMetrics.getInstance().setDidStartVideo();
+            this.recordStopper = subscribeToNativeEvent(this.handleRecorderEvent.bind(this));
+            this.didSetupRecorder = true;
+        });
     }
     /**
      * handleNewRRwebEvent will process each upcoming.
@@ -116,71 +109,75 @@ class SessionRecorder {
      * is updated with the latest events and post the contents
      * of the buffer if it exceeds max size
      */
-    async handleRecorderEvent(recorderEvent) {
-        const timestamp = Date.now();
-        // check if inactive before any processing
-        if ((await MetroplexSocket.getInstance().closeIfInactive()) ||
-            StoredMetrics.getInstance().didCutVideo) {
-            this.freeze();
-            return;
-        }
-        // determine if timeout should be extended based on event/source type
-        // event type 3 is an incremental snapshot
-        // event data source 0 is a mutation (all other data sources are user events)
-        if (this.pauseTimeout) {
-            // received a user event, extend the timeout
-            clearTimeout(this.pauseTimeout);
-            this.freezingEvents = false;
-        }
-        this.pauseTimeout = setTimeout(() => {
-            // stop recording page mutations after 2s of inactivity
-            // otherwise sites with many mutations will hit max video size
-            // in a short amount of time without any user events
-            this.freezingEvents = true;
-            // freezePage stops emitting events until the next user event is received
-            this.freeze();
-        }, MAX_TIME_FOR_RECORDER_USER_EVENTS);
-        // Set the first recorded timestamp if it hasn't been set yet.
-        // We usually only want this to be set once as the first recorded timestamp
-        // should not change.
-        if (!this.firstRecordedTimestamp) {
-            this.firstRecordedTimestamp = timestamp;
-        }
-        // Set the last recorded timestamp if it hasn't been set yet or a newly received rrweb
-        // event has a more recent timestamp than the last recorded timestamp.
-        if (!this.lastRecordedTimestamp || timestamp > this.lastRecordedTimestamp) {
-            this.lastRecordedTimestamp = timestamp;
-        }
-        // Checks if we've gone back in time for some reason.
-        // If we have, adjust our data accordingly to ensure we don't mess up
-        // the metrics 'exp_vid_len' data.
-        // If we don't adjust for time, we assume that the expected video length is
-        // the difference between the first recorded timestamp and the last recorded timestamp.
-        if (this.firstRecordedTimestamp &&
-            timestamp < this.firstRecordedTimestamp) {
-            ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`Detected time rewind. Client has been disabled.`, true, SEVERITY.error, true);
-            return;
-        }
-        const packedEvent = await this.pack(recorderEvent.message);
-        // Buffer the event for sending to metroplex
-        this.eventBuffer.push(packedEvent);
-        // Check if the event was a click or a double click. This is true if the root type is
-        // incremental snapshot (3) and the data source is mouse interaction data (2).
-        // Finally, we capture a click (2) or double click (4) event.
-        // todo if there are clicks, call StoredMetrics.getInstance().addVideoClick(); for each click
-        const now = Date.now();
-        const delta = now - this.lastFragPostTimestamp;
-        if (this.eventBuffer.length >= MAX_RECORDER_EVENT_BUFFER ||
-            delta > MAX_TIME_FOR_UNSENT_DATA_MILLIS) {
-            this.handleFragPost();
-        }
+    handleRecorderEvent(recorderEvent) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const timestamp = Date.now();
+            // check if inactive before any processing
+            if ((yield MetroplexSocket.getInstance().closeIfInactive()) ||
+                StoredMetrics.getInstance().didCutVideo) {
+                this.freeze();
+                return;
+            }
+            // determine if timeout should be extended based on event/source type
+            // event type 3 is an incremental snapshot
+            // event data source 0 is a mutation (all other data sources are user events)
+            if (this.pauseTimeout) {
+                // received a user event, extend the timeout
+                clearTimeout(this.pauseTimeout);
+                this.freezingEvents = false;
+            }
+            this.pauseTimeout = setTimeout(() => {
+                // stop recording page mutations after 2s of inactivity
+                // otherwise sites with many mutations will hit max video size
+                // in a short amount of time without any user events
+                this.freezingEvents = true;
+                // freezePage stops emitting events until the next user event is received
+                this.freeze();
+            }, MAX_TIME_FOR_RECORDER_USER_EVENTS);
+            // Set the first recorded timestamp if it hasn't been set yet.
+            // We usually only want this to be set once as the first recorded timestamp
+            // should not change.
+            if (!this.firstRecordedTimestamp) {
+                this.firstRecordedTimestamp = timestamp;
+            }
+            // Set the last recorded timestamp if it hasn't been set yet or a newly received rrweb
+            // event has a more recent timestamp than the last recorded timestamp.
+            if (!this.lastRecordedTimestamp || timestamp > this.lastRecordedTimestamp) {
+                this.lastRecordedTimestamp = timestamp;
+            }
+            // Checks if we've gone back in time for some reason.
+            // If we have, adjust our data accordingly to ensure we don't mess up
+            // the metrics 'exp_vid_len' data.
+            // If we don't adjust for time, we assume that the expected video length is
+            // the difference between the first recorded timestamp and the last recorded timestamp.
+            if (this.firstRecordedTimestamp &&
+                timestamp < this.firstRecordedTimestamp) {
+                ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`Detected time rewind. Client has been disabled.`, true, SEVERITY.error, true);
+                return;
+            }
+            const packedEvent = yield this.pack(recorderEvent.message);
+            // Buffer the event for sending to metroplex
+            this.eventBuffer.push(packedEvent);
+            // Check if the event was a click or a double click. This is true if the root type is
+            // incremental snapshot (3) and the data source is mouse interaction data (2).
+            // Finally, we capture a click (2) or double click (4) event.
+            // todo if there are clicks, call StoredMetrics.getInstance().addVideoClick(); for each click
+            const now = Date.now();
+            const delta = now - this.lastFragPostTimestamp;
+            if (this.eventBuffer.length >= MAX_RECORDER_EVENT_BUFFER ||
+                delta > MAX_TIME_FOR_UNSENT_DATA_MILLIS) {
+                this.handleFragPost();
+            }
+        });
     }
     /**
      * Compress event
      */
-    async pack(recorderEvent) {
-        // return JSON.stringify(recorderEvent);
-        return SessionRecorder.compress(recorderEvent);
+    pack(recorderEvent) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // return JSON.stringify(recorderEvent);
+            return SessionRecorder.compress(recorderEvent);
+        });
     }
     static compress(snapshot) {
         const uncompressedString = stringifyJSON(snapshot);
@@ -200,76 +197,80 @@ class SessionRecorder {
      * necessary management of the buffer and it's related
      * variables
      */
-    async handleFragPost() {
-        // check if inactive before any processing
-        if (await MetroplexSocket.getInstance().closeIfInactive()) {
-            return;
-        }
-        if (!this.didSetupRecorder) {
-            return;
-        }
-        if (this.eventBuffer.length === 0) {
-            return;
-        }
-        try {
-            let totalVideoTime = 0;
-            // checking if we have those values set in the first place
-            if (this.firstRecordedTimestamp &&
-                this.lastRecordedTimestamp &&
-                !this.isVideoLengthNegativeInvalid) {
-                totalVideoTime =
-                    this.lastRecordedTimestamp - this.firstRecordedTimestamp;
+    handleFragPost() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // check if inactive before any processing
+            if (yield MetroplexSocket.getInstance().closeIfInactive()) {
+                return;
             }
-            // In the past we have seen the video LengthMS field to be negative
-            // and bigger than the long limit of scala. Which is less than the
-            // safe integer limit of js.
-            if (!this.isVideoLengthNegativeInvalid &&
-                (totalVideoTime < 0 || totalVideoTime >= Number.MAX_SAFE_INTEGER)) {
-                // we log an error to know if this is still happening
-                ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`video lengthMS is invalid: ${totalVideoTime}, ` +
-                    `start time: ${this.firstRecordedTimestamp}, ` +
-                    `end time: ${this.lastRecordedTimestamp}`, false, SEVERITY.error);
-                this.isVideoLengthNegativeInvalid = true;
-                totalVideoTime = 0;
+            if (!this.didSetupRecorder) {
+                return;
             }
-            this.vfCounter += 1;
-            const videoFragment = MetroplexSocket.getInstance().addEndTimeToPayload({
-                // single string for the video content. This gets converted to bytes
-                // when being sent to metroplex which we will then unmarshall into
-                // a struct to parse it's inner urls
-                // If stringifying this event buffer takes too long consider using a service worker
-                [VIDEO_FRAG_ATT_NAME]: stringifyJSON(this.eventBuffer),
-                // Send the sequence number but don't send the expected length since that is sent as
-                // part of the last stored metrics data
-                [PV_SEQ_ATT_NAME]: this.vfCounter,
-                [LENGTH_ATT_NAME]: totalVideoTime,
-                [CSS_URLS_ATT_NAME]: [],
-            }, false);
-            StoredMetrics.getInstance().addVideoFragData(this.vfCounter, totalVideoTime);
-            // constructing a client message that metroplex knows how to handle.
-            await MetroplexSocket.getInstance().sendMessage(VIDEO_METROPLEX_TYPE, {
-                [PAGE_VISIT_VID_FRAG_ATT_NAME]: videoFragment,
-            });
-            this.lastFragPostTimestamp = Date.now();
-        }
-        catch (err) {
-            // letting collect know we are closing the rrweb listener
-            ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`video frag socket closed with err: ${err.message}`, false, SEVERITY.error);
-            // if we detect an error in the frag posting, we stop recording
-            // the video
-            this.freeze();
-        }
-        this.eventBuffer = [];
+            if (this.eventBuffer.length === 0) {
+                return;
+            }
+            try {
+                let totalVideoTime = 0;
+                // checking if we have those values set in the first place
+                if (this.firstRecordedTimestamp &&
+                    this.lastRecordedTimestamp &&
+                    !this.isVideoLengthNegativeInvalid) {
+                    totalVideoTime =
+                        this.lastRecordedTimestamp - this.firstRecordedTimestamp;
+                }
+                // In the past we have seen the video LengthMS field to be negative
+                // and bigger than the long limit of scala. Which is less than the
+                // safe integer limit of js.
+                if (!this.isVideoLengthNegativeInvalid &&
+                    (totalVideoTime < 0 || totalVideoTime >= Number.MAX_SAFE_INTEGER)) {
+                    // we log an error to know if this is still happening
+                    ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`video lengthMS is invalid: ${totalVideoTime}, ` +
+                        `start time: ${this.firstRecordedTimestamp}, ` +
+                        `end time: ${this.lastRecordedTimestamp}`, false, SEVERITY.error);
+                    this.isVideoLengthNegativeInvalid = true;
+                    totalVideoTime = 0;
+                }
+                this.vfCounter += 1;
+                const videoFragment = MetroplexSocket.getInstance().addEndTimeToPayload({
+                    // single string for the video content. This gets converted to bytes
+                    // when being sent to metroplex which we will then unmarshall into
+                    // a struct to parse it's inner urls
+                    // If stringifying this event buffer takes too long consider using a service worker
+                    [VIDEO_FRAG_ATT_NAME]: stringifyJSON(this.eventBuffer),
+                    // Send the sequence number but don't send the expected length since that is sent as
+                    // part of the last stored metrics data
+                    [PV_SEQ_ATT_NAME]: this.vfCounter,
+                    [LENGTH_ATT_NAME]: totalVideoTime,
+                    [CSS_URLS_ATT_NAME]: [],
+                }, false);
+                StoredMetrics.getInstance().addVideoFragData(this.vfCounter, totalVideoTime);
+                // constructing a client message that metroplex knows how to handle.
+                yield MetroplexSocket.getInstance().sendMessage(VIDEO_METROPLEX_TYPE, {
+                    [PAGE_VISIT_VID_FRAG_ATT_NAME]: videoFragment,
+                });
+                this.lastFragPostTimestamp = Date.now();
+            }
+            catch (err) {
+                // letting collect know we are closing the rrweb listener
+                ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`video frag socket closed with err: ${err.message}`, false, SEVERITY.error);
+                // if we detect an error in the frag posting, we stop recording
+                // the video
+                this.freeze();
+            }
+            this.eventBuffer = [];
+        });
     }
     /**
      * unfreeze forcefully resumes recording events in case it was frozen
      * waiting for user events
      */
-    async unfreeze() {
-        if (this.freezingEvents) {
-            this.didSetupRecorder = false;
-            await this.recordUserSession();
-        }
+    unfreeze() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.freezingEvents) {
+                this.didSetupRecorder = false;
+                yield this.recordUserSession();
+            }
+        });
     }
     /** stops recording */
     freeze() {