feat(tracing): make long animation frames opt-out (#13255)

Enable long animation frames by default. If long animation frames are
not supported by the browser, Sentry will fallback to using long tasks
where enabled.

Author: KevinL10

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/test.ts

@@ -33,9 +33,11 @@ sentryTest('should capture interaction transaction. @firefox', async ({ browserN
   expect(eventData.contexts).toMatchObject({ trace: { op: 'ui.action.click' } });
   expect(eventData.platform).toBe('javascript');
   expect(eventData.type).toBe('transaction');
-  expect(eventData.spans).toHaveLength(1);
 
-  const interactionSpan = eventData.spans![0];
+  const spans = eventData.spans?.filter(span => !span.op?.startsWith('ui.long-animation-frame'));
+  expect(spans).toHaveLength(1);
+
+  const interactionSpan = spans![0];
   expect(interactionSpan.op).toBe('ui.interaction.click');
   expect(interactionSpan.description).toBe('body > button.clicked');
   expect(interactionSpan.timestamp).toBeDefined();
@@ -63,7 +65,8 @@ sentryTest(
       await page.waitForTimeout(1000);
       await page.locator('[data-test-id=interaction-button]').click();
       const envelope = await envelopePromise;
-      expect(envelope[0].spans).toHaveLength(1);
+      const spans = envelope[0].spans?.filter(span => !span.op?.startsWith('ui.long-animation-frame'));
+      expect(spans).toHaveLength(1);
     }
   },
 );
@@ -89,10 +92,10 @@ sentryTest(
     const envelopes = await envelopePromise;
     expect(envelopes).toHaveLength(1);
     const eventData = envelopes[0];
+    const spans = eventData.spans?.filter(span => !span.op?.startsWith('ui.long-animation-frame'));
+    expect(spans).toHaveLength(1);
 
-    expect(eventData.spans).toHaveLength(1);
-
-    const interactionSpan = eventData.spans![0];
+    const interactionSpan = spans![0];
     expect(interactionSpan.op).toBe('ui.interaction.click');
     expect(interactionSpan.description).toBe('body > AnnotatedButton');
   },
@@ -120,9 +123,10 @@ sentryTest(
     expect(envelopes).toHaveLength(1);
 
     const eventData = envelopes[0];
-    expect(eventData.spans).toHaveLength(1);
+    const spans = eventData.spans?.filter(span => !span.op?.startsWith('ui.long-animation-frame'));
+    expect(spans).toHaveLength(1);
 
-    const interactionSpan = eventData.spans![0];
+    const interactionSpan = spans![0];
     expect(interactionSpan.op).toBe('ui.interaction.click');
     expect(interactionSpan.description).toBe('body > StyledButton');
   },

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-disabled/init.js

@@ -4,6 +4,8 @@ window.Sentry = Sentry;
 
 Sentry.init({
   dsn: 'https://[email protected]/1337',
-  integrations: [Sentry.browserTracingIntegration({ enableLongTask: false, idleTimeout: 9000 })],
+  integrations: [
+    Sentry.browserTracingIntegration({ enableLongTask: false, enableLongAnimationFrame: false, idleTimeout: 9000 }),
+  ],
   tracesSampleRate: 1,
 });

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-enabled/init.js

@@ -7,6 +7,7 @@ Sentry.init({
   integrations: [
     Sentry.browserTracingIntegration({
       idleTimeout: 9000,
+      enableLongAnimationFrame: false,
     }),
   ],
   tracesSampleRate: 1,

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -28,6 +28,7 @@ import {
 import type { Client, IntegrationFn, StartSpanOptions, TransactionSource } from '@sentry/types';
 import type { Span } from '@sentry/types';
 import {
+  GLOBAL_OBJ,
   browserPerformanceTimeOrigin,
   generatePropagationContext,
   getDomElement,
@@ -168,7 +169,7 @@ const DEFAULT_BROWSER_TRACING_OPTIONS: BrowserTracingOptions = {
   instrumentPageLoad: true,
   markBackgroundSpan: true,
   enableLongTask: true,
-  enableLongAnimationFrame: false,
+  enableLongAnimationFrame: true,
   enableInp: true,
   _experiments: {},
   ...defaultRequestInstrumentationOptions,
@@ -213,7 +214,11 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
     startTrackingINP();
   }
 
-  if (enableLongAnimationFrame && PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
+  if (
+    enableLongAnimationFrame &&
+    GLOBAL_OBJ.PerformanceObserver &&
+    PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+  ) {
     startTrackingLongAnimationFrames();
   } else if (enableLongTask) {
     startTrackingLongTasks();

packages/ember/tests/helpers/utils.ts

@@ -64,11 +64,15 @@ export function assertSentryTransactions(
 
   // instead of checking the specific order of runloop spans (which is brittle),
   // we check (below) that _any_ runloop spans are added
-  // Also we ignore ui.long-task spans, as they are brittle and may or may not appear
+  // Also we ignore ui.long-task spans and ui.long-animation-frame, as they are brittle and may or may not appear
   const filteredSpans = spans
     .filter(span => {
       const op = span.op;
-      return !op?.startsWith('ui.ember.runloop.') && !op?.startsWith('ui.long-task');
+      return (
+        !op?.startsWith('ui.ember.runloop.') &&
+        !op?.startsWith('ui.long-task') &&
+        !op?.startsWith('ui.long-animation-frame')
+      );
     })
     .map(spanJson => {
       return `${spanJson.op} | ${spanJson.description}`;

packages/utils/src/worldwide.ts

@@ -49,6 +49,7 @@ type BackwardsCompatibleSentryCarrier = SentryCarrier & {
 export type InternalGlobal = {
   navigator?: { userAgent?: string };
   console: Console;
+  PerformanceObserver?: any;
   Sentry?: any;
   onerror?: {
     (event: object | string, source?: string, lineno?: number, colno?: number, error?: Error): any;