@atlaskit/react-ufo 4.1.10 → 4.1.12

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

@@ -3,6 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import coinflip from '../coinflip';
 import { getAwaitBM3TTIList, getCapabilityRate, getConfig, getExperimentalInteractionRate, getInteractionTimeout, getPostInteractionRate } from '../config';
 import { experimentalVC, getExperimentalVCMetrics, onExperimentalInteractionComplete } from '../create-experimental-interaction-metrics-payload';
+import { sanitizeUfoName } from '../create-payload/common/utils';
 import { clearActiveTrace } from '../experience-trace-id-context';
 import { allFeatureFlagsAccessed, currentFeatureFlagsAccessed } from '../feature-flags-accessed';
 import { getInteractionId } from '../interaction-id-context';
@@ -155,10 +156,23 @@ export function addCustomTiming(interactionId, labelStack, data) {
         } = timingData;
         try {
           // for Firefox 102 and older
-          performance.measure(`🛸 ${labelStackToString(labelStack, key)} [custom_timing]`, {
-            start: startTime,
-            end: endTime
-          });
+          if (fg('ufo_chrome_devtools_uplift')) {
+            performance.measure(`🛸 ${labelStackToString(labelStack, key)} [custom_timing]`, {
+              start: startTime,
+              end: endTime,
+              detail: {
+                devtools: {
+                  track: '🛸 reactUFO detailed timings',
+                  color: 'tertiary-light'
+                }
+              }
+            });
+          } else {
+            performance.measure(`🛸 ${labelStackToString(labelStack, key)} [custom_timing]`, {
+              start: startTime,
+              end: endTime
+            });
+          }
         } catch (e) {
           // do nothing
         }
@@ -211,10 +225,23 @@ export function addSpan(interactionId, type, name, labelStack, start, end = perf
     if (isPerformanceTracingEnabled()) {
       try {
         // for Firefox 102 and older
-        performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
-          start,
-          end
-        });
+        if (fg('ufo_chrome_devtools_uplift')) {
+          performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
+            start,
+            end,
+            detail: {
+              devtools: {
+                track: '🛸 reactUFO detailed timings',
+                color: 'secondary'
+              }
+            }
+          });
+        } else {
+          performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
+            start,
+            end
+          });
+        }
       } catch (e) {
         // do nothing
       }
