@atlaskit/media-card 79.11.4 → 79.13.0

package/dist/esm/utils/ufoExperiences.js

@@ -1,15 +1,398 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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 { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import isValidId from 'uuid-validate';
 import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
+import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
+import { getMediaGlobalScope } from './globalScope/globalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.11.3";
+var packageVersion = "79.13.0";
 var SAMPLE_RATE = 0.05;
+
+/**
+ * Determines if performance events should be sampled for this instance.
+ * Approximately 5% of instances will be sampled.
+ */
+export var shouldPerformanceBeSampled = function shouldPerformanceBeSampled() {
+  return Math.random() < SAMPLE_RATE;
+};
+
+/**
+ * Gets the UFO interaction start time.
+ * For page_load: returns 0 (relative to page navigation)
+ * For SPA transitions: returns performance.now() when transition started
+ */
+var getInteractionStartTime = function getInteractionStartTime() {
+  var _interaction$start;
+  var interaction = getActiveInteraction();
+  return (_interaction$start = interaction === null || interaction === void 0 ? void 0 : interaction.start) !== null && _interaction$start !== void 0 ? _interaction$start : 0;
+};
+
+/**
+ * Finds a performance resource timing entry by matching a full URI.
+ * Searches from the end (most recent) to find the latest matching entry.
+ */
+var findPerformanceEntryByName = function findPerformanceEntryByName(name) {
+  var _getMediaGlobalScope$;
+  if (typeof performance === 'undefined' || !performance.getEntriesByType) {
+    return undefined;
+  }
+
+  // For data URIs (base64), there won't be a performance entry
+  if (name.startsWith('data:')) {
+    return undefined;
+  }
+  var entries = performance.getEntriesByType('resource');
+  var ssrPerformanceEntries = (_getMediaGlobalScope$ = getMediaGlobalScope().performanceEntries) !== null && _getMediaGlobalScope$ !== void 0 ? _getMediaGlobalScope$ : [];
+  return [].concat(_toConsumableArray(ssrPerformanceEntries), _toConsumableArray(entries)).find(function (entry) {
+    return name.includes(entry.name);
+  });
+};
+
+/**
+ * Creates timing configuration for the UFO experience based on the performance entry.
+ * These timings will be calculated by UFO using the marks we add.
+ */
+var createTimingsConfig = function createTimingsConfig(prefix) {
+  return [{
+    key: "".concat(prefix, ":resourceTiming"),
+    startMark: "".concat(prefix, ":resourceTiming:start"),
+    endMark: "".concat(prefix, ":resourceTiming:end")
+  }, {
+    key: "".concat(prefix, ":dnsLookup"),
+    startMark: "".concat(prefix, ":dnsLookup:start"),
+    endMark: "".concat(prefix, ":dnsLookup:end")
+  }, {
+    key: "".concat(prefix, ":tcpHandshake"),
+    startMark: "".concat(prefix, ":tcpHandshake:start"),
+    endMark: "".concat(prefix, ":tcpHandshake:end")
+  }, {
+    key: "".concat(prefix, ":tlsNegotiation"),
+    startMark: "".concat(prefix, ":tlsNegotiation:start"),
+    endMark: "".concat(prefix, ":tlsNegotiation:end")
+  }, {
+    key: "".concat(prefix, ":ttfb"),
+    startMark: "".concat(prefix, ":ttfb:start"),
+    endMark: "".concat(prefix, ":ttfb:end")
+  }, {
+    key: "".concat(prefix, ":contentDownload"),
+    startMark: "".concat(prefix, ":contentDownload:start"),
+    endMark: "".concat(prefix, ":contentDownload:end")
+  }, {
+    key: "".concat(prefix, ":redirect"),
+    startMark: "".concat(prefix, ":redirect:start"),
+    endMark: "".concat(prefix, ":redirect:end")
+  }, {
+    key: "".concat(prefix, ":fetchTime"),
+    startMark: "".concat(prefix, ":fetchTime:start"),
+    endMark: "".concat(prefix, ":fetchTime:end")
+  }];
+};
+
+/**
+ * Creates resource timing metadata from a performance entry.
+ * Only includes non-timing information (sizes, cache status, protocol, CDN info).
+ * Timing durations are captured via marks which feed into the timings config.
+ */
+var createResourceTimingMetadata = function createResourceTimingMetadata(entry) {
+  var _entry$serverTiming$s, _entry$serverTiming, _entry$serverTiming2, _entry$serverTiming3;
+  return {
+    // Size information
+    resourceTransferSize: entry.transferSize,
+    resourceDecodedBodySize: entry.decodedBodySize,
+    // Request info
+    resourceInitiatorType: entry.initiatorType,
+    resourceNextHopProtocol: entry.nextHopProtocol,
+    // Cache status
+    resourceBrowserCacheHit: entry.transferSize === 0,
+    // Server timing (CDN metrics)
+    resourceCdnCacheHit: (_entry$serverTiming$s = (_entry$serverTiming = entry.serverTiming) === null || _entry$serverTiming === void 0 ? void 0 : _entry$serverTiming.some(function (_ref) {
+      var name = _ref.name;
+      return name === 'cdn-cache-hit';
+    })) !== null && _entry$serverTiming$s !== void 0 ? _entry$serverTiming$s : false,
+    resourceCdnDownstreamFBL: (_entry$serverTiming2 = entry.serverTiming) === null || _entry$serverTiming2 === void 0 || (_entry$serverTiming2 = _entry$serverTiming2.find(function (_ref2) {
+      var name = _ref2.name;
+      return name === 'cdn-downstream-fbl';
+    })) === null || _entry$serverTiming2 === void 0 ? void 0 : _entry$serverTiming2.duration,
+    resourceCdnUpstreamFBL: (_entry$serverTiming3 = entry.serverTiming) === null || _entry$serverTiming3 === void 0 || (_entry$serverTiming3 = _entry$serverTiming3.find(function (_ref3) {
+      var name = _ref3.name;
+      return name === 'cdn-upstream-fbl';
+    })) === null || _entry$serverTiming3 === void 0 ? void 0 : _entry$serverTiming3.duration
+  };
+};
+
+/**
+ * Adds timing marks from a performance resource timing entry to the UFO experience.
+ */
+var addResourceTimingMarks = function addResourceTimingMarks(experience, entry, interactionStartTime, prefix) {
+  var addMark = function addMark(name, start, end) {
+    var relativeStart = start - interactionStartTime;
+    var relativeEnd = end - interactionStartTime;
+    if (relativeEnd > relativeStart && relativeStart >= 0) {
+      experience.mark("".concat(prefix, ":").concat(name, ":start"), relativeStart);
+      experience.mark("".concat(prefix, ":").concat(name, ":end"), relativeEnd);
+    }
+  };
+
+  // Overall resource timing
+  addMark('resourceTiming', entry.startTime, entry.responseEnd);
+
+  // DNS lookup
+  addMark('dnsLookup', entry.domainLookupStart, entry.domainLookupEnd);
+
+  // TCP handshake
+  addMark('tcpHandshake', entry.connectStart, entry.connectEnd);
+
+  // TLS negotiation (only for HTTPS)
+  if (entry.secureConnectionStart > 0) {
+    addMark('tlsNegotiation', entry.secureConnectionStart, entry.requestStart);
+  }
+
+  // Request to first byte (TTFB)
+  addMark('ttfb', entry.requestStart, entry.responseStart);
+
+  // Content download
+  addMark('contentDownload', entry.responseStart, entry.responseEnd);
+
+  // Redirect time (if any)
+  if (entry.redirectStart > 0 && entry.redirectEnd > 0) {
+    addMark('redirect', entry.redirectStart, entry.redirectEnd);
+  }
+
+  // Total fetch time (without redirect) - from fetchStart to responseEnd
+  addMark('fetchTime', entry.fetchStart, entry.responseEnd);
+};
+var sanitiseFileAttributes = function sanitiseFileAttributes(fileAttributes) {
+  var sanitisedFileId = 'INVALID_FILE_ID';
+  if (fileAttributes.fileId === 'external-image' || isValidId(fileAttributes.fileId)) {
+    sanitisedFileId = fileAttributes.fileId;
+  }
+  return _objectSpread(_objectSpread({}, fileAttributes), {}, {
+    fileId: sanitisedFileId
+  });
+};
+var getBasePayloadAttributes = function getBasePayloadAttributes() {
+  return {
+    packageName: packageName,
+    packageVersion: packageVersion,
+    mediaEnvironment: getMediaEnvironment(),
+    mediaRegion: getMediaRegion()
+  };
+};
+/**
+ * Creates a new UFO experience instance with the given configuration.
+ */
+var createExperience = function createExperience(instanceId) {
+  var timings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return new UFOExperience('media-card-render', {
+    platform: {
+      component: 'media-card'
+    },
+    type: ExperienceTypes.Experience,
+    performanceType: ExperiencePerformanceTypes.InlineResult,
+    featureFlags: getFeatureFlagKeysAllProducts(),
+    timings: timings
+  }, instanceId);
+};
+
+/**
+ * Hook to create a UFO experience tied to a media card component lifecycle.
+ *
+ * This creates a unique UFOExperience instance per component, allowing:
+ * - Unique timing config per instance
+ * - Direct control over experience lifecycle
+ * - Proper cleanup on unmount
+ *
+ * @example
+ * ```tsx
+ * const ufoExperience = useMediaCardUfoExperience({
+ *   instanceId: internalOccurrenceKey,
+ *   enabled: shouldSendPerformanceEvent,
+ * });
+ *
+ * // On card visible
+ * ufoExperience.start();
+ *
+ * // On card complete/error
+ * ufoExperience.complete(status, fileAttributes, fileStateFlags, ssrReliability, error, ssrPreviewInfo);
+ * ```
+ */
+export var useMediaCardUfoExperience = function useMediaCardUfoExperience(_ref4) {
+  var instanceId = _ref4.instanceId,
+    enabled = _ref4.enabled;
+  // Store the start time when start() is called - experience creation is deferred to complete()
+  var startTimeRef = useRef(undefined);
+  var hasStartedRef = useRef(false);
+  // Store the experience so abort() can use it after complete() has run
+  var experienceRef = useRef(null);
+
+  // Reset refs when instanceId changes (new card instance)
+  useEffect(function () {
+    return function () {
+      // Note: Don't clear experienceRef here as abort() might still need it
+      // The component's cleanup calls abort() which handles final state
+      hasStartedRef.current = false;
+      startTimeRef.current = undefined;
+    };
+  }, [instanceId]);
+  var start = useCallback(function (options) {
+    if (!enabled) {
+      return;
+    }
+    // Store the start time - experience will be created in complete()
+    // This allows us to have the correct timings config when creating the experience
+    hasStartedRef.current = true;
+    startTimeRef.current = options !== null && options !== void 0 && options.useInteractionTime ? getInteractionStartTime() : performance.now();
+  }, [enabled]);
+  var complete = useCallback(function (status, fileAttributes, fileStateFlags, ssrReliability) {
+    var error = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : new MediaCardError('missing-error-data');
+    var ssrPreviewInfo = arguments.length > 5 ? arguments[5] : undefined;
+    // Only complete for terminal statuses - ignore intermediate statuses like 'loading-preview'
+    if (!['complete', 'error', 'failed-processing'].includes(status)) {
+      return;
+    }
+    if (!enabled || !hasStartedRef.current) {
+      return;
+    }
+    var interactionStartTime = getInteractionStartTime();
+
+    // Determine timings config based on SSR status
+    var timingsConfig = [];
+    var resourceTimingEntry;
+    if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRSuccessful && ssrPreviewInfo.dataUri) {
+      var _ssrPreviewInfo$srcse;
+      resourceTimingEntry = findPerformanceEntryByName((_ssrPreviewInfo$srcse = ssrPreviewInfo.srcset) !== null && _ssrPreviewInfo$srcse !== void 0 ? _ssrPreviewInfo$srcse : ssrPreviewInfo.dataUri);
+      if (resourceTimingEntry) {
+        timingsConfig = createTimingsConfig('ssr');
+      }
+    }
+
+    // Create the experience with the correct timings config
+    var experience = createExperience(instanceId, timingsConfig);
+    experienceRef.current = experience;
+    experience.start(startTimeRef.current);
+
+    // Add timing marks and metadata based on strategy
+    if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRSuccessful && ssrPreviewInfo.dataUri) {
+      if (resourceTimingEntry) {
+        addResourceTimingMarks(experience, resourceTimingEntry, interactionStartTime, 'ssr');
+        experience.addMetadata(_objectSpread(_objectSpread({}, createResourceTimingMetadata(resourceTimingEntry)), {}, {
+          timingStrategy: 'ssr-resource-timing'
+        }));
+      } else {
+        experience.addMetadata({
+          timingStrategy: 'ssr-no-entry-found'
+        });
+      }
+    } else if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRAttempted) {
+      // Strategy 2: SSR was attempted but failed - use interaction start time
+      experience.addMetadata({
+        timingStrategy: 'ssr-failed',
+        interactionStartTime: interactionStartTime
+      });
+      experience.mark('interactionStart', 0);
+    } else {
+      // Strategy 3: No SSR - CSR mount-based behavior
+      experience.addMetadata({
+        timingStrategy: 'csr-mount-based'
+      });
+    }
+
+    // Complete the experience with appropriate state
+    var sanitisedFileAttributes = sanitiseFileAttributes(fileAttributes);
+    switch (status) {
+      case 'complete':
+        experience.success({
+          metadata: _objectSpread({
+            fileAttributes: sanitisedFileAttributes,
+            ssrReliability: ssrReliability,
+            fileStateFlags: fileStateFlags
+          }, getBasePayloadAttributes())
+        });
+        break;
+      case 'failed-processing':
+        experience.failure({
+          metadata: _objectSpread({
+            fileAttributes: sanitisedFileAttributes,
+            ssrReliability: ssrReliability,
+            fileStateFlags: fileStateFlags,
+            failReason: 'failed-processing'
+          }, getBasePayloadAttributes())
+        });
+        break;
+      case 'error':
+        experience.failure({
+          metadata: _objectSpread(_objectSpread({
+            fileAttributes: sanitisedFileAttributes,
+            ssrReliability: ssrReliability,
+            fileStateFlags: fileStateFlags
+          }, extractErrorInfo(error)), {}, {
+            request: getRenderErrorRequestMetadata(error)
+          }, getBasePayloadAttributes())
+        });
+        break;
+    }
+
+    // Reset state after completion
+    hasStartedRef.current = false;
+    startTimeRef.current = undefined;
+  }, [enabled, instanceId]);
+  var abort = useCallback(function (properties) {
+    if (!enabled) {
+      return;
+    }
+
+    // Use existing experience if available (created by complete()),
+    // otherwise create new one if experience was started but not completed
+    var experience = experienceRef.current;
+    if (!experience) {
+      if (!hasStartedRef.current) {
+        return;
+      }
+      experience = createExperience(instanceId);
+      experienceRef.current = experience;
+      experience.start(startTimeRef.current);
+    }
+    var metadata = _objectSpread({}, getBasePayloadAttributes());
+    if (properties !== null && properties !== void 0 && properties.fileAttributes) {
+      metadata.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+    }
+    if (properties !== null && properties !== void 0 && properties.fileStateFlags) {
+      metadata.fileStateFlags = properties.fileStateFlags;
+    }
+    if (properties !== null && properties !== void 0 && properties.ssrReliability) {
+      metadata.ssrReliability = properties.ssrReliability;
+    }
+
+    // UFO will ignore abort if experience is already in final state
+    experience.abort({
+      metadata: metadata
+    });
+
+    // Reset state after abort
+    hasStartedRef.current = false;
+    startTimeRef.current = undefined;
+  }, [enabled, instanceId]);
+  return useMemo(function () {
+    return {
+      start: start,
+      complete: complete,
+      abort: abort
+    };
+  }, [start, complete, abort]);
+};
+
+// ============================================================================
+// Legacy exports for backwards compatibility
+// These will be removed once all consumers are migrated to the hook
+// ============================================================================
+
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {
@@ -25,89 +408,92 @@ var getExperience = function getExperience(id) {
   }
   return concurrentExperience.getInstance(id);
 };
