@atlaskit/react-ufo 5.0.13 → 5.1.1

package/dist/es2019/experience-trace-id-context/context-manager.js

@@ -0,0 +1,142 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ROOT_CONTEXT } from '@opentelemetry/api';
+
+/**
+ * We need to store a reference to the Context manager so that we can get it later.
+ * This is because the OTel JS API doesn't allow us to get the registered context manager,
+ * and we need to get it because we need to call a function that's not available in the OTel API:
+ * `setActive`. The OTel JS API design doesn't allow us to manually set the active context
+ * despite the spec allowing for the capability. Sigh.
+ * 
+ * I imagine this situation might not be permanent if we can move to a system were we can rely
+ * solely on the API, but for the purposes of the first change being React UFO API compatible,
+ * we'll need to do this.
+ */
+
+let contextManager;
+export function setContextManager(ctxMgr) {
+  contextManager = ctxMgr;
+}
+export function getContextManager() {
+  return contextManager;
+}
+
+/** 
+ * The below is shamelessly borrowed from StackContextManager from @opentelemetry/sdk-trace-web
+ * Using this rather than importing the entire package because this is all we need for now
+ */
+
+/**
+ * UFO Context Manager for managing the state in web
+ * it doesn't fully support the async calls though
+ */
+export class UFOContextManager {
+  constructor() {
+    /**
+     * whether the context manager is enabled or not
+     */
+    _defineProperty(this, "_enabled", false);
+    /**
+     * Keeps the reference to current context
+     */
+    _defineProperty(this, "_currentContext", ROOT_CONTEXT);
+  }
+  /**
+   *
+   * @param context
+   * @param target Function to be executed within the context
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  _bindFunction(context = ROOT_CONTEXT, target) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const manager = this;
+    const contextWrapper = function (...args) {
+      return manager.with(context, () => target.apply(this, args));
+    };
+    Object.defineProperty(contextWrapper, 'length', {
+      enumerable: false,
+      configurable: true,
+      writable: false,
+      value: target.length
+    });
+    return contextWrapper;
+  }
+
+  /**
+   * Returns the active context
+   */
+  active() {
+    return this._currentContext;
+  }
+
+  /**
+   * Binds a the certain context or the active one to the target function and then returns the target
+   * @param context A context (span) to be bind to target
+   * @param target a function or event emitter. When target or one of its callbacks is called,
+   *  the provided context will be used as the active context for the duration of the call.
+   */
+  bind(context, target) {
+    // if no specific context to propagate is given, we use the current one
+    if (context === undefined) {
+      context = this.active();
+    }
+    if (typeof target === 'function') {
+      return this._bindFunction(context, target);
+    }
+    return target;
+  }
+
+  /**
+   * Disable the context manager (clears the current context)
+   */
+  disable() {
+    this._currentContext = ROOT_CONTEXT;
+    this._enabled = false;
+    return this;
+  }
+
+  /**
+   * Enables the context manager and creates a default(root) context
+   */
+  enable() {
+    if (this._enabled) {
+      return this;
+    }
+    this._enabled = true;
+    this._currentContext = ROOT_CONTEXT;
+    return this;
+  }
+
+  /**
+   * Calls the callback function [fn] with the provided [context]. If [context] is undefined then it will use the window.
+   * The context will be set as active
+   * @param context
+   * @param fn Callback function
+   * @param thisArg optional receiver to be used for calling fn
+   * @param args optional arguments forwarded to fn
+   */
+  with(context, fn, thisArg, ...args) {
+    const previousContext = this._currentContext;
+    this._currentContext = context || ROOT_CONTEXT;
+    try {
+      return fn.call(thisArg, ...args);
+    } finally {
+      this._currentContext = previousContext;
+    }
+  }
+
+  /**
+   * Sets the active context.
+   * This function is an extension of the OTel spec, in order to facilitate the current API of React UFO trace context handling.
+   * It doesn't keep track of any previously set active contexts, because it's assumed (for now) that only one trace context
+   * will ever exist at a time.
+   * The next step in the work to improve tracing in the FE will likely remove this function as we need to track the 
+   * hierarchy of contexts (likely using the `with()` function above).
+   * @param context The context to be made the globally active one 
+   */
+  setActive(context) {
+    if (this._enabled) {
+      this._currentContext = context;
+    }
+  }
+}

package/dist/es2019/experience-trace-id-context/index.js

@@ -1,34 +1,90 @@
+import { context, createContextKey, ROOT_CONTEXT } from '@opentelemetry/api';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getContextManager, UFOContextManager } from './context-manager';
 import { makeTraceHttpRequestHeaders } from './utils/make-trace-http-request-headers';
 const state = {
   context: null
 };
+const traceIdKey = createContextKey("traceId");
+const spanIdKey = createContextKey("spanId");
+const experienceTypeKey = createContextKey("type");
+
+// DO NOT CALL THIS FUNCTION DIRECTLY!!!!
+// It is only to be called by React UFO libraries for the automatic handling of trace context for experiences.
+// Calling this may cause trace context to be broken
 export function generateSpanId() {
   return Array.from(new Array(16), () => Math.floor(Math.random() * 16).toString(16)).join('');
 }