@@ -235,10 +262,23 @@ export function addSpanToAll(type, name, labelStack, start, end = performance.no
   if (isPerformanceTracingEnabled()) {
     try {
       // for Firefox 102 and older
-      performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
-        start,
-        end
-      });
+      if (fg('ufo_chrome_devtools_uplift')) {
+        performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
+          start,
+          end,
+          detail: {
+            devtools: {
+              track: '🛸 reactUFO detailed timings',
+              color: 'secondary'
+            }
+          }
+        });
+      } else {
+        performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
+          start,
+          end
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -301,10 +341,23 @@ export function addHold(interactionId, labelStack, name, experimental) {
       if (isPerformanceTracingEnabled()) {
         try {
           // for Firefox 102 and older
-          performance.measure(`🛸 ${labelStackToString(labelStack, name)} [hold]`, {
-            start,
-            end
-          });
+          if (fg('ufo_chrome_devtools_uplift')) {
+            performance.measure(`🛸 ${labelStackToString(labelStack, name)} [hold]`, {
+              start,
+              end,
+              detail: {
+                devtools: {
+                  track: '🛸 reactUFO detailed timings',
+                  color: 'secondary-light'
+                }
+              }
+            });
+          } else {
+            performance.measure(`🛸 ${labelStackToString(labelStack, name)} [hold]`, {
+              start,
+              end
+            });
+          }
         } catch (e) {
           // do nothing
         }
@@ -434,10 +487,23 @@ export function addProfilerTimings(interactionId, labelStack, type, actualDurati
   if (isPerformanceTracingEnabled()) {
     try {
       // for Firefox 102 and older
-      performance.measure(`🛸 ${labelStackToString(labelStack)} [react-profiler] ${type}`, {
-        start: startTime,
-        duration: actualDuration
-      });
+      if (fg('ufo_chrome_devtools_uplift')) {
+        performance.measure(`🛸 ${labelStackToString(labelStack)} [react-profiler] ${type}`, {
+          start: startTime,
+          duration: actualDuration,
+          detail: {
+            devtools: {
+              track: '🛸 reactUFO detailed timings',
+              color: 'secondary-dark'
+            }
+          }
+        });
+      } else {
+        performance.measure(`🛸 ${labelStackToString(labelStack)} [react-profiler] ${type}`, {
+          start: startTime,
+          duration: actualDuration
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -473,10 +539,24 @@ function finishInteraction(id, data, endTime = performance.now()) {
   data.end = endTime;
   try {
     // for Firefox 102 and older
-    performance.measure(`🛸 [${data.type}] ${data.ufoName} [ttai]`, {
-      start: data.start,
-      end: data.end
-    });
+    if (fg('ufo_chrome_devtools_uplift')) {
+      performance.measure(`🛸 [${data.type}] ${data.ufoName} [ttai]`, {
+        start: data.start,
+        end: data.end,
+        detail: {
+          devtools: {
+            track: 'main metrics',
+            trackGroup: '🛸 reactUFO metrics',
+            color: 'tertiary'
+          }
+        }
+      });
+    } else {
+      performance.measure(`🛸 [${data.type}] ${data.ufoName} [ttai]`, {
+        start: data.start,
+        end: data.end
+      });
+    }
   } catch (e) {
     // do nothing
   }
@@ -492,6 +572,18 @@ function finishInteraction(id, data, endTime = performance.now()) {
       data.vc = observer.getVCRawData();
     }
   }
+
+  // By this time, stop the post interaction log observer if coinflip rate is 0
+  if (fg('platform_ufo_post_interaction_check_name')) {
+    const sanitisedUfoName = sanitizeUfoName(data.ufoName);
+    if (!coinflip(getPostInteractionRate(sanitisedUfoName, data.type))) {
+      postInteractionLog.stopVCObserver();
+    }
+  } else {
+    if (!coinflip(getPostInteractionRate(data.routeName || data.ufoName, data.type))) {
+      postInteractionLog.stopVCObserver();
+    }
+  }
   if (!((_getConfig5 = getConfig()) !== null && _getConfig5 !== void 0 && (_getConfig5$experimen = _getConfig5.experimentalInteractionMetrics) !== null && _getConfig5$experimen !== void 0 && _getConfig5$experimen.enabled)) {
     remove(id);
   }
@@ -521,10 +613,23 @@ function finishInteraction(id, data, endTime = performance.now()) {
         start,
         end
       }] of profilerTimingMap.entries()) {
-        performance.measure(`🛸 ${labelStackToString(labelStack)} [segment_ttai]`, {
-          start,
-          end
-        });
+        if (fg('ufo_chrome_devtools_uplift')) {
+          performance.measure(`🛸 ${labelStackToString(labelStack)} [segment_ttai]`, {
+            start,
+            end,
+            detail: {
+              devtools: {
+                track: '🛸 reactUFO detailed timings',
+                color: 'secondary-dark'
+              }
+            }
+          });
+        } else {
+          performance.measure(`🛸 ${labelStackToString(labelStack)} [segment_ttai]`, {
+            start,
+            end
+          });
+        }
       }
     } catch (e) {
       // do nothing
@@ -658,8 +763,12 @@ export function addOnCancelCallback(id, cancelCallback) {
   interaction === null || interaction === void 0 ? void 0 : interaction.cancelCallbacks.push(cancelCallback);
 }
 export function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName, trace = null) {
-  if (coinflip(getPostInteractionRate(routeName || ufoName, type))) {
+  if (fg('platform_ufo_post_interaction_check_name')) {
     postInteractionLog.reset();
+  } else {
+    if (coinflip(getPostInteractionRate(routeName || ufoName, type))) {
+      postInteractionLog.reset();
+    }
   }
   let vcObserver;
   let previousTime = startTime;
@@ -778,10 +887,21 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
         experienceKey: ufoName
       });
     }
-    if (coinflip(getPostInteractionRate(routeName || ufoName, type))) {
-      postInteractionLog.startVCObserver({
-        startTime
-      });
+    if (fg('platform_ufo_post_interaction_check_name')) {
+      var _getConfig0, _getConfig0$postInter;
+      // Start post interaction observer for all if config is enabled
+      // in case ufoName is updated at later time
+      if ((_getConfig0 = getConfig()) !== null && _getConfig0 !== void 0 && (_getConfig0$postInter = _getConfig0.postInteractionLog) !== null && _getConfig0$postInter !== void 0 && _getConfig0$postInter.enabled) {
+        postInteractionLog.startVCObserver({
+          startTime
+        });
+      }
+    } else {
+      if (coinflip(getPostInteractionRate(routeName || ufoName, type))) {
+        postInteractionLog.startVCObserver({
+          startTime
+        });
+      }
     }
     if (coinflip(getExperimentalInteractionRate(ufoName, type))) {
       experimentalVC.start({
@@ -815,12 +935,27 @@ export function addApdexToAll(apdex) {
   interactions.forEach((interaction, key) => {
     interaction.apdex.push(apdex);
     try {
-      var _apdex$startTime;
       // for Firefox 102 and older
-      performance.measure(`🛸 ${apdex.key} [bm3_tti]`, {
-        start: (_apdex$startTime = apdex.startTime) !== null && _apdex$startTime !== void 0 ? _apdex$startTime : interaction.start,
-        end: apdex.stopTime
-      });
+      if (fg('ufo_chrome_devtools_uplift')) {
+        var _apdex$startTime;
+        performance.measure(`🛸 ${apdex.key} [bm3_tti]`, {
+          start: (_apdex$startTime = apdex.startTime) !== null && _apdex$startTime !== void 0 ? _apdex$startTime : interaction.start,
+          end: apdex.stopTime,
+          detail: {
+            devtools: {
+              track: 'main metrics',
+              trackGroup: '🛸 reactUFO metrics',
+              color: 'primary-dark'
+            }
+          }
+        });
+      } else {
+        var _apdex$startTime2;
+        performance.measure(`🛸 ${apdex.key} [bm3_tti]`, {
+          start: (_apdex$startTime2 = apdex.startTime) !== null && _apdex$startTime2 !== void 0 ? _apdex$startTime2 : interaction.start,
+          end: apdex.stopTime
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -834,12 +969,27 @@ export function addApdex(interactionId, apdexInfo) {
   if (interaction != null) {
     interaction.apdex.push(apdexInfo);
     try {
-      var _apdexInfo$startTime;
       // for Firefox 102 and older
-      performance.measure(`🛸 ${apdexInfo.key} [bm3_tti]`, {
-        start: (_apdexInfo$startTime = apdexInfo.startTime) !== null && _apdexInfo$startTime !== void 0 ? _apdexInfo$startTime : interaction.start,
-        end: apdexInfo.stopTime
-      });
+      if (fg('ufo_chrome_devtools_uplift')) {
+        var _apdexInfo$startTime;
+        performance.measure(`🛸 ${apdexInfo.key} [bm3_tti]`, {
+          start: (_apdexInfo$startTime = apdexInfo.startTime) !== null && _apdexInfo$startTime !== void 0 ? _apdexInfo$startTime : interaction.start,
+          end: apdexInfo.stopTime,
+          detail: {
+            devtools: {
+              track: 'main metrics',
+              trackGroup: '🛸 reactUFO metrics',
+              color: 'primary-dark'
+            }
+          }
+        });
+      } else {
+        var _apdexInfo$startTime2;
+        performance.measure(`🛸 ${apdexInfo.key} [bm3_tti]`, {
+          start: (_apdexInfo$startTime2 = apdexInfo.startTime) !== null && _apdexInfo$startTime2 !== void 0 ? _apdexInfo$startTime2 : interaction.start,
+          end: apdexInfo.stopTime
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -903,12 +1053,26 @@ export function addRedirect(interactionId, fromUfoName, nextUfoName, nextRouteNa
     if (isPerformanceTracingEnabled()) {
       const prevRedirect = interaction.redirects.at(-2);
       try {
-        var _prevRedirect$time;
         // for Firefox 102 and older
-        performance.measure(`🛸 ${nextUfoName} [redirect]`, {
-          start: (_prevRedirect$time = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time !== void 0 ? _prevRedirect$time : interaction.start,
-          end: time
-        });
+        if (fg('ufo_chrome_devtools_uplift')) {
+          var _prevRedirect$time;
+          performance.measure(`🛸 ${nextUfoName} [redirect]`, {
+            start: (_prevRedirect$time = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time !== void 0 ? _prevRedirect$time : interaction.start,
+            end: time,
+            detail: {
+              devtools: {
+                track: '🛸 reactUFO detailed timings',
+                color: 'tertiary'
+              }
+            }
+          });
+        } else {
+          var _prevRedirect$time2;
+          performance.measure(`🛸 ${nextUfoName} [redirect]`, {
+            start: (_prevRedirect$time2 = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time2 !== void 0 ? _prevRedirect$time2 : interaction.start,
+            end: time
+          });
+        }
       } catch (e) {
         // do nothing
       }

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

@@ -88,13 +88,14 @@ export default class PostInteractionLog {
    * Send the log if there is data
    */
   async sendPostInteractionLog() {
-    var _this$vcObserver4, _this$vcObserver5;
+    var _this$vcObserver4, _config$vc, _config$vc2, _this$vcObserver5;
     if (!this.hasData() || !this.lastInteractionFinish || !this.sinkHandlerFn) {
       var _this$vcObserver3;
       this.reset();
       (_this$vcObserver3 = this.vcObserver) === null || _this$vcObserver3 === void 0 ? void 0 : _this$vcObserver3.stop();
       return;
     }
+    const config = getConfig();
     const postInteractionFinishVCResult = await ((_this$vcObserver4 = this.vcObserver) === null || _this$vcObserver4 === void 0 ? void 0 : _this$vcObserver4.getVCResult({
       start: this.lastInteractionFinish.start,
       stop: performance.now(),
@@ -102,8 +103,11 @@ export default class PostInteractionLog {
       // no need for TTI value here
       isEventAborted: !!this.lastInteractionFinish.abortReason,
       prefix: 'ufo',
-      ...this.vcObserverSSRConfig,
-      experienceKey: this.lastInteractionFinish.ufoName
+      experienceKey: this.lastInteractionFinish.ufoName,
+      interactionId: this.lastInteractionFinish.id,
+      includeSSRInV3: config === null || config === void 0 ? void 0 : (_config$vc = config.vc) === null || _config$vc === void 0 ? void 0 : _config$vc.includeSSRInV3,
+      includeSSRRatio: config === null || config === void 0 ? void 0 : (_config$vc2 = config.vc) === null || _config$vc2 === void 0 ? void 0 : _config$vc2.includeSSRRatio,
+      ...this.vcObserverSSRConfig
     }));
     (_this$vcObserver5 = this.vcObserver) === null || _this$vcObserver5 === void 0 ? void 0 : _this$vcObserver5.stop();
     this.sinkHandlerFn({

package/dist/es2019/vc/index.js

@@ -1,4 +1,5 @@
 var _process, _process$env;
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../config';
 import { VCObserverNOOP } from './no-op-vc-observer';
 import { VCObserver } from './vc-observer';
@@ -111,6 +112,7 @@ export class VCObserverWrapper {
       interactionId: param.interactionId,
       ssr: param.includeSSRInV3 ? param.ssr : undefined
     })) : [];
+    fg('ufo_chrome_devtools_uplift') && this.addPerformanceMeasures(param.start, [...((v1v2Result === null || v1v2Result === void 0 ? void 0 : v1v2Result['ufo:vc:rev']) || []), ...(v3Result !== null && v3Result !== void 0 ? v3Result : [])]);
     if (!v3Result) {
       return v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {};
     }
@@ -137,6 +139,46 @@ export class VCObserverWrapper {
   collectSSRPlaceholders() {
     this.ssrPlaceholderHandler.collectExistingPlaceholders();
   }
+  addPerformanceMeasures(start, measures) {
+    try {
+      measures.forEach(entry => {
+        var _entry$vcDetails, _entry$vcDetails$;
+        if (!entry || !entry.vcDetails) {
+          return;
+        }
+        const VCParts = Object.keys(entry.vcDetails);
+        performance.measure(`VC90 (${entry.revision})`, {
+          start,
+          duration: (_entry$vcDetails = entry.vcDetails) === null || _entry$vcDetails === void 0 ? void 0 : (_entry$vcDetails$ = _entry$vcDetails['90']) === null || _entry$vcDetails$ === void 0 ? void 0 : _entry$vcDetails$.t,
+          detail: {
+            devtools: {
+              track: `main metrics`,
+              trackGroup: '🛸 reactUFO metrics',
+              color: 'tertiary'
+            }
+          }
+        });
+        VCParts.forEach(key => {
+          var _entry$vcDetails2;
+          const duration = (_entry$vcDetails2 = entry.vcDetails) === null || _entry$vcDetails2 === void 0 ? void 0 : _entry$vcDetails2[key].t;
+          if (typeof duration !== 'number') {
+            return;
+          }
+          performance.measure(`VC${key}`, {
+            start,
+            duration,
+            detail: {
+              devtools: {
+                track: `VC ${entry.revision}`,
+                trackGroup: '🛸 reactUFO metrics',
+                color: key === '90' ? 'tertiary' : 'primary-light'
+              }
+            }
+          });
+        });
+      });
+    } catch (error) {}
+  }
 }
 
 // Some products set this variable to indicate it is running in SSR

package/dist/es2019/vc/vc-observer/index.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getActiveInteraction } from '../../interaction-metrics';
 import { attachAbortListeners } from './attachAbortListeners';
@@ -188,29 +189,35 @@ export class VCObserver {
             if (isTTVCv1Disabled) {
               const duration = vcNext.VC[key];
               if (duration !== null && duration !== undefined) {
-                performance.measure(`VC${key}`, {
-                  start,
-                  duration
-                });
-                performance.measure(`VC_Next${key}`, {
-                  start,
-                  duration
-                });
+                if (!fg('ufo_chrome_devtools_uplift')) {
+                  performance.measure(`VC${key}`, {
+                    start,
+                    duration
+                  });
+                  performance.measure(`VC_Next${key}`, {
+                    start,
+                    duration
+                  });
+                }
               }
             } else {
               const ttvcV1duration = VC[key];
               if (ttvcV1duration !== null && ttvcV1duration !== undefined) {
-                performance.measure(`VC${key}`, {
-                  start,
-                  duration: ttvcV1duration
-                });
+                if (!fg('ufo_chrome_devtools_uplift')) {
+                  performance.measure(`VC${key}`, {
+                    start,
+                    duration: ttvcV1duration
+                  });
+                }
               }
               const ttvcV2duration = vcNext.VC[key];
               if (ttvcV2duration !== null && ttvcV2duration !== undefined) {
-                performance.measure(`VC_Next${key}`, {
-                  start,
-                  duration: ttvcV2duration
-                });
+                if (!fg('ufo_chrome_devtools_uplift')) {
+                  performance.measure(`VC_Next${key}`, {
+                    start,
+                    duration: ttvcV2duration
+                  });
+                }
               }
             }
           });