@atlaskit/react-ufo 1.1.0 → 2.0.1

package/dist/es2019/create-post-interaction-log-payload/index.js

@@ -0,0 +1,188 @@
+import { REACT_UFO_VERSION } from '../common/constants';
+import { getConfig } from '../config';
+import { isSegmentLabel, sanitizeUfoName } from '../create-payload/common/utils';
+import { getPageVisibilityState } from '../hidden-timing';
+function getParentStack(labelStack) {
+  if (!labelStack || labelStack.length <= 1) {
+    return null;
+  }
+  return labelStack.slice(0, labelStack.length - 1);
+}
+function getSegmentId(labelStack) {
+  if (!labelStack) {
+    return null;
+  }
+  const leafLabelStack = labelStack[labelStack.length - 1];
+  if (isSegmentLabel(leafLabelStack)) {
+    return leafLabelStack.segmentId;
+  }
+  const parentStack = getParentStack(labelStack);
+  if (!parentStack) {
+    return null;
+  }
+  return getSegmentId(parentStack);
+}
+function getParentSegmentId(labelStack) {
+  return getSegmentId(getParentStack(labelStack));
+}
+
+/**
+ * Whenever a render happen, all parent segment have timing reported
+ * This method tries to reduce that noise
+ */
+function removeCascadingParentTimingReport(reactProfilerTimings) {
+  const timingIndex = new Map();
+  reactProfilerTimings.forEach(timing => {
+    const segmentId = getSegmentId(timing.labelStack);
+    if (segmentId) {
+      var _timingIndex$get;
+      const timingArray = (_timingIndex$get = timingIndex.get(segmentId)) !== null && _timingIndex$get !== void 0 ? _timingIndex$get : [];
+      timingIndex.set(segmentId, timingArray);
+      timingArray.push(timing);
+    }
+  });
+  reactProfilerTimings.forEach(timing => {
+    const parentSegmentId = getParentSegmentId(timing.labelStack);
+    if (parentSegmentId) {
+      const parentTimings = timingIndex.get(parentSegmentId);
+      const filteredParentTimings = parentTimings === null || parentTimings === void 0 ? void 0 : parentTimings.filter(parentTiming => {
+        if (parentTiming.startTime === timing.startTime && parentTiming.actualDuration === timing.actualDuration) {
+          return false;
+        }
+        return true;
+      });
+      if (filteredParentTimings) {
+        timingIndex.set(parentSegmentId, filteredParentTimings);
+      } else {
+        timingIndex.delete(parentSegmentId);
+      }
+    }
+  });
+  return [...timingIndex.values()].flatMap(v => v);
+}
+function transformReactProfilerTimings(reactProfilerTimings) {
+  const filtered = removeCascadingParentTimingReport(reactProfilerTimings !== null && reactProfilerTimings !== void 0 ? reactProfilerTimings : []);
+  const reactProfilerTimingsMap = filtered.reduce((result, {
+    labelStack,
+    startTime,
+    commitTime,
+    actualDuration,
+    type
+  }) => {
+    if (labelStack && type !== 'nested-update') {
+      const label = labelStack.map(ls => ls.name).join('/');
+      const start = Math.round(startTime);
+      const end = Math.round(commitTime);
+      const timing = result.get(label) || {
+        labelStack: label,
+        startTime: start,
+        endTime: end,
+        mountCount: 0,
+        rerenderCount: 1,
+        renderDuration: 0
+      };
+      if (start < timing.startTime) {
+        timing.startTime = Math.round(start);
+      }
+      if (end > timing.endTime) {
+        timing.endTime = Math.round(end);
+      }
+      if (type === 'mount') {
+        timing.mountCount += 1;
+      }
+      if (type === 'update') {
+        timing.rerenderCount += 1;
+      }
+      timing.renderDuration += Math.round(actualDuration);
+      result.set(label, timing);
+    }
+    return result;
+  }, new Map());
+  return [...reactProfilerTimingsMap.values()];
+}
+export default function createPostInteractionLogPayload({
+  lastInteractionFinish,
+  reactProfilerTimings,
+  lastInteractionFinishVCResult,
+  postInteractionFinishVCResult
+}) {
+  var _window$location;
+  const config = getConfig();
+  if (!config) {
+    throw Error('UFO Configuration not provided');
+  }
+  const ufoName = sanitizeUfoName(lastInteractionFinish.ufoName);
+  const pageVisibilityState = getPageVisibilityState(lastInteractionFinish.start, lastInteractionFinish.end);
+  if (pageVisibilityState !== 'visible') {
+    return null;
+  }
+  const maxEndTimeFromProfiler = reactProfilerTimings ? Math.max(...reactProfilerTimings.map(t => t.commitTime)) : lastInteractionFinish.end;
+  const revisedEndTime = Math.round(maxEndTimeFromProfiler);
+  const revisedTtai = Math.round(maxEndTimeFromProfiler - lastInteractionFinish.start);
+  const lastInteractionFinishStart = Math.round(lastInteractionFinish.start);
+  const lastInteractionFinishEnd = Math.round(lastInteractionFinish.end);
+  const lastInteractionFinishTTAI = Math.round(lastInteractionFinish.end - lastInteractionFinish.start);
+  let lastInteractionFinishVC90 = null;
+  if (lastInteractionFinishVCResult !== null && lastInteractionFinishVCResult !== void 0 && lastInteractionFinishVCResult['ufo:vc:state']) {
+    var _lastInteractionFinis;
+    const lastInteractionFinishVCMetrics = lastInteractionFinishVCResult === null || lastInteractionFinishVCResult === void 0 ? void 0 : lastInteractionFinishVCResult['metrics:vc'];
+    lastInteractionFinishVC90 = (_lastInteractionFinis = lastInteractionFinishVCMetrics[90]) !== null && _lastInteractionFinis !== void 0 ? _lastInteractionFinis : null;
+  }
+  let postInteractionFinishVCRatios = {};
+  let revisedVC90 = null;
+  let postInteractionFinishVCUpdates = [];
+  if (postInteractionFinishVCResult !== null && postInteractionFinishVCResult !== void 0 && postInteractionFinishVCResult['ufo:vc:state']) {
+    postInteractionFinishVCRatios = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['ufo:vc:ratios'];
+    postInteractionFinishVCUpdates = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['ufo:vc:updates'];
+    const postInteractionFinishVCMetrics = postInteractionFinishVCResult === null || postInteractionFinishVCResult === void 0 ? void 0 : postInteractionFinishVCResult['metrics:vc'];
+    if (typeof lastInteractionFinishVC90 === 'number') {
+      var _postInteractionFinis;
+      revisedVC90 = (_postInteractionFinis = postInteractionFinishVCMetrics[90]) !== null && _postInteractionFinis !== void 0 ? _postInteractionFinis : null;
+    }
+  }
+  const lateMutations = postInteractionFinishVCUpdates.filter(entry => entry.time > lastInteractionFinish.end).flatMap(({
+    time,
+    elements
+  }) => Array.from(new Set(elements)).map(element => ({
+    time,
+    element,
+    viewportHeatmapPercentage: postInteractionFinishVCRatios[element]
+  })));
+  return {
+    actionSubject: 'experience',
+    action: 'measured',
+    eventType: 'operational',
+    source: 'measured',
+    tags: ['observability'],
+    attributes: {
+      properties: {
+        // basic
+        'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
+        'event:product': config.product,
+        'event:schema': '1.0.0',
+        'event:source': {
+          name: 'react-ufo/web',
+          version: REACT_UFO_VERSION,
+          payloadSource: 'platform'
+        },
+        'event:region': config.region || 'unknown',
+        'experience:key': 'custom.post-interaction-logs',
+        postInteractionLog: {
+          lastInteractionFinish: {
+            ...lastInteractionFinish,
+            ufoName,
+            start: lastInteractionFinishStart,
+            end: lastInteractionFinishEnd,
+            ttai: lastInteractionFinishTTAI,
+            vc90: lastInteractionFinishVC90
+          },
+          revisedEndTime,
+          revisedTtai,
+          revisedVC90,
+          lateMutations,
+          reactProfilerTimings: transformReactProfilerTimings(reactProfilerTimings)
+        }
+      }
+    }
+  };
+}

