@atlaskit/react-ufo 2.4.5 → 2.4.7

package/dist/es2019/create-payload/index.js

@@ -8,13 +8,12 @@ import { getBm3Timings } from '../custom-timings';
 import { getGlobalErrorCount } from '../global-error-handler';
 import { getPageVisibilityState } from '../hidden-timing';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
-import { interactionSpans as atlaskitInteractionSpans, postInteractionLog } from '../interaction-metrics';
+import { interactionSpans as atlaskitInteractionSpans } from '../interaction-metrics';
 import * as resourceTiming from '../resource-timing';
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
-import { getVCObserver } from '../vc';
-import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
-function getUfoNameOverride(interaction) {
+import { buildSegmentTree, getExperimentalVCMetrics, getInteractionStatus, getPageVisibilityUpToTTAI, getSSRDoneTimeValue, getTTAI, getVCMetrics, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
+export function getUfoNameOverride(interaction) {
   const {
     ufoName,
     apdex
@@ -28,7 +27,6 @@ function getUfoNameOverride(interaction) {
       }
     }
     return ufoName;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (e) {
     return ufoName;
   }
@@ -63,13 +61,6 @@ const getPageVisibilityUpToTTI = interaction => {
   const bm3EndTimeOrInteractionEndTime = getBm3EndTimeOrFallbackValue(interaction);
   return getPageVisibilityState(start, bm3EndTimeOrInteractionEndTime);
 };
-const getPageVisibilityUpToTTAI = interaction => {
-  const {
-    start,
-    end
-  } = interaction;
-  return getPageVisibilityState(start, end);
-};
 const getVisibilityStateFromPerformance = stop => {
   try {
     const results = performance.getEntriesByType('visibility-state');
@@ -124,15 +115,6 @@ const getMoreAccuratePageVisibilityUpToTTAI = interaction => {
   }
   return old;
 };
-const getInteractionStatus = interaction => {
-  const originalInteractionStatus = interaction.abortReason ? 'ABORTED' : 'SUCCEEDED';
-  const hasBm3TTI = interaction.apdex.length > 0;
-  const overrideStatus = hasBm3TTI ? 'SUCCEEDED' : originalInteractionStatus;
-  return {
-    originalInteractionStatus,
-    overrideStatus
-  };
-};
 const getResourceTimings = (start, end) => {
   var _resourceTiming$getRe;
   return (_resourceTiming$getRe = resourceTiming.getResourceTimings(start, end)) !== null && _resourceTiming$getRe !== void 0 ? _resourceTiming$getRe : undefined;
@@ -155,44 +137,6 @@ const getPaintMetrics = type => {
   });
   return metrics;
 };
-const getVCMetrics = interaction => {
-  var _config$vc, _interaction$apdex, _interaction$apdex$;
-  const config = getConfig();
-  if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
-    return {};
-  }
-  if (interaction.type !== 'page_load' && interaction.type !== 'transition') {
-    return {};
-  }
-  const ssr = interaction.type === 'page_load' && config !== null && config !== void 0 && config.ssr ? {
-    ssr: getSSRDoneTimeValue(config)
-  } : null;
-  postInteractionLog.setVCObserverSSRConfig(ssr);
-  const tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime;
-  const prefix = 'ufo';
-  const result = getVCObserver().getVCResult({
-    start: interaction.start,
-    stop: interaction.end,
-    tti,
-    prefix,
-    vc: interaction.vc,
-    ...ssr
-  });
-  postInteractionLog.setLastInteractionFinishVCResult(result);
-  const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
-  if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {
-    return result;
-  }
-  const interactionStatus = getInteractionStatus(interaction);
-  const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-  if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
-    return result;
-  }
-  return {
-    ...result,
-    'metric:vc90': VC['90']
-  };
-};
 const getNavigationMetrics = type => {
   if (type !== 'page_load') {
     return {};
@@ -240,7 +184,7 @@ const getNavigationMetrics = type => {
   };
 };
 const getPPSMetrics = interaction => {
-  var _interaction$apdex2, _interaction$apdex2$;
+  var _interaction$apdex, _interaction$apdex$;
   const {
     start,
     end
@@ -248,7 +192,7 @@ const getPPSMetrics = interaction => {
   const config = getConfig();
   const interactionStatus = getInteractionStatus(interaction);
   const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-  const tti = (_interaction$apdex2 = interaction.apdex) === null || _interaction$apdex2 === void 0 ? void 0 : (_interaction$apdex2$ = _interaction$apdex2[0]) === null || _interaction$apdex2$ === void 0 ? void 0 : _interaction$apdex2$.stopTime;
+  const tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime;
   const ttai = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
   const PPSMetricsAtTTI = tti !== undefined ? getLighthouseMetrics({
     start,
@@ -594,10 +538,6 @@ function getBm3TrackerTimings(interaction) {
     legacyMetrics
   };
 }
-function getSSRDoneTimeValue(config) {
-  var _config$ssr, _config$ssr2;
-  return config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime ? config === null || config === void 0 ? void 0 : (_config$ssr2 = config.ssr) === null || _config$ssr2 === void 0 ? void 0 : _config$ssr2.getSSRDoneTime() : ssr.getSSRDoneTime();
-}
 function getPayloadSize(payload) {
   return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
 }
@@ -630,17 +570,25 @@ function getStylesheetMetrics() {
       }
     }, 0);
     return {
-      stylesheets: stylesheetCount,
-      styleElements,
-      styleProps: styleProps.length,
-      styleDeclarations,
-      cssrules: cssrules
+      'ufo:stylesheets': stylesheetCount,
+      'ufo:styleElements': styleElements,
+      'ufo:styleProps': styleProps.length,
+      'ufo:styleDeclarations': styleDeclarations,
+      'ufo:cssrules': cssrules
     };
   } catch (e) {
     return {};
   }
 }
-function createInteractionMetricsPayload(interaction, interactionId) {
+let regularTTAI;
+let expTTAI;
+function getErrorCounts(interaction) {
+  return {
+    'ufo:errors:globalCount': getGlobalErrorCount(),
+    'ufo:errors:count': interaction.errors.length
+  };
+}
+export function createInteractionMetricsPayload(interaction, interactionId, experimental) {
   var _window$location, _config$additionalPay;
   const interactionPayloadStart = performance.now();
   const config = getConfig();
@@ -675,7 +623,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
   } : {};
   // Page Load
   const getPageLoadInteractionMetrics = () => {
-    var _config$ssr3;
+    var _config$ssr;
     if (!isPageLoad) {
       return {};
     }
@@ -687,12 +635,12 @@ function createInteractionMetricsPayload(interaction, interactionId) {
     return {
       ...SSRDoneTime,
       isBM3ConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp,
-      isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr3 = config.ssr) !== null && _config$ssr3 !== void 0 && _config$ssr3.getSSRDoneTime)
+      isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime)
     };
   };
   // Detailed payload. Page visibility = visible
   const getDetailedInteractionMetrics = () => {
-    if (window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
+    if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
       return {};
     }
     const spans = [...interaction.spans, ...atlaskitInteractionSpans];
@@ -707,7 +655,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
       })),
       holdActive: [...interaction.holdActive.values()],
       redirects: optimizeRedirects(interaction.redirects, start),
