@atlaskit/react-ufo 2.4.0 → 2.4.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.4.2
+
+### Patch Changes
+
+- [#171586](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171586)
+  [`abec7f72a0d71`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/abec7f72a0d71) -
+  add experimental as a noop prop to UFO hold
+
+## 2.4.1
+
+### Patch Changes
+
+- [#170689](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170689)
+  [`960d36f94739d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/960d36f94739d) -
+  [React UFO] Fix sessionStorage no access error
+
 ## 2.4.0
 
 ### Minor Changes

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

@@ -11,11 +11,13 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _bowserUltralight = _interopRequireDefault(require("bowser-ultralight"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _additionalPayload = require("../additional-payload");
 var bundleEvalTiming = _interopRequireWildcard(require("../bundle-eval-timing"));
 var _constants = require("../common/constants");
 var _config = require("../config");
 var _customTimings = require("../custom-timings");
+var _globalErrorHandler = require("../global-error-handler");
 var _hiddenTiming = require("../hidden-timing");
 var initialPageLoadExtraTiming = _interopRequireWildcard(require("../initial-page-load-extra-timing"));
 var _interactionMetrics = require("../interaction-metrics");
@@ -607,6 +609,45 @@ function getSSRDoneTimeValue(config) {
 function getPayloadSize(payload) {
   return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
 }
+function getStylesheetMetrics() {
+  if (!(0, _platformFeatureFlags.fg)('ufo_capture_stylesheet_metrics')) {
+    return {};
+  }
+  try {
+    var stylesheets = Array.from(document.styleSheets);
+    var stylesheetCount = stylesheets.length;
+    var cssrules = Array.from(document.styleSheets).reduce(function (acc, item) {
+      // Other domain stylesheets throw a SecurityError
+      try {
+        return acc + item.cssRules.length;
+      } catch (e) {
+        return acc;
+      }
+    }, 0);
+    var styleElements = document.querySelectorAll('style').length;
+    var styleProps = document.querySelectorAll('[style]');
+    var styleDeclarations = Array.from(document.querySelectorAll('[style]')).reduce(function (acc, item) {
+      try {
+        if ('style' in item) {
+          return acc + item.style.length;
+        } else {
+          return acc;
+        }
+      } catch (e) {
+        return acc;
+      }
+    }, 0);
+    return {
+      stylesheets: stylesheetCount,
+      styleElements: styleElements,
+      styleProps: styleProps.length,
+      styleDeclarations: styleDeclarations,
+      cssrules: cssrules
+    };
+  } catch (e) {
+    return {};
+  }
+}
 function createInteractionMetricsPayload(interaction, interactionId) {
   var _window$location, _config$additionalPay;
   var interactionPayloadStart = performance.now();
@@ -701,7 +742,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
     source: 'measured',
     tags: ['observability'],
     attributes: {
-      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
         // basic
         'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
         'event:product': config.product,
@@ -715,7 +756,8 @@ function createInteractionMetricsPayload(interaction, interactionId) {
         'event:region': config.region || 'unknown',
         'experience:key': 'custom.interaction-metrics',
         'experience:name': newUFOName
-      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), {}, {
+      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), {}, {
+        errorCount: (0, _globalErrorHandler.getGlobalErrorCount)(),
         interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
           namePrefix: config.namePrefix || '',
           segmentPrefix: config.segmentPrefix || '',
@@ -746,7 +788,8 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           }),
           marks: optimizeMarks(interaction.marks),
           customData: optimizeCustomData(interaction),
-          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start)
+          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start),
+          errorCount: interaction.errors.length
         }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics()), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)),
         'ufo:payloadTime': (0, _roundNumber.roundEpsilon)(performance.now() - interactionPayloadStart)
       })

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

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sinkErrorHandler = exports.default = void 0;
+exports.sinkErrorHandler = exports.getGlobalErrorCount = exports.default = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _bindEventListener = require("bind-event-listener");
 var shouldInitilizeGlobalErrorHandler = true;
+var globalCount = 0;
 var errors = [];
 var push = function push(name, labelStack, errorType, errorMessage, errorStack) {
   errors.push({
@@ -25,8 +26,12 @@ var sinkErrorHandler = exports.sinkErrorHandler = function sinkErrorHandler(sink
   });
   errors.length = 0;
 };
+var getGlobalErrorCount = exports.getGlobalErrorCount = function getGlobalErrorCount() {
+  return globalCount;
+};
 var handleError = function handleError(e) {
   var _e$error;
+  globalCount++;
   if (((_e$error = e.error) === null || _e$error === void 0 ? void 0 : _e$error.UFOhasCaught) === undefined) {
     try {
       if (e.error instanceof Error) {
@@ -46,6 +51,7 @@ var handleError = function handleError(e) {
   }
 };
 var handlePromiseRejection = function handlePromiseRejection(e) {
+  globalCount++;
   if (e.reason instanceof Error) {
     push('GlobalErrorHandler', null, e.reason.name, e.reason.message, e.reason.stack);
   } else if (e.reason) {

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

@@ -41,13 +41,6 @@ var init = exports.init = function init(analyticsWebClientAsync, config) {
   if (initialized) {
     return;
   }
-  try {
-    if (window !== undefined) {
-      window.__REACT_UFO_ENABLE_PERF_TRACING = Boolean(sessionStorage.getItem('additionalPerfMarks') === 'true');
-    }
-  } catch (err) {
-    /* do nothing */
-  }
   (0, _config.setUFOConfig)(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var vcOptions = {

package/dist/cjs/load-hold/UFOLoadHold.js

@@ -62,11 +62,13 @@ function UFOLoadHold(_ref) {
   var children = _ref.children,
     name = _ref.name,
     _ref$hold = _ref.hold,
-    hold = _ref$hold === void 0 ? true : _ref$hold;
+    hold = _ref$hold === void 0 ? true : _ref$hold,
+    _ref$experimental = _ref.experimental,
+    experimental = _ref$experimental === void 0 ? false : _ref$experimental;
   // react-18: useId instead
   var context = (0, _react.useContext)(_interactionContext.default);
   useLayoutEffectSAFE(function () {
-    if (hold && context != null) {
+    if (hold && !experimental && context != null) {
       return context.hold(name);
     }
   }, [hold, context, name]);

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

@@ -1,9 +1,11 @@
 import Bowser from 'bowser-ultralight';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getLighthouseMetrics } from '../additional-payload';
 import * as bundleEvalTiming from '../bundle-eval-timing';
 import { REACT_UFO_VERSION } from '../common/constants';
 import { getConfig, getUfoNameOverrides } from '../config';
 import { getBm3Timings } from '../custom-timings';
+import { getGlobalErrorCount } from '../global-error-handler';
 import { getPageVisibilityState } from '../hidden-timing';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
 import { interactionSpans as atlaskitInteractionSpans, postInteractionLog } from '../interaction-metrics';
@@ -599,6 +601,45 @@ function getSSRDoneTimeValue(config) {
 function getPayloadSize(payload) {
   return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
 }
+function getStylesheetMetrics() {
+  if (!fg('ufo_capture_stylesheet_metrics')) {
+    return {};
+  }
+  try {
+    const stylesheets = Array.from(document.styleSheets);
+    const stylesheetCount = stylesheets.length;
+    const cssrules = Array.from(document.styleSheets).reduce((acc, item) => {
+      // Other domain stylesheets throw a SecurityError
+      try {
+        return acc + item.cssRules.length;
+      } catch (e) {
+        return acc;
+      }
+    }, 0);
+    const styleElements = document.querySelectorAll('style').length;
+    const styleProps = document.querySelectorAll('[style]');
+    const styleDeclarations = Array.from(document.querySelectorAll('[style]')).reduce((acc, item) => {
+      try {
+        if ('style' in item) {
+          return acc + item.style.length;
+        } else {
+          return acc;
+        }
+      } catch (e) {
+        return acc;
+      }
+    }, 0);
+    return {
+      stylesheets: stylesheetCount,
+      styleElements,
+      styleProps: styleProps.length,
+      styleDeclarations,
+      cssrules: cssrules
+    };
+  } catch (e) {
+    return {};
+  }
+}
 function createInteractionMetricsPayload(interaction, interactionId) {
   var _window$location, _config$additionalPay;
   const interactionPayloadStart = performance.now();
@@ -717,6 +758,8 @@ function createInteractionMetricsPayload(interaction, interactionId) {
         ...getVCMetrics(interaction),
         ...((_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)),
         ...getTracingContextData(interaction),
+        ...getStylesheetMetrics(),
+        errorCount: getGlobalErrorCount(),
         interactionMetrics: {
           namePrefix: config.namePrefix || '',
           segmentPrefix: config.segmentPrefix || '',
@@ -748,6 +791,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           marks: optimizeMarks(interaction.marks),
           customData: optimizeCustomData(interaction),
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start),
+          errorCount: interaction.errors.length,
           ...labelStack,
           ...getPageLoadInteractionMetrics(),
           ...getDetailedInteractionMetrics(),

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

@@ -1,5 +1,6 @@
 import { bind } from 'bind-event-listener';
 let shouldInitilizeGlobalErrorHandler = true;
+let globalCount = 0;
 const errors = [];
 let push = (name, labelStack, errorType, errorMessage, errorStack) => {
   errors.push({
@@ -17,8 +18,10 @@ export const sinkErrorHandler = sinkFunc => {
   });
   errors.length = 0;
 };
+export const getGlobalErrorCount = () => globalCount;
 const handleError = e => {
   var _e$error;
+  globalCount++;
   if (((_e$error = e.error) === null || _e$error === void 0 ? void 0 : _e$error.UFOhasCaught) === undefined) {
     try {
       if (e.error instanceof Error) {
@@ -38,6 +41,7 @@ const handleError = e => {
   }
 };
 const handlePromiseRejection = e => {
+  globalCount++;
   if (e.reason instanceof Error) {
     push('GlobalErrorHandler', null, e.reason.name, e.reason.message, e.reason.stack);
   } else if (e.reason) {

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

@@ -30,13 +30,6 @@ export const init = (analyticsWebClientAsync, config) => {
   if (initialized) {
     return;
   }
-  try {
-    if (window !== undefined) {
-      window.__REACT_UFO_ENABLE_PERF_TRACING = Boolean(sessionStorage.getItem('additionalPerfMarks') === 'true');
-    }
-  } catch (err) {
-    /* do nothing */
-  }
   setUFOConfig(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     const vcOptions = {

package/dist/es2019/load-hold/UFOLoadHold.js

@@ -51,12 +51,13 @@ const useLayoutEffectSAFE = typeof window === 'undefined' ? useEffect : useLayou
 export default function UFOLoadHold({
   children,
   name,
-  hold = true
+  hold = true,
+  experimental = false
 }) {
   // react-18: useId instead
   const context = useContext(UFOInteractionContext);
   useLayoutEffectSAFE(() => {
-    if (hold && context != null) {
+    if (hold && !experimental && context != null) {
       return context.hold(name);
     }
   }, [hold, context, name]);

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

@@ -9,11 +9,13 @@ var _excluded = ["labelStack", "time"],
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import Bowser from 'bowser-ultralight';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getLighthouseMetrics } from '../additional-payload';
 import * as bundleEvalTiming from '../bundle-eval-timing';
 import { REACT_UFO_VERSION } from '../common/constants';
 import { getConfig, getUfoNameOverrides } from '../config';
 import { getBm3Timings } from '../custom-timings';
+import { getGlobalErrorCount } from '../global-error-handler';
 import { getPageVisibilityState } from '../hidden-timing';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
 import { interactionSpans as atlaskitInteractionSpans, postInteractionLog } from '../interaction-metrics';
@@ -597,6 +599,45 @@ function getSSRDoneTimeValue(config) {
 function getPayloadSize(payload) {
   return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
 }
+function getStylesheetMetrics() {
+  if (!fg('ufo_capture_stylesheet_metrics')) {
+    return {};
+  }
+  try {
+    var stylesheets = Array.from(document.styleSheets);
+    var stylesheetCount = stylesheets.length;
+    var cssrules = Array.from(document.styleSheets).reduce(function (acc, item) {
+      // Other domain stylesheets throw a SecurityError
+      try {
+        return acc + item.cssRules.length;
+      } catch (e) {
+        return acc;
+      }
+    }, 0);
+    var styleElements = document.querySelectorAll('style').length;
+    var styleProps = document.querySelectorAll('[style]');
+    var styleDeclarations = Array.from(document.querySelectorAll('[style]')).reduce(function (acc, item) {
+      try {
+        if ('style' in item) {
+          return acc + item.style.length;
+        } else {
+          return acc;
+        }
+      } catch (e) {
+        return acc;
+      }
+    }, 0);
+    return {
+      stylesheets: stylesheetCount,
+      styleElements: styleElements,
+      styleProps: styleProps.length,
+      styleDeclarations: styleDeclarations,
+      cssrules: cssrules
+    };
+  } catch (e) {
+    return {};
+  }
+}
 function createInteractionMetricsPayload(interaction, interactionId) {
   var _window$location, _config$additionalPay;
   var interactionPayloadStart = performance.now();
@@ -691,7 +732,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
     source: 'measured',
     tags: ['observability'],
     attributes: {
-      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
         // basic
         'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
         'event:product': config.product,
@@ -705,7 +746,8 @@ function createInteractionMetricsPayload(interaction, interactionId) {
         'event:region': config.region || 'unknown',
         'experience:key': 'custom.interaction-metrics',
         'experience:name': newUFOName
-      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), {}, {
+      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), {}, {
+        errorCount: getGlobalErrorCount(),
         interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
           namePrefix: config.namePrefix || '',
           segmentPrefix: config.segmentPrefix || '',
@@ -736,7 +778,8 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           }),
           marks: optimizeMarks(interaction.marks),
           customData: optimizeCustomData(interaction),
-          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start)
+          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start),
+          errorCount: interaction.errors.length
         }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics()), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)),
         'ufo:payloadTime': roundEpsilon(performance.now() - interactionPayloadStart)
       })

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

@@ -1,6 +1,7 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import { bind } from 'bind-event-listener';
 var shouldInitilizeGlobalErrorHandler = true;
+var globalCount = 0;
 var errors = [];
 var push = function push(name, labelStack, errorType, errorMessage, errorStack) {
   errors.push({
@@ -18,8 +19,12 @@ export var sinkErrorHandler = function sinkErrorHandler(sinkFunc) {
   });
   errors.length = 0;
 };
+export var getGlobalErrorCount = function getGlobalErrorCount() {
+  return globalCount;
+};
 var handleError = function handleError(e) {
   var _e$error;
+  globalCount++;
   if (((_e$error = e.error) === null || _e$error === void 0 ? void 0 : _e$error.UFOhasCaught) === undefined) {
     try {
       if (e.error instanceof Error) {
@@ -39,6 +44,7 @@ var handleError = function handleError(e) {
   }
 };
 var handlePromiseRejection = function handlePromiseRejection(e) {
+  globalCount++;
   if (e.reason instanceof Error) {
     push('GlobalErrorHandler', null, e.reason.name, e.reason.message, e.reason.stack);
   } else if (e.reason) {

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

@@ -31,13 +31,6 @@ export var init = function init(analyticsWebClientAsync, config) {
   if (initialized) {
     return;
   }
-  try {
-    if (window !== undefined) {
-      window.__REACT_UFO_ENABLE_PERF_TRACING = Boolean(sessionStorage.getItem('additionalPerfMarks') === 'true');
-    }
-  } catch (err) {
-    /* do nothing */
-  }
   setUFOConfig(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var vcOptions = {

package/dist/esm/load-hold/UFOLoadHold.js

@@ -52,11 +52,13 @@ export default function UFOLoadHold(_ref) {
   var children = _ref.children,
     name = _ref.name,
     _ref$hold = _ref.hold,
-    hold = _ref$hold === void 0 ? true : _ref$hold;
+    hold = _ref$hold === void 0 ? true : _ref$hold,
+    _ref$experimental = _ref.experimental,
+    experimental = _ref$experimental === void 0 ? false : _ref$experimental;
   // react-18: useId instead
   var context = useContext(UFOInteractionContext);
   useLayoutEffectSAFE(function () {
-    if (hold && context != null) {
+    if (hold && !experimental && context != null) {
       return context.hold(name);
     }
   }, [hold, context, name]);