@atlaskit/react-ufo 1.1.0 → 2.0.1

package/dist/es2019/resource-timing/main.js

@@ -0,0 +1,130 @@
+import { getConfig as getConfigUFO } from '../config';
+import { roundEpsilon } from '../round-number';
+import { getConfig } from './common/utils/config';
+import { filterResourceTimings } from './common/utils/resource-timing-buffer';
+const cacheableTypes = ['script', 'link'];
+const resourceTypes = ['fetch', 'xmlhttprequest'];
+const CACHE_NETWORK = 'network';
+const CACHE_MEMORY = 'memory';
+const CACHE_DISK = 'disk';
+
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+const calculateTransferType = (type, duration, size) => {
+  if (!cacheableTypes.includes(type)) {
+    return CACHE_NETWORK;
+  }
+  if ((size === undefined || size === 0) && duration === 0) {
+    return CACHE_MEMORY;
+  }
+  if (size === 0 && duration > 0) {
+    return CACHE_DISK;
+  }
+  if (size === undefined) {
+    return null;
+  }
+  return CACHE_NETWORK;
+};
+const getWindowObject = () => typeof window !== 'undefined' && !!window ? window : undefined;
+const hasAccessToResourceSize = (url, type, entry, hasTimingHeaders) => !cacheableTypes.includes(type) || url.includes('localhost') || !!getWindowObject() && url.includes(window.location.hostname) || hasTimingHeaders(url, entry);
+const getReportedInitiatorTypes = xhrEnabled => {
+  const ufoConfig = getConfigUFO();
+  if (!(ufoConfig !== null && ufoConfig !== void 0 && ufoConfig.allowedResources)) {
+    if (xhrEnabled) {
+      return ['script', 'link', 'fetch', 'xmlhttprequest'];
+    }
+    return ['script', 'link', 'fetch'];
+  }
+  return ufoConfig.allowedResources;
+};
+const evaluateAccessToResourceTimings = (url, entry) => !(entry.responseStart === 0 && entry.startTime > entry.responseStart);
+
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+const getSizeObject = size => size !== undefined ? {
+  size
+} : null;
+const getNetworkData = (item, eventStart, hasTimingHeaders = evaluateAccessToResourceTimings) => {
+  const {
+    name,
+    duration,
+    transferSize,
+    initiatorType,
+    responseStart,
+    requestStart,
+    serverTime,
+    networkTime,
+    encodedSize,
+    decodedSize
+  } = item;
+  const ttfb = roundEpsilon(responseStart - eventStart);
+  if (!hasAccessToResourceSize(name, initiatorType, item, hasTimingHeaders)) {
+    return {};
+  }
+  if (cacheableTypes.includes(initiatorType)) {
+    const transferType = calculateTransferType(initiatorType, duration, transferSize);
+    return {
+      ttfb,
+      transferType,
+      serverTime,
+      networkTime,
+      encodedSize,
+      decodedSize,
+      ...getSizeObject(transferSize)
+    };
+  }
+  return {
+    ttfb,
+    serverTime,
+    networkTime,
+    requestStart,
+    ...getSizeObject(transferSize)
+  };
+};
+export const getResourceTimings = (interactionStart, interactionEnd) => {
+  const resourceTiming = {};
+  if (interactionStart === null) {
+    return resourceTiming;
+  }
+  const resources = filterResourceTimings(interactionStart, interactionEnd);
+  if (!(resources !== null && resources !== void 0 && resources.length)) {
+    return resourceTiming;
+  }
+  const {
+    xhrFilter,
+    sanitiseEndpoints,
+    mapResources,
+    hasTimingHeaders
+  } = getConfig();
+  const reportedInitiatorTypes = getReportedInitiatorTypes(!!xhrFilter);
+  resources.forEach(item => {
+    if (!reportedInitiatorTypes.includes(item.initiatorType)) {
+      return;
+    }
+    const {
+      name,
+      startTime,
+      duration,
+      workerStart,
+      fetchStart,
+      initiatorType
+    } = item;
+    if (!name) {
+      return;
+    }
+    if (initiatorType === 'xmlhttprequest' && (xhrFilter === undefined || xhrFilter(name) === false)) {
+      return;
+    }
+    const url = resourceTypes.includes(initiatorType) ? sanitiseEndpoints(name) : mapResources(name);
+    if (!url || resourceTiming[url]) {
+      return;
+    }
+    resourceTiming[url] = {
+      startTime: roundEpsilon(startTime - interactionStart),
+      duration: roundEpsilon(duration),
+      workerStart: Math.max(roundEpsilon(workerStart - interactionStart), 0),
+      fetchStart: Math.max(roundEpsilon(fetchStart - interactionStart), 0),
+      type: initiatorType,
+      ...getNetworkData(item, interactionStart, hasTimingHeaders)
+    };
+  });
+  return resourceTiming;
+};