package/dist/es2019/custom-data/index.js

@@ -0,0 +1,24 @@
+import { useContext, useMemo } from 'react';
+import UFOInteractionContext from '../interaction-context';
+import { getInteractionId } from '../interaction-id-context';
+import { addCustomData } from '../interaction-metrics';
+export default function UFOCustomData({
+  data
+}) {
+  const interactionContext = useContext(UFOInteractionContext);
+  useMemo(() => {
+    if (!interactionContext) {
+      return;
+    }
+    interactionContext.addCustomData(data);
+  }, [data, interactionContext]);
+  return null;
+}
+export function addUFOCustomData(data) {
+  const interactionId = getInteractionId();
+  const currentInteractionId = interactionId.current;
+  if (!currentInteractionId) {
+    return;
+  }
+  addCustomData(currentInteractionId, [], data);
+}

package/dist/es2019/custom-data/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/custom-mark/index.js

@@ -0,0 +1,38 @@
+import { useContext, useMemo } from 'react';
+import UFOInteractionContext from '../interaction-context';
+import { getInteractionId } from '../interaction-id-context';
+import { addMark } from '../interaction-metrics';
+export default function UFOCustomMark({
+  name,
+  timestamp
+}) {
+  const interactionContext = useContext(UFOInteractionContext);
+  useMemo(() => {
+    if (interactionContext != null) {
+      interactionContext.addMark(name, timestamp);
+    }
+  }, [interactionContext, name, timestamp]);
+  return null;
+}
+export function UFOCustomMarks({
+  data
+}) {
+  const interactionContext = useContext(UFOInteractionContext);
+  useMemo(() => {
+    if (interactionContext != null && data != null) {
+      Object.keys(data).forEach(i => {
+        interactionContext.addMark(i, data[i]);
+      });
+    }
+  }, [data, interactionContext]);
+  return null;
+}
+export function addUFOCustomMark(name, timestamp) {
+  const interactionId = getInteractionId();
+  const currentInteractionId = interactionId.current;
+  if (!currentInteractionId) {
+    return;
+  }
+  const time = timestamp || performance.now();
+  addMark(currentInteractionId, 'custom', name, [], time);
+}

