@atlaskit/react-ufo 4.15.2 → 4.15.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.15.4
+
+### Patch Changes
+
+- [`81a0f341fac4f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/81a0f341fac4f) -
+  Platformise Jira's SSR Render Profiler timings
+
+## 4.15.3
+
+### Patch Changes
+
+- [`bf14a236a3255`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf14a236a3255) -
+  Platformise SSR edge timings within UFO
+
 ## 4.15.2
 
 ### Patch Changes

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

@@ -8,7 +8,7 @@ if(cohortingCustomData&&cohortingCustomData.size>0){var _interaction$labelSta,_c
 try{return acc+item.cssRules.length;}catch(e){return acc;}},0);var styleElements=doc.querySelectorAll('style').length;var styleProps=doc.querySelectorAll('[style]');var styleDeclarations=Array.from(doc.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{'ufo:stylesheets':stylesheetCount,'ufo:styleElements':styleElements,'ufo:styleProps':styleProps.length,'ufo:styleDeclarations':styleDeclarations,'ufo:cssrules':cssrules};}catch(e){return{};}}var regularTTAI;var expTTAI;function getErrorCounts(interaction){return{'ufo:errors:globalCount':(0,_globalErrorHandler.getGlobalErrorCount)(),'ufo:errors:count':interaction.errors.length};}function createInteractionMetricsPayload(_x,_x2,_x3,_x4,_x5){return _createInteractionMetricsPayload.apply(this,arguments);}function _createInteractionMetricsPayload(){_createInteractionMetricsPayload=(0,_asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(interaction,interactionId,experimental,criticalPayloadCount,vcMetrics){var _window$location,_config$additionalPay;var interactionPayloadStart,config,end,start,ufoName,knownSegments,rate,type,abortReason,routeName,featureFlags,previousInteractionName,isPreviousInteractionAborted,abortedByInteractionName,responsiveness,unknownElementName,unknownElementHierarchy,hydration,pageVisibilityAtTTI,pageVisibilityAtTTAI,segments,segmentTree,isDetailedPayload,isPageLoad,calculatePageVisibilityFromTheStartOfPageLoad,moreAccuratePageVisibilityAtTTI,moreAccuratePageVisibilityAtTTAI,labelStack,getInitialPageLoadSSRMetrics,pageLoadInteractionMetrics,getDetailedInteractionMetrics,getPageLoadDetailedInteractionMetrics,newUFOName,resourceTimings,_yield$Promise$all,_yield$Promise$all2,finalVCMetrics,experimentalMetrics,paintMetrics,batteryInfo,getReactHydrationStats,payload,size,vcRev,rawData,rawDataSize;return _regenerator.default.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:interactionPayloadStart=performance.now();config=(0,_config.getConfig)();if(config){_context.next=4;break;}throw Error('UFO Configuration not provided');case 4:end=interaction.end,start=interaction.start,ufoName=interaction.ufoName,knownSegments=interaction.knownSegments,rate=interaction.rate,type=interaction.type,abortReason=interaction.abortReason,routeName=interaction.routeName,featureFlags=interaction.featureFlags,previousInteractionName=interaction.previousInteractionName,isPreviousInteractionAborted=interaction.isPreviousInteractionAborted,abortedByInteractionName=interaction.abortedByInteractionName,responsiveness=interaction.responsiveness,unknownElementName=interaction.unknownElementName,unknownElementHierarchy=interaction.unknownElementHierarchy,hydration=interaction.hydration;pageVisibilityAtTTI=getPageVisibilityUpToTTI(interaction);pageVisibilityAtTTAI=(0,_getPageVisibilityUpToTtai.default)(interaction);segments=!(0,_platformFeatureFlags.fg)('platform_ufo_remove_deprecated_config_fields')&&config.killswitchNestedSegments?[]:knownSegments;segmentTree=(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)==='2.0.0'?(0,_utils.buildSegmentTree)(segments.map(function(segment){return segment.labelStack;})):{};isDetailedPayload=pageVisibilityAtTTAI==='visible';isPageLoad=type==='page_load';calculatePageVisibilityFromTheStartOfPageLoad=config.enableBetterPageVisibilityApi&&isPageLoad;moreAccuratePageVisibilityAtTTI=calculatePageVisibilityFromTheStartOfPageLoad?getMoreAccuratePageVisibilityUpToTTI(interaction):null;moreAccuratePageVisibilityAtTTAI=calculatePageVisibilityFromTheStartOfPageLoad?(0,_getMoreAccuratePageVisibilityUpToTtai.getMoreAccuratePageVisibilityUpToTTAI)(interaction):null;labelStack=interaction.labelStack?{labelStack:(0,_utils.optimizeLabelStack)(interaction.labelStack,(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type))}:{};// Page Load
 getInitialPageLoadSSRMetrics=function getInitialPageLoadSSRMetrics(){var _config$ssr;if(!isPageLoad){return{};}var config=(0,_config.getConfig)();var SSRDoneTimeValue=(0,_getSsrDoneTimeValue.default)(config);var SSRDoneTime=SSRDoneTimeValue!==undefined?{SSRDoneTime:Math.round(SSRDoneTimeValue)}:{};var isBM3ConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;var isUFOConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp||!!(config!==null&&config!==void 0&&(_config$ssr=config.ssr)!==null&&_config$ssr!==void 0&&_config$ssr.getSSRDoneTime);if(!experimental&&(isBM3ConfigSSRDoneAsFmp||isUFOConfigSSRDoneAsFmp)&&SSRDoneTimeValue!==undefined){try{performance.mark("FMP",{startTime:SSRDoneTimeValue,detail:{devtools:{dataType:'marker'}}});}catch(e){}}return _objectSpread(_objectSpread({},SSRDoneTime),{},{isBM3ConfigSSRDoneAsFmp:isBM3ConfigSSRDoneAsFmp,isUFOConfigSSRDoneAsFmp:isUFOConfigSSRDoneAsFmp});};pageLoadInteractionMetrics=getInitialPageLoadSSRMetrics();// Detailed payload. Page visibility = visible
 getDetailedInteractionMetrics=function getDetailedInteractionMetrics(resourceTimings){if(experimental||window.__UFO_COMPACT_PAYLOAD__||!isDetailedPayload){return{};}var spans=[].concat((0,_toConsumableArray2.default)(interaction.spans),(0,_toConsumableArray2.default)(_interactionMetrics.interactionSpans));_interactionMetrics.interactionSpans.length=0;return{errors:interaction.errors.map(function(_ref2){var labelStack=_ref2.labelStack,others=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _objectSpread(_objectSpread({},others),{},{labelStack:labelStack&&(0,_utils.optimizeLabelStack)(labelStack,(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type))});}),holdActive:(0,_toConsumableArray2.default)(interaction.holdActive.values()),redirects:optimizeRedirects(interaction.redirects,start),holdInfo:(0,_optimizeHoldInfo.optimizeHoldInfo)(experimental?interaction.holdExpInfo:interaction.holdInfo,start,(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),spans:(0,_optimizeSpans.optimizeSpans)(spans,start,(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),requestInfo:(0,_optimizeRequestInfo.optimizeRequestInfo)(interaction.requestInfo,start,(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),customTimings:(0,_optimizeCustomTimings.optimizeCustomTimings)(interaction.customTimings,start),bundleEvalTimings:objectToArray(getBundleEvalTimings(start)),resourceTimings:objectToArray(resourceTimings)};};// Page load & detailed payload
-getPageLoadDetailedInteractionMetrics=function getPageLoadDetailedInteractionMetrics(){var _config$ssr2;if(!isPageLoad||!isDetailedPayload){return{};}var config=(0,_config.getConfig)();return{initialPageLoadExtraTimings:objectToArray(initialPageLoadExtraTiming.getTimings()),SSRTimings:config!==null&&config!==void 0&&(_config$ssr2=config.ssr)!==null&&_config$ssr2!==void 0&&_config$ssr2.getSSRTimings?config.ssr.getSSRTimings():objectToArray(ssr.getSSRTimings())};};if(experimental){expTTAI=(0,_getTtai.default)(interaction);}else{regularTTAI=(0,_getTtai.default)(interaction);}newUFOName=(0,_utils.sanitizeUfoName)(ufoName);resourceTimings=getResourceTimings(start,end);_context.t0=Promise;_context.t1=vcMetrics;if(_context.t1){_context.next=28;break;}_context.next=27;return(0,_getVcMetrics.default)(interaction);case 27:_context.t1=_context.sent;case 28:_context.t2=_context.t1;_context.t3=experimental?(0,_createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction):Promise.resolve(undefined);_context.t4=(0,_getPaintMetrics.getPaintMetricsToLegacyFormat)(type,end);_context.t5=(0,_getBatteryInfo.getBatteryInfoToLegacyFormat)();_context.t6=[_context.t2,_context.t3,_context.t4,_context.t5];_context.next=35;return _context.t0.all.call(_context.t0,_context.t6);case 35:_yield$Promise$all=_context.sent;_yield$Promise$all2=(0,_slicedToArray2.default)(_yield$Promise$all,4);finalVCMetrics=_yield$Promise$all2[0];experimentalMetrics=_yield$Promise$all2[1];paintMetrics=_yield$Promise$all2[2];batteryInfo=_yield$Promise$all2[3];if(!experimental){(0,_addPerformanceMeasures.addPerformanceMeasures)(interaction.start,(0,_toConsumableArray2.default)((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[]));}getReactHydrationStats=function getReactHydrationStats(){if(!hydration){return{};}return{hydration:hydration};};payload={actionSubject:'experience',action:'measured',eventType:'operational',source:'measured',tags:['observability'],attributes:{properties:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({// basic
+getPageLoadDetailedInteractionMetrics=function getPageLoadDetailedInteractionMetrics(){var _config$ssr3;if(!isPageLoad||!isDetailedPayload){return{};}var initialPageLoadExtraTimings=objectToArray(initialPageLoadExtraTiming.getTimings());var config=(0,_config.getConfig)();if((0,_platformFeatureFlags.fg)('platform_ufo_default_ssr_edge_timings')){var _config$ssr2;return{initialPageLoadExtraTimings:initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr2=config.ssr)!==null&&_config$ssr2!==void 0&&_config$ssr2.getSSRTimings?[].concat((0,_toConsumableArray2.default)(config.ssr.getSSRTimings()),(0,_toConsumableArray2.default)(objectToArray(ssr.getSSRTimings()))):objectToArray(ssr.getSSRTimings())};}return{initialPageLoadExtraTimings:initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr3=config.ssr)!==null&&_config$ssr3!==void 0&&_config$ssr3.getSSRTimings?config.ssr.getSSRTimings():objectToArray(ssr.getSSRTimings())};};if(experimental){expTTAI=(0,_getTtai.default)(interaction);}else{regularTTAI=(0,_getTtai.default)(interaction);}newUFOName=(0,_utils.sanitizeUfoName)(ufoName);resourceTimings=getResourceTimings(start,end);_context.t0=Promise;_context.t1=vcMetrics;if(_context.t1){_context.next=28;break;}_context.next=27;return(0,_getVcMetrics.default)(interaction);case 27:_context.t1=_context.sent;case 28:_context.t2=_context.t1;_context.t3=experimental?(0,_createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction):Promise.resolve(undefined);_context.t4=(0,_getPaintMetrics.getPaintMetricsToLegacyFormat)(type,end);_context.t5=(0,_getBatteryInfo.getBatteryInfoToLegacyFormat)();_context.t6=[_context.t2,_context.t3,_context.t4,_context.t5];_context.next=35;return _context.t0.all.call(_context.t0,_context.t6);case 35:_yield$Promise$all=_context.sent;_yield$Promise$all2=(0,_slicedToArray2.default)(_yield$Promise$all,4);finalVCMetrics=_yield$Promise$all2[0];experimentalMetrics=_yield$Promise$all2[1];paintMetrics=_yield$Promise$all2[2];batteryInfo=_yield$Promise$all2[3];if(!experimental){(0,_addPerformanceMeasures.addPerformanceMeasures)(interaction.start,(0,_toConsumableArray2.default)((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[]));}getReactHydrationStats=function getReactHydrationStats(){if(!hydration){return{};}return{hydration:hydration};};payload={actionSubject:'experience',action:'measured',eventType:'operational',source:'measured',tags:['observability'],attributes:{properties:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_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,'event:schema':'1.0.0','event:sizeInKb':0,'event:source':{name:'react-ufo/web',version:(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)},'event:region':config.region||'unknown','experience:key':experimental?'custom.experimental-interaction-metrics':'custom.interaction-metrics','experience:name':newUFOName,// Include CPU usage monitoring data
 'event:cpu:usage':(0,_machineUtilisation.createPressureStateReport)(interaction.start,interaction.end),'event:memory:usage':(0,_machineUtilisation.createMemoryStateReport)(interaction.start,interaction.end)},criticalPayloadCount!==undefined?{'ufo:multipayload':true,'ufo:criticalPayloadCount':criticalPayloadCount}:{}),(0,_getBrowserMetadata.getBrowserMetadataToLegacyFormat)()),batteryInfo),getSSRProperties(type)),getAssetsMetrics(interaction,pageLoadInteractionMetrics===null||pageLoadInteractionMetrics===void 0?void 0:pageLoadInteractionMetrics.SSRDoneTime)),getPPSMetrics(interaction)),paintMetrics),(0,_getNavigationMetrics.getNavigationMetricsToLegacyFormat)(type)),finalVCMetrics),experimentalMetrics),(_config$additionalPay=config.additionalPayloadData)===null||_config$additionalPay===void 0?void 0:_config$additionalPay.call(config,interaction)),getTracingContextData(interaction)),getStylesheetMetrics()),getErrorCounts(interaction)),getReactHydrationStats()),{},{interactionMetrics:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({namePrefix:config.namePrefix||'',segmentPrefix:config.segmentPrefix||'',interactionId:interactionId,pageVisibilityAtTTI:pageVisibilityAtTTI,pageVisibilityAtTTAI:pageVisibilityAtTTAI,experimental__pageVisibilityAtTTI:moreAccuratePageVisibilityAtTTI,experimental__pageVisibilityAtTTAI:moreAccuratePageVisibilityAtTTAI,// raw interaction metrics
 rate:rate,routeName:routeName,type:type,abortReason:abortReason,featureFlags:featureFlags,previousInteractionName:previousInteractionName,isPreviousInteractionAborted:isPreviousInteractionAborted,abortedByInteractionName:abortedByInteractionName,// performance

package/dist/cjs/segment/segment.js

@@ -11,6 +11,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireWildcard(require("react"));
 var _scheduler = require("scheduler");
 var _uuid = require("uuid");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _coinflip = _interopRequireDefault(require("../coinflip"));
 var _config = require("../config");
 var _experienceTraceIdContext = require("../experience-trace-id-context");
@@ -20,6 +21,7 @@ var _interactionMetrics = require("../interaction-metrics");
 var _routeNameContext = _interopRequireDefault(require("../route-name-context"));
 var _shortId = _interopRequireDefault(require("../short-id"));
 var _scheduleOnPaint = _interopRequireDefault(require("./schedule-on-paint"));
+var _ssrRenderProfiler = _interopRequireDefault(require("./ssr-render-profiler"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2.default)(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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
@@ -277,11 +279,18 @@ function UFOSegment(_ref) {
       return l.name;
     }).join('/');
   }, [labelStack]);
-  return /*#__PURE__*/_react.default.createElement(_interactionContext.default.Provider, {
+  var ufoSegment = /*#__PURE__*/_react.default.createElement(_interactionContext.default.Provider, {
     value: interactionContext
   }, /*#__PURE__*/_react.default.createElement(_react.Profiler, {
     id: reactProfilerId,
     onRender: onRender
   }, children));
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_ssr_render_profiler')) {
+    return /*#__PURE__*/_react.default.createElement(_ssrRenderProfiler.default, {
+      labelStack: labelStack,
+      onRender: interactionContext.onRender
+    }, ufoSegment);
+  }
+  return ufoSegment;
 }
 UFOSegment.displayName = 'UFOSegment';

package/dist/cjs/segment/ssr-render-profiler.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SsrRenderProfilerInner = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _interactionMetrics = require("../interaction-metrics");
+var _process;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// These are stored outside react context to be resilient to concurrent mode
+// restarting the start marker from a suspense and losing the initial render
+var startTimes = new Map();
+// Keep track of the last interaction id and reset the start timers if it ever changes.
+// This is to allow multi-step ssr to track the render timers from different "interaction"s seperately
+var lastActiveInteraction;
+function checkActiveInteractionAndResetStartMarksIfSet() {
+  var _getActiveInteraction;
+  var activeInteractionId = (_getActiveInteraction = (0, _interactionMetrics.getActiveInteraction)()) === null || _getActiveInteraction === void 0 ? void 0 : _getActiveInteraction.id;
+  if (!!lastActiveInteraction && lastActiveInteraction !== activeInteractionId) {
+    startTimes.clear();
+  }
+  lastActiveInteraction = activeInteractionId;
+}
+var onStartRender = function onStartRender(id) {
+  var _startTimes$get;
+  if (!startTimes.has(id)) {
+    startTimes.set(id, []);
+  }
+  (_startTimes$get = startTimes.get(id)) === null || _startTimes$get === void 0 || _startTimes$get.push(performance.now());
+};
+var isInSSR = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__) || typeof process !== 'undefined' && Boolean(((_process = process) === null || _process === void 0 || (_process = _process.env) === null || _process === void 0 ? void 0 : _process.REACT_SSR) || false);
+var ProfilerMarker = function ProfilerMarker(_ref) {
+  var onRender = _ref.onRender;
+  if (isInSSR) {
+    onRender === null || onRender === void 0 || onRender();
+  }
+  return null;
+};
+var SsrRenderProfilerInner = exports.SsrRenderProfilerInner = function SsrRenderProfilerInner(_ref2) {
+  var children = _ref2.children,
+    labelStack = _ref2.labelStack,
+    _onRender = _ref2.onRender;
+  var reactProfilerId = (0, _react.useMemo)(function () {
+    return labelStack.map(function (l) {
+      return l.name;
+    }).join('/');
+  }, [labelStack]);
+  checkActiveInteractionAndResetStartMarksIfSet();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ProfilerMarker, {
+    onRender: function onRender() {
+      return onStartRender(reactProfilerId);
+    }
+  }), children, /*#__PURE__*/_react.default.createElement(ProfilerMarker, {
+    onRender: function onRender() {
+      var startTimesForId = startTimes.get(reactProfilerId);
+      if (startTimesForId !== null && startTimesForId !== void 0 && startTimesForId.length) {
+        var endTime = performance.now();
+        var firstStartTime = startTimesForId[0];
+        var lastStartTime = startTimesForId[startTimesForId.length - 1];
+        var baseDuration = endTime - lastStartTime;
+        var actualDuration = endTime - firstStartTime;
+        _onRender('mount',
+        // this is incorrect, but on the server there is no mount phase
+        actualDuration, baseDuration, firstStartTime, endTime);
+      }
+    }
+  }));
+};
+var SsrRenderProfiler = function SsrRenderProfiler(props) {
+  if (isInSSR) {
+    return /*#__PURE__*/_react.default.createElement(SsrRenderProfilerInner, props);
+  }
+
+  // ensure structure similar to SSR implementation
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ProfilerMarker, null), props.children);
+};
+var _default = exports.default = SsrRenderProfiler;

package/dist/cjs/ssr/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.configure = configure;
+exports.getEdgeTimingsIncludingCloudfront = getEdgeTimingsIncludingCloudfront;
 exports.getSSRDoneTime = getSSRDoneTime;
 exports.getSSRFeatureFlags = getSSRFeatureFlags;
 exports.getSSRPhaseSuccess = getSSRPhaseSuccess;
@@ -12,10 +13,9 @@ exports.getSSRSuccess = getSSRSuccess;
 exports.getSSRTimings = getSSRTimings;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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) { (0, _defineProperty2.default)(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; }
-//
-
 var NESTED_METRIC_SEPARATOR = '/';
 function filterEntry(entry) {
   return !(!entry || (0, _typeof2.default)(entry) !== 'object' || entry.startTime < 0 || entry.duration < 0);
@@ -39,16 +39,111 @@ var config;
 function configure(ssrConfig) {
   config = ssrConfig;
 }
+function getPerformanceNavigationTiming() {
+  var _performance$getEntri;
+  // getEntriesByType doesn't change the returned type based on the given type key
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return (_performance$getEntri = performance.getEntriesByType('navigation')) === null || _performance$getEntri === void 0 ? void 0 : _performance$getEntri[0];
+}
+function getServerTimingsByName() {
+  var _getPerformanceNaviga, _getPerformanceNaviga2;
+  var serverTimingsByName = Object.fromEntries((_getPerformanceNaviga = (_getPerformanceNaviga2 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga2 === void 0 || (_getPerformanceNaviga2 = _getPerformanceNaviga2.serverTiming) === null || _getPerformanceNaviga2 === void 0 ? void 0 : _getPerformanceNaviga2.map(function (timing) {
+    return [timing.name, timing];
+  })) !== null && _getPerformanceNaviga !== void 0 ? _getPerformanceNaviga : []);
+  return serverTimingsByName;
+}
+
+/**
+ * If we have the edge's view of ttfb and the clients view as well, then we should take the gap between them as
+ * the offset to use foe edge start time.
+ * This will simulate the network delays between the client and the edge as an edge startTime increase
+ */
+function getEdgeOffset(edgeTtfb) {
+  var _getPerformanceNaviga3;
+  var clientTtfb = (_getPerformanceNaviga3 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga3 === void 0 ? void 0 : _getPerformanceNaviga3.responseStart;
+  if (edgeTtfb == null || clientTtfb == null) {
+    return 0;
+  }
+  return clientTtfb - edgeTtfb;
+}
+function getEdgeTimingsIncludingCloudfront() {
+  var _serverTimingsByName$, _serverTimingsByName$2, _serverTimingsByName$3, _serverTimingsByName$4, _serverTimingsByName$5, _serverTimingsByName$6, _serverTimingsByName$7, _serverTimingsByName$8, _serverTimingsByName$9;
+  var serverTimingsByName = getServerTimingsByName();
+  var edgeTotalDuration = (_serverTimingsByName$ = (_serverTimingsByName$2 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$2 === void 0 ? void 0 : _serverTimingsByName$2.duration) !== null && _serverTimingsByName$ !== void 0 ? _serverTimingsByName$ : (_serverTimingsByName$3 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$3 === void 0 ? void 0 : _serverTimingsByName$3.duration;
+  if (!edgeTotalDuration) {
+    return null;
+  }
+  var edgeOffset = getEdgeOffset(edgeTotalDuration);
+  var cfInternalDuration = (((_serverTimingsByName$4 = serverTimingsByName['cdn-upstream-dns']) === null || _serverTimingsByName$4 === void 0 ? void 0 : _serverTimingsByName$4.duration) || 0) + (((_serverTimingsByName$5 = serverTimingsByName['cdn-upstream-connect']) === null || _serverTimingsByName$5 === void 0 ? void 0 : _serverTimingsByName$5.duration) || 0);
+  var cfUpstreamDuration = (((_serverTimingsByName$6 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$6 === void 0 ? void 0 : _serverTimingsByName$6.duration) || 0) - cfInternalDuration;
+  var cfDownstreamDuration = (((_serverTimingsByName$7 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$7 === void 0 ? void 0 : _serverTimingsByName$7.duration) || 0) - (((_serverTimingsByName$8 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$8 === void 0 ? void 0 : _serverTimingsByName$8.duration) || 0);
+  var atlEdgeDuration = (_serverTimingsByName$9 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$9 === void 0 ? void 0 : _serverTimingsByName$9.duration;
+  var cfToAtlEdgeNetworkDuration = cfUpstreamDuration - atlEdgeDuration;
+  var edgeTimings = {
+    edge: {
+      startTime: edgeOffset,
+      duration: edgeTotalDuration
+    }
+  };
+  if (typeof serverTimingsByName['cdn-downstream-fbl'] !== 'undefined') {
+    var _serverTimingsByName$0;
+    edgeTimings['edge/cf'] = {
+      startTime: edgeOffset,
+      duration: (_serverTimingsByName$0 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$0 === void 0 ? void 0 : _serverTimingsByName$0.duration
+    };
+    edgeTimings['edge/cf/internal'] = {
+      startTime: edgeOffset,
+      duration: cfInternalDuration
+    };
+    edgeTimings['edge/cf/upstream'] = {
+      startTime: edgeOffset + cfInternalDuration,
+      duration: cfUpstreamDuration
+    };
+    edgeTimings['edge/cf/downstream'] = {
+      startTime: edgeOffset + cfInternalDuration + cfUpstreamDuration,
+      duration: cfDownstreamDuration
+    };
+  }
+  if (typeof serverTimingsByName['atl-edge'] !== 'undefined') {
+    var _serverTimingsByName$1;
+    edgeTimings['edge/atl-edge'] = {
+      startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
+      duration: atlEdgeDuration
+    };
+    edgeTimings['edge/atl-edge/internal'] = {
+      startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
+      duration: (_serverTimingsByName$1 = serverTimingsByName['atl-edge-internal']) === null || _serverTimingsByName$1 === void 0 ? void 0 : _serverTimingsByName$1.duration
+    };
+    edgeTimings['edge/atl-edge/ttfb'] = {
+      startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
+      duration: atlEdgeDuration
+    };
+    edgeTimings['edge/cf/upstream/network'] = {
+      startTime: edgeOffset + cfInternalDuration,
+      duration: cfToAtlEdgeNetworkDuration
+    };
+  }
+
+  // we need a timer here to prevent UFO pipeline from shifting SSR timers to start at 0
+  (edgeTimings === null || edgeTimings === void 0 ? void 0 : edgeTimings.edge) && edgeOffset && Object.assign(edgeTimings, {
+    'client-network': {
+      startTime: 0,
+      duration: edgeOffset
+    }
+  });
+  return edgeTimings;
+}
 function getSSRTimings() {
   var _config;
-  if (!((_config = config) !== null && _config !== void 0 && _config.getTimings)) {
-    return {};
+  var defaultSSRTimings = {};
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_default_ssr_edge_timings')) {
+    defaultSSRTimings = getEdgeTimingsIncludingCloudfront();
   }
-  var timings = config.getTimings();
-  if (!timings) {
-    return {};
+  var configTimings = {};
+  if (typeof ((_config = config) === null || _config === void 0 ? void 0 : _config.getTimings) === 'function') {
+    configTimings = config.getTimings();
   }
-  var ssrTimings = Object.entries(timings).reduce(function (acc, entry) {
+  var ssrTimings = Object.entries(_objectSpread(_objectSpread({}, configTimings), defaultSSRTimings)).reduce(function (acc, entry) {
     if (filterEntry(entry[1])) {
       acc[mapKey(entry[0])] = mapEntry(entry[1]);
     }

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

@@ -8,7 +8,7 @@ if(cohortingCustomData&&cohortingCustomData.size>0){var _interaction$labelSta,_c
 try{return acc+item.cssRules.length;}catch(e){return acc;}},0);const styleElements=doc.querySelectorAll('style').length;const styleProps=doc.querySelectorAll('[style]');const styleDeclarations=Array.from(doc.querySelectorAll('[style]')).reduce((acc,item)=>{try{if('style'in item){return acc+item.style.length;}else{return acc;}}catch(e){return acc;}},0);return{'ufo:stylesheets':stylesheetCount,'ufo:styleElements':styleElements,'ufo:styleProps':styleProps.length,'ufo:styleDeclarations':styleDeclarations,'ufo:cssrules':cssrules};}catch(e){return{};}}let regularTTAI;let expTTAI;function getErrorCounts(interaction){return{'ufo:errors:globalCount':getGlobalErrorCount(),'ufo:errors:count':interaction.errors.length};}async function createInteractionMetricsPayload(interaction,interactionId,experimental,criticalPayloadCount,vcMetrics){var _window$location,_config$additionalPay;const interactionPayloadStart=performance.now();const config=getConfig();if(!config){throw Error('UFO Configuration not provided');}const{end,start,ufoName,knownSegments,rate,type,abortReason,routeName,featureFlags,previousInteractionName,isPreviousInteractionAborted,abortedByInteractionName,responsiveness,unknownElementName,unknownElementHierarchy,hydration}=interaction;const pageVisibilityAtTTI=getPageVisibilityUpToTTI(interaction);const pageVisibilityAtTTAI=getPageVisibilityUpToTTAI(interaction);const segments=!fg('platform_ufo_remove_deprecated_config_fields')&&config.killswitchNestedSegments?[]:knownSegments;const segmentTree=getReactUFOPayloadVersion(interaction.type)==='2.0.0'?buildSegmentTree(segments.map(segment=>segment.labelStack)):{};const isDetailedPayload=pageVisibilityAtTTAI==='visible';const isPageLoad=type==='page_load';const calculatePageVisibilityFromTheStartOfPageLoad=config.enableBetterPageVisibilityApi&&isPageLoad;const moreAccuratePageVisibilityAtTTI=calculatePageVisibilityFromTheStartOfPageLoad?getMoreAccuratePageVisibilityUpToTTI(interaction):null;const moreAccuratePageVisibilityAtTTAI=calculatePageVisibilityFromTheStartOfPageLoad?getMoreAccuratePageVisibilityUpToTTAI(interaction):null;const labelStack=interaction.labelStack?{labelStack:optimizeLabelStack(interaction.labelStack,getReactUFOPayloadVersion(interaction.type))}:{};// Page Load
 const getInitialPageLoadSSRMetrics=()=>{var _config$ssr;if(!isPageLoad){return{};}const config=getConfig();const SSRDoneTimeValue=getSSRDoneTimeValue(config);const SSRDoneTime=SSRDoneTimeValue!==undefined?{SSRDoneTime:Math.round(SSRDoneTimeValue)}:{};const isBM3ConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;const isUFOConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp||!!(config!==null&&config!==void 0&&(_config$ssr=config.ssr)!==null&&_config$ssr!==void 0&&_config$ssr.getSSRDoneTime);if(!experimental&&(isBM3ConfigSSRDoneAsFmp||isUFOConfigSSRDoneAsFmp)&&SSRDoneTimeValue!==undefined){try{performance.mark(`FMP`,{startTime:SSRDoneTimeValue,detail:{devtools:{dataType:'marker'}}});}catch(e){}}return{...SSRDoneTime,isBM3ConfigSSRDoneAsFmp,isUFOConfigSSRDoneAsFmp};};const pageLoadInteractionMetrics=getInitialPageLoadSSRMetrics();// Detailed payload. Page visibility = visible
 const getDetailedInteractionMetrics=resourceTimings=>{if(experimental||window.__UFO_COMPACT_PAYLOAD__||!isDetailedPayload){return{};}const spans=[...interaction.spans,...atlaskitInteractionSpans];atlaskitInteractionSpans.length=0;return{errors:interaction.errors.map(({labelStack,...others})=>({...others,labelStack:labelStack&&optimizeLabelStack(labelStack,getReactUFOPayloadVersion(interaction.type))})),holdActive:[...interaction.holdActive.values()],redirects:optimizeRedirects(interaction.redirects,start),holdInfo:optimizeHoldInfo(experimental?interaction.holdExpInfo:interaction.holdInfo,start,getReactUFOPayloadVersion(interaction.type)),spans:optimizeSpans(spans,start,getReactUFOPayloadVersion(interaction.type)),requestInfo:optimizeRequestInfo(interaction.requestInfo,start,getReactUFOPayloadVersion(interaction.type)),customTimings:optimizeCustomTimings(interaction.customTimings,start),bundleEvalTimings:objectToArray(getBundleEvalTimings(start)),resourceTimings:objectToArray(resourceTimings)};};// Page load & detailed payload
-const getPageLoadDetailedInteractionMetrics=()=>{var _config$ssr2;if(!isPageLoad||!isDetailedPayload){return{};}const config=getConfig();return{initialPageLoadExtraTimings:objectToArray(initialPageLoadExtraTiming.getTimings()),SSRTimings:config!==null&&config!==void 0&&(_config$ssr2=config.ssr)!==null&&_config$ssr2!==void 0&&_config$ssr2.getSSRTimings?config.ssr.getSSRTimings():objectToArray(ssr.getSSRTimings())};};if(experimental){expTTAI=getTTAI(interaction);}else{regularTTAI=getTTAI(interaction);}const newUFOName=sanitizeUfoName(ufoName);const resourceTimings=getResourceTimings(start,end);const[finalVCMetrics,experimentalMetrics,paintMetrics,batteryInfo]=await Promise.all([vcMetrics||(await getVCMetrics(interaction)),experimental?getExperimentalVCMetrics(interaction):Promise.resolve(undefined),getPaintMetricsToLegacyFormat(type,end),getBatteryInfoToLegacyFormat()]);if(!experimental){addPerformanceMeasures(interaction.start,[...((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[])]);}const getReactHydrationStats=()=>{if(!hydration){return{};}return{hydration};};const payload={actionSubject:'experience',action:'measured',eventType:'operational',source:'measured',tags:['observability'],attributes:{properties:{// basic
+const getPageLoadDetailedInteractionMetrics=()=>{var _config$ssr3;if(!isPageLoad||!isDetailedPayload){return{};}const initialPageLoadExtraTimings=objectToArray(initialPageLoadExtraTiming.getTimings());const config=getConfig();if(fg('platform_ufo_default_ssr_edge_timings')){var _config$ssr2;return{initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr2=config.ssr)!==null&&_config$ssr2!==void 0&&_config$ssr2.getSSRTimings?[...config.ssr.getSSRTimings(),...objectToArray(ssr.getSSRTimings())]:objectToArray(ssr.getSSRTimings())};}return{initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr3=config.ssr)!==null&&_config$ssr3!==void 0&&_config$ssr3.getSSRTimings?config.ssr.getSSRTimings():objectToArray(ssr.getSSRTimings())};};if(experimental){expTTAI=getTTAI(interaction);}else{regularTTAI=getTTAI(interaction);}const newUFOName=sanitizeUfoName(ufoName);const resourceTimings=getResourceTimings(start,end);const[finalVCMetrics,experimentalMetrics,paintMetrics,batteryInfo]=await Promise.all([vcMetrics||(await getVCMetrics(interaction)),experimental?getExperimentalVCMetrics(interaction):Promise.resolve(undefined),getPaintMetricsToLegacyFormat(type,end),getBatteryInfoToLegacyFormat()]);if(!experimental){addPerformanceMeasures(interaction.start,[...((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[])]);}const getReactHydrationStats=()=>{if(!hydration){return{};}return{hydration};};const payload={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:sizeInKb':0,'event:source':{name:'react-ufo/web',version:getReactUFOPayloadVersion(interaction.type)},'event:region':config.region||'unknown','experience:key':experimental?'custom.experimental-interaction-metrics':'custom.interaction-metrics','experience:name':newUFOName,// Include CPU usage monitoring data
 'event:cpu:usage':createPressureStateReport(interaction.start,interaction.end),'event:memory:usage':createMemoryStateReport(interaction.start,interaction.end),...(criticalPayloadCount!==undefined?{'ufo:multipayload':true,'ufo:criticalPayloadCount':criticalPayloadCount}:{}),// root
 ...getBrowserMetadataToLegacyFormat(),...batteryInfo,...getSSRProperties(type),...getAssetsMetrics(interaction,pageLoadInteractionMetrics===null||pageLoadInteractionMetrics===void 0?void 0:pageLoadInteractionMetrics.SSRDoneTime),...getPPSMetrics(interaction),...paintMetrics,...getNavigationMetricsToLegacyFormat(type),...finalVCMetrics,...experimentalMetrics,...((_config$additionalPay=config.additionalPayloadData)===null||_config$additionalPay===void 0?void 0:_config$additionalPay.call(config,interaction)),...getTracingContextData(interaction),...getStylesheetMetrics(),...getErrorCounts(interaction),...getReactHydrationStats(),interactionMetrics:{namePrefix:config.namePrefix||'',segmentPrefix:config.segmentPrefix||'',interactionId,pageVisibilityAtTTI,pageVisibilityAtTTAI,experimental__pageVisibilityAtTTI:moreAccuratePageVisibilityAtTTI,experimental__pageVisibilityAtTTAI:moreAccuratePageVisibilityAtTTAI,// raw interaction metrics

package/dist/es2019/segment/segment.js

@@ -2,6 +2,7 @@ import React, { Profiler, useCallback, useContext, useEffect, useMemo, useRef }
 import { unstable_NormalPriority as NormalPriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as createUUID } from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 import coinflip from '../coinflip';
 import { getConfig, getDoNotAbortActivePressInteraction, getInteractionRate, getMinorInteractions } from '../config';
 import { getActiveTrace, setInteractionActiveTrace } from '../experience-trace-id-context';
@@ -11,6 +12,7 @@ import { abortByNewInteraction, addApdex, addCustomData, addCustomTiming, addHol
 import UFORouteName from '../route-name-context';
 import generateId from '../short-id';
 import scheduleOnPaint from './schedule-on-paint';
+import SsrRenderProfiler from './ssr-render-profiler';
 let tryCompleteHandle;
 let hasMarkedFirstSegmentLoad = false;
 
@@ -255,11 +257,18 @@ export default function UFOSegment({
     };
   }, [interactionId, parentContext, interactionContext, labelStack]);
   const reactProfilerId = useMemo(() => labelStack.map(l => l.name).join('/'), [labelStack]);
-  return /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
+  const ufoSegment = /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
     value: interactionContext
   }, /*#__PURE__*/React.createElement(Profiler, {
     id: reactProfilerId,
     onRender: onRender
   }, children));
+  if (fg('platform_ufo_ssr_render_profiler')) {
+    return /*#__PURE__*/React.createElement(SsrRenderProfiler, {
+      labelStack: labelStack,
+      onRender: interactionContext.onRender
+    }, ufoSegment);
+  }
+  return ufoSegment;
 }
 UFOSegment.displayName = 'UFOSegment';

package/dist/es2019/segment/ssr-render-profiler.js

@@ -0,0 +1,68 @@
+var _process, _process$env;
+import React, { useMemo } from 'react';
+import { getActiveInteraction } from '../interaction-metrics';
+
+// These are stored outside react context to be resilient to concurrent mode
+// restarting the start marker from a suspense and losing the initial render
+const startTimes = new Map();
+// Keep track of the last interaction id and reset the start timers if it ever changes.
+// This is to allow multi-step ssr to track the render timers from different "interaction"s seperately
+let lastActiveInteraction;
+function checkActiveInteractionAndResetStartMarksIfSet() {
+  var _getActiveInteraction;
+  const activeInteractionId = (_getActiveInteraction = getActiveInteraction()) === null || _getActiveInteraction === void 0 ? void 0 : _getActiveInteraction.id;
+  if (!!lastActiveInteraction && lastActiveInteraction !== activeInteractionId) {
+    startTimes.clear();
+  }
+  lastActiveInteraction = activeInteractionId;
+}
+const onStartRender = id => {
+  var _startTimes$get;
+  if (!startTimes.has(id)) {
+    startTimes.set(id, []);
+  }
+  (_startTimes$get = startTimes.get(id)) === null || _startTimes$get === void 0 ? void 0 : _startTimes$get.push(performance.now());
+};
+const isInSSR = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__) || typeof process !== 'undefined' && Boolean(((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.REACT_SSR) || false);
+const ProfilerMarker = ({
+  onRender
+}) => {
+  if (isInSSR) {
+    onRender === null || onRender === void 0 ? void 0 : onRender();
+  }
+  return null;
+};
+export const SsrRenderProfilerInner = ({
+  children,
+  labelStack,
+  onRender
+}) => {
+  const reactProfilerId = useMemo(() => labelStack.map(l => l.name).join('/'), [labelStack]);
+  checkActiveInteractionAndResetStartMarksIfSet();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProfilerMarker, {
+    onRender: () => onStartRender(reactProfilerId)
+  }), children, /*#__PURE__*/React.createElement(ProfilerMarker, {
+    onRender: () => {
+      const startTimesForId = startTimes.get(reactProfilerId);
+      if (startTimesForId !== null && startTimesForId !== void 0 && startTimesForId.length) {
+        const endTime = performance.now();
+        const firstStartTime = startTimesForId[0];
+        const lastStartTime = startTimesForId[startTimesForId.length - 1];
+        const baseDuration = endTime - lastStartTime;
+        const actualDuration = endTime - firstStartTime;
+        onRender('mount',
+        // this is incorrect, but on the server there is no mount phase
+        actualDuration, baseDuration, firstStartTime, endTime);
+      }
+    }
+  }));
+};
+const SsrRenderProfiler = props => {
+  if (isInSSR) {
+    return /*#__PURE__*/React.createElement(SsrRenderProfilerInner, props);
+  }
+
+  // ensure structure similar to SSR implementation
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProfilerMarker, null), props.children);
+};
+export default SsrRenderProfiler;

package/dist/es2019/ssr/index.js

@@ -1,5 +1,4 @@
-//
-
+import { fg } from '@atlaskit/platform-feature-flags';
 const NESTED_METRIC_SEPARATOR = '/';
 function filterEntry(entry) {
   return !(!entry || typeof entry !== 'object' || entry.startTime < 0 || entry.duration < 0);
@@ -24,16 +23,112 @@ let config;
 export function configure(ssrConfig) {
   config = ssrConfig;
 }
+function getPerformanceNavigationTiming() {
+  var _performance$getEntri;
+  // getEntriesByType doesn't change the returned type based on the given type key
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return (_performance$getEntri = performance.getEntriesByType('navigation')) === null || _performance$getEntri === void 0 ? void 0 : _performance$getEntri[0];
+}
+function getServerTimingsByName() {
+  var _getPerformanceNaviga, _getPerformanceNaviga2, _getPerformanceNaviga3;
+  const serverTimingsByName = Object.fromEntries((_getPerformanceNaviga = (_getPerformanceNaviga2 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga2 === void 0 ? void 0 : (_getPerformanceNaviga3 = _getPerformanceNaviga2.serverTiming) === null || _getPerformanceNaviga3 === void 0 ? void 0 : _getPerformanceNaviga3.map(timing => [timing.name, timing])) !== null && _getPerformanceNaviga !== void 0 ? _getPerformanceNaviga : []);
+  return serverTimingsByName;
+}
+
+/**
+ * If we have the edge's view of ttfb and the clients view as well, then we should take the gap between them as
+ * the offset to use foe edge start time.
+ * This will simulate the network delays between the client and the edge as an edge startTime increase
+ */
+function getEdgeOffset(edgeTtfb) {
+  var _getPerformanceNaviga4;
+  const clientTtfb = (_getPerformanceNaviga4 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga4 === void 0 ? void 0 : _getPerformanceNaviga4.responseStart;
+  if (edgeTtfb == null || clientTtfb == null) {
+    return 0;
+  }
+  return clientTtfb - edgeTtfb;
+}
+export function getEdgeTimingsIncludingCloudfront() {
+  var _serverTimingsByName$, _serverTimingsByName$2, _serverTimingsByName$3, _serverTimingsByName$4, _serverTimingsByName$5, _serverTimingsByName$6, _serverTimingsByName$7, _serverTimingsByName$8, _serverTimingsByName$9;
+  const serverTimingsByName = getServerTimingsByName();
+  const edgeTotalDuration = (_serverTimingsByName$ = (_serverTimingsByName$2 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$2 === void 0 ? void 0 : _serverTimingsByName$2.duration) !== null && _serverTimingsByName$ !== void 0 ? _serverTimingsByName$ : (_serverTimingsByName$3 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$3 === void 0 ? void 0 : _serverTimingsByName$3.duration;
+  if (!edgeTotalDuration) {
+    return null;
+  }
+  const edgeOffset = getEdgeOffset(edgeTotalDuration);
+  const cfInternalDuration = (((_serverTimingsByName$4 = serverTimingsByName['cdn-upstream-dns']) === null || _serverTimingsByName$4 === void 0 ? void 0 : _serverTimingsByName$4.duration) || 0) + (((_serverTimingsByName$5 = serverTimingsByName['cdn-upstream-connect']) === null || _serverTimingsByName$5 === void 0 ? void 0 : _serverTimingsByName$5.duration) || 0);
+  const cfUpstreamDuration = (((_serverTimingsByName$6 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$6 === void 0 ? void 0 : _serverTimingsByName$6.duration) || 0) - cfInternalDuration;
+  const cfDownstreamDuration = (((_serverTimingsByName$7 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$7 === void 0 ? void 0 : _serverTimingsByName$7.duration) || 0) - (((_serverTimingsByName$8 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$8 === void 0 ? void 0 : _serverTimingsByName$8.duration) || 0);
+  const atlEdgeDuration = (_serverTimingsByName$9 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$9 === void 0 ? void 0 : _serverTimingsByName$9.duration;
+  const cfToAtlEdgeNetworkDuration = cfUpstreamDuration - atlEdgeDuration;
+  const edgeTimings = {
+    edge: {
+      startTime: edgeOffset,
+      duration: edgeTotalDuration
+    }
+  };
+  if (typeof serverTimingsByName['cdn-downstream-fbl'] !== 'undefined') {
+    var _serverTimingsByName$0;
+    edgeTimings['edge/cf'] = {
+      startTime: edgeOffset,
+      duration: (_serverTimingsByName$0 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$0 === void 0 ? void 0 : _serverTimingsByName$0.duration
+    };
+    edgeTimings['edge/cf/internal'] = {
+      startTime: edgeOffset,
+      duration: cfInternalDuration
+    };
+    edgeTimings['edge/cf/upstream'] = {
+      startTime: edgeOffset + cfInternalDuration,
+      duration: cfUpstreamDuration
+    };
+    edgeTimings['edge/cf/downstream'] = {
+      startTime: edgeOffset + cfInternalDuration + cfUpstreamDuration,
+      duration: cfDownstreamDuration
+    };
+  }
+  if (typeof serverTimingsByName['atl-edge'] !== 'undefined') {
+    var _serverTimingsByName$1;
+    edgeTimings['edge/atl-edge'] = {
+      startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
+      duration: atlEdgeDuration
+    };
+    edgeTimings['edge/atl-edge/internal'] = {
+      startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
+      duration: (_serverTimingsByName$1 = serverTimingsByName['atl-edge-internal']) === null || _serverTimingsByName$1 === void 0 ? void 0 : _serverTimingsByName$1.duration
+    };
+    edgeTimings['edge/atl-edge/ttfb'] = {
+      startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
+      duration: atlEdgeDuration
+    };
+    edgeTimings['edge/cf/upstream/network'] = {
+      startTime: edgeOffset + cfInternalDuration,
+      duration: cfToAtlEdgeNetworkDuration
+    };
+  }
+
+  // we need a timer here to prevent UFO pipeline from shifting SSR timers to start at 0
+  (edgeTimings === null || edgeTimings === void 0 ? void 0 : edgeTimings.edge) && edgeOffset && Object.assign(edgeTimings, {
+    'client-network': {
+      startTime: 0,
+      duration: edgeOffset
+    }
+  });
+  return edgeTimings;
+}
 export function getSSRTimings() {
   var _config;
-  if (!((_config = config) !== null && _config !== void 0 && _config.getTimings)) {
-    return {};
+  let defaultSSRTimings = {};
+  if (fg('platform_ufo_default_ssr_edge_timings')) {
+    defaultSSRTimings = getEdgeTimingsIncludingCloudfront();
   }
-  const timings = config.getTimings();
-  if (!timings) {
-    return {};
+  let configTimings = {};
+  if (typeof ((_config = config) === null || _config === void 0 ? void 0 : _config.getTimings) === 'function') {
+    configTimings = config.getTimings();
   }
-  const ssrTimings = Object.entries(timings).reduce((acc, entry) => {
+  const ssrTimings = Object.entries({
+    ...configTimings,
+    ...defaultSSRTimings
+  }).reduce((acc, entry) => {
     if (filterEntry(entry[1])) {
       acc[mapKey(entry[0])] = mapEntry(entry[1]);
     }

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

@@ -8,7 +8,7 @@ if(cohortingCustomData&&cohortingCustomData.size>0){var _interaction$labelSta,_c
 try{return acc+item.cssRules.length;}catch(e){return acc;}},0);var styleElements=doc.querySelectorAll('style').length;var styleProps=doc.querySelectorAll('[style]');var styleDeclarations=Array.from(doc.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{'ufo:stylesheets':stylesheetCount,'ufo:styleElements':styleElements,'ufo:styleProps':styleProps.length,'ufo:styleDeclarations':styleDeclarations,'ufo:cssrules':cssrules};}catch(e){return{};}}var regularTTAI;var expTTAI;function getErrorCounts(interaction){return{'ufo:errors:globalCount':getGlobalErrorCount(),'ufo:errors:count':interaction.errors.length};}function createInteractionMetricsPayload(_x,_x2,_x3,_x4,_x5){return _createInteractionMetricsPayload.apply(this,arguments);}function _createInteractionMetricsPayload(){_createInteractionMetricsPayload=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(interaction,interactionId,experimental,criticalPayloadCount,vcMetrics){var _window$location,_config$additionalPay;var interactionPayloadStart,config,end,start,ufoName,knownSegments,rate,type,abortReason,routeName,featureFlags,previousInteractionName,isPreviousInteractionAborted,abortedByInteractionName,responsiveness,unknownElementName,unknownElementHierarchy,hydration,pageVisibilityAtTTI,pageVisibilityAtTTAI,segments,segmentTree,isDetailedPayload,isPageLoad,calculatePageVisibilityFromTheStartOfPageLoad,moreAccuratePageVisibilityAtTTI,moreAccuratePageVisibilityAtTTAI,labelStack,getInitialPageLoadSSRMetrics,pageLoadInteractionMetrics,getDetailedInteractionMetrics,getPageLoadDetailedInteractionMetrics,newUFOName,resourceTimings,_yield$Promise$all,_yield$Promise$all2,finalVCMetrics,experimentalMetrics,paintMetrics,batteryInfo,getReactHydrationStats,payload,size,vcRev,rawData,rawDataSize;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:interactionPayloadStart=performance.now();config=getConfig();if(config){_context.next=4;break;}throw Error('UFO Configuration not provided');case 4:end=interaction.end,start=interaction.start,ufoName=interaction.ufoName,knownSegments=interaction.knownSegments,rate=interaction.rate,type=interaction.type,abortReason=interaction.abortReason,routeName=interaction.routeName,featureFlags=interaction.featureFlags,previousInteractionName=interaction.previousInteractionName,isPreviousInteractionAborted=interaction.isPreviousInteractionAborted,abortedByInteractionName=interaction.abortedByInteractionName,responsiveness=interaction.responsiveness,unknownElementName=interaction.unknownElementName,unknownElementHierarchy=interaction.unknownElementHierarchy,hydration=interaction.hydration;pageVisibilityAtTTI=getPageVisibilityUpToTTI(interaction);pageVisibilityAtTTAI=getPageVisibilityUpToTTAI(interaction);segments=!fg('platform_ufo_remove_deprecated_config_fields')&&config.killswitchNestedSegments?[]:knownSegments;segmentTree=getReactUFOPayloadVersion(interaction.type)==='2.0.0'?buildSegmentTree(segments.map(function(segment){return segment.labelStack;})):{};isDetailedPayload=pageVisibilityAtTTAI==='visible';isPageLoad=type==='page_load';calculatePageVisibilityFromTheStartOfPageLoad=config.enableBetterPageVisibilityApi&&isPageLoad;moreAccuratePageVisibilityAtTTI=calculatePageVisibilityFromTheStartOfPageLoad?getMoreAccuratePageVisibilityUpToTTI(interaction):null;moreAccuratePageVisibilityAtTTAI=calculatePageVisibilityFromTheStartOfPageLoad?getMoreAccuratePageVisibilityUpToTTAI(interaction):null;labelStack=interaction.labelStack?{labelStack:optimizeLabelStack(interaction.labelStack,getReactUFOPayloadVersion(interaction.type))}:{};// Page Load
 getInitialPageLoadSSRMetrics=function getInitialPageLoadSSRMetrics(){var _config$ssr;if(!isPageLoad){return{};}var config=getConfig();var SSRDoneTimeValue=getSSRDoneTimeValue(config);var SSRDoneTime=SSRDoneTimeValue!==undefined?{SSRDoneTime:Math.round(SSRDoneTimeValue)}:{};var isBM3ConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;var isUFOConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp||!!(config!==null&&config!==void 0&&(_config$ssr=config.ssr)!==null&&_config$ssr!==void 0&&_config$ssr.getSSRDoneTime);if(!experimental&&(isBM3ConfigSSRDoneAsFmp||isUFOConfigSSRDoneAsFmp)&&SSRDoneTimeValue!==undefined){try{performance.mark("FMP",{startTime:SSRDoneTimeValue,detail:{devtools:{dataType:'marker'}}});}catch(e){}}return _objectSpread(_objectSpread({},SSRDoneTime),{},{isBM3ConfigSSRDoneAsFmp:isBM3ConfigSSRDoneAsFmp,isUFOConfigSSRDoneAsFmp:isUFOConfigSSRDoneAsFmp});};pageLoadInteractionMetrics=getInitialPageLoadSSRMetrics();// Detailed payload. Page visibility = visible
 getDetailedInteractionMetrics=function getDetailedInteractionMetrics(resourceTimings){if(experimental||window.__UFO_COMPACT_PAYLOAD__||!isDetailedPayload){return{};}var spans=[].concat(_toConsumableArray(interaction.spans),_toConsumableArray(atlaskitInteractionSpans));atlaskitInteractionSpans.length=0;return{errors:interaction.errors.map(function(_ref2){var labelStack=_ref2.labelStack,others=_objectWithoutProperties(_ref2,_excluded);return _objectSpread(_objectSpread({},others),{},{labelStack:labelStack&&optimizeLabelStack(labelStack,getReactUFOPayloadVersion(interaction.type))});}),holdActive:_toConsumableArray(interaction.holdActive.values()),redirects:optimizeRedirects(interaction.redirects,start),holdInfo:optimizeHoldInfo(experimental?interaction.holdExpInfo:interaction.holdInfo,start,getReactUFOPayloadVersion(interaction.type)),spans:optimizeSpans(spans,start,getReactUFOPayloadVersion(interaction.type)),requestInfo:optimizeRequestInfo(interaction.requestInfo,start,getReactUFOPayloadVersion(interaction.type)),customTimings:optimizeCustomTimings(interaction.customTimings,start),bundleEvalTimings:objectToArray(getBundleEvalTimings(start)),resourceTimings:objectToArray(resourceTimings)};};// Page load & detailed payload
-getPageLoadDetailedInteractionMetrics=function getPageLoadDetailedInteractionMetrics(){var _config$ssr2;if(!isPageLoad||!isDetailedPayload){return{};}var config=getConfig();return{initialPageLoadExtraTimings:objectToArray(initialPageLoadExtraTiming.getTimings()),SSRTimings:config!==null&&config!==void 0&&(_config$ssr2=config.ssr)!==null&&_config$ssr2!==void 0&&_config$ssr2.getSSRTimings?config.ssr.getSSRTimings():objectToArray(ssr.getSSRTimings())};};if(experimental){expTTAI=getTTAI(interaction);}else{regularTTAI=getTTAI(interaction);}newUFOName=sanitizeUfoName(ufoName);resourceTimings=getResourceTimings(start,end);_context.t0=Promise;_context.t1=vcMetrics;if(_context.t1){_context.next=28;break;}_context.next=27;return getVCMetrics(interaction);case 27:_context.t1=_context.sent;case 28:_context.t2=_context.t1;_context.t3=experimental?getExperimentalVCMetrics(interaction):Promise.resolve(undefined);_context.t4=getPaintMetricsToLegacyFormat(type,end);_context.t5=getBatteryInfoToLegacyFormat();_context.t6=[_context.t2,_context.t3,_context.t4,_context.t5];_context.next=35;return _context.t0.all.call(_context.t0,_context.t6);case 35:_yield$Promise$all=_context.sent;_yield$Promise$all2=_slicedToArray(_yield$Promise$all,4);finalVCMetrics=_yield$Promise$all2[0];experimentalMetrics=_yield$Promise$all2[1];paintMetrics=_yield$Promise$all2[2];batteryInfo=_yield$Promise$all2[3];if(!experimental){addPerformanceMeasures(interaction.start,_toConsumableArray((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[]));}getReactHydrationStats=function getReactHydrationStats(){if(!hydration){return{};}return{hydration:hydration};};payload={actionSubject:'experience',action:'measured',eventType:'operational',source:'measured',tags:['observability'],attributes:{properties:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({// basic
+getPageLoadDetailedInteractionMetrics=function getPageLoadDetailedInteractionMetrics(){var _config$ssr3;if(!isPageLoad||!isDetailedPayload){return{};}var initialPageLoadExtraTimings=objectToArray(initialPageLoadExtraTiming.getTimings());var config=getConfig();if(fg('platform_ufo_default_ssr_edge_timings')){var _config$ssr2;return{initialPageLoadExtraTimings:initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr2=config.ssr)!==null&&_config$ssr2!==void 0&&_config$ssr2.getSSRTimings?[].concat(_toConsumableArray(config.ssr.getSSRTimings()),_toConsumableArray(objectToArray(ssr.getSSRTimings()))):objectToArray(ssr.getSSRTimings())};}return{initialPageLoadExtraTimings:initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr3=config.ssr)!==null&&_config$ssr3!==void 0&&_config$ssr3.getSSRTimings?config.ssr.getSSRTimings():objectToArray(ssr.getSSRTimings())};};if(experimental){expTTAI=getTTAI(interaction);}else{regularTTAI=getTTAI(interaction);}newUFOName=sanitizeUfoName(ufoName);resourceTimings=getResourceTimings(start,end);_context.t0=Promise;_context.t1=vcMetrics;if(_context.t1){_context.next=28;break;}_context.next=27;return getVCMetrics(interaction);case 27:_context.t1=_context.sent;case 28:_context.t2=_context.t1;_context.t3=experimental?getExperimentalVCMetrics(interaction):Promise.resolve(undefined);_context.t4=getPaintMetricsToLegacyFormat(type,end);_context.t5=getBatteryInfoToLegacyFormat();_context.t6=[_context.t2,_context.t3,_context.t4,_context.t5];_context.next=35;return _context.t0.all.call(_context.t0,_context.t6);case 35:_yield$Promise$all=_context.sent;_yield$Promise$all2=_slicedToArray(_yield$Promise$all,4);finalVCMetrics=_yield$Promise$all2[0];experimentalMetrics=_yield$Promise$all2[1];paintMetrics=_yield$Promise$all2[2];batteryInfo=_yield$Promise$all2[3];if(!experimental){addPerformanceMeasures(interaction.start,_toConsumableArray((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[]));}getReactHydrationStats=function getReactHydrationStats(){if(!hydration){return{};}return{hydration:hydration};};payload={actionSubject:'experience',action:'measured',eventType:'operational',source:'measured',tags:['observability'],attributes:{properties:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_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,'event:schema':'1.0.0','event:sizeInKb':0,'event:source':{name:'react-ufo/web',version:getReactUFOPayloadVersion(interaction.type)},'event:region':config.region||'unknown','experience:key':experimental?'custom.experimental-interaction-metrics':'custom.interaction-metrics','experience:name':newUFOName,// Include CPU usage monitoring data
 'event:cpu:usage':createPressureStateReport(interaction.start,interaction.end),'event:memory:usage':createMemoryStateReport(interaction.start,interaction.end)},criticalPayloadCount!==undefined?{'ufo:multipayload':true,'ufo:criticalPayloadCount':criticalPayloadCount}:{}),getBrowserMetadataToLegacyFormat()),batteryInfo),getSSRProperties(type)),getAssetsMetrics(interaction,pageLoadInteractionMetrics===null||pageLoadInteractionMetrics===void 0?void 0:pageLoadInteractionMetrics.SSRDoneTime)),getPPSMetrics(interaction)),paintMetrics),getNavigationMetricsToLegacyFormat(type)),finalVCMetrics),experimentalMetrics),(_config$additionalPay=config.additionalPayloadData)===null||_config$additionalPay===void 0?void 0:_config$additionalPay.call(config,interaction)),getTracingContextData(interaction)),getStylesheetMetrics()),getErrorCounts(interaction)),getReactHydrationStats()),{},{interactionMetrics:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({namePrefix:config.namePrefix||'',segmentPrefix:config.segmentPrefix||'',interactionId:interactionId,pageVisibilityAtTTI:pageVisibilityAtTTI,pageVisibilityAtTTAI:pageVisibilityAtTTAI,experimental__pageVisibilityAtTTI:moreAccuratePageVisibilityAtTTI,experimental__pageVisibilityAtTTAI:moreAccuratePageVisibilityAtTTAI,// raw interaction metrics
 rate:rate,routeName:routeName,type:type,abortReason:abortReason,featureFlags:featureFlags,previousInteractionName:previousInteractionName,isPreviousInteractionAborted:isPreviousInteractionAborted,abortedByInteractionName:abortedByInteractionName,// performance

package/dist/esm/segment/segment.js

@@ -6,6 +6,7 @@ import React, { Profiler, useCallback, useContext, useEffect, useMemo, useRef }
 import { unstable_NormalPriority as NormalPriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as createUUID } from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 import coinflip from '../coinflip';
 import { getConfig, getDoNotAbortActivePressInteraction, getInteractionRate, getMinorInteractions } from '../config';
 import { getActiveTrace, setInteractionActiveTrace } from '../experience-trace-id-context';
@@ -15,6 +16,7 @@ import { abortByNewInteraction, addApdex as _addApdex, addCustomData as _addCust
 import UFORouteName from '../route-name-context';
 import generateId from '../short-id';
 import scheduleOnPaint from './schedule-on-paint';
+import SsrRenderProfiler from './ssr-render-profiler';
 var tryCompleteHandle;
 var hasMarkedFirstSegmentLoad = false;
 
@@ -269,11 +271,18 @@ export default function UFOSegment(_ref) {
       return l.name;
     }).join('/');
   }, [labelStack]);
-  return /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
+  var ufoSegment = /*#__PURE__*/React.createElement(UFOInteractionContext.Provider, {
     value: interactionContext
   }, /*#__PURE__*/React.createElement(Profiler, {
     id: reactProfilerId,
     onRender: onRender
   }, children));
+  if (fg('platform_ufo_ssr_render_profiler')) {
+    return /*#__PURE__*/React.createElement(SsrRenderProfiler, {
+      labelStack: labelStack,
+      onRender: interactionContext.onRender
+    }, ufoSegment);
+  }
+  return ufoSegment;
 }
 UFOSegment.displayName = 'UFOSegment';

package/dist/esm/segment/ssr-render-profiler.js

@@ -0,0 +1,72 @@
+var _process;
+import React, { useMemo } from 'react';
+import { getActiveInteraction } from '../interaction-metrics';
+
+// These are stored outside react context to be resilient to concurrent mode
+// restarting the start marker from a suspense and losing the initial render
+var startTimes = new Map();
+// Keep track of the last interaction id and reset the start timers if it ever changes.
+// This is to allow multi-step ssr to track the render timers from different "interaction"s seperately
+var lastActiveInteraction;
+function checkActiveInteractionAndResetStartMarksIfSet() {
+  var _getActiveInteraction;
+  var activeInteractionId = (_getActiveInteraction = getActiveInteraction()) === null || _getActiveInteraction === void 0 ? void 0 : _getActiveInteraction.id;
+  if (!!lastActiveInteraction && lastActiveInteraction !== activeInteractionId) {
+    startTimes.clear();
+  }
+  lastActiveInteraction = activeInteractionId;
+}
+var onStartRender = function onStartRender(id) {
+  var _startTimes$get;
+  if (!startTimes.has(id)) {
+    startTimes.set(id, []);
+  }
+  (_startTimes$get = startTimes.get(id)) === null || _startTimes$get === void 0 || _startTimes$get.push(performance.now());
+};
+var isInSSR = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__) || typeof process !== 'undefined' && Boolean(((_process = process) === null || _process === void 0 || (_process = _process.env) === null || _process === void 0 ? void 0 : _process.REACT_SSR) || false);
+var ProfilerMarker = function ProfilerMarker(_ref) {
+  var onRender = _ref.onRender;
+  if (isInSSR) {
+    onRender === null || onRender === void 0 || onRender();
+  }
+  return null;
+};
+export var SsrRenderProfilerInner = function SsrRenderProfilerInner(_ref2) {
+  var children = _ref2.children,
+    labelStack = _ref2.labelStack,
+    _onRender = _ref2.onRender;
+  var reactProfilerId = useMemo(function () {
+    return labelStack.map(function (l) {
+      return l.name;
+    }).join('/');
+  }, [labelStack]);
+  checkActiveInteractionAndResetStartMarksIfSet();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProfilerMarker, {
+    onRender: function onRender() {
+      return onStartRender(reactProfilerId);
+    }
+  }), children, /*#__PURE__*/React.createElement(ProfilerMarker, {
+    onRender: function onRender() {
+      var startTimesForId = startTimes.get(reactProfilerId);
+      if (startTimesForId !== null && startTimesForId !== void 0 && startTimesForId.length) {
+        var endTime = performance.now();
+        var firstStartTime = startTimesForId[0];
+        var lastStartTime = startTimesForId[startTimesForId.length - 1];
+        var baseDuration = endTime - lastStartTime;
+        var actualDuration = endTime - firstStartTime;
+        _onRender('mount',
+        // this is incorrect, but on the server there is no mount phase
+        actualDuration, baseDuration, firstStartTime, endTime);
+      }
+    }
+  }));
+};
+var SsrRenderProfiler = function SsrRenderProfiler(props) {
+  if (isInSSR) {
+    return /*#__PURE__*/React.createElement(SsrRenderProfilerInner, props);
+  }
+
+  // ensure structure similar to SSR implementation
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProfilerMarker, null), props.children);
+};
+export default SsrRenderProfiler;

package/dist/esm/ssr/index.js

@@ -2,8 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 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 { fg } from '@atlaskit/platform-feature-flags';
 var NESTED_METRIC_SEPARATOR = '/';
 function filterEntry(entry) {
   return !(!entry || _typeof(entry) !== 'object' || entry.startTime < 0 || entry.duration < 0);
@@ -27,16 +26,111 @@ var config;
 export function configure(ssrConfig) {
   config = ssrConfig;
 }
+function getPerformanceNavigationTiming() {
+  var _performance$getEntri;
+  // getEntriesByType doesn't change the returned type based on the given type key
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return (_performance$getEntri = performance.getEntriesByType('navigation')) === null || _performance$getEntri === void 0 ? void 0 : _performance$getEntri[0];
+}
+function getServerTimingsByName() {
+  var _getPerformanceNaviga, _getPerformanceNaviga2;
+  var serverTimingsByName = Object.fromEntries((_getPerformanceNaviga = (_getPerformanceNaviga2 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga2 === void 0 || (_getPerformanceNaviga2 = _getPerformanceNaviga2.serverTiming) === null || _getPerformanceNaviga2 === void 0 ? void 0 : _getPerformanceNaviga2.map(function (timing) {
+    return [timing.name, timing];
+  })) !== null && _getPerformanceNaviga !== void 0 ? _getPerformanceNaviga : []);
+  return serverTimingsByName;
+}
+
+/**
+ * If we have the edge's view of ttfb and the clients view as well, then we should take the gap between them as
+ * the offset to use foe edge start time.
+ * This will simulate the network delays between the client and the edge as an edge startTime increase
+ */
+function getEdgeOffset(edgeTtfb) {
+  var _getPerformanceNaviga3;
+  var clientTtfb = (_getPerformanceNaviga3 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga3 === void 0 ? void 0 : _getPerformanceNaviga3.responseStart;
+  if (edgeTtfb == null || clientTtfb == null) {
+    return 0;
+  }
+  return clientTtfb - edgeTtfb;
+}
+export function getEdgeTimingsIncludingCloudfront() {
+  var _serverTimingsByName$, _serverTimingsByName$2, _serverTimingsByName$3, _serverTimingsByName$4, _serverTimingsByName$5, _serverTimingsByName$6, _serverTimingsByName$7, _serverTimingsByName$8, _serverTimingsByName$9;
+  var serverTimingsByName = getServerTimingsByName();
+  var edgeTotalDuration = (_serverTimingsByName$ = (_serverTimingsByName$2 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$2 === void 0 ? void 0 : _serverTimingsByName$2.duration) !== null && _serverTimingsByName$ !== void 0 ? _serverTimingsByName$ : (_serverTimingsByName$3 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$3 === void 0 ? void 0 : _serverTimingsByName$3.duration;
+  if (!edgeTotalDuration) {
+    return null;
+  }
+  var edgeOffset = getEdgeOffset(edgeTotalDuration);
+  var cfInternalDuration = (((_serverTimingsByName$4 = serverTimingsByName['cdn-upstream-dns']) === null || _serverTimingsByName$4 === void 0 ? void 0 : _serverTimingsByName$4.duration) || 0) + (((_serverTimingsByName$5 = serverTimingsByName['cdn-upstream-connect']) === null || _serverTimingsByName$5 === void 0 ? void 0 : _serverTimingsByName$5.duration) || 0);
+  var cfUpstreamDuration = (((_serverTimingsByName$6 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$6 === void 0 ? void 0 : _serverTimingsByName$6.duration) || 0) - cfInternalDuration;
+  var cfDownstreamDuration = (((_serverTimingsByName$7 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$7 === void 0 ? void 0 : _serverTimingsByName$7.duration) || 0) - (((_serverTimingsByName$8 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$8 === void 0 ? void 0 : _serverTimingsByName$8.duration) || 0);
+  var atlEdgeDuration = (_serverTimingsByName$9 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$9 === void 0 ? void 0 : _serverTimingsByName$9.duration;
+  var cfToAtlEdgeNetworkDuration = cfUpstreamDuration - atlEdgeDuration;
+  var edgeTimings = {
+    edge: {
+      startTime: edgeOffset,
+      duration: edgeTotalDuration
+    }
+  };
+  if (typeof serverTimingsByName['cdn-downstream-fbl'] !== 'undefined') {
+    var _serverTimingsByName$0;
+    edgeTimings['edge/cf'] = {
+      startTime: edgeOffset,
+      duration: (_serverTimingsByName$0 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$0 === void 0 ? void 0 : _serverTimingsByName$0.duration
+    };
+    edgeTimings['edge/cf/internal'] = {
+      startTime: edgeOffset,
+      duration: cfInternalDuration
+    };
+    edgeTimings['edge/cf/upstream'] = {
+      startTime: edgeOffset + cfInternalDuration,
+      duration: cfUpstreamDuration
+    };
+    edgeTimings['edge/cf/downstream'] = {
+      startTime: edgeOffset + cfInternalDuration + cfUpstreamDuration,
+      duration: cfDownstreamDuration
+    };
+  }
+  if (typeof serverTimingsByName['atl-edge'] !== 'undefined') {
+    var _serverTimingsByName$1;
+    edgeTimings['edge/atl-edge'] = {
+      startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
+      duration: atlEdgeDuration
+    };
+    edgeTimings['edge/atl-edge/internal'] = {
+      startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
+      duration: (_serverTimingsByName$1 = serverTimingsByName['atl-edge-internal']) === null || _serverTimingsByName$1 === void 0 ? void 0 : _serverTimingsByName$1.duration
+    };
+    edgeTimings['edge/atl-edge/ttfb'] = {
+      startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
+      duration: atlEdgeDuration
+    };
+    edgeTimings['edge/cf/upstream/network'] = {
+      startTime: edgeOffset + cfInternalDuration,
+      duration: cfToAtlEdgeNetworkDuration
+    };
+  }
+
+  // we need a timer here to prevent UFO pipeline from shifting SSR timers to start at 0
+  (edgeTimings === null || edgeTimings === void 0 ? void 0 : edgeTimings.edge) && edgeOffset && Object.assign(edgeTimings, {
+    'client-network': {
+      startTime: 0,
+      duration: edgeOffset
+    }
+  });
+  return edgeTimings;
+}
 export function getSSRTimings() {
   var _config;
-  if (!((_config = config) !== null && _config !== void 0 && _config.getTimings)) {
-    return {};
+  var defaultSSRTimings = {};
+  if (fg('platform_ufo_default_ssr_edge_timings')) {
+    defaultSSRTimings = getEdgeTimingsIncludingCloudfront();
   }
-  var timings = config.getTimings();
-  if (!timings) {
-    return {};
+  var configTimings = {};
+  if (typeof ((_config = config) === null || _config === void 0 ? void 0 : _config.getTimings) === 'function') {
+    configTimings = config.getTimings();
   }
-  var ssrTimings = Object.entries(timings).reduce(function (acc, entry) {
+  var ssrTimings = Object.entries(_objectSpread(_objectSpread({}, configTimings), defaultSSRTimings)).reduce(function (acc, entry) {
     if (filterEntry(entry[1])) {
       acc[mapKey(entry[0])] = mapEntry(entry[1]);
     }

package/dist/types/segment/ssr-render-profiler.d.ts

@@ -0,0 +1,9 @@
+import React, { type ReactNode } from 'react';
+import type { EnhancedUFOInteractionContextType, ReactProfilerTiming } from '../common';
+export declare const SsrRenderProfilerInner: ({ children, labelStack, onRender, }: {
+    children?: ReactNode | undefined;
+    labelStack: ReactProfilerTiming["labelStack"];
+    onRender: EnhancedUFOInteractionContextType["onRender"];
+}) => React.JSX.Element;
+declare const SsrRenderProfiler: (props: Parameters<typeof SsrRenderProfilerInner>[0]) => React.JSX.Element;
+export default SsrRenderProfiler;

package/dist/types/ssr/index.d.ts

@@ -41,6 +41,7 @@ export type SSRConfig = {
     getTimings?: () => ReportedTimings | null;
 };
 export declare function configure(ssrConfig: SSRConfig): void;
+export declare function getEdgeTimingsIncludingCloudfront(): ReportedTimings | null;
 export declare function getSSRTimings(): ReportedTimings;
 export declare function getSSRSuccess(): boolean;
 export declare function getSSRPhaseSuccess(): {

package/dist/types-ts4.5/segment/ssr-render-profiler.d.ts

@@ -0,0 +1,9 @@
+import React, { type ReactNode } from 'react';
+import type { EnhancedUFOInteractionContextType, ReactProfilerTiming } from '../common';
+export declare const SsrRenderProfilerInner: ({ children, labelStack, onRender, }: {
+    children?: ReactNode | undefined;
+    labelStack: ReactProfilerTiming["labelStack"];
+    onRender: EnhancedUFOInteractionContextType["onRender"];
+}) => React.JSX.Element;
+declare const SsrRenderProfiler: (props: Parameters<typeof SsrRenderProfilerInner>[0]) => React.JSX.Element;
+export default SsrRenderProfiler;

package/dist/types-ts4.5/ssr/index.d.ts

@@ -41,6 +41,7 @@ export type SSRConfig = {
     getTimings?: () => ReportedTimings | null;
 };
 export declare function configure(ssrConfig: SSRConfig): void;
+export declare function getEdgeTimingsIncludingCloudfront(): ReportedTimings | null;
 export declare function getSSRTimings(): ReportedTimings;
 export declare function getSSRSuccess(): boolean;
 export declare function getSSRPhaseSuccess(): {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "4.15.2",
+	"version": "4.15.4",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -110,6 +110,9 @@
 		"platform_ufo_disable_vcnext_observations": {
 			"type": "boolean"
 		},
+		"platform_ufo_default_ssr_edge_timings": {
+			"type": "boolean"
+		},
 		"platform_ufo_remove_ssr_placeholder_in_ttvc_v4": {
 			"type": "boolean"
 		},
@@ -146,6 +149,9 @@
 		"platform_editor_exclude_dnd_anchor_name_from_ttvc": {
 			"type": "boolean"
 		},
+		"platform_ufo_ssr_render_profiler": {
+			"type": "boolean"
+		},
 		"platform_ufo_enable_finish_interaction_transition": {
 			"type": "boolean"
 		},