diff --git a/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/test.ts b/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/test.ts index bb219eda38c7..4ebea3457af6 100644 --- a/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/test.ts +++ b/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'); }, diff --git a/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-disabled/init.js b/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-disabled/init.js index bde12a1304ed..e1b3f6b13b01 100644 --- a/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-disabled/init.js +++ b/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-disabled/init.js @@ -4,6 +4,8 @@ window.Sentry = Sentry; Sentry.init({ dsn: 'https://public@dsn.ingest.sentry.io/1337', - integrations: [Sentry.browserTracingIntegration({ enableLongTask: false, idleTimeout: 9000 })], + integrations: [ + Sentry.browserTracingIntegration({ enableLongTask: false, enableLongAnimationFrame: false, idleTimeout: 9000 }), + ], tracesSampleRate: 1, }); diff --git a/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-enabled/init.js b/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-enabled/init.js index ad1d8832b228..319dfaadd4a8 100644 --- a/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-enabled/init.js +++ b/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, diff --git a/packages/browser/src/tracing/browserTracingIntegration.ts b/packages/browser/src/tracing/browserTracingIntegration.ts index d8f6796b5b1b..491c7aaae88d 100644 --- a/packages/browser/src/tracing/browserTracingIntegration.ts +++ b/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 { 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}`; diff --git a/packages/utils/src/worldwide.ts b/packages/utils/src/worldwide.ts index 7e428444e21d..e323f12034a2 100644 --- a/packages/utils/src/worldwide.ts +++ b/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;