package/dist/es2019/custom-spans/index.js

@@ -0,0 +1,6 @@
+import { addSpanToAll } from '../interaction-metrics';
+export function addCustomSpans(name, start, end = performance.now(), size = 0) {
+  addSpanToAll('custom', name, [{
+    name: 'custom'
+  }], start, end, size);
+}

package/dist/es2019/custom-timings/index.js

@@ -0,0 +1,57 @@
+import { useContext, useMemo } from 'react';
+import UFOInteractionContext from '../interaction-context';
+import { getInteractionId } from '../interaction-id-context';
+import { addCustomTiming, getCurrentInteractionType } from '../interaction-metrics';
+export function getBm3Timings(marks, timingConfigs) {
+  const bm3Timings = {};
+  if (!marks || !timingConfigs) {
+    return bm3Timings;
+  }
+  timingConfigs.forEach(item => {
+    if (!item.startMark || !item.endMark) {
+      return;
+    }
+    const startTime = marks[item.startMark];
+    if (!startTime) {
+      return;
+    }
+    const endTime = marks[item.endMark];
+    if (!endTime) {
+      return;
+    }
+    bm3Timings[item.key] = {
+      startTime,
+      endTime
+    };
+  });
+  return bm3Timings;
+}
+export function UFOBM3TimingsToUFO({
+  marks,
+  timings
+}) {
+  const interactionContext = useContext(UFOInteractionContext);
+  const interactionId = getInteractionId().current;
+  useMemo(() => {
+    if (interactionContext != null && interactionId != null && marks != null && timings != null) {
+      const interactionType = getCurrentInteractionType(interactionId);
+      if (interactionType === 'press') {
+        return;
+      }
+      const bm3Timings = getBm3Timings(marks, timings);
+      interactionContext.addCustomTimings(bm3Timings);
+    }
+  }, [interactionContext, interactionId, marks, timings]);
+  return null;
+}
+export function addBM3TimingsToUFO(marks, timingsConfig) {
+  const interactionId = getInteractionId().current;
+  if (interactionId) {
+    const interactionType = getCurrentInteractionType(interactionId);
+    if (interactionType === 'press') {
+      return;
+    }
+    const bm3Timings = getBm3Timings(marks, timingsConfig);
+    addCustomTiming(interactionId, [], bm3Timings);
+  }
+}

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

