@atlaskit/react-ufo 3.6.6 → 3.7.0

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

@@ -5,7 +5,6 @@ import { experimentalVC, getExperimentalVCMetrics, onExperimentalInteractionComp
 import { clearActiveTrace } from '../experience-trace-id-context';
 import { allFeatureFlagsAccessed, currentFeatureFlagsAccessed } from '../feature-flags-accessed';
 import { getInteractionId } from '../interaction-id-context';
-import { withProfiling } from '../self-measurements';
 import { getVCObserver } from '../vc';
 import { interactions } from './common/constants';
 import PostInteractionLog from './post-interaction-log';
@@ -19,18 +18,48 @@ const segmentCache = new Map();
 const CLEANUP_TIMEOUT = 60 * 1000;
 const CLEANUP_TIMEOUT_AFTER_APDEX = 15 * 1000;
 const segmentObservers = [];
-export const getActiveInteraction = withProfiling(function getActiveInteraction() {
+export function getActiveInteraction() {
   const interactionId = getInteractionId();
   if (!interactionId.current) {
     return;
   }
   return interactions.get(interactionId.current);
-});
-const isPerformanceTracingEnabled = withProfiling(function isPerformanceTracingEnabled() {
+}
+function isPerformanceTracingEnabled() {
   var _getConfig;
   return ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableAdditionalPerformanceMarks) || window.__REACT_UFO_ENABLE_PERF_TRACING || process.env.NODE_ENV !== 'production';
-});
-const labelStackToString = withProfiling(function labelStackToString(labelStack, name) {
+}
+let performanceEventObserver;
+export const getPerformanceObserver = () => {
+  performanceEventObserver = performanceEventObserver || new PerformanceObserver(entries => {
+    const list = entries.getEntries();
+    for (let entry of list) {
+      if (entry.name === 'click') {
+        setInteractionPerformanceEvent(entry);
+      }
+    }
+  });
+  return performanceEventObserver;
+};
+export const setInteractionPerformanceEvent = entry => {
+  const interaction = getActiveInteraction();
+  if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+    const responsiveness = interaction.responsiveness || {};
+    // if happens there is another event interaction that has started after
+    // the initial one, we don't want to replace the values if they have already
+    // been set up
+    responsiveness.experimentalInputToNextPaint = responsiveness.experimentalInputToNextPaint || entry.duration;
+    responsiveness.inputDelay = responsiveness.experimentalInputToNextPaint || entry.processingStart - entry.startTime;
+    interaction.responsiveness = responsiveness;
+    // if the entry start time is lower than the one in the interaction
+    // it means the interaction start time is not accurate, we assign
+    // this value which will match the timestamp in the event
+    if (entry.startTime < interaction.start) {
+      interaction.start = entry.startTime;
+    }
+  }
+};
+function labelStackToString(labelStack, name) {
   var _stack$map;
   const stack = [...(labelStack !== null && labelStack !== void 0 ? labelStack : [])];
   if (name) {
@@ -39,43 +68,43 @@ const labelStackToString = withProfiling(function labelStackToString(labelStack,
     });
   }
   return (_stack$map = stack.map(l => l.name)) === null || _stack$map === void 0 ? void 0 : _stack$map.join('/');
-});
-const labelStackToIdString = withProfiling(function labelStackToIdString(labelStack) {
+}
+function labelStackToIdString(labelStack) {
   var _labelStack$map;
   return labelStack === null || labelStack === void 0 ? void 0 : (_labelStack$map = labelStack.map(l => 'segmentId' in l ? `${l.name}:${l.segmentId}` : `${l.name}`)) === null || _labelStack$map === void 0 ? void 0 : _labelStack$map.join('/');
-});
-const addSegmentObserver = withProfiling(function addSegmentObserver(observer) {
+}
+function addSegmentObserver(observer) {
   segmentObservers.push(observer);
   for (const segmentInfo of segmentCache.values()) {
     observer.onAdd(segmentInfo);
   }
-});
-const removeSegmentObserver = withProfiling(function removeSegmentObserver(observer) {
+}
+function removeSegmentObserver(observer) {
   const index = segmentObservers.findIndex(obs => obs === observer);
   if (index !== -1) {
     segmentObservers.splice(index, 1);
   }
-});
-export const remove = withProfiling(function remove(interactionId) {
+}
+export function remove(interactionId) {
   interactions.delete(interactionId);
-});
-export const updatePageLoadInteractionName = withProfiling(function updatePageLoadInteractionName(ufoName, routeName = ufoName) {
+}
+export function updatePageLoadInteractionName(ufoName, routeName = ufoName) {
   const interaction = getActiveInteraction();
   if (!interaction || interaction.type !== 'page_load' && interaction.type !== 'transition') {
     return;
   }
   interaction.ufoName = ufoName;
   interaction.routeName = routeName;
-});
-export const addMetadata = withProfiling(function addMetadata(interactionId, data) {
+}
+export function addMetadata(interactionId, data) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     Object.keys(data).forEach(key => {
       interaction.metaData[key] = data[key];
     });
   }