-      holdInfo: optimizeHoldInfo(interaction.holdInfo, start),
+      holdInfo: optimizeHoldInfo(experimental ? interaction.holdExpInfo : interaction.holdInfo, start),
       spans: optimizeSpans(spans, start),
       requestInfo: optimizeRequestInfo(interaction.requestInfo, start),
       customTimings: optimizeCustomTimings(interaction.customTimings, start),
@@ -717,16 +665,21 @@ function createInteractionMetricsPayload(interaction, interactionId) {
   };
   // Page load & detailed payload
   const getPageLoadDetailedInteractionMetrics = () => {
-    var _config$ssr4;
+    var _config$ssr2;
     if (!isPageLoad || !isDetailedPayload) {
       return {};
     }
     const config = getConfig();
     return {
       initialPageLoadExtraTimings: objectToArray(initialPageLoadExtraTiming.getTimings()),
-      SSRTimings: config !== null && config !== void 0 && (_config$ssr4 = config.ssr) !== null && _config$ssr4 !== void 0 && _config$ssr4.getSSRTimings ? config.ssr.getSSRTimings() : objectToArray(ssr.getSSRTimings())
+      SSRTimings: config !== null && config !== void 0 && (_config$ssr2 = config.ssr) !== null && _config$ssr2 !== void 0 && _config$ssr2.getSSRTimings ? config.ssr.getSSRTimings() : objectToArray(ssr.getSSRTimings())
     };
   };
