noibu-react-native 0.0.1

package/dist/api/metroplexSocket.js

@@ -0,0 +1,882 @@
+import uuid from 'react-native-uuid';
+import { getProperGlobalUrl, getMaxSubstringAllowed, getUserAgent, stringifyJSON, getUserLanguage } 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, 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_ERROR, 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, SEVERITY_WARN, JS_ENV, 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, LANG_ATT_NAME, HELP_CODE_ATT_NAME } from '../constants.js';
+import ClientConfig from './clientConfig.js';
+import StoredMetrics from './storedMetrics.js';
+import StoredPageVisit from './storedPageVisit.js';
+import { safePerformanceNow } from '../utils/performance.js';
+import { isDateOverwritten } from '../utils/date.js';
+import HelpCode from './helpCode.js';
+
+/** @module MetroplexSocket */
+
+/** Manages the socket to Metroplex */
+class MetroplexSocket {
+  /**
+   * 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();
+    // 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 = getProperGlobalUrl();
+    this.initialReferingURL =
+      global.document && global.document.referrer
+        ? getMaxSubstringAllowed(global.document.referrer)
+        : '';
+    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();
+    }
+
+    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;
+    }
+  }
+
+  /**
+   * 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;
+  }
+
+  /**
+   * 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 {boolean} true if message was sent succefully, false otherwise
+   */
+  sendMessage(type, payload) {
+    // if we have a lock on this specific type, we dont send it
+    if (
+      type in this.metroplexTypeLock ||
+      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,
+        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
+      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]
+        : [];
+
+      this._updateLatestPvTimestamp(events);
+    }
+
+    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());
+    }
+  }
+
+  /** 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);
+    }
+  }
+
+  /** 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;
+    }
+
+    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 = () => {
+      // 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;
+    }
+    // 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);
+
+      // setting up retry reconnection hooks
+      // everytime we change make the page hidden this will trigger:
+      // tab change, app change, etc
+      addSafeEventListener(window, 'visibilitychange', () => {
+        // Allow socket to reopen even after forceClosed from the pagehide event
+        // Session should be allowed to continue if window becomes visible again
+        // However, don't open if client was disabled
+        if (ClientConfig.getInstance().isClientDisabled) {
+          return;
+        }
+
+        // we always force reconnection when going from hidden to visible
+        // since mobile browsers (particularly Safari) are known to silently
+        // drop socket connections while in the background
+        const visible = global.document.visibilityState === 'visible';
+        if (visible) {
+          // reset the forceClosed flag in case this happens after pagehide occurred
+          this.forceClosed = false;
+          if (this.isConnected() || this.isConnecting()) {
+            // close the current socket connection and ensure
+            // no automatic connection attempted on close
+            this.socket.onclose = () => {};
+            this.socket.close(1000);
+          }
+          this.handleConnect(resolve, visible);
+        }
+      });
+    });
+
+    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;
+    }
+
+    const endTime = new Date(
+      this.sessionTimestamp.getTime() + delta,
+    ).toISOString();
+
+    // Assigning this value here is much better than copying the whole object.
+    // eslint-disable-next-line no-param-reassign
+    payload[END_AT_ATT_NAME] = endTime;
+  }
+
+  /** open handler for socket */
+  _onSocketOpen() {
+    // if we are not connected, we do not send any messages
+    if (!this.isConnected() || ClientConfig.getInstance().isClientDisabled) {
+      return;
+    }
+
+    this._sendSocketMessage(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();
+          }
+        }
+
+        if (this._tryProcessHelpCodeResponse(event.data)) {
+          break;
+        }
+
+        break;
+      // still need to collect the id sent back from metroplex
+    }
+  }
+
+  /**
+   * 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;
+    }
+
+    // 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
+      if (!this._sendSocketMessage(payload)) {
+        break;
+      }
+
+      this.previousMessageType = type;
+    }
+  }
+
+  /** 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;
+    }
+
+    // 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;
+    }
+
+    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
+   */
+  postFullPageVisit(maxMessageSize) {
+    if (this.retryMessageQueue.length === 0) {
+      return;
+    }
+
+    // debug counters
+    const postInfo = [];
+    const numDropped = {
+      [VIDEO_METROPLEX_TYPE]: 0,
+      [PV_METROPLEX_TYPE]: 0,
+    };
+
+    let currentMsgPayloadSize = 0;
+    let currentCompletePv = {
+      [PAGE_VISIT_INFORMATION_ATT_NAME]: 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;
+
+    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]: this.getPageInformation(),
+          [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
+   */
+  postMessage(msg) {
+    const updatedMsg = msg;
+
+    // ensure a unique video part number each call
+    updatedMsg[VIDEO_PART_COUNT_ATT_NAME] += 1;
+
+    // we use the beacon api in testing since the version of chromium we are using
+    // does not support the keepalive flag
+    if (JS_ENV() === 'test') {
+      navigator.sendBeacon(this.postURL, stringifyJSON(updatedMsg));
+      // we only write to the pv route if the fetch api is enabled in the current browser
+      // and we need to fetch api to set the application/json header for metroplex
+    } else if (global.fetch) {
+      // we send the remainder elements
+      fetch(this.postURL, {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json',
+        },
+        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) {
+    if (this.closeIfInactive()) {
+      return false;
+    }
+    this.socket.send(stringifyJSON(payload));
+    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);
+    }
+
+    return inactive;
+  }
+
+  /** will get page information, calling this will increase the connection count */
+  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]: 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,
+    };
+
+    // only setting the user language if we can safely access it
+    const userLang = getUserLanguage();
+    if (userLang) {
+      pvi[LANG_ATT_NAME] = userLang;
+    }
+
+    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;
+    }
+
+    const data = response.substring(prefix.length);
+    const success = /^\d{6}$/.test(data);
+
+    HelpCode.getInstance().receiveHelpCode({ detail: { success, data } });
+
+    return true;
+  }
+}
+
+export { MetroplexSocket as default };