-export var shouldPerformanceBeSampled = function shouldPerformanceBeSampled() {
-  return (
-    // We generate about 100M events UFOv1 events, we want to reduce this to about 5M as we can get the same info from there
-    // Math.random() generates a random floating-point number between 0 (inclusive) and 1 (exclusive).
-    // The condition Math.random() < SAMPLE_RATE (0.05) will be true approximately 5% of the time.
-    Math.random() < SAMPLE_RATE
-  );
-};
-export var startUfoExperience = function startUfoExperience(id) {
-  getExperience(id).start();
-};
-var sanitiseFileAttributes = function sanitiseFileAttributes(fileAttributes) {
-  /*
-  	Allow external image mediaItemType as fileId
-  	See ExternalImageIdentifier interface on platform/packages/media/media-client/src/identifier.ts
-   */
-  var sanitisedFileId = 'INVALID_FILE_ID';
-  if (fileAttributes.fileId === 'external-image' || isValidId(fileAttributes.fileId)) {
-    sanitisedFileId = fileAttributes.fileId;
-  }
-  return _objectSpread(_objectSpread({}, fileAttributes), {}, {
-    fileId: sanitisedFileId
-  });
+export var startUfoExperience = function startUfoExperience(id, startTime) {
+  getExperience(id).start(startTime);
 };
 export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability) {
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new MediaCardError('missing-error-data');
+  var ssrPreviewInfo = arguments.length > 6 ? arguments[6] : undefined;
+  // Only complete for terminal statuses - ignore intermediate statuses like 'loading-preview'
+  if (!['complete', 'error', 'failed-processing'].includes(status)) {
+    return;
+  }
+  var experience = getExperience(id);
+  var interactionStartTime = getInteractionStartTime();
+
+  // Determine timing strategy based on SSR status
+  if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRSuccessful && ssrPreviewInfo.dataUri) {
+    var _ssrPreviewInfo$srcse2;
+    var entry = findPerformanceEntryByName((_ssrPreviewInfo$srcse2 = ssrPreviewInfo.srcset) !== null && _ssrPreviewInfo$srcse2 !== void 0 ? _ssrPreviewInfo$srcse2 : ssrPreviewInfo.dataUri);
+    if (entry) {
+      addResourceTimingMarks(experience, entry, interactionStartTime, 'ssr');
+      experience.addMetadata(_objectSpread(_objectSpread({}, createResourceTimingMetadata(entry)), {}, {
+        timingStrategy: 'ssr-resource-timing'
+      }));
+    } else {
+      experience.addMetadata({
+        timingStrategy: 'ssr-no-entry-found'
+      });
+    }
+  } else if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRAttempted) {
+    experience.addMetadata({
+      timingStrategy: 'ssr-failed',
+      interactionStartTime: interactionStartTime
+    });
+    experience.mark('interactionStart', 0);
+  } else {
+    experience.addMetadata({
+      timingStrategy: 'csr-mount-based'
+    });
+  }
+  var sanitisedFileAttributes = sanitiseFileAttributes(fileAttributes);
   switch (status) {
     case 'complete':
-      succeedUfoExperience(id, {
-        fileAttributes: fileAttributes,
-        ssrReliability: ssrReliability,
-        fileStateFlags: fileStateFlags
+      experience.success({
+        metadata: _objectSpread({
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability: ssrReliability,
+          fileStateFlags: fileStateFlags
+        }, getBasePayloadAttributes())
       });
       break;
     case 'failed-processing':
-      failUfoExperience(id, {
-        fileAttributes: fileAttributes,
-        failReason: 'failed-processing',
-        ssrReliability: ssrReliability,
-        fileStateFlags: fileStateFlags
+      experience.failure({
+        metadata: _objectSpread({
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability: ssrReliability,
+          fileStateFlags: fileStateFlags,
+          failReason: 'failed-processing'
+        }, getBasePayloadAttributes())
       });
       break;
     case 'error':
-      failUfoExperience(id, _objectSpread(_objectSpread({
-        fileAttributes: fileAttributes
-      }, extractErrorInfo(error)), {}, {
-        request: getRenderErrorRequestMetadata(error),
-        ssrReliability: ssrReliability,
-        fileStateFlags: fileStateFlags
-      }));
+      experience.failure({
+        metadata: _objectSpread(_objectSpread({
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability: ssrReliability,
+          fileStateFlags: fileStateFlags
+        }, extractErrorInfo(error)), {}, {
+          request: getRenderErrorRequestMetadata(error)
+        }, getBasePayloadAttributes())
+      });
       break;
   }
 };
-var getBasePayloadAttributes = function getBasePayloadAttributes() {
-  return {
-    packageName: packageName,
-    packageVersion: packageVersion,
-    mediaEnvironment: getMediaEnvironment(),
-    mediaRegion: getMediaRegion()
-  };
-};
-var succeedUfoExperience = function succeedUfoExperience(id, properties) {
+export var abortUfoExperience = function abortUfoExperience(id, properties) {
+  var metadata = _objectSpread({}, getBasePayloadAttributes());
   if (properties !== null && properties !== void 0 && properties.fileAttributes) {
-    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+    metadata.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
   }
-  getExperience(id).success({
-    metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
-  });
-};
-var failUfoExperience = function failUfoExperience(id, properties) {
-  if (properties !== null && properties !== void 0 && properties.fileAttributes) {
-    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+  if (properties !== null && properties !== void 0 && properties.fileStateFlags) {
+    metadata.fileStateFlags = properties.fileStateFlags;
   }
-  getExperience(id).failure({
-    metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
-  });
-};
-export var abortUfoExperience = function abortUfoExperience(id, properties) {
-  // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-  if (properties !== null && properties !== void 0 && properties.fileAttributes) {
-    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+  if (properties !== null && properties !== void 0 && properties.ssrReliability) {
+    metadata.ssrReliability = properties.ssrReliability;
   }
   getExperience(id).abort({
-    metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
+    metadata: metadata
   });
-};
+};
+
+// Suppress unused type warnings - these are used for type documentation

package/dist/types/utils/globalScope/globalScope.d.ts

@@ -5,8 +5,10 @@ import { type MediaCardErrorInfo } from '../../utils/analytics';
 import { type MediaCardSsr } from './types';
 export declare const GLOBAL_MEDIA_CARD_SSR = "mediaCardSsr";
 export declare const GLOBAL_MEDIA_NAMESPACE = "__MEDIA_INTERNAL";
+export declare const GLOBAL_MEDIA_PERFORMANCE_ENTRIES = "performanceEntries";
 export type MediaGlobalScope = {
     [GLOBAL_MEDIA_CARD_SSR]?: MediaCardSsr;
+    [GLOBAL_MEDIA_PERFORMANCE_ENTRIES]?: PerformanceEntry[];
 };
 export declare function getMediaGlobalScope(globalScope?: any): MediaGlobalScope;
 export declare function getMediaCardSSR(globalScope?: any): MediaCardSsr;

package/dist/types/utils/mediaPerformanceObserver/durationMetrics.d.ts

@@ -36,6 +36,7 @@ export declare const createMediaDurationMetrics: (entry: ExperimentalPerformance
     decodedBodySize: number;
     totalDuration: number;
     initiatorType: string;
+    endedAt: number;
     responseEnd: number;
     browserCacheHit: boolean;
     nextHopProtocol: string;

package/dist/types/utils/ufoExperiences.d.ts

@@ -1,15 +1,98 @@
 import { type CardStatus } from '../types';
 import { type FileAttributes } from '@atlaskit/media-common';
-import { type SSRStatus } from './analytics';
+import { type MediaCardErrorInfo, type SSRStatus } from './analytics';
 import { MediaCardError } from '../errors';
+import { type RequestMetadata } from '@atlaskit/media-client';
 import { type FileStateFlags } from '../types';
+/**
+ * Determines if performance events should be sampled for this instance.
+ * Approximately 5% of instances will be sampled.
+ */
+export declare const shouldPerformanceBeSampled: () => boolean;
+export type SSRPreviewInfo = {
+    /** The srcset of the SSR preview (used to match performance entries) */
+    srcset?: string;
+    /** The full URI of the SSR preview (used to match performance entries) */
+    dataUri?: string;
+    /** Whether SSR was attempted (ssr prop was provided) */
+    wasSSRAttempted: boolean;
+    /** Whether SSR was successful (server or client status is 'success') */
+    wasSSRSuccessful: boolean;
+};
 type SucceedUfoPayload = {
     fileAttributes: FileAttributes;
     ssrReliability: SSRStatus;
     fileStateFlags: FileStateFlags;
 };
-export declare const shouldPerformanceBeSampled: () => boolean;
-export declare const startUfoExperience: (id: string) => void;
-export declare const completeUfoExperience: (id: string, status: CardStatus, fileAttributes: FileAttributes, fileStateFlags: FileStateFlags, ssrReliability: SSRStatus, error?: MediaCardError) => void;
+type FailedProcessingPayload = {
+    fileAttributes: FileAttributes;
+    ssrReliability: SSRStatus;
+    failReason: 'failed-processing';
+    fileStateFlags: FileStateFlags;
+};
+type ErrorUfoPayload = {
+    fileAttributes: FileAttributes;
+    ssrReliability: SSRStatus;
+    request: RequestMetadata | undefined;
+    fileStateFlags: FileStateFlags;
+} & MediaCardErrorInfo;
+export interface UseMediaCardUfoExperienceOptions {
+    /** Unique identifier for this experience instance */
+    instanceId: string;
+    /** Whether to enable UFO tracking for this instance */
+    enabled: boolean;
+}
+export interface StartOptions {
+    /**
+     * When true, uses the UFO interaction start time instead of current time.
+     * Use this for SSR non-lazy scenarios where the image loading started at interaction start.
+     */
+    useInteractionTime?: boolean;
+}
+export interface MediaCardUfoExperience {
+    /**
+     * Start the UFO experience. Call when card becomes visible.
+     * @param options - Optional configuration for start behavior
+     */
+    start: (options?: StartOptions) => void;
+    /**
+     * Complete the UFO experience with appropriate timing strategy.
+     * @param status - The final card status
+     * @param fileAttributes - File metadata
+     * @param fileStateFlags - File state flags
+     * @param ssrReliability - SSR reliability status
+     * @param error - Optional error for error status
+     * @param ssrPreviewInfo - SSR preview information for timing lookup
+     */
+    complete: (status: CardStatus, fileAttributes: FileAttributes, fileStateFlags: FileStateFlags, ssrReliability: SSRStatus, error?: MediaCardError, ssrPreviewInfo?: SSRPreviewInfo) => void;
+    /** Abort the UFO experience. Call on unmount if not completed. */
+    abort: (properties?: Partial<SucceedUfoPayload>) => void;
+}
+/**
+ * Hook to create a UFO experience tied to a media card component lifecycle.
+ *
+ * This creates a unique UFOExperience instance per component, allowing:
+ * - Unique timing config per instance
+ * - Direct control over experience lifecycle
+ * - Proper cleanup on unmount
+ *
+ * @example
+ * ```tsx
+ * const ufoExperience = useMediaCardUfoExperience({
+ *   instanceId: internalOccurrenceKey,
+ *   enabled: shouldSendPerformanceEvent,
+ * });
+ *
+ * // On card visible
+ * ufoExperience.start();
+ *
+ * // On card complete/error
+ * ufoExperience.complete(status, fileAttributes, fileStateFlags, ssrReliability, error, ssrPreviewInfo);
+ * ```
+ */
+export declare const useMediaCardUfoExperience: ({ instanceId, enabled, }: UseMediaCardUfoExperienceOptions) => MediaCardUfoExperience;
+export declare const startUfoExperience: (id: string, startTime?: number) => void;
+export declare const completeUfoExperience: (id: string, status: CardStatus, fileAttributes: FileAttributes, fileStateFlags: FileStateFlags, ssrReliability: SSRStatus, error?: MediaCardError, ssrPreviewInfo?: SSRPreviewInfo) => void;
 export declare const abortUfoExperience: (id: string, properties?: Partial<SucceedUfoPayload>) => void;
-export {};
+export type { FailedProcessingPayload as _FailedProcessingPayload };
+export type { ErrorUfoPayload as _ErrorUfoPayload };