@atlaskit/react-ufo 5.1.2 → 5.1.4

package/AGENTS.md

@@ -0,0 +1,426 @@
+# AGENTS.md - React UFO (@atlaskit/react-ufo)
+
+## Overview
+
+React UFO (User-Facing Observability) is a performance instrumentation library that captures key user experience metrics across Atlassian products. It produces structured performance events that are consumed by downstream analytics systems, primarily the **Glance (Performance Portal)** system.
+
+## Team & Product Context
+
+- **Team**: Frontend Observability (FeObs) — provides end-to-end solutions for frontend observability (performance + reliability)
+- **Product**: Glance (formerly Performance Portal) — the one-stop shop for frontend performance data at Atlassian
+- **Mission**: Make performance data available, accountable, and actionable
+- **Support channel**: `#help-devinfra-fe-observability` (Slack)
+- **Jira project**: AFO on `product-fabric.atlassian.net`
+- **Shortlinks**: `go/glance`, `go/feo`
+- **Package**: `@atlaskit/react-ufo`
+
+## Architecture
+
+### Local Package Architecture
+
+```mermaid
+graph TD
+    subgraph "React Application"
+        A[traceUFOPageLoad / traceUFOTransition / traceUFOPress] --> B[InteractionMetrics]
+        C[UFOSegment] --> B
+        D[UFOLoadHold] --> B
+        E[UFOLabel] --> B
+        F[Custom Data/Timings] --> B
+    end
+    
+    subgraph "React UFO Core"
+        B --> G[VCObserver - Visual Completion]
+        B --> H[HoldTracking]
+        B --> I[ReactProfiler]
+        G --> J[createPayload]
+        H --> J
+        I --> J
+    end
+    
+    subgraph "Output"
+        J --> K[GASv3 Analytics Events]
+        K --> L[Performance Portal / Databricks]
+    end
+```
+
+### End-to-End Data Pipeline
+
+React UFO is the **client-side instrumentation** in a larger data pipeline:
+
+```mermaid
+graph LR
+    subgraph "Client Instrumentation"
+        A[React UFO in Products]
+    end
+    
+    subgraph "Transport Layer"
+        B[GASv3 analytics-service]
+        C[StreamHub / Kinesis]
+    end
+    
+    subgraph "Event Processing - perf-portal-monorepo"
+        D[UFO Service - splits events]
+        E[BM Data Pipeline]
+    end
+    
+    subgraph "Data Storage"
+        F[Socrates - data lake]
+        G[Databricks - aggregation]
+    end
+    
+    subgraph "Data Serving"
+        H[Perf Portal GQL]
+        I[Glance UI]
+    end
+    
+    A --> B --> C --> D --> E --> F --> G --> H --> I
+```
+
+**Key Pipeline Details:**
+- **UFO Service** splits root interactions from page segments (e.g., `jira.fe.page-load.issue-view` generates multiple `jira.fe.page-segment-load.*` events)
+- **Databricks** has streaming (high-resolution) and daily aggregation jobs
+- **External dependencies**: Socrates (data lake), Observo (high-cardinality data), SignalFx (metrics/alerting)
+
+## Key Concepts
+
+### Interaction Types
+- **`page_load`**: Initial page rendering measurement
+- **`transition`**: SPA navigation between routes
+- **`press`**: User click/tap interactions
+- **`hover`**: Mouse hover interactions
+- **`typing`**: Keyboard input performance
+
+### Core Metrics
+- **TTI (Time to Interactive)**: Legacy metric from BM3 (Browser Metrics 3)
+- **TTAI (Time to All Interactive)**: When all holds are released
+- **TTVC (Time to Visual Completion)**: When visual changes stabilize at various thresholds (VC50, VC80, VC90, VC99)
+- **FMP (First Meaningful Paint)**: When primary content is visible
+- **Speed Index**: Weighted average of visual progress over time
+
+### TTVC Revisions
+The package supports multiple TTVC calculation algorithms:
+- `fy25.01`, `fy25.02`: Legacy revisions
+- `fy25.03`: Current default revision (`DEFAULT_TTVC_REVISION`)
+- `fy26.04`, `next`: Experimental revisions
+
+## Directory Structure
+
+```
+src/
+├── trace-pageload/        # Page load interaction initialization
+├── trace-transition/      # SPA transition tracking
+├── trace-press/           # Press interaction tracking
+├── trace-interaction/     # Generic interaction tracing
+├── trace-redirect/        # Route redirect tracking
+├── trace-hover/           # Hover interaction tracking
+├── interaction-metrics/   # Core interaction state management
+├── create-payload/        # Analytics payload generation
+├── vc/                    # Visual Completion observer system
+│   ├── vc-observer/       # Legacy VC observer (fy25.01, fy25.02)
+│   └── vc-observer-new/   # New VC observer (fy25.03+)
+├── segment/               # UFOSegment component
+├── load-hold/             # UFOLoadHold component
+├── label/                 # UFOLabel component
+├── config/                # Configuration management
+├── custom-data/           # Custom data injection
+├── custom-cohort-data/    # Cohort data for A/B testing
+├── custom-timings/        # Custom timing tracking
+├── custom-spans/          # Custom span tracking
+├── feature-flags-accessed/ # Feature flag correlation
+├── ssr/                   # SSR timing integration
+├── suspense/              # Instrumented React Suspense
+├── placeholder/           # Lazy loading placeholder integration
+├── report-error/          # Error reporting utilities
+├── set-interaction-error/ # Interaction error handling
+├── set-terminal-error/    # Terminal error handling
+└── common/                # Shared types and utilities
+```
+
+## Key Entry Points
+
+### Interaction Initialization
+- [`traceUFOPageLoad`](./src/trace-pageload/index.ts) - Start page load measurement
+- [`traceUFOTransition`](./src/trace-transition/index.ts) - Start transition measurement
+- [`traceUFOPress`](./src/trace-press/index.ts) - Start press interaction measurement
+- [`traceUFOInteraction`](./src/trace-interaction/index.ts) - Generic interaction from browser events
+- [`traceUFORedirect`](./src/trace-redirect/index.ts) - Track route redirects
+
+### React Components
+- [`UFOSegment`](./src/segment/segment.tsx) - Define measurable page sections
+- [`UFOLoadHold`](./src/load-hold/UFOLoadHold.tsx) - Hold interaction completion during loading
+- [`UFOLabel`](./src/label/UFOLabel.tsx) - Annotate component tree for debugging
+- [`Suspense`](./src/suspense/Suspense.tsx) - Instrumented React Suspense boundary
+- [`UFOCustomData`](./src/custom-data/index.ts) - Add custom data to interactions
+- [`UFOCustomCohortData`](./src/custom-cohort-data/index.ts) - Add cohort data for experiments
+
+### Configuration
+- [`setUFOConfig`](./src/config/index.ts) - Configure UFO behavior, sampling rates, and features
+
+### Payload Generation
+- [`createPayloads`](./src/create-payload/index.ts) - Generate analytics payloads from interaction data
+
+## Payload Schema
+
+Events are sent with `experience:key` of `custom.interaction-metrics` and follow the schema defined in [`react-ufo-payload-schema.ts`](./src/common/react-ufo-payload-schema.ts).
+
+Key payload fields:
+- `experience:name` - The UFO interaction name (e.g., `issue-view`)
+- `interactionMetrics.type` - Interaction type (page_load, transition, press, etc.)
+- `interactionMetrics.start/end` - Timing boundaries
+- `interactionMetrics.segments` - Measured page sections
+- `interactionMetrics.holdInfo` - Loading hold timings
+- `interactionMetrics.errors` - Captured errors during interaction
+- `ufo:vc:rev` - Visual completion revision data
+- `ufo:vc:ratios` - VC percentage at various thresholds
+- `metric:ttai` - Time to All Interactive
+- `metric:fp`, `metric:fcp`, `metric:lcp` - Paint metrics
+
+## Downstream Consumer: Glance (Performance Portal)
+
+The events produced by this package are consumed by the **Glance** system (https://bitbucket.org/atlassian/perf-portal-monorepo):
+
+### perf-portal-monorepo Apps
+
+| App | Purpose | Role in Pipeline |
+|-----|---------|------------------|
+| `apps/ufo` | UFO event processing service | Event Ingestion & Splitting |
+| `apps/bm-data-pipeline` | Browser Metrics data pipeline | Event Processing (BM3) |
+| `apps/databricks-jobs` | Data aggregation notebooks | Data Aggregation |
+| `apps/perf-portal-gql` | GraphQL API server | Data Serving + Alerts |
+| `apps/performance-portal` | React frontend (Glance UI) | Data Visualization |
+
+### Event Flow
+
+```mermaid
+sequenceDiagram
+    participant App as Atlassian Product
+    participant UFO as React UFO
+    participant GAS as GASv3 Analytics
+    participant Stream as StreamHub/Kinesis
+    participant UFOSvc as UFO Service
+    participant DB as Databricks
+    participant GQL as Perf Portal GQL
+    participant UI as Glance UI
+    
+    App->>UFO: traceUFOPageLoad('issue-view')
+    UFO->>UFO: Measure TTAI, TTVC
+    UFO->>GAS: Send interaction-metrics event
+    GAS->>Stream: Forward to Kinesis
+    Stream->>UFOSvc: Process event
+    UFOSvc->>UFOSvc: Split root + segments
+    UFOSvc->>DB: Streaming aggregation
+    DB->>DB: Daily aggregation
+    DB->>GQL: Query aggregated data
+    GQL->>UI: GraphQL response
+    UI->>UI: Display dashboards
+```
+
+### What Glance Provides
+
+1. **Topline Metrics**: FMP, TTVC, TTAI dashboards
+2. **Experience Breakdown**: Per-route performance analysis
+3. **Segment Analysis**: Component-level timing breakdown
+4. **Regression Detection**: Automated performance alerts
+5. **P-BREACH Tickets**: Automatic Jira tickets for regressions
+6. **AI Investigation**: LLM-powered regression analysis
+
+## Feature Flags
+
+The package uses platform feature flags for gradual rollouts. Key flags are defined in [`package.json`](./package.json):
+
+| Flag | Purpose |
+|------|---------|
+| `platform_ufo_enable_ttai_with_3p` | Third-party segment timing |
+| `platform_ufo_enable_vc_raw_data` | Raw VC data inclusion |
+| `platform_ufo_segment_critical_metrics` | Segment-level metrics |
+| `platform_ufo_enable_terminal_errors` | Terminal error tracking |
+| `platform_ufo_raw_data_thirdparty` | Third-party raw data behavior |
+| `platform_ufo_enable_finish_interaction_transition` | Finish interaction on transition |
+
+## Testing
+
+### Unit Tests
+```bash
+cd platform && afm test unit packages/react-ufo/atlaskit/src/<test-file>
+# Or run all:
+cd platform && yarn test packages/react-ufo
+```
+
+### Integration Tests
+```bash
+# Terminal 1: Start dev server
+cd platform && yarn start:rspack react-ufo
+
+# Terminal 2: Run integration tests
+cd platform && yarn test:integration packages/react-ufo/atlaskit/__tests__/ \
+  --retries 0 --reporter list --reuse-dev-server \
+  --project=desktop-chromium --max-failures=0
+```
+
+### Verifying Non-Flaky Tests
+To simulate CI-like environment:
+```bash
+yarn test:integration packages/react-ufo/atlaskit/__tests__/playwright/base.spec.ts \
+  --retries 0 --reporter list --reuse-dev-server \
+  --project=desktop-chromium --max-failures=0 \
+  --repeat-each 50 --workers 50
+```
+
+Integration tests are located in `__tests__/playwright/` and use example pages from `examples/`.
+
+## Common Tasks
+
+### Adding a New Interaction Type
+1. Create trace function in `src/trace-{type}/`
+2. Update `InteractionType` in common types
+3. Add configuration support in `src/config/`
+4. Update payload generation in `src/create-payload/`
+
+### Modifying VC Calculation
+1. VC observers are in `src/vc/vc-observer-new/` (current) and `src/vc/vc-observer/` (legacy)
+2. Revisions are controlled by `enabledVCRevisions` config
+3. Test changes against existing integration tests
+
+### Adding Custom Metrics
+1. Use `addUFOCustomData` for custom attributes
+2. Use `addCustomTiming` for custom timing spans
+3. Custom data appears in payload under `interactionMetrics.customData`
+
+### Adding Feature Flags
+1. Import `fg` from `@atlaskit/platform-feature-flags`
+2. Register flag in `package.json` under `platform-feature-flags`
+3. Put fg check as **last condition** in if statements: `if (a === b && fg('my_fg'))`
+
+## Important Patterns
+
+### Singleton Pattern
+The package uses a singleton pattern for global state:
+```typescript
+// VCObserver is global per interaction
+globalThis.__vcObserver = new VCObserverWrapper(opts);
+
+// Config is module-level singleton
+let config: Config | undefined;
+```
+
+### Hold System
+Holds prevent interaction completion until all loading states resolve:
+```typescript
+// Hold is added when loading starts
+const release = addHold(interactionId, labelStack, 'my-loading');
+
+// Hold is released when loading completes
+release();
+```
+
+### Segment Tree
+Segments are tracked hierarchically for nested measurement:
+```typescript
+// Parent segment
+<UFOSegment name="page">
+  // Child segment
+  <UFOSegment name="sidebar">
+    <Content />
+  </UFOSegment>
+</UFOSegment>
+```
+
+### Third-Party Segments
+For external/plugin content:
+```typescript
+import { UFOThirdPartySegment } from '@atlaskit/react-ufo/segment';
+
+<UFOThirdPartySegment name="external-widget">
+  <ExternalWidget />
+</UFOThirdPartySegment>
+```
+
+## Debugging
+
+### Performance Tracing
+Enable Chrome DevTools performance tracing:
+```typescript
+window.__REACT_UFO_ENABLE_PERF_TRACING = true;
+```
+
+### Event Inspection
+Listen for interaction completion:
+```typescript
+window.addEventListener('UFO_FINISH_INTERACTION', (event) => {
+  console.log('UFO interaction finished:', event.detail);
+});
+```
+
+### Chrome Extension
+Use the **UFO Chrome Extension** (`apps/ufo-chrome-extension` in perf-portal-monorepo) for DevTools integration.
+
+## Related Packages
+
+| Package | Purpose |
+|---------|---------|
+| `@atlaskit/react-ufo` | Core UFO instrumentation (this package) |
+| `ufo-load-hold` | Standalone load hold component |
+| `ufo-apollo-log` | Apollo Client integration |
+| `ufo-resource-router-log` | react-resource-router integration |
+| `ufo-use-layout-effect-safe` | SSR-safe useLayoutEffect |
+
+## Key Confluence References
+
+| Topic | Link |
+|-------|------|
+| Team Home (FeObs) | `go/feo` |
+| Glance Product Page | `go/glance` |
+| Data Architecture Diagram | `go/glance-data-architecture` |
+| UFO Pipeline Architecture | [UFO Design - M1 Pipeline Architecture](https://hello.atlassian.net/wiki/spaces/UFO/pages/1050787866) |
+| Team Onboarding | [Onboarding](https://hello.atlassian.net/wiki/spaces/APD/pages/1386514416) |
+| React UFO Onboarding | [React UFO and UFO Onboarding](https://hello.atlassian.net/wiki/spaces/APD/pages/3615063023) |
+| React UFO v2 Design | [react-ufo UFO v2](https://hello.atlassian.net/wiki/spaces/UFO/pages/2305847386) |
+| Performance Blog | [react-UFO: A deeper understanding of performance](https://hello.atlassian.net/wiki/spaces/UFO/blog/2022/12/16/2280380649) |
+
+## Configuration Reference
+
+Key configuration options in `setUFOConfig`:
+
+```typescript
+interface Config {
+  product: string;              // Product identifier (e.g., 'jira', 'confluence')
+  region: string;               // Deployment region
+  population?: string;          // Event population for segmentation
+  rates?: Record<string, number>;  // Sampling rates per experience
+  kind?: Record<InteractionKind, number>; // Rates by interaction type
+  vc?: {
+    enabled?: boolean;
+    enabledVCRevisions?: {
+      all: TTVCRevision[];
+      byExperience?: Record<string, TTVCRevision[]>;
+    };
+    heatmapSize?: number;
+    selectorConfig?: SelectorConfig;
+  };
+  ssr?: {
+    getSSRTimings?: () => SSRTiming[];
+    getSSRDoneTime?: () => number | undefined;
+  };
+  postInteractionLog?: { enabled?: boolean; rates?: Rates; };
+  experimentalInteractionMetrics?: { enabled?: boolean; rates?: Rates; };
+  terminalErrors?: { enabled?: boolean; };
+}
+```
+
+## Contributing
+
+When making changes:
+1. Run unit tests: `cd platform && yarn test packages/react-ufo`
+2. Run integration tests to verify VC measurement accuracy
+3. Consider impact on downstream Glance/Performance Portal processing
+4. Update sampling rates carefully as they affect data volume
+5. Feature flag new functionality for gradual rollout
+6. Coordinate with the FeObs team (`#help-devinfra-fe-observability`) for major changes
+
+## Dangerous Operations — Never Do These
+
+1. **Never modify sampling rates without approval** — affects data volume and costs
+2. **Never change payload schema without coordination** — breaks downstream processing
+3. **Never remove TTVC revisions** — experiences may depend on specific revisions
+4. **Never disable holds without understanding impact** — affects TTAI accuracy
+5. **Never add blocking operations in hot paths** — affects user performance

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 5.1.4
+
+### Patch Changes
+
+- [`aa7b28d013b4f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aa7b28d013b4f) -
+  Add Speed Index metric using TTVC v4 ruleset
+- [`e565e9abbe8fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e565e9abbe8fd) -
+  Added Previous Interaction information to terminal error metric
+
+## 5.1.3
+
+### Patch Changes
+
+- [`376606c3c8197`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/376606c3c8197) -
+  FG cleanup - platform_ufo_enable_media_for_ttvc_v3
+
 ## 5.1.2
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ModuleLoadingProfiler = void 0;
+exports.PreviousInteractionLog = exports.ModuleLoadingProfiler = void 0;
 exports.abort = abort;
 exports.abortAll = abortAll;
 exports.abortByNewInteraction = abortByNewInteraction;
@@ -71,9 +71,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-var PreviousInteractionLog = {
+var PreviousInteractionLog = exports.PreviousInteractionLog = {
+  id: undefined,
   name: undefined,
-  isAborted: undefined
+  type: undefined,
+  isAborted: undefined,
+  timestamp: undefined
 };
 var postInteractionLog = exports.postInteractionLog = new _postInteractionLog.default();
 var interactionExtraMetrics = exports.interactionExtraMetrics = new _interactionExtraMetrics.default();
@@ -751,6 +754,11 @@ function finishInteraction(id, data) {
       remove(id);
     }
   }
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_enable_terminal_errors')) {
+    PreviousInteractionLog.id = data.id;
+    PreviousInteractionLog.type = data.type;
+    PreviousInteractionLog.timestamp = data.end;
+  }
   PreviousInteractionLog.name = data.ufoName || 'unknown';
   PreviousInteractionLog.isAborted = data.abortReason != null;
   if (data.ufoName) {

package/dist/cjs/set-terminal-error/index.js

@@ -18,18 +18,26 @@ function sinkTerminalErrorHandler(fn) {
   sinkHandlerFn = fn;
 }
 function setTerminalError(error, additionalAttributes, labelStack) {
-  var _activeInteraction$uf, _activeInteraction$id, _activeInteraction$ty;
+  var _activeInteraction$uf, _activeInteraction$id, _activeInteraction$ty, _PreviousInteractionL, _PreviousInteractionL2, _PreviousInteractionL3;
   var activeInteraction = (0, _interactionMetrics.getActiveInteraction)();
+  var currentTime = performance.now();
   var errorData = _objectSpread({
     errorType: error.name || 'Error',
     errorMessage: error.message.slice(0, 100),
-    timestamp: performance.now()
+    timestamp: currentTime
   }, additionalAttributes);
+
+  // Calculate time since previous interaction
+  var timeSincePreviousInteraction = _interactionMetrics.PreviousInteractionLog.timestamp != null ? currentTime - _interactionMetrics.PreviousInteractionLog.timestamp : null;
   var context = {
     labelStack: labelStack !== null && labelStack !== void 0 ? labelStack : null,
     activeInteractionName: (_activeInteraction$uf = activeInteraction === null || activeInteraction === void 0 ? void 0 : activeInteraction.ufoName) !== null && _activeInteraction$uf !== void 0 ? _activeInteraction$uf : null,
     activeInteractionId: (_activeInteraction$id = activeInteraction === null || activeInteraction === void 0 ? void 0 : activeInteraction.id) !== null && _activeInteraction$id !== void 0 ? _activeInteraction$id : null,
-    activeInteractionType: (_activeInteraction$ty = activeInteraction === null || activeInteraction === void 0 ? void 0 : activeInteraction.type) !== null && _activeInteraction$ty !== void 0 ? _activeInteraction$ty : null
+    activeInteractionType: (_activeInteraction$ty = activeInteraction === null || activeInteraction === void 0 ? void 0 : activeInteraction.type) !== null && _activeInteraction$ty !== void 0 ? _activeInteraction$ty : null,
+    previousInteractionId: (_PreviousInteractionL = _interactionMetrics.PreviousInteractionLog.id) !== null && _PreviousInteractionL !== void 0 ? _PreviousInteractionL : null,
+    previousInteractionName: (_PreviousInteractionL2 = _interactionMetrics.PreviousInteractionLog.name) !== null && _PreviousInteractionL2 !== void 0 ? _PreviousInteractionL2 : null,
+    previousInteractionType: (_PreviousInteractionL3 = _interactionMetrics.PreviousInteractionLog.type) !== null && _PreviousInteractionL3 !== void 0 ? _PreviousInteractionL3 : null,
+    timeSincePreviousInteraction: timeSincePreviousInteraction
   };
   sinkHandlerFn(errorData, context);
 }

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

@@ -120,13 +120,14 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
     value: function () {
       var _calculateWithDebugInfo = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, allEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio) {
         var _window, _window2, _window3, _window4, _window6;
-        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, ssrRatio, _iterator4, _step4, _entry3, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, enhancedVcLogs, shouldCalculate3p, shouldCalculateDebugDetails, sortedVcLogs, maxViewportPercentageAtTime, maxSoFar, _iterator5, _step5, log, getBiggestPreviousViewportPercentage, ignoredEntriesByTime, _iterator6, _step6, _entry4, _ignoredEntriesByTime, _viewportData$rect, _viewportData$previou, viewportData, timestamp, additionalVcLogs, _iterator7, _step7, _step7$value, _timestamp, ignoredEntries, _viewportPercentage, v3RevisionDebugDetails, _window5, _window5$__ufo_devtoo, _window7, _window7$__on_ufo_vc_;
+        var percentiles, viewportEntries, shouldCalculateSpeedIndex, _yield$calculateTTVCP, vcLogs, speedIndex, vcDetails, percentileIndex, entryDataBuffer, ssrRatio, _iterator4, _step4, _entry3, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, enhancedVcLogs, shouldCalculate3p, shouldCalculateDebugDetails, sortedVcLogs, maxViewportPercentageAtTime, maxSoFar, _iterator5, _step5, log, getBiggestPreviousViewportPercentage, ignoredEntriesByTime, _iterator6, _step6, _entry4, _ignoredEntriesByTime, _viewportData$rect, _viewportData$previou, viewportData, timestamp, additionalVcLogs, _iterator7, _step7, _step7$value, _timestamp, ignoredEntries, _viewportPercentage, v3RevisionDebugDetails, _window5, _window5$__ufo_devtoo, _window7, _window7$__on_ufo_vc_;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99, 100];
               viewportEntries = this.filterViewportEntries(filteredEntries);
-              _context.next = 4;
+              shouldCalculateSpeedIndex = (0, _platformFeatureFlags.fg)('platform_ufo_ttvc_v4_speed_index');
+              _context.next = 5;
               return (0, _percentileCalc.calculateTTVCPercentilesWithDebugInfo)({
                 viewport: {
                   width: (0, _getViewportWidth.default)(),
@@ -134,24 +135,27 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
                 },
                 startTime: startTime,
                 stopTime: stopTime,
-                orderedEntries: viewportEntries
+                orderedEntries: viewportEntries,
+                calculateSpeedIndex: shouldCalculateSpeedIndex
               });
-            case 4:
-              vcLogs = _context.sent;
+            case 5:
+              _yield$calculateTTVCP = _context.sent;
+              vcLogs = _yield$calculateTTVCP.entries;
+              speedIndex = _yield$calculateTTVCP.speedIndex;
               vcDetails = {};
               percentileIndex = 0;
               entryDataBuffer = new Set();
               ssrRatio = -1;
               if (!vcLogs) {
-                _context.next = 30;
+                _context.next = 33;
                 break;
               }
               _iterator4 = _createForOfIteratorHelper(vcLogs);
-              _context.prev = 11;
+              _context.prev = 14;
               _iterator4.s();
-            case 13:
+            case 16:
               if ((_step4 = _iterator4.n()).done) {
-                _context.next = 22;
+                _context.next = 25;
                 break;
               }
               _entry3 = _step4.value;
@@ -164,11 +168,11 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
 
               // Only process entries if we haven't reached all percentiles
               if (!(percentileIndex >= percentiles.length)) {
-                _context.next = 19;
+                _context.next = 22;
                 break;
               }
-              return _context.abrupt("break", 22);
-            case 19:
+              return _context.abrupt("break", 25);
+            case 22:
               // Check if this entry matches any checkpoint percentiles
               if (viewportPercentage >= percentiles[percentileIndex]) {
                 elementNames = [];
@@ -199,21 +203,21 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
                   return entryDataBuffer.add(e);
                 });
               }
-            case 20:
-              _context.next = 13;
+            case 23:
+              _context.next = 16;
               break;
-            case 22:
-              _context.next = 27;
+            case 25:
+              _context.next = 30;
               break;
-            case 24:
-              _context.prev = 24;
-              _context.t0 = _context["catch"](11);
-              _iterator4.e(_context.t0);
             case 27:
               _context.prev = 27;
-              _iterator4.f();
-              return _context.finish(27);
+              _context.t0 = _context["catch"](14);
+              _iterator4.e(_context.t0);
             case 30:
+              _context.prev = 30;
+              _iterator4.f();
+              return _context.finish(30);
+            case 33:
               // Fill in any missing percentiles with the last known values
               previousResult = {
                 t: 0,
@@ -373,13 +377,14 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
               }
               return _context.abrupt("return", {
                 vcDetails: vcDetails,
-                ssrRatio: ssrRatio
+                ssrRatio: ssrRatio,
+                speedIndex: speedIndex
               });
-            case 42:
+            case 45:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[11, 24, 27, 30]]);
+        }, _callee, this, [[14, 27, 30, 33]]);
       }));
       function calculateWithDebugInfo(_x, _x2, _x3, _x4, _x5, _x6, _x7, _x8, _x9, _x0, _x1, _x10, _x11, _x12) {
         return _calculateWithDebugInfo.apply(this, arguments);
@@ -393,7 +398,7 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
         var _this = this,
           _vcDetails$90$t,
           _vcDetails$;
-        var startTime, stopTime, orderedEntries, interactionId, isPostInteraction, include3p, excludeSmartAnswersInSearch, includeSSRRatio, interactionType, isPageVisible, interactionAbortReason, filteredEntries, isVCClean, dirtyReason, getVCCleanStatusResult, _yield$this$calculate, vcDetails, ssrRatio, result;
+        var startTime, stopTime, orderedEntries, interactionId, isPostInteraction, include3p, excludeSmartAnswersInSearch, includeSSRRatio, interactionType, isPageVisible, interactionAbortReason, filteredEntries, isVCClean, dirtyReason, getVCCleanStatusResult, _yield$this$calculate, vcDetails, ssrRatio, speedIndex, result;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -422,6 +427,7 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
               _yield$this$calculate = _context2.sent;
               vcDetails = _yield$this$calculate.vcDetails;
               ssrRatio = _yield$this$calculate.ssrRatio;
+              speedIndex = _yield$this$calculate.speedIndex;
               result = {
                 revision: this.revisionNo,
                 clean: true,
@@ -432,9 +438,15 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
               if (ssrRatio !== -1) {
                 result.ssrRatio = ssrRatio;
               }
+
+              // speedIndex is only calculated when platform_ufo_ttvc_v4_speed_index is enabled,
+              // so we only include it in the result when it has a meaningful value (> 0)
+              if (speedIndex > 0) {
+                result.speedIndex = speedIndex;
+              }
               result.labelStacks = this.getLabelStacks(filteredEntries, isPostInteraction);
               return _context2.abrupt("return", result);
-            case 17:
+            case 19:
             case "end":
               return _context2.stop();
           }

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

@@ -34,9 +34,7 @@ var getConsideredEntryTypes = function getConsideredEntryTypes(include3p, exclud
     entryTypes.push('mutation:smart-answers-element');
     entryTypes.push('mutation:smart-answers-attribute');
   }
-  if ((0, _platformFeatureFlags.fg)('platform_ufo_enable_media_for_ttvc_v3')) {
-    entryTypes.push('mutation:media');
-  }
+  entryTypes.push('mutation:media');
 
   // Still included as part of TTVC v3
   entryTypes.push('mutation:attribute:non-visual-input-name');