feat(tracing): add long animation frame tracking

Author: KevinL10

packages/browser-utils/src/index.ts

@@ -11,6 +11,7 @@ export {
   addPerformanceEntries,
   startTrackingInteractions,
   startTrackingLongTasks,
+  startTrackingLongAnimationFrames,
   startTrackingWebVitals,
   startTrackingINP,
   registerInpInteractionListener,

packages/browser-utils/src/metrics/browserMetrics.ts

@@ -120,6 +120,36 @@ export function startTrackingLongTasks(): void {
   });
 }
 
+/**
+ * Start tracking long animation frames.
+ */
+export function startTrackingLongAnimationFrames(): void {
+  addPerformanceInstrumentationHandler('long-animation-frame', ({ entries }) => {
+    for (const entry of entries) {
+      if (!getActiveSpan()) {
+        return;
+      }
+      const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
+      const duration = msToSec(entry.duration);
+
+
+      const span = startInactiveSpan({
+        name: 'Main UI thread blocked',
+        op: 'ui.long-animation-frame',
+        startTime,
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
+        },
+      });
+      if (span) {
+        span.end(startTime + duration);
+      }
+    }
+  });
+}
+
+
+
 /**
  * Start tracking interaction events.
  */

packages/browser-utils/src/metrics/instrument.ts

@@ -10,6 +10,7 @@ import { onTTFB } from './web-vitals/onTTFB';
 
 type InstrumentHandlerTypePerformanceObserver =
   | 'longtask'
+  | 'long-animation-frame'
   | 'event'
   | 'navigation'
   | 'paint'

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -6,6 +6,7 @@ import {
   startTrackingINP,
   startTrackingInteractions,
   startTrackingLongTasks,
+  startTrackingLongAnimationFrames,
   startTrackingWebVitals,
 } from '@sentry-internal/browser-utils';
 import {
@@ -102,6 +103,13 @@ export interface BrowserTracingOptions {
    */
   enableLongTask: boolean;
 
+  /**
+   * If true, Sentry will capture long animation frames and add them to the corresponding transaction.
+   *
+   * Default: false
+   */
+  enableLongAnimationFrame: boolean;
+
   /**
    * If true, Sentry will capture first input delay and add it to the corresponding transaction.
    *
@@ -160,6 +168,7 @@ const DEFAULT_BROWSER_TRACING_OPTIONS: BrowserTracingOptions = {
   instrumentPageLoad: true,
   markBackgroundSpan: true,
   enableLongTask: true,
+  enableLongAnimationFrame: false,
   enableInp: true,
   _experiments: {},
   ...defaultRequestInstrumentationOptions,
@@ -180,6 +189,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
   const {
     enableInp,
     enableLongTask,
+    enableLongAnimationFrame,
     _experiments: { enableInteractions },
     beforeStartSpan,
     idleTimeout,
@@ -206,6 +216,11 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
   if (enableLongTask) {
     startTrackingLongTasks();
   }
+
+  if (enableLongAnimationFrame) {
+    startTrackingLongAnimationFrames();
+  }
+
   if (enableInteractions) {
     startTrackingInteractions();
   }