+  if (experimental) {
+    expTTAI = getTTAI(interaction);
+  } else {
+    regularTTAI = getTTAI(interaction);
+  }
   const newUFOName = sanitizeUfoName(ufoName);
   const payload = {
     actionSubject: 'experience',
@@ -747,7 +700,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           payloadSource: 'platform'
         },
         'event:region': config.region || 'unknown',
-        'experience:key': 'custom.interaction-metrics',
+        'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
         'experience:name': newUFOName,
         // root
         ...getBrowserMetadata(),
@@ -756,10 +709,11 @@ function createInteractionMetricsPayload(interaction, interactionId) {
         ...getPaintMetrics(type),
         ...getNavigationMetrics(type),
         ...getVCMetrics(interaction),
+        ...(experimental ? getExperimentalVCMetrics(interaction) : undefined),
         ...((_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)),
         ...getTracingContextData(interaction),
         ...getStylesheetMetrics(),
-        errorCount: getGlobalErrorCount(),
+        ...getErrorCounts(interaction),
         interactionMetrics: {
           namePrefix: config.namePrefix || '',
           segmentPrefix: config.segmentPrefix || '',
@@ -791,17 +745,22 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           marks: optimizeMarks(interaction.marks),
           customData: optimizeCustomData(interaction),
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start),
-          errorCount: interaction.errors.length,
           ...labelStack,
           ...getPageLoadInteractionMetrics(),
           ...getDetailedInteractionMetrics(),
           ...getPageLoadDetailedInteractionMetrics(),
-          ...getBm3TrackerTimings(interaction)
+          ...getBm3TrackerTimings(interaction),
+          'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
+          'metric:experimental:ttai': experimental ? expTTAI : undefined
         },
         'ufo:payloadTime': roundEpsilon(performance.now() - interactionPayloadStart)
       }
     }
   };
+  if (experimental) {
+    regularTTAI = undefined;
+    expTTAI = undefined;
+  }
   payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
   return payload;
 }

package/dist/es2019/create-post-interaction-log-payload/index.js

