@atlaskit/react-ufo 3.14.3 → 3.14.4

package/dist/es2019/create-payload/utils/get-navigation-metrics.js

@@ -0,0 +1,59 @@
+export default function getNavigationMetrics(type) {
+  if (type !== 'page_load') {
+    return null;
+  }
+  try {
+    const entries = performance.getEntriesByType('navigation');
+    if (entries.length === 0) {
+      return null;
+    }
+    const navigation = entries[0];
+    return {
+      // 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, don't play well with streamed content...)
+      //   * domComplete
+      //   * domContentLoadedEventEnd
+      //   * domContentLoadedEventStart
+      //   * domInteractive
+      //   * loadEventEnd
+      //   * loadEventStart
+    };
+  } catch (error) {
+    // Return null if there's any error accessing navigation timing
+    return null;
+  }
+}
+
+// Helper function to get navigation metrics in legacy format for backward compatibility
+export function getNavigationMetricsToLegacyFormat(type) {
+  const navigationMetrics = getNavigationMetrics(type);
+  if (!navigationMetrics) {
+    return {};
+  }
+  return {
+    'metrics:navigation': navigationMetrics
+  };
+}

package/dist/es2019/create-payload/utils/get-paint-metrics.js

@@ -0,0 +1,78 @@
+// Type definitions for paint metrics
+
+// Main function returns compact nested format
+export default async function getPaintMetrics(type, end) {
+  if (type !== 'page_load') {
+    return {};
+  }
+  const paint = {};
+  const paintEntries = performance.getEntriesByType('paint');
+  paintEntries.forEach(entry => {
+    if (entry.name === 'first-paint') {
+      paint.fp = Math.round(entry.startTime);
+    }
+    if (entry.name === 'first-contentful-paint') {
+      paint.fcp = Math.round(entry.startTime);
+    }
+  });
+
+  // Get LCP using PerformanceObserver
+  const lcp = await new Promise(resolve => {
+    // Check if we already have LCP entries
+    const existingEntries = performance.getEntriesByType('largest-contentful-paint');
+    const lastEntry = existingEntries.reduce((agg, entry) => {
+      if (entry.startTime <= end && (agg === null || agg.startTime < entry.startTime)) {
+        return entry;
+      }
+      return agg;
+    }, null);
+    if (lastEntry) {
+      resolve(lastEntry.startTime);
+      return;
+    }
+    const observer = new PerformanceObserver(list => {
+      const entries = Array.from(list.getEntries());
+      const lastEntry = entries.reduce((agg, entry) => {
+        if (entry.startTime <= end && (agg === null || agg.startTime < entry.startTime)) {
+          return entry;
+        }
+        return agg;
+      }, null);
+      clearTimeout(timeoutId);
+      observer.disconnect();
+      if (lastEntry) {
+        resolve(lastEntry.startTime);
+      } else {
+        resolve(null);
+      }
+    });
+    observer.observe({
+      type: 'largest-contentful-paint',
+      buffered: true
+    });
+    const timeoutId = setTimeout(() => {
+      observer.disconnect();
+      resolve(null);
+    }, 200);
+  });
+  if (lcp) {
+    paint.lcp = Math.round(lcp);
+  }
+  return paint;
+}
+
+// Helper function to get paint metrics in legacy colon format for backward compatibility
+export async function getPaintMetricsToLegacyFormat(type, end) {
+  const paint = await getPaintMetrics(type, end);
+  const legacyFormat = {};
+  if (paint.fp !== undefined) {
+    legacyFormat['metric:fp'] = paint.fp;
+  }
+  if (paint.fcp !== undefined) {
+    legacyFormat['metric:fcp'] = paint.fcp;
+  }
+  if (paint.lcp !== undefined) {
+    legacyFormat['metric:lcp'] = paint.lcp;
+  }
+  return legacyFormat;
+}

package/dist/es2019/create-payload/utils/get-payload-size.js

@@ -0,0 +1,11 @@
+// Reusable TextEncoder instance to avoid creating new instances
+const textEncoder = new TextEncoder();
+export default function getPayloadSize(payload) {
+  // Early return for null/undefined to avoid unnecessary processing
+  if (!payload) {
+    return 0;
+  }
+
+  // Use the reusable encoder instance
+  return Math.round(textEncoder.encode(JSON.stringify(payload)).length / 1024);
+}

package/dist/es2019/create-payload/utils/get-react-ufo-payload-version.js