+
+// DO NOT CALL THIS FUNCTION DIRECTLY!!!!
+// It is only to be called by React UFO libraries for the automatic handling of trace context for experiences.
+// Calling this may cause trace context to be broken
 export function setInteractionActiveTrace(interactionId, experienceType) {
   setActiveTrace(interactionId.replace(/-/g, ''), generateSpanId(), experienceType);
 }
+
+// DO NOT CALL THIS FUNCTION DIRECTLY!!!!
+// It is only to be called by React UFO libraries for the automatic handling of trace context for experiences.
+// Calling this may cause trace context to be broken
 export function setActiveTrace(traceId, spanId, type) {
-  state.context = {
-    traceId,
-    spanId,
-    type
-  };
+  if (fg('platform_ufo_enable_otel_context_manager')) {
+    const activeTraceContext = ROOT_CONTEXT.setValue(traceIdKey, traceId).setValue(spanIdKey, spanId).setValue(experienceTypeKey, type);
+
+    // Now we need to get the global Context Manager and set the active context
+    // Using type assertion because we've "extended" the ContextManager type
+    if (getContextManager() instanceof UFOContextManager) {
+      let contextManager = getContextManager();
+      contextManager.setActive(activeTraceContext);
+    }
+  } else {
+    state.context = {
+      traceId,
+      spanId,
+      type
+    };
+  }
 }
 export function getActiveTrace() {
-  return state.context || undefined;
+  if (fg('platform_ufo_enable_otel_context_manager')) {
+    // Get trace context from active context
+    const activeTraceContext = {
+      traceId: String(context.active().getValue(traceIdKey)),
+      spanId: String(context.active().getValue(spanIdKey)),
+      type: String(context.active().getValue(experienceTypeKey))
+    };
+
+    // Return activeTraceContext if traceId and spanId are not "undefined"
+    return activeTraceContext.traceId !== 'undefined' && activeTraceContext.spanId !== 'undefined' ? activeTraceContext : undefined;
+  } else {
+    return state.context || undefined;
+  }
 }