@@ -47,10 +47,7 @@ function removeCascadingParentTimingReport(reactProfilerTimings) {
     if (parentSegmentId) {
       const parentTimings = timingIndex.get(parentSegmentId);
       const filteredParentTimings = parentTimings === null || parentTimings === void 0 ? void 0 : parentTimings.filter(parentTiming => {
-        if (parentTiming.startTime === timing.startTime && parentTiming.actualDuration === timing.actualDuration) {
-          return false;
-        }
-        return true;
+        return !(parentTiming.startTime === timing.startTime && parentTiming.actualDuration === timing.actualDuration);
       });
       if (filteredParentTimings) {
         timingIndex.set(parentSegmentId, filteredParentTimings);

package/dist/es2019/interaction-metrics/common/constants.js

@@ -1,2 +1,8 @@
 const interactions = new Map();
+export const CLEANUP_TIMEOUT = 60 * 1000;
+export const CLEANUP_TIMEOUT_AFTER_APDEX = 15 * 1000;
+export const interactionQueue = [];
+export const segmentCache = new Map();
+export const segmentObservers = [];
+export const moduleLoadingRequests = {};
 export default interactions;

package/dist/es2019/interaction-metrics/common/index.js

@@ -0,0 +1,103 @@
+import { getConfig } from '../../config';
+import { interactionQueue, segmentCache, segmentObservers } from './constants';
+export function isPerformanceTracingEnabled() {
+  var _getConfig;
+  return ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableAdditionalPerformanceMarks) || window.__REACT_UFO_ENABLE_PERF_TRACING || process.env.NODE_ENV !== 'production';
+}
+export function labelStackToString(labelStack, name) {
+  var _stack$map;
+  const stack = [...(labelStack !== null && labelStack !== void 0 ? labelStack : [])];
+  if (name) {
+    stack.push({
+      name
+    });
+  }
+  return (_stack$map = stack.map(l => l.name)) === null || _stack$map === void 0 ? void 0 : _stack$map.join('/');
+}
+export function labelStackToIdString(labelStack) {
+  var _labelStack$map;
+  return labelStack === null || labelStack === void 0 ? void 0 : (_labelStack$map = labelStack.map(l => 'segmentId' in l ? `${l.name}:${l.segmentId}` : `${l.name}`)) === null || _labelStack$map === void 0 ? void 0 : _labelStack$map.join('/');
+}
+export function addSegmentObserver(observer) {
+  segmentObservers.push(observer);
+  for (const segmentInfo of segmentCache.values()) {
+    observer.onAdd(segmentInfo);
+  }
+}
+export function removeSegmentObserver(observer) {
+  const index = segmentObservers.findIndex(obs => obs === observer);
+  if (index !== -1) {
+    segmentObservers.splice(index, 1);
+  }
+}
+export function addHoldCriterion(id, labelStack, name, startTime) {
+  var _window$__CRITERION__;
+  if (!((_window$__CRITERION__ = window.__CRITERION__) !== null && _window$__CRITERION__ !== void 0 && _window$__CRITERION__.addUFOHold)) {
+    return;
+  }
+  window.__CRITERION__.addUFOHold(id, labelStackToString(labelStack), name, startTime);
+}
+export function removeHoldCriterion(id) {
+  var _window$__CRITERION__2;
+  if (!((_window$__CRITERION__2 = window.__CRITERION__) !== null && _window$__CRITERION__2 !== void 0 && _window$__CRITERION__2.removeUFOHold)) {
+    return;
+  }
+  window.__CRITERION__.removeUFOHold(id);
+}
+export const pushToQueue = (id, data) => {
+  interactionQueue.push({
+    id,
+    data
+  });
+};
+export function callCleanUpCallbacks(interaction) {
+  interaction.cleanupCallbacks.reverse().forEach(cleanUpCallback => {
+    cleanUpCallback();
+  });
+}
+export function reactProfilerTimingMap(data) {
+  const profilerTimingMap = new Map();
+  data.reactProfilerTimings.forEach(profilerTiming => {
+    const labelStackId = labelStackToIdString(profilerTiming.labelStack);
+    if (labelStackId) {
+      var _profilerTimingMap$ge, _timing$start, _timing$end;
+      const timing = (_profilerTimingMap$ge = profilerTimingMap.get(labelStackId)) !== null && _profilerTimingMap$ge !== void 0 ? _profilerTimingMap$ge : {
+        labelStack: profilerTiming.labelStack
+      };
+      timing.start = profilerTiming.startTime < ((_timing$start = timing.start) !== null && _timing$start !== void 0 ? _timing$start : Number.MAX_SAFE_INTEGER) ? profilerTiming.startTime : timing.start;
+      timing.end = profilerTiming.commitTime > ((_timing$end = timing.end) !== null && _timing$end !== void 0 ? _timing$end : Number.MIN_SAFE_INTEGER) ? profilerTiming.commitTime : timing.end;
+      profilerTimingMap.set(labelStackId, timing);
+    }
+  });
+  try {
+    // for Firefox 102 and older
+    for (const [, {
+      labelStack,
+      start,
+      end
+    }] of profilerTimingMap.entries()) {
+      performance.measure(`🛸 ${labelStackToString(labelStack)} [segment_ttai]`, {
+        start,
+        end
+      });
+    }
+  } catch (e) {
+    // do nothing
+  }
+}
+export function callCancelCallbacks(interaction) {
+  interaction.cancelCallbacks.reverse().forEach(cancelCallback => {
+    cancelCallback();
+  });
+}
+export function isSegmentLabel(obj) {
+  return obj && typeof obj.name === 'string' && typeof obj.segmentId === 'string';
+}
+export function getSegmentCacheKey(labelStack) {
+  return labelStack.map(l => {
+    if (isSegmentLabel(l)) {
+      return `${l.name}_${l.segmentId}`;
+    }
+    return l.name;
+  }).join('|');
+}