@atlaskit/media-card 79.11.4 → 79.13.0

package/dist/es2019/utils/ufoExperiences.js

@@ -1,12 +1,386 @@
-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';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.11.3";
+const packageVersion = "79.13.0";
 const SAMPLE_RATE = 0.05;
+
+/**
+ * Determines if performance events should be sampled for this instance.
+ * Approximately 5% of instances will be sampled.
+ */
+export const shouldPerformanceBeSampled = () => 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
+ */
+const getInteractionStartTime = () => {
+  var _interaction$start;
+  const 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.
+ */
+const 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;
+  }
+  const entries = performance.getEntriesByType('resource');
+  const ssrPerformanceEntries = (_getMediaGlobalScope$ = getMediaGlobalScope().performanceEntries) !== null && _getMediaGlobalScope$ !== void 0 ? _getMediaGlobalScope$ : [];
+  return [...ssrPerformanceEntries, ...entries].find(entry => 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.
+ */
+const createTimingsConfig = prefix => [{
+  key: `${prefix}:resourceTiming`,
+  startMark: `${prefix}:resourceTiming:start`,
+  endMark: `${prefix}:resourceTiming:end`
+}, {
+  key: `${prefix}:dnsLookup`,
+  startMark: `${prefix}:dnsLookup:start`,
+  endMark: `${prefix}:dnsLookup:end`
+}, {
+  key: `${prefix}:tcpHandshake`,
+  startMark: `${prefix}:tcpHandshake:start`,
+  endMark: `${prefix}:tcpHandshake:end`
+}, {
+  key: `${prefix}:tlsNegotiation`,
+  startMark: `${prefix}:tlsNegotiation:start`,
+  endMark: `${prefix}:tlsNegotiation:end`
+}, {
+  key: `${prefix}:ttfb`,
+  startMark: `${prefix}:ttfb:start`,
+  endMark: `${prefix}:ttfb:end`
+}, {
+  key: `${prefix}:contentDownload`,
+  startMark: `${prefix}:contentDownload:start`,
+  endMark: `${prefix}:contentDownload:end`
+}, {
+  key: `${prefix}:redirect`,
+  startMark: `${prefix}:redirect:start`,
+  endMark: `${prefix}:redirect:end`
+}, {
+  key: `${prefix}:fetchTime`,
+  startMark: `${prefix}:fetchTime:start`,
+  endMark: `${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.
+ */
+const createResourceTimingMetadata = entry => {
+  var _entry$serverTiming$s, _entry$serverTiming, _entry$serverTiming2, _entry$serverTiming2$, _entry$serverTiming3, _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(({
+      name
+    }) => name === 'cdn-cache-hit')) !== null && _entry$serverTiming$s !== void 0 ? _entry$serverTiming$s : false,
+    resourceCdnDownstreamFBL: (_entry$serverTiming2 = entry.serverTiming) === null || _entry$serverTiming2 === void 0 ? void 0 : (_entry$serverTiming2$ = _entry$serverTiming2.find(({
+      name
+    }) => name === 'cdn-downstream-fbl')) === null || _entry$serverTiming2$ === void 0 ? void 0 : _entry$serverTiming2$.duration,
+    resourceCdnUpstreamFBL: (_entry$serverTiming3 = entry.serverTiming) === null || _entry$serverTiming3 === void 0 ? void 0 : (_entry$serverTiming3$ = _entry$serverTiming3.find(({
+      name
+    }) => 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.
+ */
+const addResourceTimingMarks = (experience, entry, interactionStartTime, prefix) => {
+  const addMark = (name, start, end) => {
+    const relativeStart = start - interactionStartTime;
+    const relativeEnd = end - interactionStartTime;
+    if (relativeEnd > relativeStart && relativeStart >= 0) {
+      experience.mark(`${prefix}:${name}:start`, relativeStart);
+      experience.mark(`${prefix}:${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);
+};
+const sanitiseFileAttributes = fileAttributes => {
+  let sanitisedFileId = 'INVALID_FILE_ID';
+  if (fileAttributes.fileId === 'external-image' || isValidId(fileAttributes.fileId)) {
+    sanitisedFileId = fileAttributes.fileId;
+  }
+  return {
+    ...fileAttributes,
+    fileId: sanitisedFileId
+  };
+};
+const getBasePayloadAttributes = () => ({
+  packageName,
+  packageVersion,
+  mediaEnvironment: getMediaEnvironment(),
+  mediaRegion: getMediaRegion()
+});
+/**
+ * Creates a new UFO experience instance with the given configuration.
+ */
+const createExperience = (instanceId, timings = []) => {
+  return new UFOExperience('media-card-render', {
+    platform: {
+      component: 'media-card'
+    },
+    type: ExperienceTypes.Experience,
+    performanceType: ExperiencePerformanceTypes.InlineResult,
+    featureFlags: getFeatureFlagKeysAllProducts(),
+    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 const useMediaCardUfoExperience = ({
+  instanceId,
+  enabled
+}) => {
+  // Store the start time when start() is called - experience creation is deferred to complete()
+  const startTimeRef = useRef(undefined);
+  const hasStartedRef = useRef(false);
+  // Store the experience so abort() can use it after complete() has run
+  const experienceRef = useRef(null);
+
+  // Reset refs when instanceId changes (new card instance)
+  useEffect(() => {
+    return () => {
+      // 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]);
+  const start = useCallback(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]);
+  const complete = useCallback((status, fileAttributes, fileStateFlags, ssrReliability, error = new MediaCardError('missing-error-data'), ssrPreviewInfo) => {
+    // Only complete for terminal statuses - ignore intermediate statuses like 'loading-preview'
+    if (!['complete', 'error', 'failed-processing'].includes(status)) {
+      return;
+    }
+    if (!enabled || !hasStartedRef.current) {
+      return;
+    }
+    const interactionStartTime = getInteractionStartTime();
+
+    // Determine timings config based on SSR status
+    let timingsConfig = [];
+    let 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
+    const 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({
+          ...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
+      });
+      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
+    const sanitisedFileAttributes = sanitiseFileAttributes(fileAttributes);
+    switch (status) {
+      case 'complete':
+        experience.success({
+          metadata: {
+            fileAttributes: sanitisedFileAttributes,
+            ssrReliability,
+            fileStateFlags,
+            ...getBasePayloadAttributes()
+          }
+        });
+        break;
+      case 'failed-processing':
+        experience.failure({
+          metadata: {
+            fileAttributes: sanitisedFileAttributes,
+            ssrReliability,
+            fileStateFlags,
+            failReason: 'failed-processing',
+            ...getBasePayloadAttributes()
+          }
+        });
+        break;
+      case 'error':
+        experience.failure({
+          metadata: {
+            fileAttributes: sanitisedFileAttributes,
+            ssrReliability,
+            fileStateFlags,
+            ...extractErrorInfo(error),
+            request: getRenderErrorRequestMetadata(error),
+            ...getBasePayloadAttributes()
+          }
+        });
+        break;
+    }
+
+    // Reset state after completion
+    hasStartedRef.current = false;
+    startTimeRef.current = undefined;
+  }, [enabled, instanceId]);
+  const abort = useCallback(properties => {
+    if (!enabled) {
+      return;
+    }
+
+    // Use existing experience if available (created by complete()),
+    // otherwise create new one if experience was started but not completed
+    let experience = experienceRef.current;
+    if (!experience) {
+      if (!hasStartedRef.current) {
+        return;
+      }
+      experience = createExperience(instanceId);
+      experienceRef.current = experience;
+      experience.start(startTimeRef.current);
+    }
+    const metadata = {
+      ...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
+    });
+
+    // Reset state after abort
+    hasStartedRef.current = false;
+    startTimeRef.current = undefined;
+  }, [enabled, instanceId]);
+  return useMemo(() => ({
+    start,
+    complete,
+    abort
+  }), [start, complete, abort]);
+};
+
+// ============================================================================
+// Legacy exports for backwards compatibility
+// These will be removed once all consumers are migrated to the hook
+// ============================================================================
+
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {
@@ -22,93 +396,96 @@ const getExperience = id => {
   }
   return concurrentExperience.getInstance(id);
 };
-export const shouldPerformanceBeSampled = () =>
-// 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 const startUfoExperience = id => {
-  getExperience(id).start();
+export const startUfoExperience = (id, startTime) => {
+  getExperience(id).start(startTime);
 };
-const sanitiseFileAttributes = fileAttributes => {
-  /*
-  	Allow external image mediaItemType as fileId
-  	See ExternalImageIdentifier interface on platform/packages/media/media-client/src/identifier.ts
-   */
-  let sanitisedFileId = 'INVALID_FILE_ID';
-  if (fileAttributes.fileId === 'external-image' || isValidId(fileAttributes.fileId)) {
-    sanitisedFileId = fileAttributes.fileId;
+export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, error = new MediaCardError('missing-error-data'), ssrPreviewInfo) => {
+  // Only complete for terminal statuses - ignore intermediate statuses like 'loading-preview'
+  if (!['complete', 'error', 'failed-processing'].includes(status)) {
+    return;
   }
-  return {
-    ...fileAttributes,
-    fileId: sanitisedFileId
-  };
-};
-export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, error = new MediaCardError('missing-error-data')) => {
+  const experience = getExperience(id);
+  const interactionStartTime = getInteractionStartTime();
+
+  // Determine timing strategy based on SSR status
+  if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRSuccessful && ssrPreviewInfo.dataUri) {
+    var _ssrPreviewInfo$srcse2;
+    const entry = findPerformanceEntryByName((_ssrPreviewInfo$srcse2 = ssrPreviewInfo.srcset) !== null && _ssrPreviewInfo$srcse2 !== void 0 ? _ssrPreviewInfo$srcse2 : ssrPreviewInfo.dataUri);
+    if (entry) {
+      addResourceTimingMarks(experience, entry, interactionStartTime, 'ssr');
+      experience.addMetadata({
+        ...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
+    });
+    experience.mark('interactionStart', 0);
+  } else {
+    experience.addMetadata({
+      timingStrategy: 'csr-mount-based'
+    });
+  }
+  const sanitisedFileAttributes = sanitiseFileAttributes(fileAttributes);
   switch (status) {
     case 'complete':
-      succeedUfoExperience(id, {
-        fileAttributes,
-        ssrReliability,
-        fileStateFlags
+      experience.success({
+        metadata: {
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability,
+          fileStateFlags,
+          ...getBasePayloadAttributes()
+        }
       });
       break;
     case 'failed-processing':
-      failUfoExperience(id, {
-        fileAttributes,
-        failReason: 'failed-processing',
-        ssrReliability,
-        fileStateFlags
+      experience.failure({
+        metadata: {
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability,
+          fileStateFlags,
+          failReason: 'failed-processing',
+          ...getBasePayloadAttributes()
+        }
       });
       break;
     case 'error':
-      failUfoExperience(id, {
-        fileAttributes,
-        ...extractErrorInfo(error),
-        request: getRenderErrorRequestMetadata(error),
-        ssrReliability,
-        fileStateFlags
+      experience.failure({
+        metadata: {
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability,
+          fileStateFlags,
+          ...extractErrorInfo(error),
+          request: getRenderErrorRequestMetadata(error),
+          ...getBasePayloadAttributes()
+        }
       });
       break;
   }
 };
-const getBasePayloadAttributes = () => ({
-  packageName,
-  packageVersion,
-  mediaEnvironment: getMediaEnvironment(),
-  mediaRegion: getMediaRegion()
-});
-const succeedUfoExperience = (id, properties) => {
+export const abortUfoExperience = (id, properties) => {
+  const metadata = {
+    ...getBasePayloadAttributes()
+  };
   if (properties !== null && properties !== void 0 && properties.fileAttributes) {
-    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+    metadata.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
   }
-  getExperience(id).success({
-    metadata: {
-      ...properties,
-      ...getBasePayloadAttributes()
-    }
-  });
-};
-const 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: {
-      ...properties,
-      ...getBasePayloadAttributes()
-    }
-  });
-};
-export const 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: {
-      ...properties,
-      ...getBasePayloadAttributes()
-    }
+    metadata
   });
-};
+};
+
+// Suppress unused type warnings - these are used for type documentation

package/dist/esm/card/card.js

@@ -13,7 +13,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.11.3";
+var packageVersion = "79.13.0";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/externalImageCard.js

@@ -11,7 +11,7 @@ import ReactDOM from 'react-dom';
 import { ImageLoadError } from '../errors';
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
-import { abortUfoExperience, completeUfoExperience, startUfoExperience, shouldPerformanceBeSampled } from '../utils/ufoExperiences';
+import { shouldPerformanceBeSampled, useMediaCardUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { getDefaultCardDimensions } from '../utils/cardDimensions';
 import { usePrevious } from '../utils/usePrevious';
@@ -63,10 +63,17 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
     wasStatusUploading: false,
     wasStatusProcessing: false
   });
+  var shouldSendPerformanceEvent = useMemo(function () {
+    return shouldPerformanceBeSampled();
+  }, []);
+
+  // UFO experience hook - creates a unique experience instance per card
+  var ufoExperience = useMediaCardUfoExperience({
+    instanceId: internalOccurrenceKey,
+    enabled: shouldSendPerformanceEvent
+  });
   var startUfoExperienceRef = useCurrentValueRef(function () {
-    if (shouldSendPerformanceEventRef.current) {
-      startUfoExperience(internalOccurrenceKey);
-    }
+    ufoExperience.start();
   });
   var _useState = useState('loading-preview'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -110,7 +117,6 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     mediaViewerSelectedItem = _useState8[0],
     setMediaViewerSelectedItem = _useState8[1];
-  var shouldSendPerformanceEventRef = useRef(shouldPerformanceBeSampled());
 
   //----------------------------------------------------------------//
   //---------------------- Analytics  ------------------------------//
@@ -126,17 +132,16 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
       }
     };
     createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error, traceContext, undefined);
-    shouldSendPerformanceEventRef.current && completeUfoExperience(internalOccurrenceKey, status, fileAttributes, fileStateFlagsRef.current, ssrReliability, error);
+    // External images don't use SSR - no ssrPreviewInfo passed
+    ufoExperience.complete(status, fileAttributes, fileStateFlagsRef.current, ssrReliability, error, undefined);
   });
   var fireAbortedEventRef = useCurrentValueRef(function () {
     // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-    if (shouldSendPerformanceEventRef.current) {
-      abortUfoExperience(internalOccurrenceKey, {
-        fileAttributes: fileAttributes,
-        fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
-        ssrReliability: ssrReliability
-      });
-    }
+    ufoExperience.abort({
+      fileAttributes: fileAttributes,
+      fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
+      ssrReliability: ssrReliability
+    });
   });
 
   //----------------------------------------------------------------//