package/dist/es2019/resource-timing/utils.js

@@ -0,0 +1,4 @@
+import { resourceTimingBuffer } from './common/utils/resource-timing-buffer';
+export function startResourceTimingBuffer() {
+  resourceTimingBuffer.start();
+}

package/dist/es2019/round-number/index.js

@@ -0,0 +1,4 @@
+export const roundEpsilon = (num, places = 3) => {
+  const factor = Math.pow(10, places);
+  return Math.round((num + Number.EPSILON) * factor) / factor;
+};

package/dist/es2019/route-name/index.js

@@ -0,0 +1,6 @@
+export default function getUFORouteName(route) {
+  if (route.ufoName != null) {
+    return route.ufoName;
+  }
+  return route.name;
+}

package/dist/es2019/route-name-context/index.js

@@ -0,0 +1,5 @@
+// The UFORouteName object is a global singleton
+const UFORouteName = {
+  current: null
+};
+export default UFORouteName;

package/dist/es2019/segment/index.js

@@ -0,0 +1,2 @@
+import UFOSegment from './segment';
+export default UFOSegment;

package/dist/es2019/segment/segment-highlight.js

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+export function SegmentHighlight({
+  segmentName
+}) {
+  const [segmentHighlight, setSegmentHighlight] = useState(false);
+  useEffect(() => {
+    try {
+      const shouldHighlightSegments = sessionStorage.getItem('segmentsHighlight') === 'true';
+      setSegmentHighlight(shouldHighlightSegments);
+    } catch (err) {
+      /* do nothing */
+    }
+  }, []);
+  if (segmentHighlight) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      React.createElement("span", {
+        "data-segment-name": segmentName,
+        style: {
+          display: 'none'
+        }
+      })
+    );
+  }
+  return null;
+}

package/dist/es2019/segment/segment.js