@@ -0,0 +1,31 @@
+import { makeTraceHttpRequestHeaders } from './utils/make-trace-http-request-headers';
+const state = {
+  context: null
+};
+export const generateSpanId = () => {
+  return Array.from(new Array(16), () => Math.floor(Math.random() * 16).toString(16)).join('');
+};
+export const setInteractionActiveTrace = (interactionId, experienceType) => {
+  setActiveTrace(interactionId.replace(/-/g, ''), generateSpanId(), experienceType);
+};
+export const setActiveTrace = (traceId, spanId, type) => {
+  state.context = {
+    traceId,
+    spanId,
+    type
+  };
+};
+export const getActiveTrace = () => state.context || undefined;
+export const clearActiveTrace = () => {
+  state.context = null;
+};
+export const getActiveTraceHttpRequestHeaders = _url => {
+  if (state.context === null) {
+    return null;
+  }
+  const {
+    traceId,
+    spanId
+  } = state.context;
+  return makeTraceHttpRequestHeaders(traceId, spanId);
+};

package/dist/es2019/experience-trace-id-context/utils/make-trace-http-request-headers/index.js

@@ -0,0 +1,4 @@
+export const makeTraceHttpRequestHeaders = (traceId, spanId) => ({
+  'X-B3-TraceId': traceId,
+  'X-B3-SpanId': spanId
+});

package/dist/es2019/feature-flags-accessed/common/constants.js

@@ -0,0 +1 @@
+export const NON_BOOLEAN_VALUE = 'non_boolean';

package/dist/es2019/feature-flags-accessed/common/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/feature-flags-accessed/common/utils/index.js

@@ -0,0 +1,24 @@
+import { NON_BOOLEAN_VALUE } from '../constants';
+const startsAsObject = value => {
+  try {
+    if (value.charAt(0) === '{') {
+      return true;
+    }
+  } catch (e) {
+    return false;
+  }
+  return false;
+};
+const isObject = value => value && typeof value === 'object' && value.constructor === Object;
+const isString = input => {
+  let result;
+  try {
+    result = typeof input === 'string' || input instanceof String;
+  } catch (err) {
+    // swallow any errors
+    result = false;
+  }
+  return result;
+};
+export const shouldRedactValue = value => isString(value) && startsAsObject(value) || isObject(value);
+export const redactValue = featureFlagValue => shouldRedactValue(featureFlagValue) ? NON_BOOLEAN_VALUE : featureFlagValue;

package/dist/es2019/feature-flags-accessed/index.js

@@ -0,0 +1,21 @@
+import { redactValue } from './common/utils';
+export { redactValue } from './common/utils';
+export const allFeatureFlagsAccessed = new Map();
+export const currentFeatureFlagsAccessed = new Map();
+
+/**
+ * Used for tracking accessed feature flags in "@atlassian/jira-feature-flagging".
+ * */
+export const addFeatureFlagAccessed = (featureFlagName, featureFlagValue) => {
+  try {
+    // Inform Criterion about FF being accessed
+    if (globalThis.__CRITERION__ && typeof globalThis.__CRITERION__.addFeatureFlagAccessed === 'function') {
+      globalThis.__CRITERION__.addFeatureFlagAccessed(featureFlagName, featureFlagValue);
+    }
+  } catch (_e) {
+    // ignore the criterion error
+  }
+  const value = redactValue(featureFlagValue);
+  allFeatureFlagsAccessed.set(featureFlagName, value);
+  currentFeatureFlagsAccessed.set(featureFlagName, value);
+};

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

