@webex/internal-plugin-metrics 3.0.0-beta.196 → 3.0.0-beta.197

package/dist/types/metrics.types.d.ts

@@ -85,3 +85,8 @@ export type SubmitMQE = (args: {
     payload: SubmitMQEPayload;
     options: any;
 }) => void;
+export type BuildClientEventFetchRequestOptions = (args: {
+    name: ClientEvent['name'];
+    payload?: RecursivePartial<ClientEvent['payload']>;
+    options: SubmitClientEventOptions;
+}) => Promise<any>;

package/dist/types/new-metrics.d.ts

@@ -79,5 +79,41 @@ declare class Metrics extends WebexPlugin {
         payload?: RecursivePartial<ClientEvent['payload']>;
         options: SubmitClientEventOptions;
     }): Promise<any>;
+    /**
+     * Returns a promise that will resolve to fetch options for submitting a metric.
+     *
+     * This is to support quickly submitting metrics when the browser/tab is closing.
+     * Calling submitClientEvent will not work because there some async steps that will
+     * not complete before the browser is closed.  Instead, we pre-gather all the
+     * information/options needed for the request(s), and then simply and quickly
+     * fire the fetch(es) when beforeUnload is triggered.
+     *
+     * We must use fetch instead of request because fetch has a keepalive option that
+     * allows the request it to outlive the page.
+     *
+     * Note: the timings values will be wrong, but setMetricTimingsAndFetch() will
+     * properly adjust them before submitting.
+     *
+     * @public
+     * @param {Object} arg
+     * @param {String} arg.name - event name
+     * @param {Object} arg.payload - event payload
+     * @param {Object} arg.options - other options
+     * @returns {Promise} promise that resolves to options to be used with fetch
+     */
+    buildClientEventFetchRequestOptions({ name, payload, options, }: {
+        name: ClientEvent['name'];
+        payload?: RecursivePartial<ClientEvent['payload']>;
+        options: SubmitClientEventOptions;
+    }): Promise<any>;
+    /**
+     * Submits a metric from pre-built request options via the fetch API. Updates
+     * the "$timings" and "originTime" values to Date.now() since the existing times
+     * were set when the options were built (not submitted).
+  
+     * @param {any} options - the pre-built request options for submitting a metric
+     * @returns {Promise} promise that resolves to the response object
+     */
+    setMetricTimingsAndFetch(options: any): Promise<any>;
 }
 export default Metrics;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webex/internal-plugin-metrics",
-  "version": "3.0.0-beta.196",
+  "version": "3.0.0-beta.197",
   "description": "",
   "license": "MIT",
   "main": "dist/index.js",
@@ -28,12 +28,12 @@
     "build": "yarn run -T tsc --declaration true --declarationDir ./dist/types"
   },
   "dependencies": {
-    "@webex/common": "3.0.0-beta.196",
-    "@webex/common-timers": "3.0.0-beta.196",
-    "@webex/internal-plugin-device": "3.0.0-beta.196",
-    "@webex/internal-plugin-metrics": "3.0.0-beta.196",
-    "@webex/test-helper-chai": "3.0.0-beta.196",
-    "@webex/test-helper-mock-webex": "3.0.0-beta.196",
-    "@webex/webex-core": "3.0.0-beta.196"
+    "@webex/common": "3.0.0-beta.197",
+    "@webex/common-timers": "3.0.0-beta.197",
+    "@webex/internal-plugin-device": "3.0.0-beta.197",
+    "@webex/internal-plugin-metrics": "3.0.0-beta.197",
+    "@webex/test-helper-chai": "3.0.0-beta.197",
+    "@webex/test-helper-mock-webex": "3.0.0-beta.197",
+    "@webex/webex-core": "3.0.0-beta.197"
   }
 }

package/src/call-diagnostic/call-diagnostic-metrics-batcher.ts

@@ -1,116 +1,19 @@
 /* eslint-disable class-methods-use-this */
 /* eslint-disable valid-jsdoc */
 
-import {isEmpty, merge} from 'lodash';
 import Batcher from '../batcher';
