@atlaskit/react-ufo 1.1.0 → 2.0.0

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

@@ -0,0 +1,774 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["labelStack", "time"],
+  _excluded2 = ["stopTime", "labelStack"],
+  _excluded3 = ["labelStack"],
+  _excluded4 = ["labelStack"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import Bowser from 'bowser-ultralight';
+import { getLighthouseMetrics } from '../additional-payload';
+import * as bundleEvalTiming from '../bundle-eval-timing';
+import { REACT_UFO_VERSION } from '../common/constants';
+import { getConfig, getUfoNameOverrides } from '../config';
+import { getBm3Timings } from '../custom-timings';
+import { getPageVisibilityState } from '../hidden-timing';
+import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
+import { interactionSpans as atlaskitInteractionSpans, postInteractionLog } from '../interaction-metrics';
+import * as resourceTiming from '../resource-timing';
+import { roundEpsilon } from '../round-number';
+import * as ssr from '../ssr';
+import { getVCObserver } from '../vc';
+import { isSegmentLabel, sanitizeUfoName } from './common/utils';
+function getUfoNameOverride(interaction) {
+  var ufoName = interaction.ufoName,
+    apdex = interaction.apdex;
+  try {
+    var ufoNameOverrides = getUfoNameOverrides();
+    if (ufoNameOverrides != null) {
+      var metricKey = apdex.length > 0 ? apdex[0].key : '';
+      if (ufoNameOverrides[ufoName][metricKey]) {
+        return ufoNameOverrides[ufoName][metricKey];
+      }
+    }
+    return ufoName;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (e) {
+    return ufoName;
+  }
+}
+function stringifyLabelStackFully(labelStack) {
+  return labelStack.map(function (l) {
+    if (isSegmentLabel(l)) {
+      return "".concat(l.name, ":").concat(l.segmentId);
+    }
+    return l.name;
+  }).join('/');
+}
+function labelStackStartWith(labelStack, startWith) {
+  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
+}
+function getEarliestLegacyStopTime(interaction, labelStack) {
+  var earliestLegacyStopTime = null;
+  interaction.apdex.forEach(function (a) {
+    var _a$labelStack, _earliestLegacyStopTi;
+    if (!(a !== null && a !== void 0 && a.stopTime)) {
+      return;
+    }
+    if (!labelStackStartWith((_a$labelStack = a.labelStack) !== null && _a$labelStack !== void 0 ? _a$labelStack : [], labelStack)) {
+      return;
+    }
+    if (a.stopTime > interaction.start && ((_earliestLegacyStopTi = earliestLegacyStopTime) !== null && _earliestLegacyStopTi !== void 0 ? _earliestLegacyStopTi : a.stopTime) >= a.stopTime) {
+      earliestLegacyStopTime = a.stopTime;
+    }
+  });
+  return earliestLegacyStopTime;
+}
+function getBm3EndTimeOrFallbackValue(interaction) {
+  var _getEarliestLegacySto;
+  var labelStack = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var fallbackValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : interaction.end;
+  if (interaction.type === 'press') {
+    return fallbackValue;
+  }
+  return (_getEarliestLegacySto = getEarliestLegacyStopTime(interaction, labelStack)) !== null && _getEarliestLegacySto !== void 0 ? _getEarliestLegacySto : fallbackValue;
+}
+var getPageVisibilityUpToTTI = function getPageVisibilityUpToTTI(interaction) {
+  var start = interaction.start;
+  var bm3EndTimeOrInteractionEndTime = getBm3EndTimeOrFallbackValue(interaction);
+  return getPageVisibilityState(start, bm3EndTimeOrInteractionEndTime);
+};
+var getPageVisibilityUpToTTAI = function getPageVisibilityUpToTTAI(interaction) {
+  var start = interaction.start,
+    end = interaction.end;
+  return getPageVisibilityState(start, end);
+};
+var getVisibilityStateFromPerformance = function getVisibilityStateFromPerformance(stop) {
+  try {
+    var results = performance.getEntriesByType('visibility-state');
+    if (!results || results.length === 0) {
+      return null;
+    }
+    return results.reduce(function () {
+      var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var _ref = arguments.length > 1 ? arguments[1] : undefined,
+        name = _ref.name,
+        startTime = _ref.startTime;
+      if (startTime > stop) {
+        return acc;
+      }
+      if (acc === null && name === null) {
+        return null;
+      }
+      if (acc === null) {
+        return name;
+      }
+      if (acc !== name) {
+        return 'mixed';
+      }
+      return acc;
+    }, null);
+  } catch (e) {
+    return null;
+  }
+};
+var getMoreAccuratePageVisibilityUpToTTI = function getMoreAccuratePageVisibilityUpToTTI(interaction) {
+  var old = getPageVisibilityUpToTTI(interaction);
+  var tti = getEarliestLegacyStopTime(interaction, []);
+  if (!tti) {
+    return old;
+  }
+  var buffered = getVisibilityStateFromPerformance(tti);
+  if (!buffered) {
+    return old;
+  }
+  if (buffered !== old) {
+    return 'mixed';
+  }
+  return old;
+};
+var getMoreAccuratePageVisibilityUpToTTAI = function getMoreAccuratePageVisibilityUpToTTAI(interaction) {
+  var old = getPageVisibilityUpToTTAI(interaction);
+  var buffered = getVisibilityStateFromPerformance(interaction.end);
+  if (!buffered) {
+    return old;
+  }
+  if (buffered !== old) {
+    return 'mixed';
+  }
+  return old;
+};
+var getInteractionStatus = function getInteractionStatus(interaction) {
+  var originalInteractionStatus = interaction.abortReason ? 'ABORTED' : 'SUCCEEDED';
+  var hasBm3TTI = interaction.apdex.length > 0;
+  var overrideStatus = hasBm3TTI ? 'SUCCEEDED' : originalInteractionStatus;
+  return {
+    originalInteractionStatus: originalInteractionStatus,
+    overrideStatus: overrideStatus
+  };
+};
+var getResourceTimings = function getResourceTimings(start, end) {
+  var _resourceTiming$getRe;
+  return (_resourceTiming$getRe = resourceTiming.getResourceTimings(start, end)) !== null && _resourceTiming$getRe !== void 0 ? _resourceTiming$getRe : undefined;
+};
+var getBundleEvalTimings = function getBundleEvalTimings(start) {
+  return bundleEvalTiming.getBundleEvalTimings(start);
+};
+var getSSRSuccess = function getSSRSuccess(type) {
+  return type === 'page_load' ? ssr.getSSRSuccess() : undefined;
+};
+var getSSRFeatureFlags = function getSSRFeatureFlags(type) {
+  return type === 'page_load' ? ssr.getSSRFeatureFlags() : undefined;
+};
+var getPaintMetrics = function getPaintMetrics(type) {
+  if (type !== 'page_load') {
+    return {};
+  }
+  var metrics = {};
+  performance.getEntriesByType('paint').forEach(function (entry) {
+    if (entry.name === 'first-paint') {
+      metrics['metric:fp'] = Math.round(entry.startTime);
+    }
+    if (entry.name === 'first-contentful-paint') {
+      metrics['metric:fcp'] = Math.round(entry.startTime);
+    }
+  });
+  return metrics;
+};
+var getVCMetrics = function getVCMetrics(interaction) {
+  var _config$vc, _config$vc2, _interaction$apdex;
+  var 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 {};
+  }
+  var ssr = interaction.type === 'page_load' && config !== null && config !== void 0 && (_config$vc2 = config.vc) !== null && _config$vc2 !== void 0 && _config$vc2.ssr ? {
+    ssr: getSSRDoneTimeValue(config)
+  } : null;
+  postInteractionLog.setVCObserverSSRConfig(ssr);
+  var tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime;
+  var prefix = 'ufo';
+  var result = getVCObserver().getVCResult(_objectSpread({
+    start: interaction.start,
+    stop: interaction.end,
+    tti: tti,
+    prefix: prefix,
+    vc: interaction.vc
+  }, ssr));
+  postInteractionLog.setLastInteractionFinishVCResult(result);
+  var VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
+  if (!VC || !(result !== null && result !== void 0 && result["".concat(prefix, ":vc:clean")])) {
+    return result;
+  }
+  var interactionStatus = getInteractionStatus(interaction);
+  var pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
+  if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
+    return result;
+  }
+  return _objectSpread(_objectSpread({}, result), {}, {
+    'metric:vc90': VC['90']
+  });
+};
+var getNavigationMetrics = function getNavigationMetrics(type) {
+  if (type !== 'page_load') {
+    return {};
+  }
+  var entries = performance.getEntriesByType('navigation');
+  if (entries.length === 0) {
+    return {};
+  }
+  var navigation = entries[0];
+  var metrics = {
+    // From https://www.w3.org/TR/resource-timing/
+    redirectStart: Math.round(navigation.redirectStart),
+    redirectEnd: Math.round(navigation.redirectEnd),
+    fetchStart: Math.round(navigation.fetchStart),
+    domainLookupStart: Math.round(navigation.domainLookupStart),
+    domainLookupEnd: Math.round(navigation.domainLookupEnd),
+    connectStart: Math.round(navigation.connectStart),
+    connectEnd: Math.round(navigation.connectEnd),
+    secureConnectionStart: Math.round(navigation.secureConnectionStart),
+    requestStart: Math.round(navigation.requestStart),
+    responseStart: Math.round(navigation.responseStart),
+    responseEnd: Math.round(navigation.responseEnd),
+    encodedBodySize: Math.round(navigation.encodedBodySize),
+    decodedBodySize: Math.round(navigation.decodedBodySize),
+    transferSize: Math.round(navigation.transferSize),
+    // From https://www.w3.org/TR/navigation-timing-2/
+    redirectCount: navigation.redirectCount,
+    type: navigation.type,
+    unloadEventEnd: Math.round(navigation.unloadEventEnd),
+    unloadEventStart: Math.round(navigation.unloadEventStart),
+    workerStart: Math.round(navigation.workerStart),
+    nextHopProtocol: navigation.nextHopProtocol
+
+    // The following properties are ignored because they provided limited value on a modern stack (e.g. the content
+    // is usually rendered and interactive before the dom is fully parsed, dont't play well with streamed content...)
+    //   * domComplete
+    //   * domContentLoadedEventEnd
+    //   * domContentLoadedEventStart
+    //   * domInteractive
+    //   * loadEventEnd
+    //   * loadEventStart
+  };
+  return {
+    'metrics:navigation': metrics
+  };
+};
+var getPPSMetrics = function getPPSMetrics(interaction) {
+  var _interaction$apdex2;
+  var start = interaction.start,
+    end = interaction.end;
+  var config = getConfig();
+  var interactionStatus = getInteractionStatus(interaction);
+  var pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
+  var tti = (_interaction$apdex2 = interaction.apdex) === null || _interaction$apdex2 === void 0 || (_interaction$apdex2 = _interaction$apdex2[0]) === null || _interaction$apdex2 === void 0 ? void 0 : _interaction$apdex2.stopTime;
+  var ttai = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
+  var PPSMetricsAtTTI = tti !== undefined ? getLighthouseMetrics({
+    start: start,
+    stop: tti
+  }) : null;
+  var PPSMetricsAtTTAI = ttai !== undefined ? getLighthouseMetrics({
+    start: start,
+    stop: interaction.end
+  }) : null;
+  if (config !== null && config !== void 0 && config.shouldCalculateLighthouseMetricsFromTTAI && PPSMetricsAtTTAI !== null) {
+    return PPSMetricsAtTTAI;
+  }
+  if (PPSMetricsAtTTI !== null) {
+    return _objectSpread(_objectSpread({}, PPSMetricsAtTTI), {}, {
+      'metrics@ttai': PPSMetricsAtTTAI
+    });
+  }
+  return {};
+};
+function getSSRProperties(type) {
+  return {
+    'ssr:success': getSSRSuccess(type),
+    'ssr:featureFlags': getSSRFeatureFlags(type)
+  };
+}
+var getBrowserMetadata = function getBrowserMetadata() {
+  var data = {};
+  var now = new Date();
+  data['event:localHour'] = now.getHours(); // returns the hours for this date according to local time
+  data['event:localDayOfWeek'] = now.getDay(); // Sunday - Saturday : 0 - 6
+  data['event:localTimezoneOffset'] = now.getTimezoneOffset(); // A number representing the difference, in minutes, between the date as evaluated in the UTC time zone and as evaluated in the local time zone.
+
+  if (navigator.userAgent != null) {
+    var browser = Bowser.getParser(navigator.userAgent);
+    data['event:browser:name'] = browser.getBrowserName();
+    data['event:browser:version'] = browser.getBrowserVersion();
+  }
+  if (navigator.hardwareConcurrency != null) {
+    data['event:cpus'] = navigator.hardwareConcurrency;
+  }
+  if (navigator.deviceMemory != null) {
+    data['event:memory'] = navigator.deviceMemory;
+  }
+
+  // eslint-disable-next-line compat/compat
+  if (navigator.connection != null) {
+    data['event:network:effectiveType'] = navigator.connection.effectiveType;
+    data['event:network:rtt'] = navigator.connection.rtt;
+    data['event:network:downlink'] = navigator.connection.downlink;
+  }
+  return data;
+};
+var getTracingContextData = function getTracingContextData(interaction) {
+  var trace = interaction.trace,
+    start = interaction.start;
+  var tracingContextData = {};
+  if (trace) {
+    tracingContextData = {
+      'ufo:tracingContext': {
+        'X-B3-TraceId': trace.traceId,
+        'X-B3-SpanId': trace.spanId,
+        // eslint-disable-next-line compat/compat
+        browserTimeOrigin: +(performance.timeOrigin + start).toFixed(2)
+      }
+    };
+  }
+  return tracingContextData;
+};
+
+// interaction metric
+
+function optimizeLabelStack(labelStack) {
+  return labelStack.map(function (ls) {
+    return _objectSpread({
+      n: ls.name
+    }, ls.segmentId ? {
+      s: ls.segmentId
+    } : {});
+  });
+}
+function optimizeCustomData(interaction) {
+  var customData = interaction.customData,
+    legacyMetrics = interaction.legacyMetrics;
+  var customDataMap = customData.reduce(function (result, _ref2) {
+    var _result$get$data, _result$get;
+    var labelStack = _ref2.labelStack,
+      data = _ref2.data;
+    var label = stringifyLabelStackFully(labelStack);
+    var value = (_result$get$data = (_result$get = result.get(label)) === null || _result$get === void 0 ? void 0 : _result$get.data) !== null && _result$get$data !== void 0 ? _result$get$data : {};
+    result.set(label, {
+      labelStack: optimizeLabelStack(labelStack),
+      data: Object.assign(value, data)
+    });
+    return result;
+  }, new Map());
+  if (legacyMetrics) {
+    var legacyMetricsFiltered = legacyMetrics.filter(function (item) {
+      return item.type === 'PAGE_LOAD';
+    }).reduce(function (result, currentValue) {
+      for (var _i = 0, _Object$entries = Object.entries(currentValue.custom || {}); _i < _Object$entries.length; _i++) {
+        var _result$get$data2, _result$get2;
+        var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+          _key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+        var label = stringifyLabelStackFully([]);
+        var labelValue = (_result$get$data2 = (_result$get2 = result.get(label)) === null || _result$get2 === void 0 ? void 0 : _result$get2.data) !== null && _result$get$data2 !== void 0 ? _result$get$data2 : {};
+        result.set(label, {
+          labelStack: optimizeLabelStack([]),
+          data: Object.assign(labelValue, _defineProperty({}, _key, value))
+        });
+      }
+      return result;
+    }, new Map());
+    return [].concat(_toConsumableArray(customDataMap.values()), _toConsumableArray(legacyMetricsFiltered.values()));
+  }
+  return _toConsumableArray(customDataMap.values());
+}
+function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart) {
+  var reactProfilerTimingsMap = reactProfilerTimings.reduce(function (result, _ref3) {
+    var labelStack = _ref3.labelStack,
+      startTime = _ref3.startTime,
+      commitTime = _ref3.commitTime,
+      actualDuration = _ref3.actualDuration,
+      type = _ref3.type;
+    if (labelStack && startTime >= interactionStart) {
+      var label = stringifyLabelStackFully(labelStack);
+      var start = Math.round(startTime);
+      var end = Math.round(commitTime);
+      var timing = result.get(label) || {
+        labelStack: optimizeLabelStack(labelStack),
+        startTime: start,
+        endTime: end,
+        mountCount: 0,
+        rerenderCount: 0,
+        renderDuration: 0
+      };
+      if (start < timing.startTime) {
+        timing.startTime = start;
+      }
+      if (end > timing.endTime) {
+        timing.endTime = end;
+      }
+      if (type === 'mount') {
+        timing.mountCount += 1;
+      }
+      if (type === 'update') {
+        timing.rerenderCount += 1;
+      }
+      timing.renderDuration += Math.round(actualDuration);
+      result.set(label, timing);
+    }
+    return result;
+  }, new Map());
+  return _toConsumableArray(reactProfilerTimingsMap.values());
+}
+function optimizeRedirects(redirects, interactionStart) {
+  var lastRedirectTime = interactionStart;
+  var updatedRedirects = redirects.sort(function (a, b) {
+    return a.time - b.time;
+  }).reduce(function (result, redirect) {
+    var fromInteractionName = redirect.fromInteractionName,
+      time = redirect.time;
+    if (lastRedirectTime >= interactionStart) {
+      result.push({
+        labelStack: [{
+          n: fromInteractionName
+        }],
+        startTime: Math.round(lastRedirectTime),
+        endTime: Math.round(time)
+      });
+    }
+    lastRedirectTime = time;
+    return result;
+  }, []);
+  return updatedRedirects;
+}
+function optimizeHoldInfo(holdInfo, interactionStart) {
+  var holdInfoMap = holdInfo.reduce(function (result, hold) {
+    var labelStack = hold.labelStack,
+      name = hold.name,
+      start = hold.start,
+      end = hold.end,
+      ignoreOnSubmit = hold.ignoreOnSubmit;
+    if (labelStack && !ignoreOnSubmit && start >= interactionStart) {
+      var label = stringifyLabelStackFully([].concat(_toConsumableArray(labelStack), [{
+        name: name
+      }]));
+      var startTime = Math.round(start);
+      var endTime = Math.round(end);
+      var timing = result.get(label) || {
+        labelStack: optimizeLabelStack([].concat(_toConsumableArray(labelStack), [{
+          name: name
+        }])),
+        startTime: startTime,
+        endTime: endTime
+      };
+      if (startTime < timing.startTime) {
+        timing.startTime = startTime;
+      }
+      if (endTime > timing.endTime) {
+        timing.endTime = endTime;
+      }
+      result.set(label, timing);
+    }
+    return result;
+  }, new Map());
+  return _toConsumableArray(holdInfoMap.values());
+}
+function optimizeSpans(spans, interactionStart) {
+  var updatedSpans = spans.reduce(function (result, span) {
+    var labelStack = span.labelStack,
+      type = span.type,
+      name = span.name,
+      start = span.start,
+      end = span.end;
+    if (labelStack && start >= interactionStart) {
+      result.push({
+        labelStack: optimizeLabelStack([].concat(_toConsumableArray(labelStack), [{
+          name: name
+        }])),
+        startTime: Math.round(start),
+        endTime: Math.round(end),
+        type: type
+      });
+    }
+    return result;
+  }, []);
+  return updatedSpans;
+}
+function optimizeRequestInfo(requestInfo, interactionStart) {
+  var updatedRequestInfo = requestInfo.reduce(function (result, reqInfo) {
+    var labelStack = reqInfo.labelStack,
+      name = reqInfo.name,
+      start = reqInfo.start,
+      end = reqInfo.end,
+      networkStart = reqInfo.networkStart,
+      networkComplete = reqInfo.networkComplete;
+    var startTime = networkStart !== null && networkStart !== void 0 ? networkStart : start;
+    var endTime = networkComplete !== null && networkComplete !== void 0 ? networkComplete : end;
+    if (labelStack && start >= interactionStart && endTime) {
+      result.push({
+        labelStack: optimizeLabelStack([].concat(_toConsumableArray(labelStack), [{
+          name: name
+        }])),
+        startTime: Math.round(startTime),
+        endTime: Math.round(endTime)
+      });
+    }
+    return result;
+  }, []);
+  return updatedRequestInfo;
+}
+function optimizeCustomTimings(customTimings, interactionStart) {
+  var updatedCustomTimings = customTimings.reduce(function (result, item) {
+    Object.keys(item.data).forEach(function (key) {
+      if (item.data[key].startTime >= interactionStart) {
+        result.push({
+          labelStack: [{
+            n: key
+          }],
+          startTime: Math.round(item.data[key].startTime),
+          endTime: Math.round(item.data[key].endTime)
+        });
+      }
+    });
+    return result;
+  }, []);
+  return updatedCustomTimings;
+}
+function optimizeMarks(marks) {
+  return marks.map(function (_ref4) {
+    var labelStack = _ref4.labelStack,
+      time = _ref4.time,
+      others = _objectWithoutProperties(_ref4, _excluded);
+    return _objectSpread(_objectSpread({}, others), {}, {
+      labelStack: labelStack && optimizeLabelStack(labelStack),
+      time: Math.round(time)
+    });
+  });
+}
+function optimizeApdex(apdex) {
+  return apdex.map(function (_ref5) {
+    var stopTime = _ref5.stopTime,
+      labelStack = _ref5.labelStack,
+      others = _objectWithoutProperties(_ref5, _excluded2);
+    return _objectSpread(_objectSpread({}, others), {}, {
+      stopTime: Math.round(stopTime)
+    }, labelStack ? {
+      labelStack: optimizeLabelStack(labelStack)
+    } : {});
+  });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function objectToArray() {
+  var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return Object.keys(obj).reduce(function (result, key) {
+    result.push({
+      label: key,
+      data: obj[key]
+    });
+    return result;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  []);
+}
+function getBM3SubmetricsTimings(submetrics) {
+  if (!submetrics) {
+    return null;
+  }
+  var submetricsTimings = submetrics.filter(function (item) {
+    return typeof item.stop === 'number' && !!item.key && typeof item.start === 'number';
+  }).map(function (item) {
+    var childSubmetrics;
+    var newKey = "include/".concat(item.key);
+    if (item.submetrics) {
+      childSubmetrics = getBM3SubmetricsTimings(item.submetrics);
+    }
+    return _objectSpread(_defineProperty({}, newKey, {
+      endTime: item.stop - item.start,
+      startTime: item.start
+    }), childSubmetrics ? childSubmetrics : {});
+  });
+  return submetricsTimings;
+}
+function getBm3TrackerTimings(interaction) {
+  var interactionLegacyMetrics = interaction.legacyMetrics;
+  if (!interactionLegacyMetrics) {
+    return {};
+  }
+  var legacyMetrics = interactionLegacyMetrics.map(function (item) {
+    var _item$config, _item$config2, _item$marks;
+    return {
+      key: item.key,
+      startTime: item.start,
+      stopTime: item.stop,
+      type: (_item$config = item.config) === null || _item$config === void 0 ? void 0 : _item$config.type,
+      reactUFOName: (_item$config2 = item.config) === null || _item$config2 === void 0 ? void 0 : _item$config2.reactUFOName,
+      fmp: ((_item$marks = item.marks) === null || _item$marks === void 0 ? void 0 : _item$marks['fmp']) || item.stop,
+      source: 'bm3',
+      timings: getBm3Timings(item.marks, item.config.timings),
+      submetrics: getBM3SubmetricsTimings(item.submetrics),
+      pageVisibleState: item.pageVisibleState
+    };
+  }).filter(function (item) {
+    return !!item.type;
+  });
+  return {
+    legacyMetrics: 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 || (_config$ssr2 = config.ssr) === null || _config$ssr2 === void 0 ? void 0 : _config$ssr2.getSSRDoneTime() : ssr.getSSRDoneTime();
+}
+function createInteractionMetricsPayload(interaction, interactionId) {
+  var _window$location, _config$additionalPay;
+  var interactionPayloadStart = performance.now();
+  var config = getConfig();
+  if (!config) {
+    throw Error('UFO Configuration not provided');
+  }
+  var end = interaction.end,
+    start = interaction.start,
+    ufoName = interaction.ufoName,
+    knownSegments = interaction.knownSegments,
+    rate = interaction.rate,
+    type = interaction.type,
+    abortReason = interaction.abortReason,
+    routeName = interaction.routeName,
+    featureFlags = interaction.featureFlags,
+    previousInteractionName = interaction.previousInteractionName,
+    isPreviousInteractionAborted = interaction.isPreviousInteractionAborted,
+    abortedByInteractionName = interaction.abortedByInteractionName;
+  var pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
+  var pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
+  var segments = config.killswitchNestedSegments ? [] : knownSegments;
+  var isDetailedPayload = pageVisibilityAtTTAI === 'visible';
+  var isPageLoad = type === 'page_load';
+  var calculatePageVisibilityFromTheStartOfPageLoad = config.enableBetterPageVisibilityApi && isPageLoad;
+  var moreAccuratePageVisibilityAtTTI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTI(interaction) : null;
+  var moreAccuratePageVisibilityAtTTAI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTAI(interaction) : null;
+  var labelStack = interaction.labelStack ? {
+    labelStack: optimizeLabelStack(interaction.labelStack)
+  } : {};
+  // Page Load
+  var getPageLoadInteractionMetrics = function getPageLoadInteractionMetrics() {
+    var _config$ssr3;
+    if (!isPageLoad) {
+      return {};
+    }
+    var config = getConfig();
+    var SSRDoneTimeValue = getSSRDoneTimeValue(config);
+    var SSRDoneTime = SSRDoneTimeValue !== undefined ? {
+      SSRDoneTime: Math.round(SSRDoneTimeValue)
+    } : {};
+    return _objectSpread(_objectSpread({}, 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)
+    });
+  };
+  // Detailed payload. Page visibility = visible
+  var getDetailedInteractionMetrics = function getDetailedInteractionMetrics() {
+    if (window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
+      return {};
+    }
+    var spans = [].concat(_toConsumableArray(interaction.spans), _toConsumableArray(atlaskitInteractionSpans));
+    atlaskitInteractionSpans.length = 0;
+    return {
+      errors: interaction.errors.map(function (_ref6) {
+        var labelStack = _ref6.labelStack,
+          others = _objectWithoutProperties(_ref6, _excluded3);
+        return _objectSpread(_objectSpread({}, others), {}, {
+          labelStack: labelStack && optimizeLabelStack(labelStack)
+        });
+      }),
+      holdActive: _toConsumableArray(interaction.holdActive.values()),
+      redirects: optimizeRedirects(interaction.redirects, start),
+      holdInfo: optimizeHoldInfo(interaction.holdInfo, start),
+      spans: optimizeSpans(spans, start),
+      requestInfo: optimizeRequestInfo(interaction.requestInfo, start),
+      customTimings: optimizeCustomTimings(interaction.customTimings, start),
+      bundleEvalTimings: objectToArray(getBundleEvalTimings(start)),
+      resourceTimings: objectToArray(getResourceTimings(start, end))
+    };
+  };
+  // Page load & detailed payload
+  var getPageLoadDetailedInteractionMetrics = function getPageLoadDetailedInteractionMetrics() {
+    var _config$ssr4;
+    if (!isPageLoad || !isDetailedPayload) {
+      return {};
+    }
+    var 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())
+    };
+  };
+  var newUFOName = sanitizeUfoName(ufoName);
+  return {
+    actionSubject: 'experience',
+    action: 'measured',
+    eventType: 'operational',
+    source: 'measured',
+    tags: ['observability'],
+    attributes: {
+      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        // basic
+        'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
+        'event:product': config.product,
+        'event:schema': '1.0.0',
+        'event:source': {
+          name: 'react-ufo/web',
+          version: REACT_UFO_VERSION,
+          payloadSource: 'platform'
+        },
+        'event:region': config.region || 'unknown',
+        'experience:key': 'custom.interaction-metrics',
+        'experience:name': newUFOName
+      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), {}, {
+        interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          namePrefix: config.namePrefix || '',
+          segmentPrefix: config.segmentPrefix || '',
+          interactionId: interactionId,
+          pageVisibilityAtTTI: pageVisibilityAtTTI,
+          pageVisibilityAtTTAI: pageVisibilityAtTTAI,
+          experimental__pageVisibilityAtTTI: moreAccuratePageVisibilityAtTTI,
+          experimental__pageVisibilityAtTTAI: moreAccuratePageVisibilityAtTTAI,
+          // raw interaction metrics
+          rate: rate,
+          routeName: routeName,
+          type: type,
+          abortReason: abortReason,
+          featureFlags: featureFlags,
+          previousInteractionName: previousInteractionName,
+          isPreviousInteractionAborted: isPreviousInteractionAborted,
+          abortedByInteractionName: abortedByInteractionName,
+          // performance
+          apdex: optimizeApdex(interaction.apdex),
+          end: Math.round(end),
+          start: Math.round(start),
+          segments: segments.map(function (_ref7) {
+            var labelStack = _ref7.labelStack,
+              others = _objectWithoutProperties(_ref7, _excluded4);
+            return _objectSpread(_objectSpread({}, others), {}, {
+              labelStack: optimizeLabelStack(labelStack)
+            });
+          }),
+          marks: optimizeMarks(interaction.marks),
+          customData: optimizeCustomData(interaction),
+          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start)
+        }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics()), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)),
+        'ufo:payloadTime': roundEpsilon(performance.now() - interactionPayloadStart)
+      })
+    }
+  };
+}
+export function createPayloads(interactionId, interaction) {
+  var ufoNameOverride = getUfoNameOverride(interaction);
+  var modifiedInteraction = _objectSpread(_objectSpread({}, interaction), {}, {
+    ufoName: ufoNameOverride
+  });
+  var interactionMetricsPayload = createInteractionMetricsPayload(modifiedInteraction, interactionId);
+  return [interactionMetricsPayload];
+}