@@ -0,0 +1,6 @@
+let id = 0;
+
+/** Get a new string id each time it's called */
+export default function generateId() {
+  return String(id++);
+}

package/dist/es2019/global-error-handler/index.js

@@ -0,0 +1,64 @@
+import { bind } from 'bind-event-listener';
+let shouldInitilizeGlobalErrorHandler = true;
+const errors = [];
+let push = (name, labelStack, errorType, errorMessage, errorStack) => {
+  errors.push({
+    name,
+    labelStack,
+    errorType,
+    errorMessage,
+    errorStack
+  });
+};
+export const sinkErrorHandler = sinkFunc => {
+  push = sinkFunc;
+  errors.forEach(e => {
+    sinkFunc(e.name, e.labelStack, e.errorType, e.errorMessage, e.errorStack);
+  });
+  errors.length = 0;
+};
+const handleError = e => {
+  var _e$error;
+  if (((_e$error = e.error) === null || _e$error === void 0 ? void 0 : _e$error.UFOhasCaught) === undefined) {
+    try {
+      if (e.error instanceof Error) {
+        push('GlobalErrorHandler', null, e.error.name, e.error.message, e.error.stack);
+      } else if (e.error) {
+        const hint = JSON.stringify(e.error).slice(0, 50);
+        push('GlobalErrorHandler', null, '', `Non error object thrown: ${hint}`, undefined);
+      } else if (e.message !== undefined) {
+        const hint = e.message.slice(0, 50);
+        push('GlobalErrorHandler', null, '', `Non error object thrown: ${hint}`, undefined);
+      }
+      if (e.error && typeof e.error === 'object') {
+        e.error.UFOhasCaught = true;
+      }
+      // eslint-disable-next-line no-empty
+    } catch (e) {}
+  }
+};
+const handlePromiseRejection = e => {
+  if (e.reason instanceof Error) {
+    push('GlobalErrorHandler', null, e.reason.name, e.reason.message, e.reason.stack);
+  } else if (e.reason) {
+    try {
+      const hint = JSON.stringify(e.reason).slice(0, 50);
+      push('GlobalErrorHandler', null, '', `Non error object thrown: ${hint}`, undefined);
+      // eslint-disable-next-line no-empty
+    } catch (e) {}
+  }
+};
+const setupUFOGlobalErrorHandler = () => {
+  if (shouldInitilizeGlobalErrorHandler) {
+    bind(window, {
+      type: 'error',
+      listener: e => handleError(e)
+    });
+    bind(window, {
+      type: 'unhandledrejection',
+      listener: handlePromiseRejection
+    });
+    shouldInitilizeGlobalErrorHandler = false;
+  }
+};
+export default setupUFOGlobalErrorHandler;

package/dist/es2019/hidden-timing/index.js

