noibu-react-native 0.1.2 → 0.2.0

package/dist/api/metroplexSocket.js

@@ -1,7 +1,7 @@
 import uuid from 'react-native-uuid';
-import { getUserAgent, stringifyJSON } from '../utils/function.js';
+import { getUserAgent, stringifyJSON, getVideoRecorderType } from '../utils/function.js';
 import { addSafeEventListener } from '../utils/eventlistener.js';
-import { GET_METROPLEX_BASE_SOCKET_URL, METROPLEX_FRAG_ROUTE, GET_METROPLEX_POST_URL, METROPLEX_RETRY_FREQUENCY, META_DATA_METROPLEX_TYPE, PAGE_VISIT_META_DATA_ATT_NAME, HTTP_DATA_METROPLEX_TYPE, PAGE_VISIT_HTTP_DATA_ATT_NAME, VIDEO_METROPLEX_TYPE, PAGE_VISIT_VID_FRAG_ATT_NAME, PV_METROPLEX_TYPE, PAGE_VISIT_PART_ATT_NAME, SEQ_NUM_ATT_NAME, WORK_REQUEST_ATT_NAME, HELP_CODE_ATT_NAME, PV_EVENTS_ATT_NAME, TYPE_ATT_NAME, USERSTEP_EVENT_TYPE, GET_MAX_METROPLEX_RECONNECTION_NUMBER, MAX_METROPLEX_CONNECTION_COUNT, GET_METROPLEX_CONSECUTIVE_CONNECTION_DELAY, END_AT_ATT_NAME, SEVERITY, OK_SOCKET_MESSAGE, CLOSE_CONNECTION_FORCEFULLY, BLOCK_SOCKET_MESSAGE, STOP_STORING_PV_SOCKET_MESSAGE, STOP_STORING_VID_SOCKET_MESSAGE, MAX_BEACON_PAYLOAD_SIZE, PAGE_VISIT_INFORMATION_ATT_NAME, VIDEO_PART_COUNT_ATT_NAME, IS_LAST_ATT_NAME, BROWSER_ID_ATT_NAME, PV_ID_ATT_NAME, VER_ATT_NAME, CURRENT_PV_VERSION, PV_SEQ_ATT_NAME, ON_URL_ATT_NAME, REF_URL_ATT_NAME, STARTED_AT_ATT_NAME, CONN_COUNT_ATT_NAME, COLLECT_VER_ATT_NAME, CURRENT_NOIBUJS_VERSION, SCRIPT_ID_ATT_NAME, GET_SCRIPT_ID, SCRIPT_INSTANCE_ID_ATT_NAME, METROPLEX_SOCKET_INSTANCE_ID_ATT_NAME, SOCKET_INSTANCE_ID_ATT_NAME } from '../constants.js';
+import { GET_METROPLEX_BASE_SOCKET_URL, METROPLEX_FRAG_ROUTE, GET_METROPLEX_POST_URL, METROPLEX_RETRY_FREQUENCY, META_DATA_METROPLEX_TYPE, PAGE_VISIT_META_DATA_ATT_NAME, HTTP_DATA_METROPLEX_TYPE, PAGE_VISIT_HTTP_DATA_ATT_NAME, VIDEO_METROPLEX_TYPE, PAGE_VISIT_VID_FRAG_ATT_NAME, PV_METROPLEX_TYPE, PAGE_VISIT_PART_ATT_NAME, SEQ_NUM_ATT_NAME, WORK_REQUEST_ATT_NAME, HELP_CODE_ATT_NAME, PV_EVENTS_ATT_NAME, TYPE_ATT_NAME, USERSTEP_EVENT_TYPE, GET_MAX_METROPLEX_RECONNECTION_NUMBER, MAX_METROPLEX_CONNECTION_COUNT, GET_METROPLEX_CONSECUTIVE_CONNECTION_DELAY, END_AT_ATT_NAME, SEVERITY, OK_SOCKET_MESSAGE, CLOSE_CONNECTION_FORCEFULLY, BLOCK_SOCKET_MESSAGE, STOP_STORING_PV_SOCKET_MESSAGE, STOP_STORING_VID_SOCKET_MESSAGE, MAX_BEACON_PAYLOAD_SIZE, PAGE_VISIT_INFORMATION_ATT_NAME, VIDEO_PART_COUNT_ATT_NAME, IS_LAST_ATT_NAME, BROWSER_ID_ATT_NAME, PV_ID_ATT_NAME, VER_ATT_NAME, CURRENT_PV_VERSION, PV_SEQ_ATT_NAME, ON_URL_ATT_NAME, REF_URL_ATT_NAME, STARTED_AT_ATT_NAME, CONN_COUNT_ATT_NAME, COLLECT_VER_ATT_NAME, CURRENT_NOIBUJS_VERSION, SCRIPT_ID_ATT_NAME, GET_SCRIPT_ID, SCRIPT_INSTANCE_ID_ATT_NAME, METROPLEX_SOCKET_INSTANCE_ID_ATT_NAME, SOCKET_INSTANCE_ID_ATT_NAME, VIDEO_RECORDER_ATT_NAME } from '../constants.js';
 import ClientConfig from './clientConfig.js';
 import StoredMetrics from './storedMetrics.js';
 import StoredPageVisit from './storedPageVisit.js';
@@ -11,848 +11,695 @@ import { unwrapNoibuWrapped } from '../utils/object.js';
 import { noibuLog } from '../utils/log.js';
 
 /** @module MetroplexSocket */
