@atlaskit/react-ufo 5.0.13 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 5.1.0
+
+### Minor Changes
+
+- [`c4ed6da74c937`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c4ed6da74c937) -
+  OBSRVE-2971 Adding the OTel Context Manager to handle trace context for React UFO tracing
+
+### Patch Changes
+
+- [`cd27ffb264a01`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd27ffb264a01) -
+  Added config option for sending the terminal error metric
+- [`ac82093b2419b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ac82093b2419b) -
+  bugfixes with disabling TTVC v3
+
 ## 5.0.13
 
 ### Patch Changes

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

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UFOContextManager = void 0;
+exports.getContextManager = getContextManager;
+exports.setContextManager = setContextManager;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _api = require("@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;
+function setContextManager(ctxMgr) {
+  contextManager = ctxMgr;
+}
+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
+ */
+var UFOContextManager = exports.UFOContextManager = /*#__PURE__*/function () {
+  function UFOContextManager() {
+    (0, _classCallCheck2.default)(this, UFOContextManager);
+    /**
+     * whether the context manager is enabled or not
+     */
+    (0, _defineProperty2.default)(this, "_enabled", false);
+    /**
+     * Keeps the reference to current context
+     */
+    (0, _defineProperty2.default)(this, "_currentContext", _api.ROOT_CONTEXT);
+  }
+  return (0, _createClass2.default)(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] : _api.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 = _api.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 = _api.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 || _api.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;
+      }
+    }
+  }]);
+}();

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

@@ -10,38 +10,94 @@ exports.getActiveTraceAsQueryParams = getActiveTraceAsQueryParams;
 exports.getActiveTraceHttpRequestHeaders = getActiveTraceHttpRequestHeaders;
 exports.setActiveTrace = setActiveTrace;
 exports.setInteractionActiveTrace = setInteractionActiveTrace;
+var _api = require("@opentelemetry/api");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _contextManager = require("./context-manager");
 var _makeTraceHttpRequestHeaders = require("./utils/make-trace-http-request-headers");
 var state = {
   context: null
 };
+var traceIdKey = (0, _api.createContextKey)("traceId");
+var spanIdKey = (0, _api.createContextKey)("spanId");
+var experienceTypeKey = (0, _api.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
 function generateSpanId() {
   return Array.from(new Array(16), function () {
     return 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
 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
 function setActiveTrace(traceId, spanId, type) {
-  state.context = {
-    traceId: traceId,
-    spanId: spanId,
-    type: type
-  };
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_enable_otel_context_manager')) {
+    var activeTraceContext = _api.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 ((0, _contextManager.getContextManager)() instanceof _contextManager.UFOContextManager) {
+      var contextManager = (0, _contextManager.getContextManager)();
+      contextManager.setActive(activeTraceContext);
+    }
+  } else {
+    state.context = {
+      traceId: traceId,
+      spanId: spanId,
+      type: type
+    };
+  }
 }
 function getActiveTrace() {
-  return state.context || undefined;
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_enable_otel_context_manager')) {
+    // Get trace context from active context
+    var activeTraceContext = {
+      traceId: String(_api.context.active().getValue(traceIdKey)),
+      spanId: String(_api.context.active().getValue(spanIdKey)),
+      type: String(_api.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
 function clearActiveTrace() {
-  state.context = null;
+  if ((0, _platformFeatureFlags.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 ((0, _contextManager.getContextManager)() instanceof _contextManager.UFOContextManager) {
+      var contextManager = (0, _contextManager.getContextManager)();
+
+      // ROOT_CONTEXT is an empty context used to initialise ContextManagers
+      contextManager.setActive(_api.ROOT_CONTEXT);
+    }
+  } else {
+    state.context = null;
+  }
 }
 function getActiveTraceHttpRequestHeaders(_url) {
-  if (state.context === null) {
+  if (getActiveTrace() === undefined) {
     return null;
   }
-  var _state$context = state.context,
-    traceId = _state$context.traceId,
-    spanId = _state$context.spanId;
+  var _ref = getActiveTrace(),
+    traceId = _ref.traceId,
+    spanId = _ref.spanId;
   return (0, _makeTraceHttpRequestHeaders.makeTraceHttpRequestHeaders)(traceId, spanId);
 }
 function getActiveTraceAsQueryParams(_url) {

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

@@ -9,11 +9,13 @@ exports.init = init;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _api = require("@opentelemetry/api");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _additionalPayload = require("../additional-payload");
 var _config = require("../config");
 var _createExperimentalInteractionMetricsPayload = require("../create-experimental-interaction-metrics-payload");
 var _createExtraSearchPageInteractionPayload = require("../create-extra-search-page-interaction-payload");
+var _contextManager = require("../experience-trace-id-context/context-manager");
 var _hiddenTiming = require("../hidden-timing");
 var _interactionMetrics = require("../interaction-metrics");
 var _interactionsPerformanceObserver = require("../interactions-performance-observer");
@@ -155,6 +157,15 @@ function init(analyticsWebClientAsync, config) {
   (0, _machineUtilisation.initialisePressureObserver)();
   (0, _machineUtilisation.initialiseMemoryObserver)();
   (0, _config.setUFOConfig)(config);
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_enable_otel_context_manager')) {
+    // Configure global OTel context manager
+    var contextManager = new _contextManager.UFOContextManager();
+    // set the contextmanager somewhere we can reference it later
+    (0, _contextManager.setContextManager)(contextManager);
+    // Register the context manager with the global OTel API
+    contextManager.enable();
+    _api.context.setGlobalContextManager(contextManager);
+  }
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var _config$experimentalI, _config$extraInteract;
     var vcOptions = {
@@ -202,11 +213,10 @@ function init(analyticsWebClientAsync, config) {
       createTerminalErrorPayloadPackage = _ref3[4];
     if (awc.getAnalyticsWebClientPromise) {
       awc.getAnalyticsWebClientPromise().then(function (client) {
-        var _config$experimentalI2, _config$postInteracti, _config$extraInteract2, _config$extraSearchPa;
+        var _config$terminalError, _config$experimentalI2, _config$postInteracti, _config$extraInteract2, _config$extraSearchPa;
         var instance = client.getInstance();
         sinkInteraction(instance, payloadPackage);
-        // TODO: make this configurable
-        if ((0, _platformFeatureFlags.fg)('platform_ufo_enable_terminal_errors')) {
+        if (config !== null && config !== void 0 && (_config$terminalError = config.terminalErrors) !== null && _config$terminalError !== void 0 && _config$terminalError.enabled && (0, _platformFeatureFlags.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) {
@@ -223,10 +233,9 @@ 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 ((0, _platformFeatureFlags.fg)('platform_ufo_enable_terminal_errors')) {
+      if (config !== null && config !== void 0 && (_config$terminalError2 = config.terminalErrors) !== null && _config$terminalError2 !== void 0 && _config$terminalError2.enabled && (0, _platformFeatureFlags.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/cjs/vc/index.js

@@ -87,7 +87,7 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
           startTime: startTime
         });
       }
-      if ((0, _config.isVCRevisionEnabled)('fy25.03', experienceKey)) {
+      if ((0, _config.isVCRevisionEnabled)('fy25.03', experienceKey) || (0, _config.isVCRevisionEnabled)('fy26.04', experienceKey)) {
         var _this$newVCObserver;
         (_this$newVCObserver = this.newVCObserver) === null || _this$newVCObserver === void 0 || _this$newVCObserver.start({
           startTime: startTime
@@ -104,7 +104,7 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
         var _this$oldVCObserver2;
         (_this$oldVCObserver2 = this.oldVCObserver) === null || _this$oldVCObserver2 === void 0 || _this$oldVCObserver2.stop();
       }
-      if ((0, _config.isVCRevisionEnabled)('fy25.03', experienceKey)) {
+      if ((0, _config.isVCRevisionEnabled)('fy25.03', experienceKey) || (0, _config.isVCRevisionEnabled)('fy26.04', experienceKey)) {
         var _this$newVCObserver2;
         (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 || _this$newVCObserver2.stop();
       }
@@ -122,7 +122,7 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
     key: "getVCResult",
     value: function () {
       var _getVCResult = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(param) {
-        var _this$oldVCObserver4, _this$newVCObserver3, _ref2;
+        var _this$oldVCObserver4, _this$newVCObserver3, _v3v4Result$, _ref2;
         var experienceKey, include3p, excludeSmartAnswersInSearch, includeSSRRatio, includeRawData, v1v2Result, v3v4Result, ssrRatio;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -142,7 +142,7 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
               _context.t0 = {};
             case 8:
               v1v2Result = _context.t0;
-              if (!(0, _config.isVCRevisionEnabled)('fy25.03', experienceKey)) {
+              if (!((0, _config.isVCRevisionEnabled)('fy25.03', experienceKey) || (0, _config.isVCRevisionEnabled)('fy26.04', experienceKey))) {
                 _context.next = 15;
                 break;
               }
@@ -170,13 +170,13 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
               _context.t1 = [];
             case 16:
               v3v4Result = _context.t1;
-              if (v3v4Result) {
+              if (!(!v3v4Result || v3v4Result.length === 0)) {
                 _context.next = 19;
                 break;
               }
               return _context.abrupt("return", v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {});
             case 19:
-              ssrRatio = v3v4Result[0].ssrRatio;
+              ssrRatio = v3v4Result === null || v3v4Result === void 0 || (_v3v4Result$ = v3v4Result[0]) === null || _v3v4Result$ === void 0 ? void 0 : _v3v4Result$.ssrRatio;
               return _context.abrupt("return", _objectSpread(_objectSpread(_objectSpread({}, includeSSRRatio && ssrRatio !== undefined ? {
                 'ufo:vc:ssrRatio': ssrRatio
               } : {}), v1v2Result), {}, {

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) {