@@ -1,3 +1,4 @@
+export const LATEST_REACT_UFO_PAYLOAD_VERSION = '2.0.0';
 export function getReactUFOPayloadVersion(interactionType, isPostInteractionLog) {
   if (isPostInteractionLog) {
     return '1.0.1';
@@ -5,5 +6,5 @@ export function getReactUFOPayloadVersion(interactionType, isPostInteractionLog)
   if (interactionType !== 'page_load' && interactionType !== 'transition') {
     return '1.0.1';
   }
-  return '2.0.0';
+  return LATEST_REACT_UFO_PAYLOAD_VERSION;
 }

package/dist/es2019/create-payload/utils/get-ssr-success.js

@@ -0,0 +1,7 @@
+import * as ssr from '../../ssr';
+export default function getSSRSuccess(type) {
+  if (type !== 'page_load') {
+    return undefined;
+  }
+  return ssr.getSSRSuccess();
+}

package/dist/es2019/create-payload/utils/get-ttai.js

@@ -0,0 +1,9 @@
+import getPageVisibilityUpToTTAI from './get-page-visibility-up-to-ttai';
+export default function getTTAI(interaction) {
+  const {
+    start,
+    end
+  } = interaction;
+  const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
+  return !interaction.abortReason && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
+}

package/dist/es2019/create-payload/utils/get-tti.js

@@ -0,0 +1,35 @@
+import { findMatchingLegacyMetric } from './find-matching-legacy-metric';
+
+/**
+ * Calculate TTI (Time to Interactive) based on server-side logic
+ * TTI is the time from interaction start to the end of the first matching legacy metric,
+ * or falls back to apdex/UFO end time if no legacy metrics exist
+ */
+export function getTTI(interaction, experienceName) {
+  var _apdex$;
+  const {
+    start,
+    end,
+    apdex
+  } = interaction;
+
+  // Find matching legacy metric
+  const matchingLegacyMetric = findMatchingLegacyMetric(interaction, experienceName);
+
+  // Get end times in priority order (following server-side logic)
+  const apdexEndTime = apdex === null || apdex === void 0 ? void 0 : (_apdex$ = apdex[0]) === null || _apdex$ === void 0 ? void 0 : _apdex$.stopTime;
+  const legacyMetricsEndTime = matchingLegacyMetric === null || matchingLegacyMetric === void 0 ? void 0 : matchingLegacyMetric.stop;
+  const ufoEndTime = end;
+  let ttiEndTime;
+  if (matchingLegacyMetric && legacyMetricsEndTime) {
+    // Use legacy metrics end time if we have a matching legacy metric
+    ttiEndTime = legacyMetricsEndTime;
+  } else if (apdexEndTime) {
+    // Fall back to apdex end time if no matching legacy metrics
+    ttiEndTime = apdexEndTime;
+  } else {
+    // Final fallback to UFO end time
+    ttiEndTime = ufoEndTime;
+  }
+  return ttiEndTime ? Math.round(ttiEndTime - start) : undefined;
+}

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

@@ -118,6 +118,29 @@ export function addCustomData(interactionId, labelStack, data) {
     });
   }
 }
+export function addCohortingCustomData(interactionId, key, value) {
+  const interaction = interactions.get(interactionId);
+  if (interaction == null) {
+    return;
+  }
+
+  // Allow null and undefined values
+  if (value === null || value === undefined) {
+    interaction.cohortingCustomData.set(key, value);
+    return;
+  }
+
+  // Validate that the value is a primitive (number, boolean, or string)
+  if (typeof value !== 'number' && typeof value !== 'boolean' && typeof value !== 'string') {
+    return;
+  }
+
+  // Validate string length (max 50 characters)
+  if (typeof value === 'string' && value.length > 50) {
+    return;
+  }
+  interaction.cohortingCustomData.set(key, value);
+}
 export function addCustomTiming(interactionId, labelStack, data) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
@@ -665,6 +688,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     isPreviousInteractionAborted: PreviousInteractionLog.isAborted === true,
     marks: [],
     customData: [],
+    cohortingCustomData: new Map(),
     customTimings: [],
     spans: [],
     requestInfo: [],

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

