@atlaskit/react-ufo 1.0.1 → 2.0.0

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

@@ -0,0 +1,792 @@
+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) {
+  const {
+    ufoName,
+    apdex
+  } = interaction;
+  try {
+    const ufoNameOverrides = getUfoNameOverrides();
+    if (ufoNameOverrides != null) {
+      const 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(l => {
+    if (isSegmentLabel(l)) {
+      return `${l.name}:${l.segmentId}`;
+    }
+    return l.name;
+  }).join('/');
+}
+function labelStackStartWith(labelStack, startWith) {
+  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
+}
+function getEarliestLegacyStopTime(interaction, labelStack) {
+  let earliestLegacyStopTime = null;
+  interaction.apdex.forEach(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, labelStack = [], fallbackValue = interaction.end) {
+  var _getEarliestLegacySto;
+  if (interaction.type === 'press') {
+    return fallbackValue;
+  }
+  return (_getEarliestLegacySto = getEarliestLegacyStopTime(interaction, labelStack)) !== null && _getEarliestLegacySto !== void 0 ? _getEarliestLegacySto : fallbackValue;
+}
+const getPageVisibilityUpToTTI = interaction => {
+  const {
+    start
+  } = 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');
+    if (!results || results.length === 0) {
+      return null;
+    }
+    return results.reduce((acc = null, {
+      name,
+      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;
+  }
+};
+const getMoreAccuratePageVisibilityUpToTTI = interaction => {
+  const old = getPageVisibilityUpToTTI(interaction);
+  const tti = getEarliestLegacyStopTime(interaction, []);
+  if (!tti) {
+    return old;
+  }
+  const buffered = getVisibilityStateFromPerformance(tti);
+  if (!buffered) {
+    return old;
+  }
+  if (buffered !== old) {
+    return 'mixed';
+  }
+  return old;
+};
+const getMoreAccuratePageVisibilityUpToTTAI = interaction => {
+  const old = getPageVisibilityUpToTTAI(interaction);
+  const buffered = getVisibilityStateFromPerformance(interaction.end);
+  if (!buffered) {
+    return old;
+  }
+  if (buffered !== old) {
+    return 'mixed';
+  }
+  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;
+};
+const getBundleEvalTimings = start => bundleEvalTiming.getBundleEvalTimings(start);
+const getSSRSuccess = type => type === 'page_load' ? ssr.getSSRSuccess() : undefined;
+const getSSRFeatureFlags = type => type === 'page_load' ? ssr.getSSRFeatureFlags() : undefined;
+const getPaintMetrics = type => {
+  if (type !== 'page_load') {
+    return {};
+  }
+  const metrics = {};
+  performance.getEntriesByType('paint').forEach(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;
+};
+const getVCMetrics = interaction => {
+  var _config$vc, _config$vc2, _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$vc2 = config.vc) !== null && _config$vc2 !== void 0 && _config$vc2.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 {};
+  }
+  const entries = performance.getEntriesByType('navigation');
+  if (entries.length === 0) {
+    return {};
+  }
+  const navigation = entries[0];
+  const 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
+  };
+};
+const getPPSMetrics = interaction => {
+  var _interaction$apdex2, _interaction$apdex2$;
+  const {
+    start,
+    end
+  } = 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 ttai = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
+  const PPSMetricsAtTTI = tti !== undefined ? getLighthouseMetrics({
+    start,
+    stop: tti
+  }) : null;
+  const PPSMetricsAtTTAI = ttai !== undefined ? getLighthouseMetrics({
+    start,
+    stop: interaction.end
+  }) : null;
+  if (config !== null && config !== void 0 && config.shouldCalculateLighthouseMetricsFromTTAI && PPSMetricsAtTTAI !== null) {
+    return PPSMetricsAtTTAI;
+  }
+  if (PPSMetricsAtTTI !== null) {
+    return {
+      ...PPSMetricsAtTTI,
+      'metrics@ttai': PPSMetricsAtTTAI
+    };
+  }
+  return {};
+};
+function getSSRProperties(type) {
+  return {
+    'ssr:success': getSSRSuccess(type),
+    'ssr:featureFlags': getSSRFeatureFlags(type)
+  };
+}
+const getBrowserMetadata = () => {
+  const data = {};
+  const 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) {
+    const 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;
+};
+const getTracingContextData = interaction => {
+  const {
+    trace,
+    start
+  } = interaction;
+  let 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(ls => ({
+    n: ls.name,
+    ...(ls.segmentId ? {
+      s: ls.segmentId
+    } : {})
+  }));
+}
+function optimizeCustomData(interaction) {
+  const {
+    customData,
+    legacyMetrics
+  } = interaction;
+  const customDataMap = customData.reduce((result, {
+    labelStack,
+    data
+  }) => {
+    var _result$get$data, _result$get;
+    const label = stringifyLabelStackFully(labelStack);
+    const 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) {
+    const legacyMetricsFiltered = legacyMetrics.filter(item => item.type === 'PAGE_LOAD').reduce((result, currentValue) => {
+      for (const [key, value] of Object.entries(currentValue.custom || {})) {
+        var _result$get$data2, _result$get2;
+        const label = stringifyLabelStackFully([]);
+        const 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, {
+            [key]: value
+          })
+        });
+      }
+      return result;
+    }, new Map());
+    return [...customDataMap.values(), ...legacyMetricsFiltered.values()];
+  }
+  return [...customDataMap.values()];
+}
+function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart) {
+  const reactProfilerTimingsMap = reactProfilerTimings.reduce((result, {
+    labelStack,
+    startTime,
+    commitTime,
+    actualDuration,
+    type
+  }) => {
+    if (labelStack && startTime >= interactionStart) {
+      const label = stringifyLabelStackFully(labelStack);
+      const start = Math.round(startTime);
+      const end = Math.round(commitTime);
+      const 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 [...reactProfilerTimingsMap.values()];
+}
+function optimizeRedirects(redirects, interactionStart) {
+  let lastRedirectTime = interactionStart;
+  const updatedRedirects = redirects.sort((a, b) => a.time - b.time).reduce((result, redirect) => {
+    const {
+      fromInteractionName,
+      time
+    } = redirect;
+    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) {
+  const holdInfoMap = holdInfo.reduce((result, hold) => {
+    const {
+      labelStack,
+      name,
+      start,
+      end,
+      ignoreOnSubmit
+    } = hold;
+    if (labelStack && !ignoreOnSubmit && start >= interactionStart) {
+      const label = stringifyLabelStackFully([...labelStack, {
+        name
+      }]);
+      const startTime = Math.round(start);
+      const endTime = Math.round(end);
+      const timing = result.get(label) || {
+        labelStack: optimizeLabelStack([...labelStack, {
+          name
+        }]),
+        startTime,
+        endTime
+      };
+      if (startTime < timing.startTime) {
+        timing.startTime = startTime;
+      }
+      if (endTime > timing.endTime) {
+        timing.endTime = endTime;
+      }
+      result.set(label, timing);
+    }
+    return result;
+  }, new Map());
+  return [...holdInfoMap.values()];
+}
+function optimizeSpans(spans, interactionStart) {
+  const updatedSpans = spans.reduce((result, span) => {
+    const {
+      labelStack,
+      type,
+      name,
+      start,
+      end
+    } = span;
+    if (labelStack && start >= interactionStart) {
+      result.push({
+        labelStack: optimizeLabelStack([...labelStack, {
+          name
+        }]),
+        startTime: Math.round(start),
+        endTime: Math.round(end),
+        type
+      });
+    }
+    return result;
+  }, []);
+  return updatedSpans;
+}
+function optimizeRequestInfo(requestInfo, interactionStart) {
+  const updatedRequestInfo = requestInfo.reduce((result, reqInfo) => {
+    const {
+      labelStack,
+      name,
+      start,
+      end,
+      networkStart,
+      networkComplete
+    } = reqInfo;
+    const startTime = networkStart !== null && networkStart !== void 0 ? networkStart : start;
+    const endTime = networkComplete !== null && networkComplete !== void 0 ? networkComplete : end;
+    if (labelStack && start >= interactionStart && endTime) {
+      result.push({
+        labelStack: optimizeLabelStack([...labelStack, {
+          name
+        }]),
+        startTime: Math.round(startTime),
+        endTime: Math.round(endTime)
+      });
+    }
+    return result;
+  }, []);
+  return updatedRequestInfo;
+}
+function optimizeCustomTimings(customTimings, interactionStart) {
+  const updatedCustomTimings = customTimings.reduce((result, item) => {
+    Object.keys(item.data).forEach(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(({
+    labelStack,
+    time,
+    ...others
+  }) => ({
+    ...others,
+    labelStack: labelStack && optimizeLabelStack(labelStack),
+    time: Math.round(time)
+  }));
+}
+function optimizeApdex(apdex) {
+  return apdex.map(({
+    stopTime,
+    labelStack,
+    ...others
+  }) => ({
+    ...others,
+    stopTime: Math.round(stopTime),
+    ...(labelStack ? {
+      labelStack: optimizeLabelStack(labelStack)
+    } : {})
+  }));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function objectToArray(obj = {}) {
+  return Object.keys(obj).reduce((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;
+  }
+  const submetricsTimings = submetrics.filter(item => {
+    return typeof item.stop === 'number' && !!item.key && typeof item.start === 'number';
+  }).map(item => {
+    let childSubmetrics;
+    const newKey = `include/${item.key}`;
+    if (item.submetrics) {
+      childSubmetrics = getBM3SubmetricsTimings(item.submetrics);
+    }
+    return {
+      [newKey]: {
+        endTime: item.stop - item.start,
+        startTime: item.start
+      },
+      ...(childSubmetrics ? childSubmetrics : {})
+    };
+  });
+  return submetricsTimings;
+}
+function getBm3TrackerTimings(interaction) {
+  const interactionLegacyMetrics = interaction.legacyMetrics;
+  if (!interactionLegacyMetrics) {
+    return {};
+  }
+  const legacyMetrics = interactionLegacyMetrics.map(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(item => !!item.type);
+  return {
+    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 createInteractionMetricsPayload(interaction, interactionId) {
+  var _window$location, _config$additionalPay;
+  const interactionPayloadStart = performance.now();
+  const config = getConfig();
+  if (!config) {
+    throw Error('UFO Configuration not provided');
+  }
+  const {
+    end,
+    start,
+    ufoName,
+    knownSegments,
+    rate,
+    type,
+    abortReason,
+    routeName,
+    featureFlags,
+    previousInteractionName,
+    isPreviousInteractionAborted,
+    abortedByInteractionName
+  } = interaction;
+  const pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
+  const pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
+  const segments = config.killswitchNestedSegments ? [] : knownSegments;
+  const isDetailedPayload = pageVisibilityAtTTAI === 'visible';
+  const isPageLoad = type === 'page_load';
+  const calculatePageVisibilityFromTheStartOfPageLoad = config.enableBetterPageVisibilityApi && isPageLoad;
+  const moreAccuratePageVisibilityAtTTI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTI(interaction) : null;
+  const moreAccuratePageVisibilityAtTTAI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTAI(interaction) : null;
+  const labelStack = interaction.labelStack ? {
+    labelStack: optimizeLabelStack(interaction.labelStack)
+  } : {};
+  // Page Load
+  const getPageLoadInteractionMetrics = () => {
+    var _config$ssr3;
+    if (!isPageLoad) {
+      return {};
+    }
+    const config = getConfig();
+    const SSRDoneTimeValue = getSSRDoneTimeValue(config);
+    const SSRDoneTime = SSRDoneTimeValue !== undefined ? {
+      SSRDoneTime: Math.round(SSRDoneTimeValue)
+    } : {};
+    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)
+    };
+  };
+  // Detailed payload. Page visibility = visible
+  const getDetailedInteractionMetrics = () => {
+    if (window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
+      return {};
+    }
+    const spans = [...interaction.spans, ...atlaskitInteractionSpans];
+    atlaskitInteractionSpans.length = 0;
+    return {
+      errors: interaction.errors.map(({
+        labelStack,
+        ...others
+      }) => ({
+        ...others,
+        labelStack: labelStack && optimizeLabelStack(labelStack)
+      })),
+      holdActive: [...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
+  const getPageLoadDetailedInteractionMetrics = () => {
+    var _config$ssr4;
+    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())
+    };
+  };
+  const newUFOName = sanitizeUfoName(ufoName);
+  return {
+    actionSubject: 'experience',
+    action: 'measured',
+    eventType: 'operational',
+    source: 'measured',
+    tags: ['observability'],
+    attributes: {
+      properties: {
+        // 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,
+        // root
+        ...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: {
+          namePrefix: config.namePrefix || '',
+          segmentPrefix: config.segmentPrefix || '',
+          interactionId,
+          pageVisibilityAtTTI,
+          pageVisibilityAtTTAI,
+          experimental__pageVisibilityAtTTI: moreAccuratePageVisibilityAtTTI,
+          experimental__pageVisibilityAtTTAI: moreAccuratePageVisibilityAtTTAI,
+          // raw interaction metrics
+          rate,
+          routeName,
+          type,
+          abortReason,
+          featureFlags,
+          previousInteractionName,
+          isPreviousInteractionAborted,
+          abortedByInteractionName,
+          // performance
+          apdex: optimizeApdex(interaction.apdex),
+          end: Math.round(end),
+          start: Math.round(start),
+          segments: segments.map(({
+            labelStack,
+            ...others
+          }) => ({
+            ...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) {
+  const ufoNameOverride = getUfoNameOverride(interaction);
+  const modifiedInteraction = {
+    ...interaction,
+    ufoName: ufoNameOverride
+  };
+  const interactionMetricsPayload = createInteractionMetricsPayload(modifiedInteraction, interactionId);
+  return [interactionMetricsPayload];
+}