+
+// DO NOT CALL THIS FUNCTION DIRECTLY!!!!
+// It is only to be called by React UFO libraries for the automatic handling of trace context for experiences.
+// Calling this may cause trace context to be broken
 export function clearActiveTrace() {
-  state.context = null;
+  if (fg('platform_ufo_enable_otel_context_manager')) {
+    // Now we need to get the global Context Manager and set the active context
+    // Using type assertion because we've "extended" the ContextManager type
+    if (getContextManager() instanceof UFOContextManager) {
+      let contextManager = getContextManager();
+
+      // ROOT_CONTEXT is an empty context used to initialise ContextManagers
+      contextManager.setActive(ROOT_CONTEXT);
+    }
+  } else {
+    state.context = null;
+  }
 }
 export function getActiveTraceHttpRequestHeaders(_url) {
-  if (state.context === null) {
+  if (getActiveTrace() === undefined) {
     return null;
   }
   const {
     traceId,
     spanId
-  } = state.context;
+  } = getActiveTrace();
   return makeTraceHttpRequestHeaders(traceId, spanId);
 }
 export function getActiveTraceAsQueryParams(_url) {

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

@@ -1,8 +1,10 @@
+import { context } from '@opentelemetry/api';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { startLighthouseObserver } from '../additional-payload';
 import { setUFOConfig } from '../config';
 import { experimentalVC, sinkExperimentalHandler } from '../create-experimental-interaction-metrics-payload';
 import { sinkExtraSearchPageInteractionHandler } from '../create-extra-search-page-interaction-payload';
+import { setContextManager, UFOContextManager } from '../experience-trace-id-context/context-manager';
 import { setupHiddenTimingCapture } from '../hidden-timing';
 import { interactionExtraMetrics, postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
 import { getPerformanceObserver } from '../interactions-performance-observer';
@@ -131,6 +133,15 @@ export function init(analyticsWebClientAsync, config) {
   initialisePressureObserver();
   initialiseMemoryObserver();
   setUFOConfig(config);
+  if (fg('platform_ufo_enable_otel_context_manager')) {
+    // Configure global OTel context manager
+    const contextManager = new UFOContextManager();
+    // set the contextmanager somewhere we can reference it later
+    setContextManager(contextManager);
+    // Register the context manager with the global OTel API
+    contextManager.enable();
+    context.setGlobalContextManager(contextManager);
+  }
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var _config$experimentalI, _config$extraInteract;
     const vcOptions = {
@@ -164,11 +175,10 @@ export function init(analyticsWebClientAsync, config) {
   Promise.all([analyticsWebClientAsync, import( /* webpackChunkName: "create-payloads" */'../create-payload'), import( /* webpackChunkName: "create-post-interaction-log-payload" */'../create-post-interaction-log-payload'), import( /* webpackChunkName: "create-interaction-extra-metrics-payload" */'../create-interaction-extra-metrics-payload'), import( /* webpackChunkName: "create-terminal-error-payload@atlaskit-internal_terminal_errors" */'../create-terminal-error-payload')]).then(([awc, payloadPackage, createPostInteractionLogPayloadPackage, createInteractionExtraMetricsPayloadPackage, createTerminalErrorPayloadPackage]) => {
     if (awc.getAnalyticsWebClientPromise) {
       awc.getAnalyticsWebClientPromise().then(client => {
-        var _config$experimentalI2, _config$postInteracti, _config$extraInteract2, _config$extraSearchPa;
+        var _config$terminalError, _config$experimentalI2, _config$postInteracti, _config$extraInteract2, _config$extraSearchPa;
         const instance = client.getInstance();
         sinkInteraction(instance, payloadPackage);
-        // TODO: make this configurable
-        if (fg('platform_ufo_enable_terminal_errors')) {
+        if (config !== null && config !== void 0 && (_config$terminalError = config.terminalErrors) !== null && _config$terminalError !== void 0 && _config$terminalError.enabled && fg('platform_ufo_enable_terminal_errors')) {
           sinkTerminalErrors(instance, createTerminalErrorPayloadPackage.default);
         }
         if (config !== null && config !== void 0 && (_config$experimentalI2 = config.experimentalInteractionMetrics) !== null && _config$experimentalI2 !== void 0 && _config$experimentalI2.enabled) {
@@ -185,10 +195,9 @@ export function init(analyticsWebClientAsync, config) {
         }
       });
     } else if (awc.sendOperationalEvent) {
-      var _config$experimentalI3, _config$postInteracti2, _config$extraInteract3, _config$extraSearchPa2;
+      var _config$terminalError2, _config$experimentalI3, _config$postInteracti2, _config$extraInteract3, _config$extraSearchPa2;
       sinkInteraction(awc, payloadPackage);
-      // TODO: make this configurable
-      if (fg('platform_ufo_enable_terminal_errors')) {
+      if (config !== null && config !== void 0 && (_config$terminalError2 = config.terminalErrors) !== null && _config$terminalError2 !== void 0 && _config$terminalError2.enabled && fg('platform_ufo_enable_terminal_errors')) {
         sinkTerminalErrors(awc, createTerminalErrorPayloadPackage.default);
       }
       if (config !== null && config !== void 0 && (_config$experimentalI3 = config.experimentalInteractionMetrics) !== null && _config$experimentalI3 !== void 0 && _config$experimentalI3.enabled) {

package/dist/es2019/typing-performance-tracing/index.js

@@ -2,7 +2,6 @@ import { useEffect, useRef } from 'react';
 import { unstable_IdlePriority as idlePriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as createUUID } from 'uuid';
-import { fg } from '@atlaskit/platform-feature-flags';
 import coinflip from '../coinflip';
 import { getInteractionRate, getTypingPerformanceTracingMethod } from '../config';
 import { addMetadata, addNewInteraction, tryComplete } from '../interaction-metrics';
@@ -73,13 +72,13 @@ function typingPerformanceTracingTimeout(element, name, rate) {
       tsubmit = setTimeout(end, 2000); // debounce
     }, 0);
   };
-  if (typeof (element === null || element === void 0 ? void 0 : element.addEventListener) !== 'function' && fg('jfp-magma-ufo-event-listener-error')) {
+  if (typeof (element === null || element === void 0 ? void 0 : element.addEventListener) !== 'function') {
     return;
   }
   // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
   element.addEventListener('keypress', onKeyPressHandler);
   return () => {
-    if (typeof (element === null || element === void 0 ? void 0 : element.removeEventListener) !== 'function' && fg('jfp-magma-ufo-event-listener-error')) {
+    if (typeof (element === null || element === void 0 ? void 0 : element.removeEventListener) !== 'function') {
       return;
     }
     // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -150,13 +149,13 @@ function typingPerformanceTracingTimeoutNoAlloc(element, name, rate) {
       tsubmit = setTimeout(end, 2000); // debounce
     }, 0);
   };
-  if (typeof (element === null || element === void 0 ? void 0 : element.addEventListener) !== 'function' && fg('jfp-magma-ufo-event-listener-error')) {
+  if (typeof (element === null || element === void 0 ? void 0 : element.addEventListener) !== 'function') {
     return;
   }
   // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
   element.addEventListener('keypress', onKeyPressHandler);
   return () => {
-    if (typeof (element === null || element === void 0 ? void 0 : element.removeEventListener) !== 'function' && fg('jfp-magma-ufo-event-listener-error')) {
+    if (typeof (element === null || element === void 0 ? void 0 : element.removeEventListener) !== 'function') {
       return;
     }
     // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -243,23 +242,17 @@ function typingPerformanceTracingMutationObserver(element, name, rate) {
     childList: true,
     subtree: true
   });
-  if (typeof (element === null || element === void 0 ? void 0 : element.addEventListener) !== 'function' && fg('jfp-magma-ufo-event-listener-error')) {
+  if (typeof (element === null || element === void 0 ? void 0 : element.addEventListener) !== 'function') {
     return () => mo.disconnect();
   }
   // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
   element.addEventListener('keypress', onKeyPressHandler);
   return () => {
-    if (fg('jfp-magma-ufo-event-listener-error')) {
-      if (typeof (element === null || element === void 0 ? void 0 : element.removeEventListener) === 'function') {
-        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-        element.removeEventListener('keypress', onKeyPressHandler);
-      }
-      mo.disconnect();
-    } else {
+    if (typeof (element === null || element === void 0 ? void 0 : element.removeEventListener) === 'function') {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element.removeEventListener('keypress', onKeyPressHandler);
-      mo.disconnect();
     }
+    mo.disconnect();
   };
 }
 const typingPerformanceTracingMethods = {

package/dist/es2019/vc/index.js

@@ -65,7 +65,7 @@ export class VCObserverWrapper {
         startTime
       });
     }
-    if (isVCRevisionEnabled('fy25.03', experienceKey)) {
+    if (isVCRevisionEnabled('fy25.03', experienceKey) || isVCRevisionEnabled('fy26.04', experienceKey)) {
       var _this$newVCObserver;
       (_this$newVCObserver = this.newVCObserver) === null || _this$newVCObserver === void 0 ? void 0 : _this$newVCObserver.start({
         startTime
@@ -80,7 +80,7 @@ export class VCObserverWrapper {
       var _this$oldVCObserver2;
       (_this$oldVCObserver2 = this.oldVCObserver) === null || _this$oldVCObserver2 === void 0 ? void 0 : _this$oldVCObserver2.stop();
     }
-    if (isVCRevisionEnabled('fy25.03', experienceKey)) {
+    if (isVCRevisionEnabled('fy25.03', experienceKey) || isVCRevisionEnabled('fy26.04', experienceKey)) {
       var _this$newVCObserver2;
       (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 ? void 0 : _this$newVCObserver2.stop();
     }
@@ -93,7 +93,7 @@ export class VCObserverWrapper {
     return (_this$oldVCObserver$g = (_this$oldVCObserver3 = this.oldVCObserver) === null || _this$oldVCObserver3 === void 0 ? void 0 : _this$oldVCObserver3.getVCRawData()) !== null && _this$oldVCObserver$g !== void 0 ? _this$oldVCObserver$g : null;
   }
   async getVCResult(param) {
-    var _this$oldVCObserver4, _this$newVCObserver3, _ref;
+    var _this$oldVCObserver4, _this$newVCObserver3, _v3v4Result$, _ref;
     const {
       experienceKey,
       include3p,
@@ -102,7 +102,7 @@ export class VCObserverWrapper {
       includeRawData
     } = param;
     const v1v2Result = isVCRevisionEnabled('fy25.01', experienceKey) || isVCRevisionEnabled('fy25.02', experienceKey) ? await ((_this$oldVCObserver4 = this.oldVCObserver) === null || _this$oldVCObserver4 === void 0 ? void 0 : _this$oldVCObserver4.getVCResult(param)) : {};
-    const v3v4Result = isVCRevisionEnabled('fy25.03', experienceKey) ? await ((_this$newVCObserver3 = this.newVCObserver) === null || _this$newVCObserver3 === void 0 ? void 0 : _this$newVCObserver3.getVCResult({
+    const v3v4Result = isVCRevisionEnabled('fy25.03', experienceKey) || isVCRevisionEnabled('fy26.04', experienceKey) ? await ((_this$newVCObserver3 = this.newVCObserver) === null || _this$newVCObserver3 === void 0 ? void 0 : _this$newVCObserver3.getVCResult({
       start: param.start,
       stop: param.stop,
       interactionId: param.interactionId,
@@ -117,10 +117,10 @@ export class VCObserverWrapper {
       includeSSRInV3: param.includeSSRInV3,
       rawDataStopTime: param.rawDataStopTime
     })) : [];
-    if (!v3v4Result) {
+    if (!v3v4Result || v3v4Result.length === 0) {
       return v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {};
     }
-    const ssrRatio = v3v4Result[0].ssrRatio;
+    const ssrRatio = v3v4Result === null || v3v4Result === void 0 ? void 0 : (_v3v4Result$ = v3v4Result[0]) === null || _v3v4Result$ === void 0 ? void 0 : _v3v4Result$.ssrRatio;
     return {
       ...(includeSSRRatio && ssrRatio !== undefined ? {
         'ufo:vc:ssrRatio': ssrRatio

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { fg } from '@atlaskit/platform-feature-flags';
 const ANCESTOR_LOOKUP_LIMIT = 10;
 const PAGE_LAYOUT_ID = 'page-layout.root';
 export class SSRPlaceholderHandlers {
@@ -277,8 +276,7 @@ export class SSRPlaceholderHandlers {
     });
   }
   validateReactComponentMatchToPlaceholderV4(el) {
-    el = fg('platform_ufo_v4_fix_nested_ssr_placeholder') ? this.findNearestPlaceholderOrContainer(el, 2) // We are using 2 due to over-eagerness of the default, only check itself and 1 ancestor
-    : this.findNearestPlaceholderContainerIfIgnored(el);
+    el = this.findNearestPlaceholderOrContainer(el, 2); // We are using 2 due to over-eagerness of the default, only check itself and 1 ancestor
     const id = this.getPlaceholderReplacementId(el);
     return this.staticPlaceholders.has(id);
   }

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

@@ -9,9 +9,9 @@ try{return acc+item.cssRules.length;}catch(_unused3){return acc;}},0);var styleE
 getInitialPageLoadSSRMetrics=function getInitialPageLoadSSRMetrics(){var _config$ssr;if(!isPageLoad){return{};}var config=getConfig();var SSRDoneTimeValue=getSSRDoneTimeValue(config);var SSRDoneTime=SSRDoneTimeValue!==undefined?{SSRDoneTime:Math.round(SSRDoneTimeValue)}:{};var isBM3ConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;var isUFOConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp||!!(config!==null&&config!==void 0&&(_config$ssr=config.ssr)!==null&&_config$ssr!==void 0&&_config$ssr.getSSRDoneTime);if(!experimental&&(isBM3ConfigSSRDoneAsFmp||isUFOConfigSSRDoneAsFmp)&&SSRDoneTimeValue!==undefined){try{performance.mark("FMP",{startTime:SSRDoneTimeValue,detail:{devtools:{dataType:'marker'}}});}catch(_unused6){}}return _objectSpread(_objectSpread({},SSRDoneTime),{},{isBM3ConfigSSRDoneAsFmp:isBM3ConfigSSRDoneAsFmp,isUFOConfigSSRDoneAsFmp:isUFOConfigSSRDoneAsFmp});};pageLoadInteractionMetrics=getInitialPageLoadSSRMetrics();// Detailed payload. Page visibility = visible
 getDetailedInteractionMetrics=function getDetailedInteractionMetrics(resourceTimings){if(experimental||window.__UFO_COMPACT_PAYLOAD__||!isDetailedPayload){return{};}var spans=[].concat(_toConsumableArray(interaction.spans),_toConsumableArray(atlaskitInteractionSpans));atlaskitInteractionSpans.length=0;var shouldInclude3pHolds=shouldUseRawDataThirdPartyBehavior(ufoName,type);var basePayload={errors:interaction.errors.map(function(_ref2){var labelStack=_ref2.labelStack,others=_objectWithoutProperties(_ref2,_excluded);return _objectSpread(_objectSpread({},others),{},{labelStack:labelStack&&optimizeLabelStack(labelStack,getReactUFOPayloadVersion(interaction.type))});}),holdActive:_toConsumableArray(interaction.holdActive.values()),redirects:optimizeRedirects(interaction.redirects,start),holdInfo:optimizeHoldInfo(experimental?interaction.holdExpInfo:interaction.holdInfo,start,getReactUFOPayloadVersion(interaction.type)),spans:optimizeSpans(spans,start,getReactUFOPayloadVersion(interaction.type)),requestInfo:optimizeRequestInfo(interaction.requestInfo,start,getReactUFOPayloadVersion(interaction.type)),customTimings:optimizeCustomTimings(interaction.customTimings,start),bundleEvalTimings:objectToArray(getBundleEvalTimings(start)),resourceTimings:objectToArray(resourceTimings)};// Include third-party holds when feature flag is active
 if(shouldInclude3pHolds){var _interaction$hold3pIn;return _objectSpread(_objectSpread({},basePayload),{},{hold3pActive:interaction.hold3pActive?_toConsumableArray(interaction.hold3pActive.values()):[],hold3pInfo:optimizeHoldInfo((_interaction$hold3pIn=interaction.hold3pInfo)!==null&&_interaction$hold3pIn!==void 0?_interaction$hold3pIn:[],start,getReactUFOPayloadVersion(interaction.type))});}return basePayload;};// Page load & detailed payload
-getPageLoadDetailedInteractionMetrics=function getPageLoadDetailedInteractionMetrics(){var _config$ssr2,_config$ssr2$getSSRTi;if(!isPageLoad||!isDetailedPayload){return{};}var initialPageLoadExtraTimings=objectToArray(initialPageLoadExtraTiming.getTimings());var config=getConfig();var defaultSSRTimings=objectToArray(ssr.getSSRTimings());var ssrTimingsFromConfig=config===null||config===void 0||(_config$ssr2=config.ssr)===null||_config$ssr2===void 0||(_config$ssr2$getSSRTi=_config$ssr2.getSSRTimings)===null||_config$ssr2$getSSRTi===void 0?void 0:_config$ssr2$getSSRTi.call(_config$ssr2);return{initialPageLoadExtraTimings:initialPageLoadExtraTimings,SSRTimings:ssrTimingsFromConfig?[].concat(_toConsumableArray(ssrTimingsFromConfig),_toConsumableArray(defaultSSRTimings)):defaultSSRTimings};};if(experimental){expTTAI=getTTAI(interaction);}else{regularTTAI=getTTAI(interaction);}newUFOName=sanitizeUfoName(ufoName);resourceTimings=getResourceTimings(start,end);_context.t0=Promise;_context.t1=vcMetrics;if(_context.t1){_context.next=29;break;}_context.next=28;return getVCMetrics(interaction);case 28:_context.t1=_context.sent;case 29:_context.t2=_context.t1;_context.t3=experimental?getExperimentalVCMetrics(interaction):Promise.resolve(undefined);_context.t4=getPaintMetricsToLegacyFormat(type,end);_context.t5=getBatteryInfoToLegacyFormat();_context.t6=[_context.t2,_context.t3,_context.t4,_context.t5];_context.next=36;return _context.t0.all.call(_context.t0,_context.t6);case 36:_yield$Promise$all=_context.sent;_yield$Promise$all2=_slicedToArray(_yield$Promise$all,4);finalVCMetrics=_yield$Promise$all2[0];experimentalMetrics=_yield$Promise$all2[1];paintMetrics=_yield$Promise$all2[2];batteryInfo=_yield$Promise$all2[3];if(!experimental){addPerformanceMeasures(interaction.start,_toConsumableArray((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[]));}getReactHydrationStats=function getReactHydrationStats(){if(!hydration){return{};}return{hydration:hydration};};payload={actionSubject:'experience',action:'measured',eventType:'operational',source:'measured',tags:['observability'],attributes:{properties:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({// basic
+getPageLoadDetailedInteractionMetrics=function getPageLoadDetailedInteractionMetrics(){var _config$ssr2,_config$ssr2$getSSRTi;if(!isPageLoad||!isDetailedPayload){return{};}var initialPageLoadExtraTimings=objectToArray(initialPageLoadExtraTiming.getTimings());var config=getConfig();var defaultSSRTimings=objectToArray(ssr.getSSRTimings());var ssrTimingsFromConfig=config===null||config===void 0||(_config$ssr2=config.ssr)===null||_config$ssr2===void 0||(_config$ssr2$getSSRTi=_config$ssr2.getSSRTimings)===null||_config$ssr2$getSSRTi===void 0?void 0:_config$ssr2$getSSRTi.call(_config$ssr2);return{initialPageLoadExtraTimings:initialPageLoadExtraTimings,SSRTimings:ssrTimingsFromConfig?[].concat(_toConsumableArray(ssrTimingsFromConfig),_toConsumableArray(defaultSSRTimings)):defaultSSRTimings};};if(experimental){expTTAI=getTTAI(interaction);}else{regularTTAI=getTTAI(interaction);}newUFOName=sanitizeUfoName(ufoName);resourceTimings=getResourceTimings(start,end);_context.t0=Promise;_context.t1=vcMetrics;if(_context.t1){_context.next=29;break;}_context.next=28;return getVCMetrics(interaction);case 28:_context.t1=_context.sent;case 29:_context.t2=_context.t1;_context.t3=experimental?getExperimentalVCMetrics(interaction):Promise.resolve(undefined);_context.t4=getPaintMetricsToLegacyFormat(type,end);_context.t5=getBatteryInfoToLegacyFormat();_context.t6=[_context.t2,_context.t3,_context.t4,_context.t5];_context.next=36;return _context.t0.all.call(_context.t0,_context.t6);case 36:_yield$Promise$all=_context.sent;_yield$Promise$all2=_slicedToArray(_yield$Promise$all,4);finalVCMetrics=_yield$Promise$all2[0];experimentalMetrics=_yield$Promise$all2[1];paintMetrics=_yield$Promise$all2[2];batteryInfo=_yield$Promise$all2[3];if(!experimental){addPerformanceMeasures(interaction.start,_toConsumableArray((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[]));}getReactHydrationStats=function getReactHydrationStats(){if(!hydration){return{};}return{hydration:hydration};};payload={actionSubject:'experience',action:'measured',eventType:'operational',source:'measured',tags:['observability'],attributes:{properties:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({// basic
 'event:hostname':((_window$location=window.location)===null||_window$location===void 0?void 0:_window$location.hostname)||'unknown','event:product':config.product,'event:population':config.population,'event:schema':'1.0.0','event:sizeInKb':0,'event:source':{name:'react-ufo/web',version:getReactUFOPayloadVersion(interaction.type)},'event:region':config.region||'unknown','experience:key':experimental?'custom.experimental-interaction-metrics':'custom.interaction-metrics','experience:name':newUFOName,// Include CPU usage monitoring data
-'event:cpu:usage':createPressureStateReport(interaction.start,interaction.end),'event:memory:usage':createMemoryStateReport(interaction.start,interaction.end)},criticalPayloadCount!==undefined?{'ufo:multipayload':true,'ufo:criticalPayloadCount':criticalPayloadCount}:{}),fg('platform_ufo_browser_backgrounded_abort_timestamp')?{'ufo:pageVisibilityHiddenTimestamp':getEarliestHiddenTiming(interaction.start,interaction.end)}:{}),fg('platform_ufo_native_pagevisibility_monitoring')?{'ufo:wasPageHiddenBeforeInit':getHasHiddenTimingBeforeSetup()}:{}),fg('platform_ufo_is_opened_in_background')?{'ufo:isOpenedInBackground':isOpenedInBackground(interaction.type)}:{}),getBrowserMetadataToLegacyFormat()),batteryInfo),getSSRProperties(type)),getAssetsMetrics(interaction,pageLoadInteractionMetrics===null||pageLoadInteractionMetrics===void 0?void 0:pageLoadInteractionMetrics.SSRDoneTime)),getPPSMetrics(interaction)),paintMetrics),getNavigationMetricsToLegacyFormat(type)),finalVCMetrics),experimentalMetrics),(_config$additionalPay=config.additionalPayloadData)===null||_config$additionalPay===void 0?void 0:_config$additionalPay.call(config,interaction)),getTracingContextData(interaction)),getStylesheetMetrics()),getErrorCounts(interaction)),getReactHydrationStats()),{},{interactionMetrics:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({namePrefix:config.namePrefix||'',segmentPrefix:config.segmentPrefix||'',interactionId:interactionId,pageVisibilityAtTTI:pageVisibilityAtTTI,pageVisibilityAtTTAI:pageVisibilityAtTTAI,experimental__pageVisibilityAtTTI:moreAccuratePageVisibilityAtTTI,experimental__pageVisibilityAtTTAI:moreAccuratePageVisibilityAtTTAI,// raw interaction metrics
+'event:cpu:usage':createPressureStateReport(interaction.start,interaction.end),'event:memory:usage':createMemoryStateReport(interaction.start,interaction.end)},criticalPayloadCount!==undefined?{'ufo:multipayload':true,'ufo:criticalPayloadCount':criticalPayloadCount}:{}),fg('platform_ufo_browser_backgrounded_abort_timestamp')?{'ufo:pageVisibilityHiddenTimestamp':getEarliestHiddenTiming(interaction.start,interaction.end)}:{}),fg('platform_ufo_native_pagevisibility_monitoring')?{'ufo:wasPageHiddenBeforeInit':getHasHiddenTimingBeforeSetup()}:{}),{},{'ufo:isOpenedInBackground':isOpenedInBackground(interaction.type)},getBrowserMetadataToLegacyFormat()),batteryInfo),getSSRProperties(type)),getAssetsMetrics(interaction,pageLoadInteractionMetrics===null||pageLoadInteractionMetrics===void 0?void 0:pageLoadInteractionMetrics.SSRDoneTime)),getPPSMetrics(interaction)),paintMetrics),getNavigationMetricsToLegacyFormat(type)),finalVCMetrics),experimentalMetrics),(_config$additionalPay=config.additionalPayloadData)===null||_config$additionalPay===void 0?void 0:_config$additionalPay.call(config,interaction)),getTracingContextData(interaction)),getStylesheetMetrics()),getErrorCounts(interaction)),getReactHydrationStats()),{},{interactionMetrics:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({namePrefix:config.namePrefix||'',segmentPrefix:config.segmentPrefix||'',interactionId:interactionId,pageVisibilityAtTTI:pageVisibilityAtTTI,pageVisibilityAtTTAI:pageVisibilityAtTTAI,experimental__pageVisibilityAtTTI:moreAccuratePageVisibilityAtTTI,experimental__pageVisibilityAtTTAI:moreAccuratePageVisibilityAtTTAI,// raw interaction metrics
 rate:rate,routeName:routeName,type:type,abortReason:abortReason,featureFlags:featureFlags,previousInteractionName:previousInteractionName,isPreviousInteractionAborted:isPreviousInteractionAborted,abortedByInteractionName:abortedByInteractionName,// performance
 apdex:optimizeApdex(interaction.apdex,getReactUFOPayloadVersion(interaction.type)),end:Math.round(end)},interaction.end3p?{end3p:Math.round(interaction.end3p)}:{}),{},{start:Math.round(start),segments:getReactUFOPayloadVersion(interaction.type)==='2.0.0'?segmentTree:getOldSegmentsLabelStack(segments,interaction.type),marks:optimizeMarks(interaction.marks,getReactUFOPayloadVersion(interaction.type)),customData:optimizeCustomData(interaction),reactProfilerTimings:optimizeReactProfilerTimings(interaction.reactProfilerTimings,start,getReactUFOPayloadVersion(interaction.type)),minorInteractions:interaction.minorInteractions},responsiveness?{responsiveness:responsiveness}:{}),labelStack),pageLoadInteractionMetrics),getDetailedInteractionMetrics(resourceTimings)),getPageLoadDetailedInteractionMetrics()),getBm3TrackerTimings(interaction)),{},{'metric:ttai':experimental?regularTTAI||expTTAI:undefined,'metric:experimental:ttai':expTTAI},unknownElementName?{unknownElementName:unknownElementName}:{}),unknownElementHierarchy?{unknownElementHierarchy:unknownElementHierarchy}:{}),'ufo:payloadTime':roundEpsilon(performance.now()-interactionPayloadStart)})}};if(experimental){regularTTAI=undefined;expTTAI=undefined;}if(fg('platform_ufo_enable_vc_raw_data')){size=getPayloadSize(payload.attributes.properties);vcRev=payload.attributes.properties['ufo:vc:rev'];rawData=vcRev.find(function(item){return item.revision==='raw-handler';});if(rawData){rawDataSize=getPayloadSize(rawData);payload.attributes.properties['ufo:vc:raw:size']=rawDataSize;if(size>MAX_PAYLOAD_SIZE&&Array.isArray(vcRev)&&vcRev.length>0){payload.attributes.properties['ufo:vc:rev']=vcRev.filter(function(item){return item.revision!=='raw-handler';});payload.attributes.properties['ufo:vc:raw:removed']=true;}}payload.attributes.properties['event:sizeInKb']=getPayloadSize(payload.attributes.properties);}else{payload.attributes.properties['event:sizeInKb']=getPayloadSize(payload.attributes.properties);}// in order of importance, first one being least important
 // we can add more fields as necessary