@@ -0,0 +1,31 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { createRootCriticalMetricsPayload } from './root-metrics';
+import { createSegmentMetricsPayloads } from './segment-metrics/create-segment-metrics';
+export function createCriticalMetricsPayloads(_x, _x2, _x3) {
+  return _createCriticalMetricsPayloads.apply(this, arguments);
+}
+function _createCriticalMetricsPayloads() {
+  _createCriticalMetricsPayloads = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(interactionId, interaction, vcMetrics) {
+    var _yield$Promise$all, _yield$Promise$all2, rootPayload, segmentPayloads;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return Promise.all([createRootCriticalMetricsPayload(interactionId, interaction, vcMetrics), createSegmentMetricsPayloads(interactionId, interaction)]);
+        case 2:
+          _yield$Promise$all = _context.sent;
+          _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
+          rootPayload = _yield$Promise$all2[0];
+          segmentPayloads = _yield$Promise$all2[1];
+          return _context.abrupt("return", [rootPayload].concat(_toConsumableArray(segmentPayloads)));
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _createCriticalMetricsPayloads.apply(this, arguments);
+}

package/dist/esm/create-payload/critical-metrics-payload/root-metrics.js

@@ -0,0 +1,174 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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 { getLighthouseMetrics } from '../../additional-payload';
+import { getConfig } from '../../config';
+import { getPageVisibilityState } from '../../hidden-timing';
+import { sanitizeUfoName } from '../common/utils';
+import getBrowserMetadata from '../utils/get-browser-metadata';
+import { getFMP } from '../utils/get-fmp';
+import getInteractionStatus from '../utils/get-interaction-status';
+import getNavigationMetrics from '../utils/get-navigation-metrics';
+import getPageVisibilityUpToTTAI from '../utils/get-page-visibility-up-to-ttai';
+import getPaintMetrics from '../utils/get-paint-metrics';
+import { LATEST_REACT_UFO_PAYLOAD_VERSION } from '../utils/get-react-ufo-payload-version';
+import getSSRSuccess from '../utils/get-ssr-success';
+import getTTAI from '../utils/get-ttai';
+import { getTTI } from '../utils/get-tti';
+import getVCMetrics from '../utils/get-vc-metrics';
+
+// Re-export types for convenience
+
+// Local utility functions
+function getPageVisibilityUpToTTI(interaction) {
+  var _interaction$apdex$0$, _interaction$apdex;
+  var start = interaction.start;
+  var bm3EndTimeOrInteractionEndTime = (_interaction$apdex$0$ = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime) !== null && _interaction$apdex$0$ !== void 0 ? _interaction$apdex$0$ : interaction.end;
+  return getPageVisibilityState(start, bm3EndTimeOrInteractionEndTime);
+}
+
+// TODO Write tests for this function
+export function createRootCriticalMetricsPayload(_x, _x2, _x3) {
+  return _createRootCriticalMetricsPayload.apply(this, arguments);
+}
+function _createRootCriticalMetricsPayload() {
+  _createRootCriticalMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(interactionId, interaction, vcMetrics) {
+    var _finalVCMetrics$ufoV, _interaction$cohortin, _window$location;
+    var config, end, start, ufoName, rate, type, abortReason, routeName, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, holdInfo, responsiveness, pageVisibilityAtTTI, pageVisibilityAtTTAI, interactionStatus, newUFOName, ttai, paintMetrics, navigationMetrics, ssrSuccess, tti, fmp, browserMetadata, lighthouseMetrics, finalVCMetrics, ttvc, earliestHold, cohortingCustomData, properties, payload;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          config = getConfig();
+          if (config) {
+            _context.next = 3;
+            break;
+          }
+          throw Error('UFO Configuration not provided');
+        case 3:
+          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName, holdInfo = interaction.holdInfo, responsiveness = interaction.responsiveness;
+          pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
+          pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
+          interactionStatus = getInteractionStatus(interaction);
+          newUFOName = sanitizeUfoName(ufoName); // Get performance metrics
+          ttai = getTTAI(interaction);
+          _context.next = 11;
+          return getPaintMetrics(type, end);
+        case 11:
+          paintMetrics = _context.sent;
+          navigationMetrics = getNavigationMetrics(type);
+          ssrSuccess = getSSRSuccess(type); // Calculate BM3 metrics (TTI and FMP) directly
+          tti = getTTI(interaction, newUFOName);
+          fmp = getFMP(interaction, newUFOName); // Get browser metadata (using compact nested format)
+          browserMetadata = getBrowserMetadata();
+          lighthouseMetrics = getLighthouseMetrics({
+            start: start,
+            stop: end
+          }); // Use provided vcMetrics or calculate if not provided
+          _context.t0 = vcMetrics;
+          if (_context.t0) {
+            _context.next = 23;
+            break;
+          }
+          _context.next = 22;
+          return getVCMetrics(interaction);
+        case 22:
+          _context.t0 = _context.sent;
+        case 23:
+          finalVCMetrics = _context.t0;
+          ttvc = (_finalVCMetrics$ufoV = finalVCMetrics['ufo:vc:rev']) === null || _finalVCMetrics$ufoV === void 0 ? void 0 : _finalVCMetrics$ufoV.map(function (revision) {
+            if (revision['metric:vc90'] === null || revision.clean !== true) {
+              return null;
+            }
+            return {
+              revision: revision.revision,
+              vc90: revision['metric:vc90']
+            };
+          }).filter(function (revision) {
+            return revision != null;
+          }); // find earliest hold
+          earliestHold = holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.reduce(function (a, b) {
+            if (a && a.start < b.start) {
+              return a;
+            }
+            return b;
+          }, null); // Process cohorting custom data
+          cohortingCustomData = (_interaction$cohortin = interaction.cohortingCustomData) !== null && _interaction$cohortin !== void 0 && _interaction$cohortin.size ? Object.fromEntries(interaction.cohortingCustomData) : undefined;
+          properties = _objectSpread(_objectSpread({
+            // Basic metadata
+            '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:region': config.region || 'unknown',
+            'event:source': {
+              name: 'react-ufo/web',
+              version: LATEST_REACT_UFO_PAYLOAD_VERSION
+            },
+            'experience:key': 'custom.ufo.critical-metrics',
+            'experience:name': newUFOName,
+            // Browser metadata (compact nested format)
+            browser: browserMetadata.browser,
+            device: browserMetadata.device,
+            network: browserMetadata.network,
+            time: browserMetadata.time,
+            metrics: _objectSpread({
+              fp: paintMetrics.fp,
+              fcp: paintMetrics.fcp,
+              lcp: paintMetrics.lcp,
+              ttai: ttai,
+              tti: tti,
+              fmp: fmp,
+              tbt: lighthouseMetrics['metric:tbt'],
+              tbtObserved: lighthouseMetrics['metric:tbt:observed'],
+              cls: lighthouseMetrics['metric:cls'],
+              ttvc: ttvc !== null && ttvc !== void 0 ? ttvc : undefined,
+              earliestHoldStart: earliestHold !== null && earliestHold !== void 0 && earliestHold.start ? Math.round(earliestHold.start - start) : undefined,
+              // for interaction response
+              inputDelay: responsiveness !== null && responsiveness !== void 0 && responsiveness.inputDelay ? Math.round(responsiveness.inputDelay) : undefined,
+              inp: responsiveness !== null && responsiveness !== void 0 && responsiveness.experimentalInputToNextPaint ? Math.round(responsiveness.experimentalInputToNextPaint) : undefined
+            }, navigationMetrics && {
+              navigation: navigationMetrics
+            })
+          }, ssrSuccess !== undefined && {
+            ssrSuccess: ssrSuccess
+          }), {}, {
+            interactionId: interactionId,
+            type: type,
+            rate: rate,
+            routeName: routeName !== null && routeName !== void 0 ? routeName : undefined,
+            // Performance timings
+            start: Math.round(start),
+            end: Math.round(end),
+            // Status and outcome
+            status: interactionStatus.originalInteractionStatus,
+            abortReason: abortReason,
+            previousInteractionName: previousInteractionName,
+            isPreviousInteractionAborted: isPreviousInteractionAborted,
+            abortedByInteractionName: abortedByInteractionName,
+            pageVisibilityAtTTI: pageVisibilityAtTTI !== null && pageVisibilityAtTTI !== void 0 ? pageVisibilityAtTTI : undefined,
+            pageVisibilityAtTTAI: pageVisibilityAtTTAI,
+            // Basic error count (not detailed error count)
+            errorCount: interaction.errors.length
+          }, Object.keys(cohortingCustomData || {}).length > 0 && {
+            cohortingCustomData: cohortingCustomData
+          });
+          payload = {
+            actionSubject: 'experience',
+            action: 'measured',
+            eventType: 'operational',
+            source: 'measured',
+            tags: ['observability'],
+            attributes: {
+              properties: properties
+            }
+          };
+          return _context.abrupt("return", payload);
+        case 30:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _createRootCriticalMetricsPayload.apply(this, arguments);
+}