-
 /** Manages the socket to Metroplex */
 class MetroplexSocket {
-  /** @type {Promise<void> | null} */
-  connectionPromise = null;
-
-  /**
-   * Creates an instance of metroplex
-   * @param  {} scriptInstanceId id of script, to make sure only a single socket is open
-   */
-  constructor(scriptInstanceId) {
-    const socketBase = GET_METROPLEX_BASE_SOCKET_URL();
-
-    // this flag is set to true when we manually need to close the
-    // socket. It happens currently during the pagehide event and
-    // if we havent sent a message to our backend in some time.
-    this.forceClosed = false;
-    // the socket used to transmit all data to metroplex
-    this.socket = null;
-    // the unique instance id of the socket
-    this.socketInstanceId = null;
-
-    // previous message type sent to metroplex
-    this.previousMessageType = '';
-    // how many times we tried reconnecting to metroplex
-    this.currentConnectionAttempts = 0;
-    // how many successful connections to metroplex
-    this.connectionCount = 0;
-    // sessiont start time, used to calculate accurate end time
-    this.sessionStartTime = safePerformanceNow();
+    _initialURL;
+    ackedOnce;
+    connectionCount;
     // promise that will resolve once the socket is connected and metroplex has acknowledged
-    this.connectionPromise = null;
-    // Whether or not we have sent the page visit information after connecting the socket
-    this.pageVisitInfoSent = false;
-    // socket connection url
-    this.connectionURL = `${socketBase}/${METROPLEX_FRAG_ROUTE}`;
-    // post endpoint for the same events we would send to the socket
-    this.postURL = GET_METROPLEX_POST_URL();
-    // sequence number of the message sent to metroplex
-    this.messageSequenceNum = 0;
-    // the latest received sequence number from metroplex
-    this.latestReceivedSeqNumber = -1;
-    // set to true only when we start running behind on messages in metroplex
-    this.isRetryLoopDisabled = false;
-    // messages that need to be resent to metroplex since they are lacking confirmation
-    this.retryMessageQueue = [];
-    // this map will hold all types that noibujs should not send to metroplex
-    this.metroplexTypeLock = {};
-    // setting initial URL at the start in order to guarentee that the
-    // current page visit has the real initial onURL. Fragments and SPA's
-    // can change the URL without reloading the page.
-    this._initialURL = ClientConfig.getInstance().globalUrl;
-    this.initialReferingURL = '';
-    this.sessionTimestamp = new Date();
-
-    // latest time that we received a confirmation message from metroplex
-    this.latestReceivedSeqNumStoredTime = new Date();
-
-    // unique instance id of Metroplex Socket
-    this.instanceId = uuid.v4();
-
-    // unique script instance id
-    this.scriptInstanceId = scriptInstanceId;
-
-    // length of the session based on page visit events
-    this.sessionLength = 0;
-
-    // track socket closure codes for debug
-    this.socketCloseCodes = [];
-
-    // track socket open times
-    this.socketOpens = [];
-
-    // flag to indicate Metroplex has acknowledged at least once
-    this.ackedOnce = false;
-
-    // retry frequency in ms
-    this.metroRetryFrequencyMS = METROPLEX_RETRY_FREQUENCY;
-  }
-
-  /**
-   * gets the singleton instance
-   * @param  {} [scriptInstanceId]
-   * @returns {MetroplexSocket}
-   */
-  static getInstance(scriptInstanceId) {
-    if (!this.instance) {
-      this.instance = new MetroplexSocket(scriptInstanceId);
-      this.instance.start();
+    connectionPromise;
+    connectionURL;
+    currentConnectionAttempts;
+    forceClosed;
+    helpCodeCb;
+    initialReferingURL;
+    static instance;
+    instanceId;
+    isRetryLoopDisabled;
+    latestReceivedSeqNumStoredTime;
+    latestReceivedSeqNumber;
+    messageSequenceNum;
+    metroRetryFrequencyMS;
+    metroplexTypeLock;
+    pageVisitInfoSent;
+    postURL;
+    previousMessageType;
+    retryMessageQueue;
+    retryMetroplexInterval;
+    scriptInstanceId;
+    sessionLength;
+    sessionStartTime;
+    sessionTimestamp;
+    socket;
+    socketInstanceId;
+    socketCloseCodes;
+    socketOpens;
+    /**
+     * Creates an instance of metroplex
+     * id of script, to make sure only a single socket is open
+     */
+    constructor(scriptInstanceId) {
+        const socketBase = GET_METROPLEX_BASE_SOCKET_URL();
+        // this flag is set to true when we manually need to close the
+        // socket. It happens currently during the pagehide event and
+        // if we havent sent a message to our backend in some time.
+        this.forceClosed = false;
+        // the socket used to transmit all data to metroplex
+        this.socket = null;
+        // the unique instance id of the socket
+        this.socketInstanceId = null;
+        // previous message type sent to metroplex
+        this.previousMessageType = '';
+        // how many times we tried reconnecting to metroplex
+        this.currentConnectionAttempts = 0;
+        // how many successful connections to metroplex
+        this.connectionCount = 0;
+        // sessiont start time, used to calculate accurate end time
+        this.sessionStartTime = safePerformanceNow();
+        // Whether or not we have sent the page visit information after connecting the socket
+        this.pageVisitInfoSent = false;
+        // socket connection url
+        this.connectionURL = `${socketBase}/${METROPLEX_FRAG_ROUTE}`;
+        // post endpoint for the same events we would send to the socket
+        this.postURL = GET_METROPLEX_POST_URL();
+        // sequence number of the message sent to metroplex
+        this.messageSequenceNum = 0;
+        // the latest received sequence number from metroplex
+        this.latestReceivedSeqNumber = -1;
+        // set to true only when we start running behind on messages in metroplex
+        this.isRetryLoopDisabled = false;
+        // messages that need to be resent to metroplex since they are lacking confirmation
+        this.retryMessageQueue = [];
+        // this map will hold all types that noibujs should not send to metroplex
+        this.metroplexTypeLock = {};
+        // setting initial URL at the start in order to guarentee that the
+        // current page visit has the real initial onURL. Fragments and SPA's
+        // can change the URL without reloading the page.
+        this._initialURL = ClientConfig.getInstance().globalUrl;
+        noibuLog('metroplex constructor', {
+            initialURL: this._initialURL,
+        });
+        this.initialReferingURL = '';
+        this.sessionTimestamp = new Date();
+        // latest time that we received a confirmation message from metroplex
+        this.latestReceivedSeqNumStoredTime = new Date();
+        // unique instance id of Metroplex Socket
+        this.instanceId = uuid.v4();
+        // unique script instance id
+        this.scriptInstanceId = scriptInstanceId;
+        // length of the session based on page visit events
+        this.sessionLength = 0;
+        // track socket closure codes for debug
+        this.socketCloseCodes = [];
+        // track socket open times
+        this.socketOpens = [];
+        // flag to indicate Metroplex has acknowledged at least once
+        this.ackedOnce = false;
+        // retry frequency in ms
+        this.metroRetryFrequencyMS = METROPLEX_RETRY_FREQUENCY;
+        this.helpCodeCb = null;
+        this.retryMetroplexInterval = null;
+        // Connect the WS
+        this.connectionPromise = this.connectSocket();
+        // Set up the offload events immediately
+        this._setupOffloadEvents();
     }
-
-    return this.instance;
-  }
-
-  /** Starts off the socket connection */
-  start() {
-    // Connect the WS
-    this.connectSocket();
-    // Set up the offload events immediately
-    this._setupOffloadEvents();
-  }
-
-  /**
-   * Adds the seq num field to the given payload depending on whether its
-   * a page visit part or video frag
-   * @param  {} type
-   * @param  {} payload
-   */
-  _addSeqNumToPayload(type, payload) {
-    switch (type) {
-      case PV_METROPLEX_TYPE:
-        this._setSeqNumInPayloadAndIncrementSeqNum(
-          PAGE_VISIT_PART_ATT_NAME,
-          payload,
-        );
-        break;
-      case VIDEO_METROPLEX_TYPE:
-        this._setSeqNumInPayloadAndIncrementSeqNum(
-          PAGE_VISIT_VID_FRAG_ATT_NAME,
-          payload,
-        );
-        break;
-      case HTTP_DATA_METROPLEX_TYPE:
-        this._setSeqNumInPayloadAndIncrementSeqNum(
-          PAGE_VISIT_HTTP_DATA_ATT_NAME,
-          payload,
-        );
-        break;
-      case META_DATA_METROPLEX_TYPE:
-        this._setSeqNumInPayloadAndIncrementSeqNum(
-          PAGE_VISIT_META_DATA_ATT_NAME,
-          payload,
-        );
-        break;
+    /**
+     * gets the singleton instance
+     * @returns {MetroplexSocket}
+     */
+    static getInstance(scriptInstanceId) {
+        if (!this.instance) {
+            this.instance = new MetroplexSocket(scriptInstanceId);
+        }
+        return this.instance;
     }
-  }
-
-  /**
-   * sets the seq num in the payload for the given key and increments the
-   * global seq number
-   * @param  {} payloadKey
-   * @param  {} payload
-   */
-  _setSeqNumInPayloadAndIncrementSeqNum(payloadKey, payload) {
-    // eslint-disable-next-line no-param-reassign
-    payload[payloadKey][SEQ_NUM_ATT_NAME] = this.messageSequenceNum;
-    this.messageSequenceNum += 1;
-  }
-
-  /** requests help code and saves a callback to be called on response */
-  requestHelpCode(cb) {
-    this.helpCodeCb = cb;
-    return MetroplexSocket.getInstance().sendMessage(WORK_REQUEST_ATT_NAME, {
-      [WORK_REQUEST_ATT_NAME]: HELP_CODE_ATT_NAME,
-    });
-  }
-
-  /**
-   * Immediately sends a message to Metroplex over the web socket
-   * Queues the message if the connection isn't open yet.
-   * @param  {} type
-   * @param  {} payload
-   * @returns {Promise<boolean>} true if message was sent succefully, false otherwise
-   */
-  async sendMessage(type, payload) {
-    noibuLog('sendMessage start', { type });
-    // if we have a lock on this specific type, we dont send it
-    if (
-      type in this.metroplexTypeLock ||
-      ClientConfig.getInstance().isClientDisabled
-    ) {
-      noibuLog('sendMessage quitting due to', {
-        typeInLock: type in this.metroplexTypeLock,
-        isClientDisabled: ClientConfig.getInstance().isClientDisabled,
-      });
-      return false;
+    /**
+     * Adds the seq num field to the given payload depending on whether its
+     * a page visit part or video frag
+     */
+    _addSeqNumToPayload(type, payload) {
+        switch (type) {
+            case PV_METROPLEX_TYPE:
+                this._setSeqNumInPayloadAndIncrementSeqNum(PAGE_VISIT_PART_ATT_NAME, payload);
+                break;
+            case VIDEO_METROPLEX_TYPE:
+                this._setSeqNumInPayloadAndIncrementSeqNum(PAGE_VISIT_VID_FRAG_ATT_NAME, payload);
+                break;
+            case HTTP_DATA_METROPLEX_TYPE:
+                this._setSeqNumInPayloadAndIncrementSeqNum(PAGE_VISIT_HTTP_DATA_ATT_NAME, payload);
+                break;
+            case META_DATA_METROPLEX_TYPE:
+                this._setSeqNumInPayloadAndIncrementSeqNum(PAGE_VISIT_META_DATA_ATT_NAME, payload);
+                break;
+        }
     }
-
-    const payloadData = payload;
-
-    if (type !== WORK_REQUEST_ATT_NAME) {
-      // Increasing the message sequence number for every message we send to metroplex
-      // and move the data to the retry queue.
-      this._addSeqNumToPayload(type, payloadData);
-
-      // push the message to the retry queue immediately in case socket isnt connected
-      this.retryMessageQueue.push({ payload: payloadData, type });
-      StoredPageVisit.getInstance().checkAndStoreRetryQueue(
-        this.retryMessageQueue,
-        await this.getPageInformation(),
-      );
+    /**
+     * sets the seq num in the payload for the given key and increments the
+     * global seq number
+     */
+    _setSeqNumInPayloadAndIncrementSeqNum(payloadKey, payload) {
+        // eslint-disable-next-line no-param-reassign
+        payload[payloadKey][SEQ_NUM_ATT_NAME] = this.messageSequenceNum;
+        this.messageSequenceNum += 1;
     }
-
-    // send the socket message if we are connected and have sent page visit info
-    if (this.isConnected() && this.pageVisitInfoSent) {
-      // sending the data to metroplex
-      this._sendSocketMessage(payloadData);
+    /** requests help code and saves a callback to be called on response */
+    requestHelpCode(cb) {
+        this.helpCodeCb = cb;
+        return MetroplexSocket.getInstance().sendMessage(WORK_REQUEST_ATT_NAME, {
+            [WORK_REQUEST_ATT_NAME]: HELP_CODE_ATT_NAME,
+        });
     }
-
-    this.previousMessageType = type;
-
-    // Only update the last message send if its a page visit with user action
-    // ensure this is done regardless of whether socket is connected or not,
-    // so that pagehide will post PV if user is active but socket is not
-    if (type === PV_METROPLEX_TYPE && payload[PAGE_VISIT_PART_ATT_NAME]) {
-      const events = payload[PAGE_VISIT_PART_ATT_NAME][PV_EVENTS_ATT_NAME]
-        ? payload[PAGE_VISIT_PART_ATT_NAME][PV_EVENTS_ATT_NAME]
-        : [];
-
-      this._updateLatestPvTimestamp(events);
+    /**
+     * Immediately sends a message to Metroplex over the web socket
+     * Queues the message if the connection isn't open yet.
+     * returns true if message was sent succefully, false otherwise
+     */
+    async sendMessage(type, payload) {
+        noibuLog('sendMessage start', { type, payload: JSON.stringify(payload) });
+        // if we have a lock on this specific type, we dont send it
+        if (type in this.metroplexTypeLock ||
+            ClientConfig.getInstance().isClientDisabled) {
+            noibuLog('sendMessage quitting due to', {
+                typeInLock: type in this.metroplexTypeLock,
+                isClientDisabled: ClientConfig.getInstance().isClientDisabled,
+            });
+            return false;
+        }
+        const payloadData = payload;
+        if (type !== WORK_REQUEST_ATT_NAME) {
+            // Increasing the message sequence number for every message we send to metroplex
+            // and move the data to the retry queue.
+            this._addSeqNumToPayload(type, payloadData);
+            // push the message to the retry queue immediately in case socket isnt connected
+            this.retryMessageQueue.push({ payload: payloadData, type });
+            StoredPageVisit.getInstance().checkAndStoreRetryQueue(this.retryMessageQueue, await this.getPageInformation());
+        }
+        // send the socket message if we are connected and have sent page visit info
+        if (this.isConnected() && this.pageVisitInfoSent) {
+            // sending the data to metroplex
+            await this._sendSocketMessage(payloadData);
+        }
+        this.previousMessageType = type;
+        // Only update the last message send if its a page visit with user action
+        // ensure this is done regardless of whether socket is connected or not,
+        // so that pagehide will post PV if user is active but socket is not
+        if (type === PV_METROPLEX_TYPE && payload[PAGE_VISIT_PART_ATT_NAME]) {
+            const events = payload[PAGE_VISIT_PART_ATT_NAME][PV_EVENTS_ATT_NAME]
+                ? payload[PAGE_VISIT_PART_ATT_NAME][PV_EVENTS_ATT_NAME]
+                : [];
+            await this._updateLatestPvTimestamp(events);
+        }
+        return true;
     }
-
-    return true;
-  }
-
-  /** Updates the latest pv message sent timestamp if events contain any user steps
-   * @param  {} events
-   */
-  _updateLatestPvTimestamp(events) {
-    const userstepsEvents = events.filter(
-      ev => ev[TYPE_ATT_NAME] === USERSTEP_EVENT_TYPE,
-    );
-
-    if (userstepsEvents.length > 0) {
-      ClientConfig.getInstance().updateLastActiveTime(new Date());
+    /** Updates the latest pv message sent timestamp if events contain any user steps
+     */
+    async _updateLatestPvTimestamp(events) {
+        const userstepsEvents = events.filter(ev => ev[TYPE_ATT_NAME] === USERSTEP_EVENT_TYPE);
+        if (userstepsEvents.length > 0) {
+            await ClientConfig.getInstance().updateLastActiveTime(new Date());
+        }
     }
-  }
-
-  /** returns true if the socket is either connecting or connected to metroplex */
-  isConnected() {
-    return this.socket !== null && this.socket.readyState === 1;
-  }
-
-  /** returns true if we are connecting to the socket */
-  isConnecting() {
-    return this.socket !== null && this.socket.readyState === 0;
-  }
-
-  /** close will close the socket opened for video frag transmission */
-  close() {
-    this.forceClosed = true;
-    // closing the video frag socket only if it was used in the past by
-    // the sessionRecorder
-    if (this.isConnected() || this.isConnecting()) {
-      this.socket.close(1000);
+    /** returns true if the socket is either connecting or connected to metroplex */
+    isConnected() {
+        return this.socket !== null && this.socket.readyState === 1;
     }
-  }
-
-  /** Connects the web socket to metroplex and calls callback upon successfully connecting
-   * @param  {} callback
-   * @param  {} forceOpen
-   */
-  async handleConnect(callback, forceOpen) {
-    // if we are connected or about to connect, we do not reset
-    // the socket information
-    if (!forceOpen && (this.isConnected() || this.isConnecting())) {
-      return;
+    /** returns true if we are connecting to the socket */
+    isConnecting() {
+        return this.socket !== null && this.socket.readyState === 0;
     }
-
-    this.currentConnectionAttempts += 1;
-    this.socket = new WebSocket(this.connectionURL, undefined, {
-      headers: {
-        'User-Agent': await getUserAgent(), // must pass useragent explicitly
-      },
-    });
-    this.socketInstanceId = uuid.v4();
-
-    this.socket.onerror = e => {
-      // use for metrics
-      // there is no useful error message/description from this event
-    };
-
-    // once the socket closes
-    this.socket.onclose = event => {
-      // Reset this to prevent sending messages before the PVI is sent on reconnect
-      this.pageVisitInfoSent = false;
-
-      // we do not reconnect if the page is unloading
-      if (this.forceClosed) {
-        return;
-      }
-
-      // track socket closure codes and times
-      this.socketCloseCodes.push(
-        `${!isDateOverwritten() ? new Date().toISOString() : ''}:${event.code}`,
-      );
-
-      // we are already in the process of reconnecting
-      // we do not attempt to reconnect yet
-      if (this.isConnecting()) {
-        return;
-      }
-
-      // Clear the interval that resends unconfirmed msgs so we don't try send while the socket
-      // is and starting back up, after which it will be restarted
-      clearInterval(this.retryMetroplexInterval);
-
-      // if we tried reconnecting too many times we abandon
-      if (
-        this.currentConnectionAttempts >=
-        GET_MAX_METROPLEX_RECONNECTION_NUMBER()
-      ) {
-        // if we tried beyond the threshold, we block ourselves a short
-        // while while fix the issue
-        ClientConfig.getInstance().lockClientUntilNextPage(
-          'Too many reconnection attempts, locking until next page',
-        );
-        return;
-      }
-
-      // if we tried reconnecting too many times we abandon
-      if (this.connectionCount >= MAX_METROPLEX_CONNECTION_COUNT) {
-        // if we tried beyond the threshold, we block ourselves a short
-        // while while fix the issue
-        ClientConfig.getInstance().lockClientUntilNextPage(
-          'Too many connections, locking until next page',
-        );
-        return;
-      }
-
-      // try to reconnect on close but after a certain delay based off unsuccessful connections
-      setTimeout(() => {
-        this.handleConnect(callback, false);
-      }, this.currentConnectionAttempts ** 2 * GET_METROPLEX_CONSECUTIVE_CONNECTION_DELAY());
-    };
-    // everytime we get a message from the socket
-    this.socket.onmessage = event => {
-      this._onSocketMessage(event, callback);
-    };
-    // the moment we open the socket
-    this.socket.onopen = () => {
-      // track socket open codes and times
-      this.socketOpens.push(
-        `${!isDateOverwritten() ? new Date().toISOString() : ''}`,
-      );
-      this._onSocketOpen();
-    };
-  }
-
-  /**
-   * connectSocket will establish a websocket connection to the metroplex
-   * service
-   */
-  connectSocket() {
-    if (this.isConnected() || this.isConnecting()) {
-      // self resolving promise since we are already ready to send
-      // requests, if we did reach state 1, we already sent initial
-      // request, thus not sending it again.
-      return this.connectionPromise;
+    /** close will close the socket opened for video frag transmission */
+    close() {
+        this.forceClosed = true;
+        // closing the video frag socket only if it was used in the past by
+        // the sessionRecorder
+        if (this.isConnected() || this.isConnecting()) {
+            if (this.socket !== null) {
+                this.socket.close(1000);
+            }
+        }
     }
-    // we return a promisified socket resolver to be able to chain the
-    // opening of the socket
-    this.connectionPromise = new Promise(resolve => {
-      this.handleConnect(resolve, false);
-    });
-
-    return this.connectionPromise;
-  }
-
-  /** Calculates and sets the end_at field of the payload
-   * @param  {} payload
-   * @param  {} isPageVisit
-   */
-  addEndTimeToPayload(payload, isPageVisit) {
-    const delta = Math.ceil(safePerformanceNow() - this.sessionStartTime);
-    // update session length if this is a page visit event
-    if (isPageVisit) {
-      this.sessionLength = delta;
+    /** Connects the web socket to metroplex and calls callback upon successfully connecting
+     */
+    async handleConnect(forceOpen) {
+        noibuLog('metroplex handleConnect');
+        // if we are connected or about to connect, we do not reset
+        // the socket information
+        if (!forceOpen && (this.isConnected() || this.isConnecting())) {
+            return;
+        }
+        this.currentConnectionAttempts += 1;
+        this.socket = new WebSocket(this.connectionURL, undefined, {
+            headers: {
+                'User-Agent': await getUserAgent(), // must pass useragent explicitly
+            },
+        });
+        this.socketInstanceId = uuid.v4();
+        this.socket.onerror = error => {
+            noibuLog('metroplex handleConnect, onerror', { error });
+            // use for metrics
+            // there is no useful error message/description from this event
+        };
+        // once the socket closes
+        this.socket.onclose = async (event) => {
+            noibuLog('metroplex handleConnect, onclose', { event });
+            // Reset this to prevent sending messages before the PVI is sent on reconnect
+            this.pageVisitInfoSent = false;
+            // we do not reconnect if the page is unloading
+            if (this.forceClosed) {
+                return;
+            }
+            // track socket closure codes and times
+            this.socketCloseCodes.push(`${!isDateOverwritten() ? new Date().toISOString() : ''}:${event.code}`);
+            // we are already in the process of reconnecting
+            // we do not attempt to reconnect yet
+            if (this.isConnecting()) {
+                return;
+            }
+            // Clear the interval that resends unconfirmed msgs so we don't try send while the socket
+            // is and starting back up, after which it will be restarted
+            if (this.retryMetroplexInterval) {
+                clearInterval(this.retryMetroplexInterval);
+            }
+            // if we tried reconnecting too many times we abandon
+            if (this.currentConnectionAttempts >=
+                GET_MAX_METROPLEX_RECONNECTION_NUMBER()) {
+                // if we tried beyond the threshold, we block ourselves a short
+                // while fix the issue
+                await ClientConfig.getInstance().lockClientUntilNextPage('Too many reconnection attempts, locking until next page');
+                return;
+            }
+            // if we tried reconnecting too many times we abandon
+            if (this.connectionCount >= MAX_METROPLEX_CONNECTION_COUNT) {
+                // if we tried beyond the threshold, we block ourselves a short
+                // while while fix the issue
+                await ClientConfig.getInstance().lockClientUntilNextPage('Too many connections, locking until next page');
+                return;
+            }
+            // try to reconnect on close but after a certain delay based off unsuccessful connections
+            setTimeout(() => {
+                this.handleConnect(false);
+            }, this.currentConnectionAttempts ** 2 * GET_METROPLEX_CONSECUTIVE_CONNECTION_DELAY());
+        };
+        // everytime we get a message from the socket
+        this.socket.onmessage = event => {
+            noibuLog('metroplex handleConnect, onmessage', { event });
+            this._onSocketMessage(event);
+        };
+        // the moment we open the socket
+        this.socket.onopen = () => {
+            // track socket open codes and times
+            this.socketOpens.push(`${!isDateOverwritten() ? new Date().toISOString() : ''}`);
+            this._onSocketOpen();
+        };
     }
-
-    // Assigning this value here is much better than copying the whole object.
-    // eslint-disable-next-line no-param-reassign
-    payload[END_AT_ATT_NAME] = new Date(
-      this.sessionTimestamp.getTime() + delta,
-    ).toISOString();
-  }
-
-  /** open handler for socket */
-  async _onSocketOpen() {
-    // if we are not connected, we do not send any messages
-    if (!this.isConnected() || ClientConfig.getInstance().isClientDisabled) {
-      return;
+    /**
+     * connectSocket will establish a websocket connection to the metroplex
+     * service
+     */
+    connectSocket() {
+        if (this.isConnected() || this.isConnecting()) {
+            // self resolving promise since we are already ready to send
+            // requests, if we did reach state 1, we already sent initial
+            // request, thus not sending it again.
+            return this.connectionPromise;
+        }
+        // we return a promisified socket resolver to be able to chain the
+        // opening of the socket
+        return this.handleConnect(false);
     }
-
-    this._sendSocketMessage(await this.getPageInformation());
-    // Set this to allow normal page visit and video frag messages to be sent
-    this.pageVisitInfoSent = true;
-    this.currentConnectionAttempts = 0;
-    // Resend the pagevisit or video message type before sending data so reset the prev type
-    this.previousMessageType = '';
-    // attempt to send the unconfirmed messages again
-    this._sendUnconfirmedMessages(false);
-    // setting up the socket retry mechanism
-    this.setupRetryMechanism();
-    // increasing the connection count everytime we connect
-    this.connectionCount += 1;
-  }
-
-  /** message handler for socket
-   * @param  {} event
-   * @param  {} metroAckCallback
-   */
-  _onSocketMessage(event, metroAckCallback) {
-    switch (event.data) {
-      case STOP_STORING_VID_SOCKET_MESSAGE:
-        // stopping vids from being sent
-        this.metroplexTypeLock[VIDEO_METROPLEX_TYPE] = true;
-        StoredMetrics.getInstance().setDidCutVideo();
-        break;
-      case STOP_STORING_PV_SOCKET_MESSAGE:
-        // stopping pv from being sent
-        this.metroplexTypeLock[PV_METROPLEX_TYPE] = true;
-        StoredMetrics.getInstance().setDidCutPv();
-        break;
-      case BLOCK_SOCKET_MESSAGE:
-        // we are disabling collect for 1 day if we get the
-        // block message from metroplex. We are probably on it
-        ClientConfig.getInstance().lockClient(1440, 'Metroplex blocked script');
-        this.close();
-        break;
-      case CLOSE_CONNECTION_FORCEFULLY:
-        this.close();
-        break;
-      case OK_SOCKET_MESSAGE:
-        // we do nothing on an OK
-        break;
-      default:
-        // we now need to check if we receive text that contains
-        // the text SEQ_NUM. if that is true, then its a seq num
-        // and we need to clear out the retry queue.
-        if (event.data.includes(SEQ_NUM_ATT_NAME)) {
-          const seqNumSplit = event.data.split(`${SEQ_NUM_ATT_NAME}:`);
-          if (seqNumSplit.length < 2) {
-            ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
-              `Invalid message received from metroplex while clearing retry queue ${event.data}`,
-              false,
-              SEVERITY.error,
-            );
-            break;
-          }
-          // the second element in the string split is the sequence number
-          const seqNum = parseInt(seqNumSplit[1], 10);
-
-          // ignore sequence num if this is just page info, it will always be -1 and we don't want
-          // to disable the retry loop on this
-          if (seqNum === -1) {
-            break;
-          }
-
-          // we disable the retry loop if we start running behind
-          if (seqNum <= this.latestReceivedSeqNumber) {
-            this.isRetryLoopDisabled = true;
-          } else {
-            this.isRetryLoopDisabled = false;
-
-            // setting the latest received seqNum
-            this.latestReceivedSeqNumber = seqNum;
-
-            // clear the retry queue when for this seqNum and below
-            this._clearRetryQueue(seqNum);
-          }
-
-          // Metroplex acknowledged at least once, so resolve the promise
-          if (!this.ackedOnce && metroAckCallback) {
-            this.ackedOnce = true;
-            metroAckCallback();
-          }
+    /** Calculates and sets the end_at field of the payload
+     * @param  {} payload
+     * @param  {} isPageVisit
+     */
+    addEndTimeToPayload(payload, isPageVisit) {
+        const delta = Math.ceil(safePerformanceNow() - this.sessionStartTime);
+        // update session length if this is a page visit event
+        if (isPageVisit) {
+            this.sessionLength = delta;
         }
-
-        if (this._tryProcessHelpCodeResponse(event.data)) {
-          break;
+        return {
+            ...payload,
+            [END_AT_ATT_NAME]: new Date(this.sessionTimestamp.getTime() + delta).toISOString(),
+        };
+    }
+    /** open handler for socket */
+    async _onSocketOpen() {
+        // if we are not connected, we do not send any messages
+        if (!this.isConnected() || ClientConfig.getInstance().isClientDisabled) {
+            return;
         }
-
-        break;
-      // still need to collect the id sent back from metroplex
+        await this._sendSocketMessage(await this.getPageInformation());
+        // Set this to allow normal page visit and video frag messages to be sent
+        this.pageVisitInfoSent = true;
+        this.currentConnectionAttempts = 0;
+        // Resend the pagevisit or video message type before sending data so reset the prev type
+        this.previousMessageType = '';
+        // attempt to send the unconfirmed messages again
+        await this._sendUnconfirmedMessages(false);
+        // setting up the socket retry mechanism
+        this.setupRetryMechanism();
+        // increasing the connection count everytime we connect
+        this.connectionCount += 1;
     }
-  }
-
-  /**
-   * Returns true if the message's payload has the payload type given and has a sequence
-   * number higher than seqNum
-   * @param  {} message
-   * @param  {} payloadType
-   * @param  {} seqNum
-   */
-  _messagePayloadHasLargerSeqNum(message, payloadType, seqNum) {
-    return (
-      message.payload[payloadType] &&
-      message.payload[payloadType][SEQ_NUM_ATT_NAME] &&
-      message.payload[payloadType][SEQ_NUM_ATT_NAME] > seqNum
-    );
-  }
-
-  /**
-   * removes messages from the retry queue that are smaller than the
-   * latest stored message in metroplex
-   * @param  {} seqNum
-   */
-  _clearRetryQueue(seqNum) {
-    this.latestReceivedSeqNumStoredTime = new Date();
-    this.retryMessageQueue = this.retryMessageQueue.filter(
-      message =>
-        this._messagePayloadHasLargerSeqNum(
-          message,
-          PAGE_VISIT_PART_ATT_NAME,
-          seqNum,
-        ) ||
-        this._messagePayloadHasLargerSeqNum(
-          message,
-          PAGE_VISIT_VID_FRAG_ATT_NAME,
-          seqNum,
-        ),
-    );
-  }
-
-  /** will resend everything that is in the retry queue */
-  _sendUnconfirmedMessages(socketWasAlreadyOpen) {
-    // we only check once. If the socket is disconnected midway, the events would
-    // still be in the retry queue.
-    if (!this.isConnected() || ClientConfig.getInstance().isClientDisabled) {
-      return;
+    /** message handler for socket
+     * @param  {} event
+     */
+    async _onSocketMessage(event) {
+        switch (event.data) {
+            case STOP_STORING_VID_SOCKET_MESSAGE:
+                // stopping vids from being sent
+                this.metroplexTypeLock[VIDEO_METROPLEX_TYPE] = true;
+                StoredMetrics.getInstance().setDidCutVideo();
+                break;
+            case STOP_STORING_PV_SOCKET_MESSAGE:
+                // stopping pv from being sent
+                this.metroplexTypeLock[PV_METROPLEX_TYPE] = true;
+                StoredMetrics.getInstance().setDidCutPv();
+                break;
+            case BLOCK_SOCKET_MESSAGE:
+                // we are disabling collect for 1 day if we get the
+                // block message from metroplex. We are probably on it
+                await ClientConfig.getInstance().lockClient(1440, 'Metroplex blocked script');
+                this.close();
+                break;
+            case CLOSE_CONNECTION_FORCEFULLY:
+                this.close();
+                break;
+            case OK_SOCKET_MESSAGE:
+                // we do nothing on an OK
+                break;
+            default:
+                // we now need to check if we receive text that contains
+                // the text SEQ_NUM. if that is true, then its a seq num
+                // and we need to clear out the retry queue.
+                if (event.data.includes(SEQ_NUM_ATT_NAME)) {
+                    const seqNumSplit = event.data.split(`${SEQ_NUM_ATT_NAME}:`);
+                    if (seqNumSplit.length < 2) {
+                        ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`Invalid message received from metroplex while clearing retry queue ${event.data}`, false, SEVERITY.error);
+                        break;
+                    }
+                    // the second element in the string split is the sequence number
+                    const seqNum = parseInt(seqNumSplit[1], 10);
+                    // ignore sequence num if this is just page info, it will always be -1 and we don't want
+                    // to disable the retry loop on this
+                    if (seqNum === -1) {
+                        break;
+                    }
+                    // we disable the retry loop if we start running behind
+                    if (seqNum <= this.latestReceivedSeqNumber) {
+                        this.isRetryLoopDisabled = true;
+                    }
+                    else {
+                        this.isRetryLoopDisabled = false;
+                        // setting the latest received seqNum
+                        this.latestReceivedSeqNumber = seqNum;
+                        // clear the retry queue when for this seqNum and below
+                        this._clearRetryQueue(seqNum);
+                    }
+                    if (!this.ackedOnce) {
+                        this.ackedOnce = true;
+                    }
+                }
+                if (this._tryProcessHelpCodeResponse(event.data)) {
+                    break;
+                }
+                break;
+            // still need to collect the id sent back from metroplex
+        }
     }
-
-    // We always send if this is on socket open
-    if (socketWasAlreadyOpen) {
-      // we do not send the messages to metroplex if we are falling behind on received
-      // sequence numbers
-      const someTimeAgo = new Date();
-      someTimeAgo.setMilliseconds(
-        someTimeAgo.getMilliseconds() - this.metroRetryFrequencyMS,
-      );
-
-      if (someTimeAgo < this.latestReceivedSeqNumStoredTime) {
-        return;
-      }
-
-      // we do not resend messages to metroplex if we are running behind
-      if (this.isRetryLoopDisabled) {
-        return;
-      }
+    /**
+     * Returns true if the message's payload has the payload type given and has a sequence
+     * number higher than seqNum
+     */
+    _messagePayloadHasLargerSeqNum(message, payloadType, seqNum) {
+        return (message.payload[payloadType] &&
+            message.payload[payloadType][SEQ_NUM_ATT_NAME] &&
+            message.payload[payloadType][SEQ_NUM_ATT_NAME] > seqNum);
     }
-
-    // removing all the messages with a blocked type from the retry queue
-    this.retryMessageQueue = this.retryMessageQueue.filter(
-      message => !(message.type in this.metroplexTypeLock),
-    );
-
-    // we dont remove any items from this queue in this function
-    for (let i = 0; i < this.retryMessageQueue.length; i += 1) {
-      const { type, payload } = this.retryMessageQueue[i];
-
-      // sending the data to metroplex
-      if (!this._sendSocketMessage(payload)) {
-        break;
-      }
-
-      this.previousMessageType = type;
+    /**
+     * removes messages from the retry queue that are smaller than the
+     * latest stored message in metroplex
+     */
+    _clearRetryQueue(seqNum) {
+        this.latestReceivedSeqNumStoredTime = new Date();
+        this.retryMessageQueue = this.retryMessageQueue.filter(message => this._messagePayloadHasLargerSeqNum(message, PAGE_VISIT_PART_ATT_NAME, seqNum) ||
+            this._messagePayloadHasLargerSeqNum(message, PAGE_VISIT_VID_FRAG_ATT_NAME, seqNum));
     }
-  }
-
-  /** sets up the interval to empty the queue as we receive confirmation messages from metroplex */
-  setupRetryMechanism() {
-    this.retryMetroplexInterval = setInterval(() => {
-      this._sendUnconfirmedMessages(true);
-    }, METROPLEX_RETRY_FREQUENCY);
-  }
-
-  /** sets up events that will trigger the event queue to be emptied */
-  _setupOffloadEvents() {
-    // when the page hides we try getting all the events
-    // and empty the event and retry queue.
-    addSafeEventListener(window, 'pagehide', () => {
-      this._handleUnload();
-    });
-  }
-
-  /**
-   * will handle the final moments of a page being active. It
-   * will try to empty both the queues with beacons.
-   */
-  _handleUnload() {
-    // closing the socket since the page is unloading
-    this.close();
-
-    // if we disable the client within the pagevisit, we do not
-    // post anything during the unloading.
-    if (ClientConfig.getInstance().isClientDisabled) {
-      return;
+    /** will resend everything that is in the retry queue */
+    async _sendUnconfirmedMessages(socketWasAlreadyOpen) {
+        noibuLog('_sendUnconfirmedMessages');
+        // we only check once. If the socket is disconnected midway, the events would
+        // still be in the retry queue.
+        if (!this.isConnected() || ClientConfig.getInstance().isClientDisabled) {
+            return;
+        }
+        // We always send if this is on socket open
+        if (socketWasAlreadyOpen) {
+            // we do not send the messages to metroplex if we are falling behind on received
+            // sequence numbers
+            const someTimeAgo = new Date();
+            someTimeAgo.setMilliseconds(someTimeAgo.getMilliseconds() - this.metroRetryFrequencyMS);
+            if (someTimeAgo < this.latestReceivedSeqNumStoredTime) {
+                return;
+            }
+            // we do not resend messages to metroplex if we are running behind
+            if (this.isRetryLoopDisabled) {
+                return;
+            }
+        }
+        // removing all the messages with a blocked type from the retry queue
+        this.retryMessageQueue = this.retryMessageQueue.filter(message => !(message.type in this.metroplexTypeLock));
+        // we dont remove any items from this queue in this function
+        for (let i = 0; i < this.retryMessageQueue.length; i += 1) {
+            const { type, payload } = this.retryMessageQueue[i];
+            // sending the data to metroplex
+            // eslint-disable-next-line no-await-in-loop
+            await this._sendSocketMessage(payload);
+            this.previousMessageType = type;
+        }
     }
-
-    // Don't send the final complete PV if the session has become inactive
-    // we already sent the PV when went inactive
-    if (ClientConfig.getInstance().isInactive()) {
-      return;
+    /** sets up the interval to empty the queue as we receive confirmation messages from metroplex */
+    setupRetryMechanism() {
+        this.retryMetroplexInterval = setInterval(() => {
+            this._sendUnconfirmedMessages(true);
+        }, METROPLEX_RETRY_FREQUENCY);
     }
-
-    this.postFullPageVisit(MAX_BEACON_PAYLOAD_SIZE);
-  }
-
-  /**
-   * will post full page visit to metroplex. It
-   * will try to empty both the queues with beacons.
-   * @param  {} maxMessageSize
-   */
-  async postFullPageVisit(maxMessageSize) {
-    if (this.retryMessageQueue.length === 0) {
-      return;
+    /** sets up events that will trigger the event queue to be emptied */
+    _setupOffloadEvents() {
+        // when the page hides we try getting all the events
+        // and empty the event and retry queue.
+        addSafeEventListener(window, 'pagehide', () => this._handleUnload(), false);
     }
-
-    // debug counters
-    const postInfo = [];
-    const numDropped = {
-      [VIDEO_METROPLEX_TYPE]: 0,
-      [PV_METROPLEX_TYPE]: 0,
-    };
-
-    let currentMsgPayloadSize = 0;
-    let currentCompletePv = {
-      [PAGE_VISIT_INFORMATION_ATT_NAME]: await this.getPageInformation(),
-      [PAGE_VISIT_PART_ATT_NAME]: [],
-      [PAGE_VISIT_VID_FRAG_ATT_NAME]: [],
-      [PAGE_VISIT_HTTP_DATA_ATT_NAME]: [],
-      [VIDEO_PART_COUNT_ATT_NAME]: this.connectionCount,
-    };
-    currentCompletePv[PAGE_VISIT_INFORMATION_ATT_NAME][IS_LAST_ATT_NAME] = true;
-    const pageInfo = await this.getPageInformation();
-    this.retryMessageQueue.forEach(msg => {
-      // can't use two variables types in obj deconstruction
-      // eslint-disable-next-line  prefer-const
-      let { type, payload } = msg;
-
-      // If the message is larger than the beacon limit then skip to the next message
-      const currentPayloadSize = new Blob([stringifyJSON(payload)]).size;
-      if (currentPayloadSize > maxMessageSize) {
-        // increment dropped count for this type
-        numDropped[type] += 1;
-        return;
-      }
-
-      currentMsgPayloadSize += currentPayloadSize;
-      if (currentMsgPayloadSize >= maxMessageSize) {
-        this.postMessage(currentCompletePv);
-        // add to post info
-        let postInfoMessage = `Vid: ${currentCompletePv[PAGE_VISIT_VID_FRAG_ATT_NAME].length}`;
-        postInfoMessage += ` PV: ${currentCompletePv[PAGE_VISIT_PART_ATT_NAME].length}`;
-        postInfoMessage += ` HTTP: ${currentCompletePv[PAGE_VISIT_HTTP_DATA_ATT_NAME].length},`;
-        postInfo.push(postInfoMessage);
-
-        // resetting currentCompletePv, since we need to keep adding
-        // events to a blank object to send to metroplex.
-        // retain the video part count, so we don't overwrite anything
-        currentCompletePv = {
-          [PAGE_VISIT_INFORMATION_ATT_NAME]: pageInfo,
-          [PAGE_VISIT_PART_ATT_NAME]: [],
-          [PAGE_VISIT_VID_FRAG_ATT_NAME]: [],
-          [PAGE_VISIT_HTTP_DATA_ATT_NAME]: [],
-          [VIDEO_PART_COUNT_ATT_NAME]:
-            currentCompletePv[VIDEO_PART_COUNT_ATT_NAME],
+    /**
+     * will handle the final moments of a page being active. It
+     * will try to empty both the queues with beacons.
+     */
+    async _handleUnload() {
+        // closing the socket since the page is unloading
+        this.close();
+        // if we disable the client within the pagevisit, we do not
+        // post anything during the unloading.
+        if (ClientConfig.getInstance().isClientDisabled) {
+            return;
+        }
+        // Don't send the final complete PV if the session has become inactive
+        // we already sent the PV when went inactive
+        if (ClientConfig.getInstance().isInactive()) {
+            return;
+        }
+        await this.postFullPageVisit(MAX_BEACON_PAYLOAD_SIZE);
+    }
+    /**
+     * will post full page visit to metroplex. It
+     * will try to empty both the queues with beacons.
+     */
+    async postFullPageVisit(maxMessageSize) {
+        if (this.retryMessageQueue.length === 0) {
+            return;
+        }
+        // debug counters
+        const postInfo = [];
+        const numDropped = {
+            [VIDEO_METROPLEX_TYPE]: 0,
+            [PV_METROPLEX_TYPE]: 0,
         };
-
-        currentCompletePv[PAGE_VISIT_INFORMATION_ATT_NAME][
-          IS_LAST_ATT_NAME
-        ] = true;
-
-        // resetting the message size based on what is being added
-        currentMsgPayloadSize = currentPayloadSize;
-      }
-
-      switch (type) {
-        case VIDEO_METROPLEX_TYPE:
-          currentCompletePv[PAGE_VISIT_VID_FRAG_ATT_NAME].push(
-            payload[PAGE_VISIT_VID_FRAG_ATT_NAME],
-          );
-          break;
-        case PV_METROPLEX_TYPE:
-          currentCompletePv[PAGE_VISIT_PART_ATT_NAME].push(
-            payload[PAGE_VISIT_PART_ATT_NAME],
-          );
-          break;
-        case HTTP_DATA_METROPLEX_TYPE:
-          currentCompletePv[PAGE_VISIT_HTTP_DATA_ATT_NAME].push(
-            payload[PAGE_VISIT_HTTP_DATA_ATT_NAME],
-          );
-          break;
-      }
-    });
-
-    this.postMessage(currentCompletePv);
-
-    // debug log if large retry message queue
-    if (this.retryMessageQueue.length > 100) {
-      let postInfoMessage = `Vid: ${currentCompletePv[PAGE_VISIT_VID_FRAG_ATT_NAME].length}`;
-      postInfoMessage += ` PV: ${currentCompletePv[PAGE_VISIT_PART_ATT_NAME].length}`;
-      postInfoMessage += ` HTTP: ${currentCompletePv[PAGE_VISIT_HTTP_DATA_ATT_NAME].length},`;
-      postInfo.push(postInfoMessage);
-
-      // we completed posted the full pv, send the confirmation debug logs
-      // build the debug message
-      let message = 'POST Full PV complete';
-
-      // POST counts
-      message += `, POSTs count: ${postInfo.length}`;
-      message += `, POSTs info: ${stringifyJSON(postInfo)}`;
-
-      // Initial retry message queue size
-      message += `, Retry message queue size: ${this.retryMessageQueue.length}`;
-
-      // Num drops
-      if (numDropped[VIDEO_METROPLEX_TYPE] > 0) {
-        message += `, Video parts dropped: ${numDropped[VIDEO_METROPLEX_TYPE]}`;
-      }
-      if (numDropped[PV_METROPLEX_TYPE] > 0) {
-        message += `, Page visit parts dropped: ${numDropped[PV_METROPLEX_TYPE]}`;
-      }
-      if (numDropped[HTTP_DATA_METROPLEX_TYPE] > 0) {
-        message += `, HTTP data parts dropped: ${numDropped[HTTP_DATA_METROPLEX_TYPE]}`;
-      }
-
-      // Sequence info
-      message += `, Sequence Info: Latest ${this.messageSequenceNum}`;
-      message += ` Ack'd ${this.latestReceivedSeqNumStoredTime} ${this.latestReceivedSeqNumber}`;
-
-      // if client was disabled (due to inactive or otherwise) enable briefly so the
-      // debug message gets through
-      const clientDisabled = ClientConfig.getInstance().isClientDisabled;
-      ClientConfig.getInstance().isClientDisabled = false;
-      ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
-        message,
-        clientDisabled,
-        SEVERITY.warn,
-      );
+        let currentMsgPayloadSize = 0;
+        let currentCompletePv = {
+            [PAGE_VISIT_INFORMATION_ATT_NAME]: await this.getPageInformation(),
+            [PAGE_VISIT_PART_ATT_NAME]: [],
+            [PAGE_VISIT_VID_FRAG_ATT_NAME]: [],
+            [PAGE_VISIT_HTTP_DATA_ATT_NAME]: [],
+            [VIDEO_PART_COUNT_ATT_NAME]: this.connectionCount,
+        };
+        currentCompletePv[PAGE_VISIT_INFORMATION_ATT_NAME][IS_LAST_ATT_NAME] = true;
+        const pageInfo = await this.getPageInformation();
+        this.retryMessageQueue.forEach(msg => {
+            // can't use two variables types in obj deconstruction
+            // eslint-disable-next-line  prefer-const
+            let { type, payload } = msg;
+            // If the message is larger than the beacon limit then skip to the next message
+            const currentPayloadSize = new Blob([stringifyJSON(payload)]).size;
+            if (currentPayloadSize > maxMessageSize) {
+                // increment dropped count for this type
+                numDropped[type] += 1;
+                return;
+            }
+            currentMsgPayloadSize += currentPayloadSize;
+            if (currentMsgPayloadSize >= maxMessageSize) {
+                this.postMessage(currentCompletePv);
+                // add to post info
+                let postInfoMessage = `Vid: ${currentCompletePv[PAGE_VISIT_VID_FRAG_ATT_NAME].length}`;
+                postInfoMessage += ` PV: ${currentCompletePv[PAGE_VISIT_PART_ATT_NAME].length}`;
+                postInfoMessage += ` HTTP: ${currentCompletePv[PAGE_VISIT_HTTP_DATA_ATT_NAME].length},`;
+                postInfo.push(postInfoMessage);
+                // resetting currentCompletePv, since we need to keep adding
+                // events to a blank object to send to metroplex.
+                // retain the video part count, so we don't overwrite anything
+                currentCompletePv = {
+                    [PAGE_VISIT_INFORMATION_ATT_NAME]: pageInfo,
+                    [PAGE_VISIT_PART_ATT_NAME]: [],
+                    [PAGE_VISIT_VID_FRAG_ATT_NAME]: [],
+                    [PAGE_VISIT_HTTP_DATA_ATT_NAME]: [],
+                    [VIDEO_PART_COUNT_ATT_NAME]: currentCompletePv[VIDEO_PART_COUNT_ATT_NAME],
+                };
+                currentCompletePv[PAGE_VISIT_INFORMATION_ATT_NAME][IS_LAST_ATT_NAME] =
+                    true;
+                // resetting the message size based on what is being added
+                currentMsgPayloadSize = currentPayloadSize;
+            }
+            switch (type) {
+                case VIDEO_METROPLEX_TYPE:
+                    currentCompletePv[PAGE_VISIT_VID_FRAG_ATT_NAME].push(payload[PAGE_VISIT_VID_FRAG_ATT_NAME]);
+                    break;
+                case PV_METROPLEX_TYPE:
+                    currentCompletePv[PAGE_VISIT_PART_ATT_NAME].push(payload[PAGE_VISIT_PART_ATT_NAME]);
+                    break;
+                case HTTP_DATA_METROPLEX_TYPE:
+                    currentCompletePv[PAGE_VISIT_HTTP_DATA_ATT_NAME].push(payload[PAGE_VISIT_HTTP_DATA_ATT_NAME]);
+                    break;
+            }
+        });
+        this.postMessage(currentCompletePv);
+        // debug log if large retry message queue
+        if (this.retryMessageQueue.length > 100) {
+            let postInfoMessage = `Vid: ${currentCompletePv[PAGE_VISIT_VID_FRAG_ATT_NAME].length}`;
+            postInfoMessage += ` PV: ${currentCompletePv[PAGE_VISIT_PART_ATT_NAME].length}`;
+            postInfoMessage += ` HTTP: ${currentCompletePv[PAGE_VISIT_HTTP_DATA_ATT_NAME].length},`;
+            postInfo.push(postInfoMessage);
+            // we completed posted the full pv, send the confirmation debug logs
+            // build the debug message
+            let message = 'POST Full PV complete';
+            // POST counts
+            message += `, POSTs count: ${postInfo.length}`;
+            message += `, POSTs info: ${stringifyJSON(postInfo)}`;
+            // Initial retry message queue size
+            message += `, Retry message queue size: ${this.retryMessageQueue.length}`;
+            // Num drops
+            if (numDropped[VIDEO_METROPLEX_TYPE] > 0) {
+                message += `, Video parts dropped: ${numDropped[VIDEO_METROPLEX_TYPE]}`;
+            }
+            if (numDropped[PV_METROPLEX_TYPE] > 0) {
+                message += `, Page visit parts dropped: ${numDropped[PV_METROPLEX_TYPE]}`;
+            }
+            if (numDropped[HTTP_DATA_METROPLEX_TYPE] > 0) {
+                message += `, HTTP data parts dropped: ${numDropped[HTTP_DATA_METROPLEX_TYPE]}`;
+            }
+            // Sequence info
+            message += `, Sequence Info: Latest ${this.messageSequenceNum}`;
+            message += ` Ack'd ${this.latestReceivedSeqNumStoredTime} ${this.latestReceivedSeqNumber}`;
+            // if client was disabled (due to inactive or otherwise) enable briefly so the
+            // debug message gets through
+            const clientDisabled = ClientConfig.getInstance().isClientDisabled;
+            ClientConfig.getInstance().isClientDisabled = false;
+            ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(message, clientDisabled, SEVERITY.warn);
+        }
     }
-  }
-
-  /**
-   * will send a message to metroplex via a post request that will outlive the current page
-   * @param  {} msg
-   */
-  async postMessage(msg) {
-    const updatedMsg = msg;
-
-    // ensure a unique video part number each call
-    updatedMsg[VIDEO_PART_COUNT_ATT_NAME] += 1;
-
-    // we send the remainder elements
-    unwrapNoibuWrapped(fetch)(this.postURL, {
-      method: 'POST',
-      headers: {
-        'content-type': 'application/json',
-        'User-Agent': await getUserAgent(),
-      },
-      body: stringifyJSON(updatedMsg),
-      // keep alive outlives the current page, its the same as beacon
-      keepalive: true,
-    });
-  }
-
-  /**
-   * Stringifies the payload into JSON, sends it to the back end if the session
-   * is active and returns true. If inactive the session and socket are closed
-   * and this method returns false.
-   * @param  {} payload
-   */
-  _sendSocketMessage(payload) {
-    noibuLog('_sendSocketMessage');
-    const closeIfInactive = this.closeIfInactive();
-    if (closeIfInactive) {
-      noibuLog('_sendSocketMessage dropped due to', { closeIfInactive });
-      return false;
+    /**
+     * will send a message to metroplex via a post request that will outlive the current page
+     */
+    async postMessage(msg) {
+        const updatedMsg = msg;
+        // ensure a unique video part number each call
+        updatedMsg[VIDEO_PART_COUNT_ATT_NAME] += 1;
+        // we send the remainder elements
+        unwrapNoibuWrapped(fetch)(this.postURL, {
+            method: 'POST',
+            headers: {
+                'content-type': 'application/json',
+                'User-Agent': await getUserAgent(),
+            },
+            body: stringifyJSON(updatedMsg),
+            // keep alive outlives the current page, its the same as beacon
+            keepalive: true,
+        });
     }
-    const payloadJson = stringifyJSON(payload);
-    noibuLog(`_sendSocketMessage sending: ${payloadJson}`);
-    this.socket.send(payloadJson);
-    return true;
-  }
-
-  /**
-   * Closes the socket connection if the session is inactive. Returns true if the
-   * session is inactive
-   */
-  closeIfInactive() {
-    const inactive = ClientConfig.getInstance().isInactive();
-    // if we weren't already inactive, go to inactive state
-    if (inactive && !ClientConfig.getInstance().isClientDisabled) {
-      // lock the client for 1 minute, since the lock expires
-      // only on new page loads this will lock the client until
-      // the next page is loaded.
-      ClientConfig.getInstance().lockClientUntilNextPage(
-        'Session is inactive, locking until next page',
-      );
-      this.close();
-
-      // post metrics now so we don't include events after going inactive
-      StoredMetrics.getInstance().postMetrics('inactive');
-
-      // post retry queue now so we don't include event after going inactive
-      this.postFullPageVisit(MAX_BEACON_PAYLOAD_SIZE);
+    /**
+     * Stringifies the payload into JSON, sends it to the back end if the session
+     * is active and returns true. If inactive the session and socket are closed
+     * and this method returns false.
+     */
+    async _sendSocketMessage(payload) {
+        noibuLog('_sendSocketMessage');
+        const closeIfInactive = await this.closeIfInactive();
+        if (closeIfInactive) {
+            noibuLog('_sendSocketMessage dropped due to', { closeIfInactive });
+            return;
+        }
+        const payloadJson = stringifyJSON(payload);
+        noibuLog(`_sendSocketMessage sending: ${payloadJson}`);
+        if (this.socket) {
+            this.socket.send(payloadJson);
+        }
     }
-
-    return inactive;
-  }
-
-  /** will get page information, calling this will increase the connection count */
-  async getPageInformation() {
-    const pvi = {
-      [BROWSER_ID_ATT_NAME]: ClientConfig.getInstance().browserId,
-      [PV_ID_ATT_NAME]: ClientConfig.getInstance().pageVisitId,
-      [VER_ATT_NAME]: CURRENT_PV_VERSION,
-      [PV_SEQ_ATT_NAME]: await ClientConfig.getInstance().getPageVisitSeq(),
-      [ON_URL_ATT_NAME]: this._initialURL,
-      [REF_URL_ATT_NAME]: this.initialReferingURL,
-      [STARTED_AT_ATT_NAME]: this.sessionTimestamp.toISOString(),
-      [CONN_COUNT_ATT_NAME]: this.connectionCount,
-      [COLLECT_VER_ATT_NAME]: CURRENT_NOIBUJS_VERSION,
-      [IS_LAST_ATT_NAME]: false,
-      [SCRIPT_ID_ATT_NAME]: GET_SCRIPT_ID(),
-      [SCRIPT_INSTANCE_ID_ATT_NAME]: this.scriptInstanceId,
-      [METROPLEX_SOCKET_INSTANCE_ID_ATT_NAME]: this.instanceId,
-      [SOCKET_INSTANCE_ID_ATT_NAME]: this.socketInstanceId,
-    };
-
-    return pvi;
-  }
-
-  /**
-   * Try to parse help code response and fire custom event
-   * @param {String} response
-   */
-  _tryProcessHelpCodeResponse(response) {
-    const prefix = `${HELP_CODE_ATT_NAME}:`;
-
-    if (typeof response !== 'string' || !response.startsWith(prefix)) {
-      return false;
+    /**
+     * Closes the socket connection if the session is inactive. Returns true if the
+     * session is inactive
+     */
+    async closeIfInactive() {
+        const inactive = ClientConfig.getInstance().isInactive();
+        // if we weren't already inactive, go to inactive state
+        if (inactive && !ClientConfig.getInstance().isClientDisabled) {
+            // lock the client for 1 minute, since the lock expires
+            // only on new page loads this will lock the client until
+            // the next page is loaded.
+            await ClientConfig.getInstance().lockClientUntilNextPage('Session is inactive, locking until next page');
+            this.close();
+            Promise.all([
+                // post metrics now so we don't include events after going inactive
+                StoredMetrics.getInstance().postMetrics(),
+                // post retry queue now so we don't include event after going inactive
+                this.postFullPageVisit(MAX_BEACON_PAYLOAD_SIZE),
+            ]);
+        }
+        return inactive;
+    }
+    /** will get page information, calling this will increase the connection count */
+    async getPageInformation() {
+        return {
+            [BROWSER_ID_ATT_NAME]: ClientConfig.getInstance().browserId,
+            [PV_ID_ATT_NAME]: ClientConfig.getInstance().pageVisitId,
+            [VER_ATT_NAME]: CURRENT_PV_VERSION,
+            [PV_SEQ_ATT_NAME]: await ClientConfig.getInstance().getPageVisitSeq(),
+            [ON_URL_ATT_NAME]: this._initialURL,
+            [REF_URL_ATT_NAME]: this.initialReferingURL,
+            [STARTED_AT_ATT_NAME]: this.sessionTimestamp.toISOString(),
+            [CONN_COUNT_ATT_NAME]: this.connectionCount,
+            [COLLECT_VER_ATT_NAME]: CURRENT_NOIBUJS_VERSION,
+            [IS_LAST_ATT_NAME]: false,
+            [SCRIPT_ID_ATT_NAME]: GET_SCRIPT_ID(),
+            [SCRIPT_INSTANCE_ID_ATT_NAME]: this.scriptInstanceId,
+            [METROPLEX_SOCKET_INSTANCE_ID_ATT_NAME]: this.instanceId,
+            [SOCKET_INSTANCE_ID_ATT_NAME]: this.socketInstanceId,
+            [VIDEO_RECORDER_ATT_NAME]: await getVideoRecorderType(),
+        };
+    }
+    /**
+     * Try to parse help code response and fire custom event
+     * @param {String} response
+     */
+    _tryProcessHelpCodeResponse(response) {
+        const prefix = `${HELP_CODE_ATT_NAME}:`;
+        if (typeof response !== 'string' || !response.startsWith(prefix)) {
+            return false;
+        }
+        const data = response.substring(prefix.length);
+        const success = /^\d{6}$/.test(data);
+        if (this.helpCodeCb) {
+            this.helpCodeCb({ detail: { success, data } });
+        }
+        return true;
     }
-
-    const data = response.substring(prefix.length);
-    const success = /^\d{6}$/.test(data);
-
-    this.helpCodeCb({ detail: { success, data } });
-
-    return true;
-  }
 }
 
 export { MetroplexSocket as default };