@@ -0,0 +1,87 @@
+import { bind } from 'bind-event-listener';
+const timings = [];
+let wasHiddenFlag;
+let setupFlag = false;
+function isPageHidden() {
+  if ('visibilityState' in document) {
+    return document.visibilityState === 'hidden';
+  } else {
+    // @ts-expect-error - Property 'hidden' does not exist on type 'never'.
+    return document.hidden;
+  }
+}
+const SIZE = 50;
+let insertIndex = 0;
+function pushHidden(isPageHiddenFlag, time) {
+  timings[insertIndex] = {
+    time: time !== null && time !== void 0 ? time : performance.now(),
+    hidden: isPageHiddenFlag
+  };
+  insertIndex = (insertIndex + 1) % SIZE;
+  wasHiddenFlag = isPageHiddenFlag;
+}
+function handleChange() {
+  const isPageHiddenFlag = isPageHidden();
+  if (isPageHiddenFlag) {
+    if (!wasHiddenFlag) {
+      pushHidden(isPageHiddenFlag);
+    }
+    wasHiddenFlag = true;
+  } else {
+    if (wasHiddenFlag) {
+      pushHidden(isPageHiddenFlag);
+    }
+    wasHiddenFlag = false;
+  }
+}
+function setup() {
+  bind(window, {
+    type: 'pageshow',
+    listener: handleChange
+  });
+  bind(window, {
+    type: 'pagehide',
+    listener: handleChange
+  });
+  bind(document, {
+    type: 'visibilitychange',
+    listener: handleChange
+  });
+}
+export function setupHiddenTimingCapture() {
+  if (!setupFlag) {
+    const isPageHiddenFlag = isPageHidden();
+    pushHidden(isPageHiddenFlag, 0);
+    setup();
+    setupFlag = true;
+  }
+}
+export function getPageVisibilityState(start, end) {
+  // Desirable default value is visible
+  if (timings.length === 0) {
+    return 'visible';
+  }
+  const currentSize = timings.length;
+  let hiddenState = 'mixed';
+  let startIdx = insertIndex;
+  let endIdx = insertIndex;
+
+  // currentSize is capped at SIZE.
+  for (let i = 0; i < currentSize; i++) {
+    const tmpIdx = (insertIndex + i) % currentSize;
+    if (timings[tmpIdx].time <= end) {
+      endIdx = tmpIdx;
+      if (timings[tmpIdx].time <= start) {
+        startIdx = tmpIdx;
+      }
+    }
+  }
+  if (endIdx - startIdx === 0) {
+    if (timings[startIdx].hidden) {
+      hiddenState = 'hidden';
+    } else {
+      hiddenState = 'visible';
+    }
+  }
+  return hiddenState;
+}

package/dist/es2019/initial-page-load-extra-timing/index.js

@@ -0,0 +1,43 @@
+const timings = [];
+export function addTimingFromPerformanceMark(name, startMark, stopMark, cleanStart = false, cleanStop = false) {
+  timings.push({
+    name,
+    startMark,
+    stopMark,
+    cleanStart,
+    cleanStop
+  });
+}
+export function getTimings() {
+  const reportedTimingsObj = {};
+  timings.forEach(({
+    name,
+    startMark,
+    stopMark,
+    cleanStart,
+    cleanStop
+  }) => {
+    const startEntryList = performance.getEntriesByName(startMark);
+    const stopEntryList = performance.getEntriesByName(stopMark);
+    if ((startEntryList === null || startEntryList === void 0 ? void 0 : startEntryList.length) > 0 && (stopEntryList === null || stopEntryList === void 0 ? void 0 : stopEntryList.length) > 0) {
+      const startEntry = startEntryList[startEntryList.length - 1];
+      const stopEntry = stopEntryList[stopEntryList.length - 1];
+      const {
+        startTime
+      } = startEntry;
+      const duration = stopEntry.startTime - startTime;
+      const timing = {
+        startTime: Math.round(startTime),
+        duration: Math.round(duration)
+      };
+      reportedTimingsObj[name] = timing;
+    }
+    if (cleanStart) {
+      performance.clearMarks(startMark);
+    }
+    if (cleanStop) {
+      performance.clearMarks(stopMark);
+    }
+  });
+  return reportedTimingsObj;
+}

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

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import InteractionContext from '@atlaskit/interaction-context';
+export default InteractionContext;
+export function useInteractionContext() {
+  return useContext(InteractionContext);
+}

package/dist/es2019/interaction-id-context/index.js

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+// Same structure as react's useRef.
+// This allows modals to use a ref to scope their value
+// const id = useRef(null);
+// <InteractionIDContext.Provider value={id}>...<
+
+// The default InteractionID object is a global singleton
+// It's the one that holds the root value used in routing,
+// and is overwritten when we have new interactions start.
+export const DefaultInteractionID = {
+  current: null
+};
+
+// We use a context to allow modals to have their own lifecycle
+export default /*#__PURE__*/createContext(DefaultInteractionID);
+export const getInteractionId = () => DefaultInteractionID;
+export const useInteractionId = () => DefaultInteractionID;

package/dist/es2019/interaction-metrics/common/constants.js

@@ -0,0 +1,2 @@
+const interactions = new Map();
+export default interactions;