@@ -0,0 +1,218 @@
+import React, { lazy, Profiler, Suspense, useCallback, useContext, useEffect, useMemo } from 'react';
+import { unstable_NormalPriority as NormalPriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
+import { v4 as createUUID } from 'uuid';
+import coinflip from '../coinflip';
+import { getConfig, getInteractionRate } from '../config';
+import { getActiveTrace, setInteractionActiveTrace } from '../experience-trace-id-context';
+import UFOInteractionContext from '../interaction-context';
+import UFOInteractionIDContext from '../interaction-id-context';
+import { abortByNewInteraction, addApdex, addCustomData, addCustomTiming, addHold, addHoldByID, addMark, addNewInteraction, addProfilerTimings, addRequestInfo, addSegment, addSpan, removeHoldByID, removeSegment, tryComplete } from '../interaction-metrics';
+import UFORouteName from '../route-name-context';
+import generateId from '../short-id';
+let tryCompleteHandle;
+const AsyncSegmentHighlight = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_ufo-segment-highlight" */'./segment-highlight').then(module => ({
+  default: module.SegmentHighlight
+})));
+
+/** A portion of the page we apply measurement to */
+export default function UFOSegment({
+  name: segmentName,
+  children
+}) {
+  var _getConfig;
+  const parentContext = useContext(UFOInteractionContext);
+  const segmentId = useMemo(() => generateId(), []);
+  const labelStack = useMemo(() => parentContext !== null && parentContext !== void 0 && parentContext.labelStack ? [...parentContext.labelStack, {
+    name: segmentName,
+    segmentId
+  }] : [{
+    name: segmentName,
+    segmentId
+  }], [parentContext, segmentName, segmentId]);
+  const interactionId = useContext(UFOInteractionIDContext);
+  const interactionContext = useMemo(() => {
+    addSegment(labelStack);
+    let lastCompleteEndTime = 0;
+    function complete(endTime = performance.now()) {
+      if (interactionId.current) {
+        if (parentContext) {
+          parentContext.complete();
+        } else {
+          const capturedInteractionId = interactionId.current;
+          if (endTime > lastCompleteEndTime) {
+            lastCompleteEndTime = endTime;
+          }
+          if (tryCompleteHandle) {
+            var _cancelAnimationFrame;
+            (_cancelAnimationFrame = cancelAnimationFrame) === null || _cancelAnimationFrame === void 0 ? void 0 : _cancelAnimationFrame(tryCompleteHandle);
+          }
+          scheduleCallback(NormalPriority, () => {
+            if (capturedInteractionId === interactionId.current) {
+              var _document;
+              const isPageVisible = ((_document = document) === null || _document === void 0 ? void 0 : _document.visibilityState) === 'visible';
+              const canDoRAF = typeof requestAnimationFrame !== 'undefined';
+              if (isPageVisible && canDoRAF) {
+                tryCompleteHandle = requestAnimationFrame(() => {
+                  tryCompleteHandle = requestAnimationFrame(() => {
+                    if (capturedInteractionId === interactionId.current) {
+                      tryComplete(interactionId.current, lastCompleteEndTime);
+                    }
+                  });
+                });
+              } else {
+                tryComplete(interactionId.current, lastCompleteEndTime);
+              }
+            }
+          });
+        }
+      }
+    }
+    function _internalHold(labelStack, name
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    ) {
+      if (interactionId.current != null) {
+        if (parentContext) {
+          return parentContext._internalHold(labelStack, name);
+        } else {
+          const capturedInteractionId = interactionId.current;
+          const disposeHold = addHold(interactionId.current, labelStack, name);
+          return () => {
+            if (capturedInteractionId === interactionId.current) {
+              disposeHold();
+            }
+          };
+        }
+      }
+    }
+    function _internalHoldByID(labelStack, id, name, remove
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    ) {
+      if (interactionId.current != null) {
+        if (parentContext) {
+          parentContext._internalHoldByID(labelStack, name, id, remove);
+          return;
+        }
+        if (!remove) {
+          addHoldByID(interactionId.current, labelStack, name, id);
+        } else {
+          removeHoldByID(interactionId.current, id);
+        }
+      }
+    }
+    if (parentContext) {
+      return {
+        ...parentContext,
+        labelStack,
+        complete
+      };
+    }
+    return {
+      labelStack,
+      hold(name = 'unknown'
+      // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+      ) {
+        return this._internalHold(this.labelStack, name);
+      },
+      addHoldByID(labelStack, id, name = 'unknown') {
+        this._internalHoldByID(labelStack, id, name, false);
+      },
+      removeHoldByID(labelStack, id, name = 'unknown') {
+        this._internalHoldByID(labelStack, id, name, true);
+      },
+      tracePress(name = 'unknown', timestamp) {
+        if (interactionId.current != null) {
+          abortByNewInteraction(interactionId.current, name);
+        }
+        const rate = getInteractionRate(name, 'press');
+        if (coinflip(rate)) {
+          const startTimestamp = timestamp !== null && timestamp !== void 0 ? timestamp : performance.now();
+          const newId = createUUID();
+          interactionId.current = newId;
+          // covered experiences with tracing instrumentation:
+          // inline-result.global-issue.create-modal.submit
+          // inline-result.global-issue.create-modal-subsequent
+          setInteractionActiveTrace(newId, 'press');
+          addNewInteraction(newId, name, 'press', startTimestamp, rate, this.labelStack, UFORouteName.current, getActiveTrace());
+        }
+      },
+      retainQuery(info) {
+        if (interactionId.current != null) {
+          addRequestInfo(interactionId.current, this.labelStack, info);
+        }
+      },
+      addPreload(moduleId, timestamp) {
+        if (interactionId.current != null) {
+          addMark(interactionId.current, 'bundle_preload', moduleId, this.labelStack, timestamp);
+        }
+      },
+      addLoad(identifier, start, end) {
+        if (interactionId.current != null) {
+          const {
+            labelStack = []
+          } = this;
+          addSpan(interactionId.current, 'bundle_load', identifier, labelStack, start, end);
+        }
+      },
+      addMark(name, timestamp
+      // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+      ) {
+        if (interactionId.current != null) {
+          const time = timestamp !== null && timestamp !== void 0 ? timestamp : performance.now();
+          addMark(interactionId.current, 'custom', name, this.labelStack, time);
+        }
+      },
+      addCustomData(customData) {
+        if (interactionId.current != null) {
+          addCustomData(interactionId.current, this.labelStack, customData);
+        }
+      },
+      addCustomTimings(customTimings) {
+        if (interactionId.current != null) {
+          addCustomTiming(interactionId.current, this.labelStack, customTimings);
+        }
+      },
+      addApdex(apdexInfo) {
+        if (interactionId.current != null) {
+          const {
+            key,
+            stopTime,
+            startTime
+          } = apdexInfo;
+          addApdex(interactionId.current, {
+            key,
+            stopTime,
+            startTime,
+            labelStack: this.labelStack
+          });
+        }
+      },
+      onRender(phase, actualDuration, baseDuration, startTime, commitTime) {
+        if (interactionId.current !== null) {
+          addProfilerTimings(interactionId.current, this.labelStack, phase, actualDuration, baseDuration, startTime, commitTime);
+          this.complete(commitTime);
+        }
+      },
+      _internalHold,
+      _internalHoldByID,
+      complete
+    };
+  }, [parentContext, labelStack, interactionId]);
+  const onRender = useCallback((_id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+    interactionContext.onRender(phase, actualDuration, baseDuration, startTime, commitTime);
+  }, [interactionContext]);
+  useEffect(() => () => {
+    removeSegment(labelStack);
+  }, [interactionId, parentContext, interactionContext, labelStack]);
+  const reactProfilerId = useMemo(() => labelStack.map(l => l.name).join('/'), [labelStack]);
+  const enableSegmentHighlighting = (_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableSegmentHighlighting;
+  return /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
+    value: interactionContext
+  }, /*#__PURE__*/React.createElement(Profiler, {
+    id: reactProfilerId,
+    onRender: onRender
+  }, children, enableSegmentHighlighting && /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(AsyncSegmentHighlight, {
+    segmentName: segmentName
+  }))));
+}