-import {
-  ClientEvent,
-  MetricEventNames,
-  MediaQualityEventAudioSetupDelayPayload,
-  MediaQualityEventVideoSetupDelayPayload,
-} from '../metrics.types';
+import {prepareDiagnosticMetricItem} from './call-diagnostic-metrics.util';
 
 const CallDiagnosticEventsBatcher = Batcher.extend({
   namespace: 'Metrics',
 
-  /**
-   * @param webClientDomain
-   * @returns
-   */
-  getBuildType(webClientDomain) {
-    if (
-      webClientDomain?.includes('localhost') ||
-      webClientDomain?.includes('127.0.0.1') ||
-      process.env.NODE_ENV !== 'production'
-    ) {
-      return 'test';
-    }
-
-    return process.env.NODE_ENV === 'production' ? 'prod' : 'test';
-  },
-
   /**
    * Prepare item
    * @param item
    * @returns
    */
   prepareItem(item) {
-    const origin = {
-      buildType: this.getBuildType(item.event?.eventData?.webClientDomain),
-      networkType: 'unknown',
-    };
-
-    // check event names and append latencies?
-    const eventName = item.eventPayload?.event?.name as MetricEventNames;
-    const joinTimes: ClientEvent['payload']['joinTimes'] = {};
-    const audioSetupDelay: MediaQualityEventAudioSetupDelayPayload = {};
-    const videoSetupDelay: MediaQualityEventVideoSetupDelayPayload = {};
-
-    const cdl = this.webex.internal.newMetrics.callDiagnosticLatencies;
-
-    switch (eventName) {
-      case 'client.interstitial-window.launched':
-        joinTimes.meetingInfoReqResp = cdl.getMeetingInfoReqResp();
-        joinTimes.clickToInterstitial = cdl.getClickToInterstitial();
-        break;
-
-      case 'client.call.initiated':
-        joinTimes.meetingInfoReqResp = cdl.getMeetingInfoReqResp();
-        joinTimes.showInterstitialTime = cdl.getShowInterstitialTime();
-        break;
-
-      case 'client.locus.join.response':
-        joinTimes.meetingInfoReqResp = cdl.getMeetingInfoReqResp();
-        joinTimes.callInitJoinReq = cdl.getCallInitJoinReq();
-        joinTimes.joinReqResp = cdl.getJoinReqResp();
-        joinTimes.joinReqSentReceived = cdl.getJoinRespSentReceived();
-        joinTimes.pageJmt = cdl.getPageJMT();
-        joinTimes.clickToInterstitial = cdl.getClickToInterstitial();
-        joinTimes.interstitialToJoinOK = cdl.getInterstitialToJoinOK();
-        joinTimes.totalJmt = cdl.getTotalJMT();
-        joinTimes.clientJmt = cdl.getClientJMT();
-        break;
-
-      case 'client.ice.end':
-        joinTimes.ICESetupTime = cdl.getICESetupTime();
-        joinTimes.audioICESetupTime = cdl.getAudioICESetupTime();
-        joinTimes.videoICESetupTime = cdl.getVideoICESetupTime();
-        joinTimes.shareICESetupTime = cdl.getShareICESetupTime();
-        break;
-
-      case 'client.media.rx.start':
-        joinTimes.localSDPGenRemoteSDPRecv = cdl.getLocalSDPGenRemoteSDPRecv();
-        break;
-
-      case 'client.media-engine.ready':
-        joinTimes.totalMediaJMT = cdl.getTotalMediaJMT();
-        joinTimes.interstitialToMediaOKJMT = cdl.getInterstitialToMediaOKJMT();
-        joinTimes.callInitMediaEngineReady = cdl.getCallInitMediaEngineReady();
-        joinTimes.stayLobbyTime = cdl.getStayLobbyTime();
-        break;
-
-      case 'client.mediaquality.event':
-        audioSetupDelay.joinRespRxStart = cdl.getAudioJoinRespRxStart();
-        audioSetupDelay.joinRespTxStart = cdl.getAudioJoinRespTxStart();
-        videoSetupDelay.joinRespRxStart = cdl.getVideoJoinRespRxStart();
-        videoSetupDelay.joinRespTxStart = cdl.getVideoJoinRespTxStart();
-    }
-
-    if (!isEmpty(joinTimes)) {
-      item.eventPayload.event = merge(item.eventPayload.event, {joinTimes});
-    }
-
-    if (!isEmpty(audioSetupDelay)) {
-      item.eventPayload.event = merge(item.eventPayload.event, {audioSetupDelay});
-    }
-
-    if (!isEmpty(videoSetupDelay)) {
-      item.eventPayload.event = merge(item.eventPayload.event, {videoSetupDelay});
-    }
-
-    item.eventPayload.origin = Object.assign(origin, item.eventPayload.origin);
-
-    return Promise.resolve(item);
+    return Promise.resolve(prepareDiagnosticMetricItem(this.webex, item));
   },
 
   /**

package/src/call-diagnostic/call-diagnostic-metrics.ts

@@ -11,6 +11,7 @@ import {
   anonymizeIPAddress,
   clearEmptyKeysRecursively,
   isLocusServiceErrorCode,
+  prepareDiagnosticMetricItem,
   userAgentToString,
 } from './call-diagnostic-metrics.util';
 import {CLIENT_NAME} from '../config';
@@ -474,14 +475,15 @@ export default class CallDiagnosticMetrics extends StatelessWebexPlugin {
   }
 
   /**
-   * Submit Client Event CA event.
+   * Prepare Client Event CA event.
    * @param arg - submit params
    * @param arg.event - event key
    * @param arg.payload - additional payload to be merged with default payload
    * @param arg.options - payload
+   * @returns {any} options to be with fetch
    * @throws
    */
-  public submitClientEvent({
+  private prepareClientEvent({
     name,
     payload,
     options,
@@ -509,6 +511,28 @@ export default class CallDiagnosticMetrics extends StatelessWebexPlugin {
     // append client event data to the call diagnostic event
     const diagnosticEvent = this.prepareDiagnosticEvent(clientEventObject, options);
 
+    return diagnosticEvent;
+  }
+
+  /**
+   * Submit Client Event CA event.
+   * @param arg - submit params
+   * @param arg.event - event key
+   * @param arg.payload - additional payload to be merged with default payload
+   * @param arg.options - payload
+   * @throws
+   */
+  public submitClientEvent({
+    name,
+    payload,
+    options,
+  }: {
+    name: ClientEvent['name'];
+    payload?: ClientEventPayload;
+    options: SubmitClientEventOptions;
+  }) {
+    const diagnosticEvent = this.prepareClientEvent({name, payload, options});
+
     return this.submitToCallDiagnostics(diagnosticEvent);
   }
 
@@ -526,4 +550,42 @@ export default class CallDiagnosticMetrics extends StatelessWebexPlugin {
 
     return this.callDiagnosticEventsBatcher.request(finalEvent);
   }
+
+  /**
+   * Builds a request options object to later be passed to fetch().
+   * @param arg - submit params
+   * @param arg.event - event key
+   * @param arg.payload - additional payload to be merged with default payload
+   * @param arg.options - client event options
+   * @returns {Promise<any>}
+   * @throws
+   */
+  public async buildClientEventFetchRequestOptions({
+    name,
+    payload,
+    options,
+  }: {
+    name: ClientEvent['name'];
+    payload?: ClientEventPayload;
+    options: SubmitClientEventOptions;
+  }): Promise<any> {
+    const clientEvent = this.prepareClientEvent({name, payload, options});
+
+    // build metrics-a event type
+    // @ts-ignore
+    const diagnosticEvent = prepareDiagnosticMetricItem(this.webex, {
+      eventPayload: clientEvent,
+      type: ['diagnostic-event'],
+    });
+
+    // @ts-ignore
+    return this.webex.prepareFetchOptions({
+      method: 'POST',
+      service: 'metrics',
+      resource: 'clientmetrics',
+      body: {
+        metrics: [diagnosticEvent],
+      },
+    });
+  }
 }

package/src/call-diagnostic/call-diagnostic-metrics.util.ts

@@ -3,7 +3,13 @@ import anonymize from 'ip-anonymize';
 import util from 'util';
 
 import {BrowserDetection} from '@webex/common';
-import {isEmpty} from 'lodash';
+import {isEmpty, merge} from 'lodash';
+import {
+  ClientEvent,
+  MediaQualityEventAudioSetupDelayPayload,
+  MediaQualityEventVideoSetupDelayPayload,
+  MetricEventNames,
+} from '../metrics.types';
 
 const {getOSName, getOSVersion, getBrowserName, getBrowserVersion} = BrowserDetection();
 
@@ -100,3 +106,128 @@ export const isLocusServiceErrorCode = (errorCode: string | number) => {
 
   return false;
 };
+
+/**
+ * @param webClientDomain
+ * @returns
+ */
+export const getBuildType = (webClientDomain) => {
+  if (
+    webClientDomain?.includes('localhost') ||
+    webClientDomain?.includes('127.0.0.1') ||
+    process.env.NODE_ENV !== 'production'
+  ) {
+    return 'test';
+  }
+
+  return 'production';
+};
+
+/**
+ * Prepare metric item for submission.
+ * @param {Object} webex sdk instance
+ * @param {Object} item
+ * @returns {Object} prepared item
+ */
+export const prepareDiagnosticMetricItem = (webex: any, item: any) => {
+  const origin = {
+    buildType: getBuildType(item.event?.eventData?.webClientDomain),
+    networkType: 'unknown',
+  };
+
+  // check event names and append latencies?
+  const eventName = item.eventPayload?.event?.name as MetricEventNames;
+  const joinTimes: ClientEvent['payload']['joinTimes'] = {};
+  const audioSetupDelay: MediaQualityEventAudioSetupDelayPayload = {};
+  const videoSetupDelay: MediaQualityEventVideoSetupDelayPayload = {};
+
+  const cdl = webex.internal.newMetrics.callDiagnosticLatencies;
+
+  switch (eventName) {
+    case 'client.interstitial-window.launched':
+      joinTimes.meetingInfoReqResp = cdl.getMeetingInfoReqResp();
+      joinTimes.clickToInterstitial = cdl.getClickToInterstitial();
+      break;
+
+    case 'client.call.initiated':
+      joinTimes.meetingInfoReqResp = cdl.getMeetingInfoReqResp();
+      joinTimes.showInterstitialTime = cdl.getShowInterstitialTime();
+      break;
+
+    case 'client.locus.join.response':
+      joinTimes.meetingInfoReqResp = cdl.getMeetingInfoReqResp();
+      joinTimes.callInitJoinReq = cdl.getCallInitJoinReq();
+      joinTimes.joinReqResp = cdl.getJoinReqResp();
+      joinTimes.joinReqSentReceived = cdl.getJoinRespSentReceived();
+      joinTimes.pageJmt = cdl.getPageJMT();
+      joinTimes.clickToInterstitial = cdl.getClickToInterstitial();
+      joinTimes.interstitialToJoinOK = cdl.getInterstitialToJoinOK();
+      joinTimes.totalJmt = cdl.getTotalJMT();
+      joinTimes.clientJmt = cdl.getClientJMT();
+      break;
+
+    case 'client.ice.end':
+      joinTimes.ICESetupTime = cdl.getICESetupTime();
+      joinTimes.audioICESetupTime = cdl.getAudioICESetupTime();
+      joinTimes.videoICESetupTime = cdl.getVideoICESetupTime();
+      joinTimes.shareICESetupTime = cdl.getShareICESetupTime();
+      break;
+
+    case 'client.media.rx.start':
+      joinTimes.localSDPGenRemoteSDPRecv = cdl.getLocalSDPGenRemoteSDPRecv();
+      break;
+
+    case 'client.media-engine.ready':
+      joinTimes.totalMediaJMT = cdl.getTotalMediaJMT();
+      joinTimes.interstitialToMediaOKJMT = cdl.getInterstitialToMediaOKJMT();
+      joinTimes.callInitMediaEngineReady = cdl.getCallInitMediaEngineReady();
+      joinTimes.stayLobbyTime = cdl.getStayLobbyTime();
+      break;
+
+    case 'client.mediaquality.event':
+      audioSetupDelay.joinRespRxStart = cdl.getAudioJoinRespRxStart();
+      audioSetupDelay.joinRespTxStart = cdl.getAudioJoinRespTxStart();
+      videoSetupDelay.joinRespRxStart = cdl.getVideoJoinRespRxStart();
+      videoSetupDelay.joinRespTxStart = cdl.getVideoJoinRespTxStart();
+  }
+
+  if (!isEmpty(joinTimes)) {
+    item.eventPayload.event = merge(item.eventPayload.event, {joinTimes});
+  }
+
+  if (!isEmpty(audioSetupDelay)) {
+    item.eventPayload.event = merge(item.eventPayload.event, {audioSetupDelay});
+  }
+
+  if (!isEmpty(videoSetupDelay)) {
+    item.eventPayload.event = merge(item.eventPayload.event, {videoSetupDelay});
+  }
+
+  item.eventPayload.origin = Object.assign(origin, item.eventPayload.origin);
+
+  return item;
+};
+
+/**
+ * Sets the originTime value(s) before the request/fetch.
+ * This function is only useful if you are about to submit a metrics
+ * request using pre-built fetch options;
+ *
+ * @param {any} options
+ * @returns {any} the updated options object
+ */
+export const setMetricTimings = (options) => {
+  if (options.body?.metrics) {
+    const now = new Date().toISOString();
+    options.body.metrics.forEach((metric) => {
+      if (metric.eventPayload) {
+        metric.eventPayload.originTime = {
+          triggered: now,
+          sent: now,
+        };
+      }
+    });
+  }
+
+  return options;
+};