-});
-export const addCustomData = withProfiling(function addCustomData(interactionId, labelStack, data) {
+}
+export function addCustomData(interactionId, labelStack, data) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     Object.keys(data).forEach(i => {
@@ -87,8 +116,8 @@ export const addCustomData = withProfiling(function addCustomData(interactionId,
       });
     });
   }
-});
-export const addCustomTiming = withProfiling(function addCustomTiming(interactionId, labelStack, data) {
+}
+export function addCustomTiming(interactionId, labelStack, data) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     interaction.customTimings.push({
@@ -113,8 +142,8 @@ export const addCustomTiming = withProfiling(function addCustomTiming(interactio
       }
     }
   }
-});
-export const addMark = withProfiling(function addMark(interactionId, type, name, labelStack, time = performance.now()) {
+}
+export function addMark(interactionId, type, name, labelStack, time = performance.now()) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     interaction.marks.push({
@@ -129,8 +158,8 @@ export const addMark = withProfiling(function addMark(interactionId, type, name,
       startTime: time
     });
   }
-});
-export const addMarkToAll = withProfiling(function addMarkToAll(type, name, labelStack, time = performance.now()) {
+}
+export function addMarkToAll(type, name, labelStack, time = performance.now()) {
   interactions.forEach(interaction => {
     interaction.marks.push({
       type,
@@ -144,8 +173,8 @@ export const addMarkToAll = withProfiling(function addMarkToAll(type, name, labe
       startTime: time
     });
   }
-});
-export const addSpan = withProfiling(function addSpan(interactionId, type, name, labelStack, start, end = performance.now(), size) {
+}
+export function addSpan(interactionId, type, name, labelStack, start, end = performance.now(), size) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     interaction.spans.push({
@@ -168,8 +197,8 @@ export const addSpan = withProfiling(function addSpan(interactionId, type, name,
       }
     }
   }
-});
-export const addSpanToAll = withProfiling(function addSpanToAll(type, name, labelStack, start, end = performance.now(), size = 0) {
+}
+export function addSpanToAll(type, name, labelStack, start, end = performance.now(), size = 0) {
   interactions.forEach(interaction => {
     interaction.spans.push({
       type,
@@ -191,36 +220,36 @@ export const addSpanToAll = withProfiling(function addSpanToAll(type, name, labe
       // do nothing
     }
   }
-});
-export const addPreload = withProfiling(function addPreload(moduleId, timestamp) {
+}
+export function addPreload(moduleId, timestamp) {
   addMarkToAll('bundle_preload', moduleId, null, timestamp);
-});
-export const addLoad = withProfiling(function addLoad(identifier, start, end) {
+}
+export function addLoad(identifier, start, end) {
   addSpanToAll('bundle_load', identifier, null, start, end - start);
-});
+}
 const moduleLoadingRequests = {};
-export const extractModuleName = withProfiling(function extractModuleName(input) {
+export function extractModuleName(input) {
   let result = input !== null && input !== void 0 ? input : '';
   result = result.replace(/^\.\/src\/packages\//, '');
   result = result.replace(/^\.\/node_modules\//, '');
   result = result.replace(/(\/src)?\/(index|main)\.(tsx|ts|js|jsx)$/, '');
   return result;
-});
-const addHoldCriterion = withProfiling(function addHoldCriterion(id, labelStack, name, startTime) {
+}
+function addHoldCriterion(id, labelStack, name, startTime) {
   var _window$__CRITERION__;
   if (!((_window$__CRITERION__ = window.__CRITERION__) !== null && _window$__CRITERION__ !== void 0 && _window$__CRITERION__.addUFOHold)) {
     return;
   }
   window.__CRITERION__.addUFOHold(id, labelStackToString(labelStack), name, startTime);
-});
-const removeHoldCriterion = withProfiling(function removeHoldCriterion(id) {
+}
+function removeHoldCriterion(id) {
   var _window$__CRITERION__2;
   if (!((_window$__CRITERION__2 = window.__CRITERION__) !== null && _window$__CRITERION__2 !== void 0 && _window$__CRITERION__2.removeUFOHold)) {
     return;
   }
   window.__CRITERION__.removeUFOHold(id);
-});
-export const addHold = withProfiling(function addHold(interactionId, labelStack, name, experimental) {
+}
+export function addHold(interactionId, labelStack, name, experimental) {
   const interaction = interactions.get(interactionId);
   const id = createUUID();
   if (interaction != null) {
@@ -280,8 +309,8 @@ export const addHold = withProfiling(function addHold(interactionId, labelStack,
     };
   }
   return () => {};
-});
-export const addHoldByID = withProfiling(function addHoldByID(interactionId, labelStack, name, id, ignoreOnSubmit) {
+}
+export function addHoldByID(interactionId, labelStack, name, id, ignoreOnSubmit) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     const start = performance.now();
@@ -294,8 +323,8 @@ export const addHoldByID = withProfiling(function addHoldByID(interactionId, lab
     addHoldCriterion(id, labelStack, name, start);
   }
   return () => {};
-});
-export const removeHoldByID = withProfiling(function removeHoldByID(interactionId, id) {
+}
+export function removeHoldByID(interactionId, id) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     const end = performance.now();
@@ -310,19 +339,19 @@ export const removeHoldByID = withProfiling(function removeHoldByID(interactionI
       removeHoldCriterion(id);
     }
   }
-});
-export const getCurrentInteractionType = withProfiling(function getCurrentInteractionType(interactionId) {
+}
+export function getCurrentInteractionType(interactionId) {
   const interaction = interactions.get(interactionId);
   if (interaction) {
     return interaction.type;
   }
   return null;
-});
+}
 export const ModuleLoadingProfiler = {
-  onPreload: withProfiling(function onPreload(moduleId, _priority) {
+  onPreload(moduleId, _priority) {
     addPreload(extractModuleName(moduleId), performance.now());
-  }),
-  onLoadStart: withProfiling(function onLoadStart(info) {
+  },
+  onLoadStart(info) {
     const timeoutId = setTimeout(() => {
       delete moduleLoadingRequests[info.identifier];
     }, 30000);
@@ -331,29 +360,29 @@ export const ModuleLoadingProfiler = {
       timeoutId
     };
     moduleLoadingRequests[info.identifier] = request;
-  }),
-  onLoadComplete: withProfiling(function onLoadComplete(info) {
+  },
+  onLoadComplete(info) {
     const request = moduleLoadingRequests[info.identifier];
     if (request) {
       clearTimeout(request.timeoutId);
       delete moduleLoadingRequests[info.identifier];
       addLoad(extractModuleName(info.identifier), request.start, performance.now());
     }
-  }),
-  placeholderFallBackMounted: withProfiling(function placeholderFallBackMounted(id, moduleId) {
+  },
+  placeholderFallBackMounted(id, moduleId) {
     const interactionId = getInteractionId();
     const currentInteractionId = interactionId.current;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     addHoldByID(currentInteractionId, [], moduleId, id);
-  }),
-  placeholderFallBackUnmounted: withProfiling(function placeholderFallBackUnmounted(id) {
+  },
+  placeholderFallBackUnmounted(id) {
     const interactionId = getInteractionId();
     const currentInteractionId = interactionId.current;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     removeHoldByID(currentInteractionId, id);
-  })
+  }
 };
-export const addError = withProfiling(function addError(interactionId, name, labelStack, errorType, errorMessage, errorStack, forcedError) {
+export function addError(interactionId, name, labelStack, errorType, errorMessage, errorStack, forcedError) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     interaction.errors.push({
@@ -365,8 +394,8 @@ export const addError = withProfiling(function addError(interactionId, name, lab
       forcedError
     });
   }
-});
-export const addErrorToAll = withProfiling(function addErrorToAll(name, labelStack, errorType, errorMessage, errorStack) {
+}
+export function addErrorToAll(name, labelStack, errorType, errorMessage, errorStack) {
   interactions.forEach(interaction => {
     interaction.errors.push({
       name,
@@ -376,8 +405,8 @@ export const addErrorToAll = withProfiling(function addErrorToAll(name, labelSta
       errorStack
     });
   });
-});
-export const addProfilerTimings = withProfiling(function addProfilerTimings(interactionId, labelStack, type, actualDuration, baseDuration, startTime, commitTime) {
+}
+export function addProfilerTimings(interactionId, labelStack, type, actualDuration, baseDuration, startTime, commitTime) {
   var _getConfig3, _getConfig3$postInter;
   if (isPerformanceTracingEnabled()) {
     try {
@@ -403,20 +432,20 @@ export const addProfilerTimings = withProfiling(function addProfilerTimings(inte
   } else if ((_getConfig3 = getConfig()) !== null && _getConfig3 !== void 0 && (_getConfig3$postInter = _getConfig3.postInteractionLog) !== null && _getConfig3$postInter !== void 0 && _getConfig3$postInter.enabled) {
     postInteractionLog.addProfilerTimings(labelStack, type, actualDuration, baseDuration, startTime, commitTime);
   }
-});
-const pushToQueue = withProfiling(function pushToQueue(id, data) {
+}
+function pushToQueue(id, data) {
   interactionQueue.push({
     id,
     data
   });
-});
+}
 let handleInteraction = pushToQueue;
-const callCleanUpCallbacks = withProfiling(function callCleanUpCallbacks(interaction) {
+function callCleanUpCallbacks(interaction) {
   interaction.cleanupCallbacks.reverse().forEach(cleanUpCallback => {
     cleanUpCallback();
   });
-});
-const finishInteraction = withProfiling(function finishInteraction(id, data, endTime = performance.now()) {
+}
+function finishInteraction(id, data, endTime = performance.now()) {
   var _getConfig4, _getConfig4$vc, _getConfig5, _getConfig5$experimen;
   data.end = endTime;
   try {
@@ -482,8 +511,8 @@ const finishInteraction = withProfiling(function finishInteraction(id, data, end
   } catch (error) {
     // do nothing
   }
-});
-export const sinkInteractionHandler = withProfiling(function sinkInteractionHandler(sinkFn) {
+}
+export function sinkInteractionHandler(sinkFn) {
   if (handleInteraction === pushToQueue) {
     handleInteraction = sinkFn;
     interactionQueue.forEach(interaction => {
@@ -491,14 +520,14 @@ export const sinkInteractionHandler = withProfiling(function sinkInteractionHand
     });
     interactionQueue.length = 0;
   }
-});
-export const sinkPostInteractionLogHandler = withProfiling(function sinkPostInteractionLogHandler(sinkFn) {
+}
+export function sinkPostInteractionLogHandler(sinkFn) {
   postInteractionLog.sinkHandler(sinkFn);
-});
+}
 
 // a flag to prevent multiple submitting
 let activeSubmitted = false;
-export const tryComplete = withProfiling(function tryComplete(interactionId, endTime) {
+export function tryComplete(interactionId, endTime) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     const noMoreActiveHolds = interaction.holdActive.size === 0;
@@ -543,13 +572,13 @@ export const tryComplete = withProfiling(function tryComplete(interactionId, end
       }
     }
   }
-});
-const callCancelCallbacks = withProfiling(function callCancelCallbacks(interaction) {
+}
+function callCancelCallbacks(interaction) {
   interaction.cancelCallbacks.reverse().forEach(cancelCallback => {
     cancelCallback();
   });
-});
-export const abort = withProfiling(function abort(interactionId, abortReason) {
+}
+export function abort(interactionId, abortReason) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     var _getConfig10, _getConfig10$experime;
@@ -561,8 +590,8 @@ export const abort = withProfiling(function abort(interactionId, abortReason) {
       remove(interactionId);
     }
   }
-});
-export const abortByNewInteraction = withProfiling(function abortByNewInteraction(interactionId, interactionName) {
+}
+export function abortByNewInteraction(interactionId, interactionName) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     var _getConfig11, _getConfig11$experime;
@@ -575,8 +604,8 @@ export const abortByNewInteraction = withProfiling(function abortByNewInteractio
       remove(interactionId);
     }
   }
-});
-export const abortAll = withProfiling(function abortAll(abortReason, abortedByInteractionName) {
+}
+export function abortAll(abortReason, abortedByInteractionName) {
   interactions.forEach((interaction, interactionId) => {
     var _getConfig12, _getConfig12$experime;
     const noMoreHolds = interaction.holdActive.size === 0;
@@ -593,12 +622,12 @@ export const abortAll = withProfiling(function abortAll(abortReason, abortedByIn
       remove(interactionId);
     }
   });
-});
-export const addOnCancelCallback = withProfiling(function addOnCancelCallback(id, cancelCallback) {
+}
+export function addOnCancelCallback(id, cancelCallback) {
   const interaction = interactions.get(id);
   interaction === null || interaction === void 0 ? void 0 : interaction.cancelCallbacks.push(cancelCallback);
-});
-export const addNewInteraction = withProfiling(function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName, trace = null) {
+}
+export function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName, trace = null) {
   var _getConfig13, _getConfig13$postInte;
   if ((_getConfig13 = getConfig()) !== null && _getConfig13 !== void 0 && (_getConfig13$postInte = _getConfig13.postInteractionLog) !== null && _getConfig13$postInte !== void 0 && _getConfig13$postInte.enabled) {
     postInteractionLog.reset();
@@ -701,8 +730,8 @@ export const addNewInteraction = withProfiling(function addNewInteraction(intera
       });
     }
   }
-});
-export const addBrowserMetricEvent = withProfiling(function addBrowserMetricEvent(event) {
+}
+export function addBrowserMetricEvent(event) {
   const interaction = getActiveInteraction();
   if (interaction) {
     var _event$config;
@@ -713,8 +742,8 @@ export const addBrowserMetricEvent = withProfiling(function addBrowserMetricEven
       removeHoldByID(interaction.id, interaction.ufoName);
     }
   }
-});
-export const addApdexToAll = withProfiling(function addApdexToAll(apdex) {
+}
+export function addApdexToAll(apdex) {
   interactions.forEach((interaction, key) => {
     interaction.apdex.push(apdex);
     try {
@@ -732,8 +761,8 @@ export const addApdexToAll = withProfiling(function addApdexToAll(apdex) {
       removeHoldByID(key, interaction.ufoName);
     }
   });
-});
-export const addApdex = withProfiling(function addApdex(interactionId, apdexInfo) {
+}
+export function addApdex(interactionId, apdexInfo) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     interaction.apdex.push(apdexInfo);
@@ -752,8 +781,8 @@ export const addApdex = withProfiling(function addApdex(interactionId, apdexInfo
       removeHoldByID(interactionId, interaction.ufoName);
     }
   }
-});
-export const addRequestInfo = withProfiling(function addRequestInfo(interactionId, labelStack, requestInfo) {
+}
+export function addRequestInfo(interactionId, labelStack, requestInfo) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     interaction.requestInfo.push({
@@ -761,19 +790,19 @@ export const addRequestInfo = withProfiling(function addRequestInfo(interactionI
       ...requestInfo
     });
   }
-});
-const isSegmentLabel = withProfiling(function isSegmentLabel(obj) {
+}
+function isSegmentLabel(obj) {
   return obj && typeof obj.name === 'string' && typeof obj.segmentId === 'string';
-});
-const getSegmentCacheKey = withProfiling(function getSegmentCacheKey(labelStack) {
+}
+function getSegmentCacheKey(labelStack) {
   return labelStack.map(l => {
     if (isSegmentLabel(l)) {
       return `${l.name}_${l.segmentId}`;
     }
     return l.name;
   }).join('|');
-});
-export const addSegment = withProfiling(function addSegment(labelStack) {
+}
+export function addSegment(labelStack) {
   const key = getSegmentCacheKey(labelStack);
   const existingSegment = segmentCache.get(key);
   if (!existingSegment) {
@@ -785,8 +814,8 @@ export const addSegment = withProfiling(function addSegment(labelStack) {
       observer.onAdd(segmentInfo);
     });
   }
-});
-export const removeSegment = withProfiling(function removeSegment(labelStack) {
+}
+export function removeSegment(labelStack) {
   const key = getSegmentCacheKey(labelStack);
   const segmentInfo = segmentCache.get(key);
   if (segmentInfo) {
@@ -795,8 +824,8 @@ export const removeSegment = withProfiling(function removeSegment(labelStack) {
       observer.onRemove(segmentInfo);
     });
   }
-});
-export const addRedirect = withProfiling(function addRedirect(interactionId, fromUfoName, nextUfoName, nextRouteName, time) {
+}
+export function addRedirect(interactionId, fromUfoName, nextUfoName, nextRouteName, time) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
     interaction.ufoName = nextUfoName;
@@ -819,12 +848,12 @@ export const addRedirect = withProfiling(function addRedirect(interactionId, fro
       }
     }
   }
-});
+}
 export const interactionSpans = [];
 const defaultLabelStack = [{
   name: 'custom'
 }];
-export const addCustomSpans = withProfiling(function addCustomSpans(name, start, end = performance.now(), size = 0, labelStack = defaultLabelStack) {
+export function addCustomSpans(name, start, end = performance.now(), size = 0, labelStack = defaultLabelStack) {
   const customSpan = {
     type: 'custom',
     name,
@@ -834,4 +863,4 @@ export const addCustomSpans = withProfiling(function addCustomSpans(name, start,
     size
   };
   interactionSpans.push(customSpan);
-});
+}

package/dist/es2019/interaction-metrics/post-interaction-log.js

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { getConfig } from '../config';
-import { withProfiling } from '../self-measurements';
 import { VCObserver } from '../vc/vc-observer';
 const POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT = 3000;
 export default class PostInteractionLog {
@@ -26,15 +25,6 @@ export default class PostInteractionLog {
      * Handler function to process / send the observation data
      */
     _defineProperty(this, "sinkHandlerFn", () => {});
-    this.initializeVCObserver = withProfiling(this.initializeVCObserver.bind(this));
-    this.startVCObserver = withProfiling(this.startVCObserver.bind(this));
-    this.setVCObserverSSRConfig = withProfiling(this.setVCObserverSSRConfig.bind(this));
-    this.setLastInteractionFinishVCResult = withProfiling(this.setLastInteractionFinishVCResult.bind(this));
-    this.reset = withProfiling(this.reset.bind(this));
-    this.hasData = withProfiling(this.hasData.bind(this));
-    this.sendPostInteractionLog = withProfiling(this.sendPostInteractionLog.bind(this));
-    this.onInteractionComplete = withProfiling(this.onInteractionComplete.bind(this));
-    this.addProfilerTimings = withProfiling(this.addProfilerTimings.bind(this));
   }
   initializeVCObserver(options) {
     if (this.vcObserver === null) {

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

@@ -4,13 +4,13 @@ import { setUFOConfig } from '../config';
 import { experimentalVC, sinkExperimentalHandler } from '../create-experimental-interaction-metrics-payload';
 import { setupHiddenTimingCapture } from '../hidden-timing';
 import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
-import { withProfiling } from '../self-measurements';
+import { getPerformanceObserver } from '../interactions-performance-observer';
 import { getVCObserver } from '../vc';
 import scheduleIdleCallback from './schedule-idle-callback';
 let initialized = false;
-const sinkInteraction = withProfiling(function sinkInteraction(instance, payloadPackage) {
-  const sinkFn = withProfiling(function sinkFn(interactionId, interaction) {
-    const onIdle = withProfiling(function onIdle() {
+function sinkInteraction(instance, payloadPackage) {
+  function sinkFn(interactionId, interaction) {
+    function onIdle() {
       payloadPackage.createPayloads(interactionId, interaction).then(payloads => {
         // NOTE: This API is used by the UFO DevTool Chrome Extension and Criterion
         const devToolObserver = globalThis.__ufo_devtool_onUfoPayload;
@@ -23,14 +23,14 @@ const sinkInteraction = withProfiling(function sinkInteraction(instance, payload
       }).catch(error => {
         throw error;
       });
-    });
+    }
     scheduleIdleCallback(onIdle);
-  });
+  }
   sinkInteractionHandler(sinkFn);
-});
-const sinkExperimentalInteractionMetrics = withProfiling(function sinkExperimentalInteractionMetrics(instance, payloadPackage) {
-  const experimentalMetricsSinkFn = withProfiling(function experimentalMetricsSinkFn(interactionId, interaction) {
-    const experimentalMetricsOnIdle = withProfiling(function experimentalMetricsOnIdle() {
+}
+function sinkExperimentalInteractionMetrics(instance, payloadPackage) {
+  function experimentalMetricsSinkFn(interactionId, interaction) {
+    function experimentalMetricsOnIdle() {
       const payloadPromise = payloadPackage.createExperimentalMetricsPayload(interactionId, interaction);
       payloadPromise.then(payload => {
         if (payload) {
@@ -45,11 +45,11 @@ const sinkExperimentalInteractionMetrics = withProfiling(function sinkExperiment
           instance.sendOperationalEvent(payload);
         }
       });
-    });
+    }
     scheduleIdleCallback(experimentalMetricsOnIdle);
-  });
+  }
   sinkExperimentalHandler(experimentalMetricsSinkFn);
-});
+}
 function sinkPostInteractionLog(instance, createPostInteractionLogPayload) {
   sinkPostInteractionLogHandler(logOutput => {
     scheduleIdleCallback(() => {
@@ -68,7 +68,7 @@ function sinkPostInteractionLog(instance, createPostInteractionLogPayload) {
     });
   });
 }
-export const init = withProfiling(function init(analyticsWebClientAsync, config) {
+export function init(analyticsWebClientAsync, config) {
   var _config$vc;
   if (initialized) {
     return;
@@ -98,6 +98,16 @@ export const init = withProfiling(function init(analyticsWebClientAsync, config)
   setupHiddenTimingCapture();
   startLighthouseObserver();
   initialized = true;
+  if (fg('platform_ufo_enable_events_observer')) {
+    if (typeof PerformanceObserver !== 'undefined') {
+      const observer = getPerformanceObserver();
+      observer.observe({
+        type: 'event',
+        buffered: true,
+        durationThreshold: 16
+      });
+    }
+  }
   Promise.all([analyticsWebClientAsync, import( /* webpackChunkName: "create-payloads" */'../create-payload'), import( /* webpackChunkName: "create-post-interaction-log-payload" */'../create-post-interaction-log-payload')]).then(([awc, payloadPackage, createPostInteractionLogPayloadPackage]) => {
     if (awc.getAnalyticsWebClientPromise) {
       awc.getAnalyticsWebClientPromise().then(client => {
@@ -122,4 +132,4 @@ export const init = withProfiling(function init(analyticsWebClientAsync, config)
       }
     }
   });
-});
+}

package/dist/es2019/interaction-metrics-init/schedule-idle-callback.js

@@ -1,7 +1,6 @@
 import { unstable_IdlePriority as idlePriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { withProfiling } from '../self-measurements';
-const scheduleIdleCallback = withProfiling(function scheduleIdleCallback(work) {
+function scheduleIdleCallback(work) {
   if (typeof window !== 'undefined' && typeof window.requestIdleCallback === 'function' &&
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   fg('ufo_payload_use_idle_callback')) {
@@ -9,5 +8,5 @@ const scheduleIdleCallback = withProfiling(function scheduleIdleCallback(work) {
   } else {
     scheduleCallback(idlePriority, work);
   }
-});
+}
 export default scheduleIdleCallback;