package/dist/es2019/set-interaction-error/index.js

@@ -0,0 +1,11 @@
+import { addError, getActiveInteraction } from '../interaction-metrics';
+export function setInteractionError(interactionName, error) {
+  const interaction = getActiveInteraction();
+  if (!interaction) {
+    return;
+  }
+  if (interaction.ufoName !== interactionName) {
+    return;
+  }
+  addError(interaction.id, error.name, null, 'Manual interaction error', error.errorMessage, undefined, true);
+}

package/dist/es2019/short-id/index.js

@@ -0,0 +1,8 @@
+export default function generateId(length = 7) {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+}

package/dist/es2019/ssr/index.js

@@ -0,0 +1,54 @@
+const NESTED_METRIC_SEPARATOR = '/';
+const filterEntry = entry => !(!entry || typeof entry !== 'object' || entry.startTime < 0 || entry.duration < 0);
+const mapEntry = entry => ({
+  startTime: Math.round(entry.startTime),
+  duration: Math.round(entry.duration)
+});
+const SSR_PREFIX = 'ssr';
+const mapKey = key => {
+  if (key === 'total') {
+    return SSR_PREFIX;
+  }
+  return `${SSR_PREFIX}${NESTED_METRIC_SEPARATOR}${key}`;
+};
+let config;
+export function configure(ssrConfig) {
+  config = ssrConfig;
+}
+export function getSSRTimings() {
+  var _config;
+  if (!((_config = config) !== null && _config !== void 0 && _config.getTimings)) {
+    return {};
+  }
+  const timings = config.getTimings();
+  if (!timings) {
+    return {};
+  }
+  const ssrTimings = Object.entries(timings).reduce((acc, entry) => {
+    if (filterEntry(entry[1])) {
+      acc[mapKey(entry[0])] = mapEntry(entry[1]);
+    }
+    return acc;
+  }, {});
+  return ssrTimings;
+}
+export function getSSRSuccess() {
+  var _config2;
+  return !!((_config2 = config) !== null && _config2 !== void 0 && _config2.getDoneMark());
+}
+export function getSSRDoneTime() {
+  var _config$getDoneMark, _config3;
+  return (_config$getDoneMark = (_config3 = config) === null || _config3 === void 0 ? void 0 : _config3.getDoneMark()) !== null && _config$getDoneMark !== void 0 ? _config$getDoneMark : undefined;
+}
+export function getSSRFeatureFlags() {
+  var _config4;
+  if (!((_config4 = config) !== null && _config4 !== void 0 && _config4.getFeatureFlags)) {
+    return undefined;
+  }
+  try {
+    var _config$getFeatureFla;
+    return (_config$getFeatureFla = config.getFeatureFlags()) !== null && _config$getFeatureFla !== void 0 ? _config$getFeatureFla : undefined;
+    // eslint-disable-next-line no-empty
+  } catch (e) {}
+  return undefined;
+}

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

