@atlaskit/react-ufo 3.12.4 → 3.12.5

package/dist/es2019/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -1,25 +1,131 @@
 import { fg } from '@atlaskit/platform-feature-flags';
-import calculateTTVCPercentiles from './percentile-calc';
+import { calculateTTVCPercentiles, calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
 import getViewportHeight from './utils/get-viewport-height';
 import getViewportWidth from './utils/get-viewport-width';
 export default class AbstractVCCalculatorBase {
   constructor(revisionNo) {
     this.revisionNo = revisionNo;
   }
+  filterViewportEntries(entries) {
+    return entries.filter(entry => {
+      return 'rect' in entry.data;
+    });
+  }
+  async calculateBasic(filteredEntries, startTime, stopTime) {
+    const percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
+    const viewportEntries = this.filterViewportEntries(filteredEntries);
+    const vcLogs = await calculateTTVCPercentiles({
+      viewport: {
+        width: getViewportWidth(),
+        height: getViewportHeight()
+      },
+      startTime,
+      stopTime,
+      orderedEntries: viewportEntries,
+      percentiles
+    });
+    return vcLogs;
+  }
+  async calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) {
+    const percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
+    const viewportEntries = this.filterViewportEntries(filteredEntries);
+    const vcLogs = await calculateTTVCPercentilesWithDebugInfo({
+      viewport: {
+        width: getViewportWidth(),
+        height: getViewportHeight()
+      },
+      startTime,
+      stopTime,
+      orderedEntries: viewportEntries
+    });
+    const vcDetails = {};
+    let percentileIndex = 0;
+    const entryDataBuffer = new Set();
+    if (vcLogs) {
+      for (const entry of vcLogs) {
+        const {
+          time,
+          viewportPercentage,
+          entries
+        } = entry;
+
+        // Only process entries if we haven't reached all percentiles
+        if (percentileIndex >= percentiles.length) {
+          break;
+        }
+
+        // Check if this entry matches any checkpoint percentiles
+        if (viewportPercentage >= percentiles[percentileIndex]) {
+          const elementNames = entries.map(e => e.elementName);
+
+          // Process all matching percentiles in one go
+          while (percentileIndex < percentiles.length && viewportPercentage >= percentiles[percentileIndex]) {
+            vcDetails[`${percentiles[percentileIndex]}`] = {
+              t: Math.round(time),
+              e: elementNames
+            };
+            percentileIndex++;
+          }
+
+          // Clear buffer after processing all matching percentiles
+          entryDataBuffer.clear();
+        } else {
+          // Only add to buffer if we haven't reached all percentiles
+          entries.forEach(e => entryDataBuffer.add(e));
+        }
+      }
+    }
+
+    // Fill in any missing percentiles with the last known values
+    let previousResult = {
+      t: 0,
+      e: []
+    };
+    for (let i = 0; i < percentiles.length; i++) {
+      const percentile = percentiles[i];
+      if (!(percentile in vcDetails)) {
+        vcDetails[`${percentile}`] = previousResult;
+      } else {
+        previousResult = vcDetails[`${percentile}`];
+      }
+    }
+
+    // Handle devtool callback
+    if (!isPostInteraction && typeof window !== 'undefined' && typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && fg('platform_ufo_ttvc_v3_devtool')) {
+      try {
+        var _ufo_devtool_onVCRev, _ref;
+        (_ufo_devtool_onVCRev = (_ref = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 ? void 0 : _ufo_devtool_onVCRev.call(_ref, {
+          revision: this.revisionNo,
+          isClean: isVCClean,
+          abortReason: dirtyReason,
+          vcLogs,
+          interactionId
+        });
+      } catch (e) {
+        // if any error communicating with devtool, we don't want to break the app
+        // eslint-disable-next-line no-console
+        console.error('Error in onVCRevisionReady', e);
+      }
+    }
+    return vcDetails;
+  }
   async calculate({
     startTime,
     stopTime,
-    orderedEntries
+    orderedEntries,
+    interactionId,
+    isPostInteraction
   }) {
     var _vcDetails$90$t, _vcDetails$;
     const filteredEntries = orderedEntries.filter(entry => {
       return this.isEntryIncluded(entry);
     });
+    let isVCClean;
+    let dirtyReason;
     if (fg('platform_ufo_add_vc_abort_reason_by_revisions')) {
-      const {
-        isVCClean,
-        dirtyReason
-      } = this.getVCCleanStatus(filteredEntries);
+      const getVCCleanStatusResult = this.getVCCleanStatus(filteredEntries);
+      isVCClean = getVCCleanStatusResult.isVCClean;
+      dirtyReason = getVCCleanStatusResult.dirtyReason;
       if (!isVCClean) {
         return {
           revision: this.revisionNo,
@@ -29,7 +135,7 @@ export default class AbstractVCCalculatorBase {
         };
       }
     } else {
-      const isVCClean = this.isVCClean(filteredEntries);
+      isVCClean = this.isVCClean(filteredEntries);
       if (!isVCClean) {
         return {
           revision: this.revisionNo,
@@ -38,16 +144,8 @@ export default class AbstractVCCalculatorBase {
         };
       }
     }
-    const vcDetails = await calculateTTVCPercentiles({
-      viewport: {
-        width: getViewportWidth(),
-        height: getViewportHeight()
-      },
-      startTime,
-      stopTime,
-      orderedEntries: filteredEntries,
-      percentiles: [25, 50, 75, 80, 85, 90, 95, 98, 99]
-    });
+    const useDebugInfo = fg('platform_ufo_ttvc_v3_devtool');
+    const vcDetails = useDebugInfo ? await this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) : await this.calculateBasic(filteredEntries, startTime, stopTime);
     return {
       revision: this.revisionNo,
       clean: true,

package/dist/es2019/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -13,10 +13,10 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
     super(REVISION_NO);
   }
   isEntryIncluded(entry) {
-    if (!CONSIDERED_ENTRY_TYPE.includes(entry.type)) {
+    if (!CONSIDERED_ENTRY_TYPE.includes(entry.data.type)) {
       return false;
     }
-    if (entry.type === 'mutation:attribute') {
+    if (entry.data.type === 'mutation:attribute') {
       const entryData = entry.data;
       const attributeName = entryData.attributeName;
       if (!attributeName || KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS.includes(attributeName)) {
@@ -31,7 +31,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
   }
   isVCClean(filteredEntries) {
     const hasAbortEvent = filteredEntries.some(entry => {
-      if (entry.type === 'window:event') {
+      if (entry.data.type === 'window:event') {
         const data = entry.data;
         if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
           return true;
@@ -44,7 +44,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
   getVCCleanStatus(filteredEntries) {
     let dirtyReason = '';
     const hasAbortEvent = filteredEntries.some(entry => {
-      if (entry.type === 'window:event') {
+      if (entry.data.type === 'window:event') {
         const data = entry.data;
         if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
           dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.js

@@ -27,6 +27,31 @@ async function calculateTTVCPercentiles({
   const totalPixels = canvasDimenstions.width * canvasDimenstions.height;
   return calculatePercentiles(timePixelCounts, elementMap, percentiles, totalPixels, startTime);
 }
+async function calculateTTVCPercentilesWithDebugInfo({
+  viewport,
+  orderedEntries,
+  startTime
+}) {
+  const canvas = new ViewportCanvas(viewport, fg('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
+  const elementMap = new Map();
+  for (const entry of orderedEntries) {
+    if (!('rect' in entry.data)) {
+      continue;
+    }
+    const rect = entry.data.rect;
+    canvas.drawRect(rect, entry.time);
+    if (!elementMap.has(entry.time)) {
+      elementMap.set(entry.time, []);
+    }
+    elementMap.get(entry.time).push(entry.data);
+  }
+
+  // Get pixel counts
+  const timePixelCounts = await canvas.getPixelCounts();
+  const canvasDimensions = canvas.getScaledDimensions();
+  const totalPixels = canvasDimensions.width * canvasDimensions.height;
+  return calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, totalPixels, startTime);
+}
 export default calculateTTVCPercentiles;
 export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
   const results = {};
@@ -70,4 +95,22 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
     previousResult = results[`${percentile}`];
   }
   return results;
-}
+}
+export function calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, totalPixels, startTime) {
+  const results = new Array(elementMap.size);
+  let cumulativePixels = 0;
+  const sortedEntries = Array.from(timePixelCounts.entries()).sort(([timeA], [timeB]) => Number(timeA) - Number(timeB));
+  for (let i = 0; i < sortedEntries.length; i++) {
+    const [time, pixelCount] = sortedEntries[i];
+    cumulativePixels += pixelCount;
+    const percentCovered = cumulativePixels / totalPixels * 100;
+    const entryDatas = elementMap.get(time) || [];
+    results[i] = {
+      time: Math.round(Number(time - startTime)),
+      viewportPercentage: percentCovered,
+      entries: Array.from(entryDatas)
+    };
+  }
+  return results;
+}
+export { calculateTTVCPercentilesWithDebugInfo };

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/test-with-debug-info.js

@@ -0,0 +1,75 @@
+import { calculatePercentilesWithDebugInfo } from './index';
+
+// Test utilities
+const createMockRect = (x = 0, y = 0, width = 100, height = 100) => new MockDOMRect(x, y, width, height);
+const createViewportEntry = (elementName, rect = createMockRect(), visible = true, type = 'mutation:element') => ({
+  elementName,
+  rect,
+  visible,
+  type
+});
+const createTimePixelCounts = counts => new Map(counts);
+const createElementMap = entries => new Map(entries);
+const createExpectedResult = (time, viewportPercentage, entries) => ({
+  time,
+  viewportPercentage,
+  entries
+});
+class MockDOMRect {
+  constructor(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+  get bottom() {
+    return this.y + this.height;
+  }
+  get left() {
+    return this.x;
+  }
+  get right() {
+    return this.x + this.width;
+  }
+  get top() {
+    return this.y;
+  }
+  toJSON() {
+    return {
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height
+    };
+  }
+}
+describe('calculatePercentilesWithDebugInfo', () => {
+  it('should correctly calculate percentiles with accumulated elements from timestamps', () => {
+    const timePixelCounts = createTimePixelCounts([[100, 10], [200, 20], [300, 10], [400, 10]]);
+    const elementMap = createElementMap([[100, [createViewportEntry('div'), createViewportEntry('span')]], [200, [createViewportEntry('img')]], [300, [createViewportEntry('p'), createViewportEntry('a')]], [400, [createViewportEntry('img')]]]);
+    const expected = [createExpectedResult(100, 20, [createViewportEntry('div'), createViewportEntry('span')]), createExpectedResult(200, 60, [createViewportEntry('img')]), createExpectedResult(300, 80, [createViewportEntry('p'), createViewportEntry('a')]), createExpectedResult(400, 100, [createViewportEntry('img')])];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 50, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should handle empty entries gracefully', () => {
+    const timePixelCounts = new Map();
+    const elementMap = new Map();
+    const expected = [];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 100, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should handle non-sequential timestamps', () => {
+    const timePixelCounts = createTimePixelCounts([[300, 70], [100, 30]]);
+    const elementMap = createElementMap([[300, [createViewportEntry('p'), createViewportEntry('a')]], [100, [createViewportEntry('div')]]]);
+    const expected = [createExpectedResult(100, 30, [createViewportEntry('div')]), createExpectedResult(300, 100, [createViewportEntry('p'), createViewportEntry('a')])];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 100, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should correctly calculate percentiles with startTime offset', () => {
+    const timePixelCounts = createTimePixelCounts([[100, 10], [200, 20], [300, 10], [400, 10]]);
+    const elementMap = createElementMap([[100, [createViewportEntry('div'), createViewportEntry('span')]], [200, [createViewportEntry('img')]], [300, [createViewportEntry('p'), createViewportEntry('a')]], [400, [createViewportEntry('img')]]]);
+    const expected = [createExpectedResult(50, 20, [createViewportEntry('div'), createViewportEntry('span')]), createExpectedResult(150, 60, [createViewportEntry('img')]), createExpectedResult(250, 80, [createViewportEntry('p'), createViewportEntry('a')]), createExpectedResult(350, 100, [createViewportEntry('img')])];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 50, 50);
+    expect(result).toEqual(expected);
+  });
+});

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/index.js

@@ -1,20 +1,2 @@
-import calcUsingCanvas from './canvas-heatmap';
-import calcUsingOldHeatmap from './heatmap';
-import calcUsingRectSweepingLine from './rect-sweeping-line';
-async function calculateTTVCPercentiles(arg) {
-  const algo = 'canvas_heatmap';
-  if (algo === 'canvas_heatmap') {
-    const vcDetails = await calcUsingCanvas(arg);
-    return vcDetails;
-  }
-  if (algo === 'rect_sweeping') {
-    const vcDetails = await calcUsingRectSweepingLine(arg);
-    return vcDetails;
-  }
-  if (algo === 'old_heatmap') {
-    const vcDetails = await calcUsingOldHeatmap(arg);
-    return vcDetails;
-  }
-  throw new Error('unexpected Error algo not chosen correctly');
-}
-export default calculateTTVCPercentiles;
+export { default as calculateTTVCPercentiles } from './canvas-heatmap';
+export { calculateTTVCPercentilesWithDebugInfo } from './canvas-heatmap';

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

@@ -108,7 +108,9 @@ export default class ViewportObserver {
     });
     _defineProperty(this, "handleAttributeMutation", ({
       target,
-      attributeName
+      attributeName,
+      oldValue,
+      newValue
     }) => {
       var _this$intersectionObs4;
       (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(target, ({
@@ -119,7 +121,9 @@ export default class ViewportObserver {
           return {
             type: 'mutation:media',
             mutationData: {
-              attributeName
+              attributeName,
+              oldValue,
+              newValue
             }
           };
         }
@@ -131,7 +135,9 @@ export default class ViewportObserver {
           return {
             type: 'mutation:attribute:non-visual-style',
             mutationData: {
-              attributeName
+              attributeName,
+              oldValue,
+              newValue
             }
           };
         }
@@ -140,14 +146,18 @@ export default class ViewportObserver {
           return {
             type: 'mutation:attribute:no-layout-shift',
             mutationData: {
-              attributeName
+              attributeName,
+              oldValue,
+              newValue
             }
           };
         }
         return {
           type: 'mutation:attribute',
           mutationData: {
-            attributeName
+            attributeName,
+            oldValue,
+            newValue
           }
         };
       });

package/dist/es2019/vc/vc-observer-new/viewport-observer/mutation-observer/index.js

@@ -30,7 +30,9 @@ function createMutationObserver({
           var _mut$attributeName;
           onAttributeMutation({
             target: mut.target,
-            attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown'
+            attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
+            oldValue,
+            newValue
           });
         }
         continue;

package/dist/esm/create-experimental-interaction-metrics-payload/index.js

@@ -101,7 +101,8 @@ function _getExperimentalVCMetrics() {
             isEventAborted: !!interaction.abortReason,
             prefix: prefix,
             vc: interaction.vc,
-            experienceKey: interaction.ufoName
+            experienceKey: interaction.ufoName,
+            interactionId: interaction.id
           });
         case 4:
           result = _context.sent;

package/dist/esm/create-payload/utils/get-vc-metrics.js

@@ -58,7 +58,8 @@ function _getVCMetrics() {
             prefix: prefix,
             vc: interaction.vc,
             isEventAborted: interactionStatus.originalInteractionStatus !== 'SUCCEEDED',
-            experienceKey: interaction.ufoName
+            experienceKey: interaction.ufoName,
+            interactionId: interaction.id
           }, ssr));
         case 18:
           result = _context.sent;

package/dist/esm/vc/index.js

@@ -122,7 +122,8 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
               _context.next = 13;
               return (_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 ? void 0 : _this$newVCObserver5.getVCResult({
                 start: param.start,
-                stop: param.stop
+                stop: param.stop,
+                interactionId: param.interactionId
               });
             case 13:
               _context.t1 = _context.sent;
@@ -149,7 +150,8 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
               _context.next = 28;
               return (_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 ? void 0 : _this$newVCObserver6.getVCResult({
                 start: param.start,
-                stop: param.stop
+                stop: param.stop,
+                interactionId: param.interactionId
               });
             case 28:
               newResult = _context.sent;

package/dist/esm/vc/vc-observer/getVCRevisionDebugDetails.js

@@ -0,0 +1,35 @@
+export function getVCRevisionDebugDetails(_ref) {
+  var revision = _ref.revision,
+    isClean = _ref.isClean,
+    abortReason = _ref.abortReason,
+    VCEntries = _ref.VCEntries,
+    componentsLog = _ref.componentsLog,
+    interactionId = _ref.interactionId;
+  return {
+    revision: revision,
+    isClean: isClean,
+    abortReason: abortReason,
+    vcLogs: VCEntries.map(function (entry) {
+      return {
+        time: entry.time,
+        viewportPercentage: entry.vc,
+        entries: entry.elements.map(function (element) {
+          var _componentsLog$entry$;
+          var logEntry = (_componentsLog$entry$ = componentsLog[entry.time]) === null || _componentsLog$entry$ === void 0 ? void 0 : _componentsLog$entry$.find(function (log) {
+            return log.targetName === element;
+          });
+          return {
+            elementName: element,
+            type: logEntry === null || logEntry === void 0 ? void 0 : logEntry.type,
+            rect: logEntry === null || logEntry === void 0 ? void 0 : logEntry.intersectionRect,
+            visible: true,
+            attributeName: logEntry === null || logEntry === void 0 ? void 0 : logEntry.attributeName,
+            oldValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.oldValue,
+            newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue
+          };
+        })
+      };
+    }),
+    interactionId: interactionId
+  };
+}

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

@@ -13,6 +13,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getActiveInteraction } from '../../interaction-metrics';
 import { attachAbortListeners } from './attachAbortListeners';
+import { getVCRevisionDebugDetails } from './getVCRevisionDebugDetails';
 import { getVCRevisionsData } from './getVCRevisionsData';
 import { getViewportHeight, getViewportWidth } from './getViewport';
 import { MultiRevisionHeatmap } from './heatmap/heatmap';
@@ -99,11 +100,11 @@ export var VCObserver = /*#__PURE__*/function () {
     });
     _defineProperty(this, "getVCResult", /*#__PURE__*/function () {
       var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
-        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, isVCClean, revisionsData, speedIndex, isTTVCv3Enabled;
+        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, _ufo_devtool_onVCRev2, _ref10, _ufo_devtool_onVCRev, _ref9, isVCClean, revisionsData, speedIndex, isTTVCv3Enabled;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              start = _ref3.start, stop = _ref3.stop, tti = _ref3.tti, prefix = _ref3.prefix, ssr = _ref3.ssr, vc = _ref3.vc, isEventAborted = _ref3.isEventAborted, experienceKey = _ref3.experienceKey;
+              start = _ref3.start, stop = _ref3.stop, tti = _ref3.tti, prefix = _ref3.prefix, ssr = _ref3.ssr, vc = _ref3.vc, isEventAborted = _ref3.isEventAborted, experienceKey = _ref3.experienceKey, interactionId = _ref3.interactionId;
               startTime = performance.now(); // add local measurement
               fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
               rawData = vc !== undefined ? vc : _this.getVCRawData();
@@ -280,6 +281,31 @@ export var VCObserver = /*#__PURE__*/function () {
                       entries: isTTVCv1Disabled ? vcNext.VCEntries.rel : VCEntries.rel
                     }
                   }));
+
+                  // Add devtool callback for both v1 and v2
+                  if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && fg('platform_ufo_ttvc_v3_devtool')) {
+                    // Handle v1 if not disabled
+                    if (!isTTVCv1Disabled) {
+                      (_ufo_devtool_onVCRev = (_ref9 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 || _ufo_devtool_onVCRev.call(_ref9, getVCRevisionDebugDetails({
+                        revision: 'fy25.01',
+                        isClean: !abortReasonInfo,
+                        abortReason: abortReason.reason,
+                        VCEntries: VCEntries.rel,
+                        componentsLog: componentsLog,
+                        interactionId: interactionId
+                      }));
+                    }
+
+                    // Handle v2
+                    (_ufo_devtool_onVCRev2 = (_ref10 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev2 === void 0 || _ufo_devtool_onVCRev2.call(_ref10, getVCRevisionDebugDetails({
+                      revision: 'fy25.02',
+                      isClean: !abortReasonInfo,
+                      abortReason: abortReason.reason,
+                      VCEntries: vcNext.VCEntries.rel,
+                      componentsLog: componentsLog,
+                      interactionId: interactionId
+                    }));
+                  }
                 }
               } catch (e) {
                 /*  do nothing */
@@ -380,16 +406,16 @@ export var VCObserver = /*#__PURE__*/function () {
         });
       }
     });
-    _defineProperty(this, "onViewportChangeDetected", function (_ref9) {
-      var element = _ref9.element,
-        type = _ref9.type,
-        ignoreReason = _ref9.ignoreReason,
-        timestamp = _ref9.timestamp,
-        targetName = _ref9.targetName,
-        intersectionRect = _ref9.intersectionRect,
-        attributeName = _ref9.attributeName,
-        oldValue = _ref9.oldValue,
-        newValue = _ref9.newValue;
+    _defineProperty(this, "onViewportChangeDetected", function (_ref11) {
+      var element = _ref11.element,
+        type = _ref11.type,
+        ignoreReason = _ref11.ignoreReason,
+        timestamp = _ref11.timestamp,
+        targetName = _ref11.targetName,
+        intersectionRect = _ref11.intersectionRect,
+        attributeName = _ref11.attributeName,
+        oldValue = _ref11.oldValue,
+        newValue = _ref11.newValue;
       if (_this.multiHeatmap === null) {
         return;
       }
@@ -474,10 +500,10 @@ export var VCObserver = /*#__PURE__*/function () {
       var unbinds = attachAbortListeners(window, _this.viewport, _this.abortReasonCallback);
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
         var _window2;
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref10) {
-          var _ref11 = _slicedToArray(_ref10, 2),
-            key = _ref11[0],
-            time = _ref11[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref12) {
+          var _ref13 = _slicedToArray(_ref12, 2),
+            key = _ref13[0],
+            time = _ref13[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -510,8 +536,8 @@ export var VCObserver = /*#__PURE__*/function () {
   }
   return _createClass(VCObserver, [{
     key: "start",
-    value: function start(_ref12) {
-      var startTime = _ref12.startTime;
+    value: function start(_ref14) {
+      var startTime = _ref14.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -533,12 +559,12 @@ export var VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref13) {
-        var ignoreReason = _ref13.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref15) {
+        var ignoreReason = _ref15.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref14) {
-        var targetName = _ref14.targetName,
-          ignoreReason = _ref14.ignoreReason;
+      }).map(function (_ref16) {
+        var targetName = _ref16.targetName,
+          ignoreReason = _ref16.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -661,12 +687,12 @@ export var VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref15) {
-      var heatmap = _ref15.heatmap,
-        _ref15$ssr = _ref15.ssr,
-        ssr = _ref15$ssr === void 0 ? UNUSED_SECTOR : _ref15$ssr,
-        componentsLog = _ref15.componentsLog,
-        viewport = _ref15.viewport;
+    value: function calculateVC(_ref17) {
+      var heatmap = _ref17.heatmap,
+        _ref17$ssr = _ref17.ssr,
+        ssr = _ref17$ssr === void 0 ? UNUSED_SECTOR : _ref17$ssr,
+        componentsLog = _ref17.componentsLog,
+        viewport = _ref17.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -732,11 +758,11 @@ export var VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref16, i) {
+      var VCEntries = entries.reduce(function (acc, _ref18, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref17 = _slicedToArray(_ref16, 2),
-          timestamp = _ref17[0],
-          entryPainted = _ref17[1];
+        var _ref19 = _slicedToArray(_ref18, 2),
+          timestamp = _ref19[0],
+          entryPainted = _ref19[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
         var logEntry = _toConsumableArray(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(function (v) {