package/dist/esm/experience-trace-id-context/context-manager.js

@@ -0,0 +1,172 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ROOT_CONTEXT } from '@opentelemetry/api';
+
+/**
+ * We need to store a reference to the Context manager so that we can get it later.
+ * This is because the OTel JS API doesn't allow us to get the registered context manager,
+ * and we need to get it because we need to call a function that's not available in the OTel API:
+ * `setActive`. The OTel JS API design doesn't allow us to manually set the active context
+ * despite the spec allowing for the capability. Sigh.
+ * 
+ * I imagine this situation might not be permanent if we can move to a system were we can rely
+ * solely on the API, but for the purposes of the first change being React UFO API compatible,
+ * we'll need to do this.
+ */
+
+var contextManager;
+export function setContextManager(ctxMgr) {
+  contextManager = ctxMgr;
+}
+export function getContextManager() {
+  return contextManager;
+}
+
+/** 
+ * The below is shamelessly borrowed from StackContextManager from @opentelemetry/sdk-trace-web
+ * Using this rather than importing the entire package because this is all we need for now
+ */
+
+/**
+ * UFO Context Manager for managing the state in web
+ * it doesn't fully support the async calls though
+ */
+export var UFOContextManager = /*#__PURE__*/function () {
+  function UFOContextManager() {
+    _classCallCheck(this, UFOContextManager);
+    /**
+     * whether the context manager is enabled or not
+     */
+    _defineProperty(this, "_enabled", false);
+    /**
+     * Keeps the reference to current context
+     */
+    _defineProperty(this, "_currentContext", ROOT_CONTEXT);
+  }
+  return _createClass(UFOContextManager, [{
+    key: "_bindFunction",
+    value:
+    /**
+     *
+     * @param context
+     * @param target Function to be executed within the context
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+    function _bindFunction() {
+      var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ROOT_CONTEXT;
+      var target = arguments.length > 1 ? arguments[1] : undefined;
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      var manager = this;
+      var contextWrapper = function contextWrapper() {
+        var _this = this;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return manager.with(context, function () {
+          return target.apply(_this, args);
+        });
+      };
+      Object.defineProperty(contextWrapper, 'length', {
+        enumerable: false,
+        configurable: true,
+        writable: false,
+        value: target.length
+      });
+      return contextWrapper;
+    }
+
+    /**
+     * Returns the active context
+     */
+  }, {
+    key: "active",
+    value: function active() {
+      return this._currentContext;
+    }
+
+    /**
+     * Binds a the certain context or the active one to the target function and then returns the target
+     * @param context A context (span) to be bind to target
+     * @param target a function or event emitter. When target or one of its callbacks is called,
+     *  the provided context will be used as the active context for the duration of the call.
+     */
+  }, {
+    key: "bind",
+    value: function bind(context, target) {
+      // if no specific context to propagate is given, we use the current one
+      if (context === undefined) {
+        context = this.active();
+      }
+      if (typeof target === 'function') {
+        return this._bindFunction(context, target);
+      }
+      return target;
+    }
+
+    /**
+     * Disable the context manager (clears the current context)
+     */
+  }, {
+    key: "disable",
+    value: function disable() {
+      this._currentContext = ROOT_CONTEXT;
+      this._enabled = false;
+      return this;
+    }
+
+    /**
+     * Enables the context manager and creates a default(root) context
+     */
+  }, {
+    key: "enable",
+    value: function enable() {
+      if (this._enabled) {
+        return this;
+      }
+      this._enabled = true;
+      this._currentContext = ROOT_CONTEXT;
+      return this;
+    }
+
+    /**
+     * Calls the callback function [fn] with the provided [context]. If [context] is undefined then it will use the window.
+     * The context will be set as active
+     * @param context
+     * @param fn Callback function
+     * @param thisArg optional receiver to be used for calling fn
+     * @param args optional arguments forwarded to fn
+     */
+  }, {
+    key: "with",
+    value: function _with(context, fn, thisArg) {
+      var previousContext = this._currentContext;
+      this._currentContext = context || ROOT_CONTEXT;
+      try {
+        for (var _len2 = arguments.length, args = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
+          args[_key2 - 3] = arguments[_key2];
+        }
+        return fn.call.apply(fn, [thisArg].concat(args));
+      } finally {
+        this._currentContext = previousContext;
+      }
+    }
+
+    /**
+     * Sets the active context.
+     * This function is an extension of the OTel spec, in order to facilitate the current API of React UFO trace context handling.
+     * It doesn't keep track of any previously set active contexts, because it's assumed (for now) that only one trace context
+     * will ever exist at a time.
+     * The next step in the work to improve tracing in the FE will likely remove this function as we need to track the 
+     * hierarchy of contexts (likely using the `with()` function above).
+     * @param context The context to be made the globally active one 
+     */
+  }, {
+    key: "setActive",
+    value: function setActive(context) {
+      if (this._enabled) {
+        this._currentContext = context;
+      }
+    }
+  }]);
+}();