@@ -0,0 +1,41 @@
+import { v4 as createUUID } from 'uuid';
+import coinflip from '../coinflip';
+import { getDoNotAbortActivePressInteraction, getInteractionRate } from '../config';
+import { DefaultInteractionID } from '../interaction-id-context';
+import { abortAll, addNewInteraction, getActiveInteraction } from '../interaction-metrics';
+import UFORouteName from '../route-name-context';
+function mapToInteractionType(eventType) {
+  if (eventType === 'click' || eventType === 'dblclick' || eventType === 'mousedown') {
+    return 'press';
+  }
+  if (eventType === 'mouseenter' || eventType === 'mouseover') {
+    return 'hover';
+  }
+  return undefined;
+}
+export default function traceUFOInteraction(name, event) {
+  if (!event || !event.isTrusted) {
+    return;
+  }
+  const interactionType = mapToInteractionType(event.type);
+  if (!interactionType) {
+    // when interactionType is falsy we do not yet support this type of event. should we blow up with throwing error instead?
+    return;
+  }
+  const rate = getInteractionRate(name, interactionType);
+  const pressInteractionsList = getDoNotAbortActivePressInteraction();
+  if (pressInteractionsList !== null && pressInteractionsList !== void 0 && pressInteractionsList.includes(name)) {
+    const interaction = getActiveInteraction();
+    if ((interaction === null || interaction === void 0 ? void 0 : interaction.ufoName) !== 'unknown' && (interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+      return;
+    }
+  }
+  if (coinflip(rate)) {
+    var _event$timeStamp;
+    abortAll('new_interaction', name);
+    const startTimestamp = (_event$timeStamp = event.timeStamp) !== null && _event$timeStamp !== void 0 ? _event$timeStamp : performance.now();
+    const newId = createUUID();
+    DefaultInteractionID.current = newId;
+    addNewInteraction(newId, name, 'press', startTimestamp, rate, [], UFORouteName.current);
+  }
+}

package/dist/es2019/trace-pageload/index.js

@@ -0,0 +1,48 @@
+import { v4 as createUUID } from 'uuid';
+import coinflip from '../coinflip';
+import { getInteractionRate } from '../config';
+import { getActiveTrace } from '../experience-trace-id-context';
+import { DefaultInteractionID } from '../interaction-id-context';
+import { abort, addHoldByID, addNewInteraction, getActiveInteraction, removeHoldByID, updatePageLoadInteractionName } from '../interaction-metrics';
+import UFORouteName from '../route-name-context';
+const AWAITING_PAGELOAD_NAME = 'awaiting_pageload_name';
+export default function traceUFOPageLoad(ufoName, routeName = ufoName) {
+  const activeInteraction = getActiveInteraction();
+  if (activeInteraction && !ufoName) {
+    return;
+  }
+  UFORouteName.current = routeName || null;
+  const rate = ufoName ? getInteractionRate(ufoName, 'page_load') : 1;
+  const enabledBySamplingRate = coinflip(rate);
+  if (enabledBySamplingRate && !activeInteraction) {
+    const newId = createUUID();
+    DefaultInteractionID.current = newId;
+    addNewInteraction(newId, ufoName || '', 'page_load', 0, rate, null, routeName, getActiveTrace());
+    if (!ufoName) {
+      // if no name is provided we add a hold to the interaction, it is removed if the name is provided while the interaction is holding
+      addHoldByID(newId, [], AWAITING_PAGELOAD_NAME, AWAITING_PAGELOAD_NAME, true);
+    }
+  } else if (!enabledBySamplingRate && activeInteraction && activeInteraction.type === 'page_load') {
+    // if there is an active interaction it will be aborted without initialising a new one because the coinflip returned false
+    abort(activeInteraction.id, 'excluded_by_sampling');
+  } else if (ufoName && activeInteraction && !activeInteraction.ufoName && activeInteraction.type === 'page_load') {
+    updatePageLoadInteractionName(ufoName, routeName);
+    removeHoldByID(activeInteraction.id, AWAITING_PAGELOAD_NAME);
+  }
+}
+export function updatePageloadName(ufoName, routeName = ufoName) {
+  const interaction = getActiveInteraction();
+  if (!interaction || interaction.type !== 'page_load' && interaction.type !== 'transition') {
+    return;
+  }
+  if (ufoName) {
+    const rate = getInteractionRate(ufoName, 'page_load');
+    updatePageLoadInteractionName(ufoName, routeName);
+    if (coinflip(rate)) {
+      UFORouteName.current = ufoName;
+    } else {
+      abort(interaction.id, 'excluded_by_sampling');
+    }
+  }
+  removeHoldByID(interaction.id, AWAITING_PAGELOAD_NAME);
+}

package/dist/es2019/trace-press/index.js

@@ -0,0 +1,27 @@
+import { v4 as createUUID } from 'uuid';
+import coinflip from '../coinflip';
+import { getDoNotAbortActivePressInteraction, getInteractionRate } from '../config';
+import { getActiveTrace, setInteractionActiveTrace } from '../experience-trace-id-context';
+import { DefaultInteractionID } from '../interaction-id-context';
+import { abortAll, addNewInteraction, getActiveInteraction } from '../interaction-metrics';
+import UFORouteName from '../route-name-context';
+export default function traceUFOPress(name, timestamp) {
+  const rate = getInteractionRate(name, 'press');
+  const pressInteractionsList = getDoNotAbortActivePressInteraction();
+  if (pressInteractionsList !== null && pressInteractionsList !== void 0 && pressInteractionsList.includes(name)) {
+    const interaction = getActiveInteraction();
+    if ((interaction === null || interaction === void 0 ? void 0 : interaction.ufoName) !== 'unknown' && (interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+      return;
+    }
+  }
+  if (coinflip(rate)) {
+    abortAll('new_interaction', name);
+    const startTimestamp = timestamp !== null && timestamp !== void 0 ? timestamp : performance.now();
+    const newId = createUUID();
+    // covered experiences with tracing instrumentation:
+    // inline-result.inline-card-create-submit
+    setInteractionActiveTrace(newId, 'press');
+    DefaultInteractionID.current = newId;
+    addNewInteraction(newId, name, 'press', startTimestamp, rate, [], UFORouteName.current, getActiveTrace());
+  }
+}

package/dist/es2019/trace-redirect/index.js

@@ -0,0 +1,10 @@
+import { DefaultInteractionID } from '../interaction-id-context';
+import { addRedirect } from '../interaction-metrics';
+import UFORouteName from '../route-name-context';
+export default function traceUFORedirect(fromUfoName, nextUfoName, nextRouteName, time) {
+  UFORouteName.current = nextUfoName;
+  const interactionId = DefaultInteractionID.current;
+  if (interactionId) {
+    addRedirect(interactionId, fromUfoName, nextUfoName, nextRouteName, time);
+  }
+}

package/dist/es2019/trace-transition/index.js

@@ -0,0 +1,48 @@
+import { useContext, useEffect } from 'react';
+import { v4 as createUUID } from 'uuid';
+import coinflip from '../coinflip';
+import { getDoNotAbortActivePressInteractionOnTransition, getInteractionRate } from '../config';
+import { getActiveTrace } from '../experience-trace-id-context';
+import UFOInteractionIDContext, { DefaultInteractionID } from '../interaction-id-context';
+import { abortAll, addNewInteraction, addOnCancelCallback, getActiveInteraction, tryComplete } from '../interaction-metrics';
+import UFORouteName from '../route-name-context';
+import { setInteractionActiveTrace } from './utils/set-interaction-active-trace';
+export default function traceUFOTransition(ufoName, routeName = ufoName) {
+  const pressInteractionsList = getDoNotAbortActivePressInteractionOnTransition();
+  const interaction = getActiveInteraction();
+  if (pressInteractionsList && interaction) {
+    if (pressInteractionsList.includes(interaction.ufoName)) {
+      return;
+    }
+  }
+  abortAll('transition', ufoName !== null && ufoName !== void 0 ? ufoName : undefined);
+  if (ufoName) {
+    UFORouteName.current = ufoName;
+    const rate = getInteractionRate(ufoName, 'transition');
+    if (coinflip(rate)) {
+      const newId = createUUID();
+      setInteractionActiveTrace(newId);
+      DefaultInteractionID.current = newId;
+      addNewInteraction(newId, ufoName, 'transition', performance.now(), rate, null, routeName, getActiveTrace());
+    }
+  }
+}
+export function useUFOTransitionCompleter() {
+  const interactionId = useContext(UFOInteractionIDContext);
+  const capturedInteractionId = interactionId.current;
+  useEffect(() => {
+    // If we have a current interaction set...
+    if (capturedInteractionId != null) {
+      let cancel = requestAnimationFrame(() => {
+        cancel = requestAnimationFrame(() => {
+          if (capturedInteractionId === interactionId.current) {
+            tryComplete(capturedInteractionId);
+          }
+        });
+      });
+      addOnCancelCallback(capturedInteractionId, () => {
+        cancelAnimationFrame(cancel);
+      });
+    }
+  }, [capturedInteractionId, interactionId]);
+}

package/dist/es2019/trace-transition/utils/generate-span-id/index.js

@@ -0,0 +1 @@
+export const generateSpanId = () => Array.from(new Array(16), () => Math.floor(Math.random() * 16).toString(16)).join('');

package/dist/es2019/trace-transition/utils/set-interaction-active-trace/index.js

@@ -0,0 +1,5 @@
+import { setActiveTrace } from '../../../experience-trace-id-context';
+import { generateSpanId } from '../generate-span-id';
+export const setInteractionActiveTrace = newId => {
+  setActiveTrace(newId.replace(/-/g, ''), generateSpanId(), 'transition');
+};