feat(tracing): add long animation frame tracing (#12646)

Adds an option to trace long animation frames as per #11719. This tracing feature is disabled by default. Currently, this feature https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Long_animation_frame_timing is only supported by Chromium browsers. Usage is opt-in: ```js Sentry.init({ dsn: '__PUBLIC_DSN__', integrations: [ Sentry.browserTracingIntegration({ enableLongAnimationFrame: true, }), ], tracesSampleRate: 1, }); ```
getsentry · Jul 10, 2024 · 2f04224 · 2f04224
1 parent 196fc09
commit 2f04224
Show file tree

Hide file tree

Showing 25 changed files with 607 additions and 2 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -177,7 +177,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.replay.min.js'),
     gzip: false,
     brotli: false,
-    limit: '220 KB',
+    limit: '221 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed',

diff --git a/...s/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/assets/script.js b/...s/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/assets/script.js
@@ -0,0 +1,12 @@
+(() => {
+  const startTime = Date.now();
+
+  function getElasped() {
+    const time = Date.now();
+    return time - startTime;
+  }
+
+  while (getElasped() < 101) {
+    //
+  }
+})();
diff --git a/...tion-tests/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/init.js b/...tion-tests/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/init.js
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({ enableLongTask: false, enableLongAnimationFrame: false, idleTimeout: 9000 }),
+  ],
+  tracesSampleRate: 1,
+});
diff --git a/...ests/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/template.html b/...ests/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/template.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div>Rendered Before Long Animation Frame</div>
+    <script src="https://example.com/path/to/script.js"></script>
+  </body>
+</html>
diff --git a/...tion-tests/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/test.ts b/...tion-tests/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/test.ts
@@ -0,0 +1,27 @@
+import type { Route } from '@playwright/test';
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should not capture long animation frame when flag is disabled.',
+  async ({ browserName, getLocalTestPath, page }) => {
+    // Long animation frames only work on chrome
+    if (shouldSkipTracingTest() || browserName !== 'chromium') {
+      sentryTest.skip();
+    }
+
+    await page.route('**/path/to/script.js', (route: Route) =>
+      route.fulfill({ path: `${__dirname}/assets/script.js` }),
+    );
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+    const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui'));
+
+    expect(uiSpans?.length).toBe(0);
+  },
+);
diff --git a/...ts/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/assets/script.js b/...ts/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/assets/script.js
@@ -0,0 +1,25 @@
+function getElapsed(startTime) {
+  const time = Date.now();
+  return time - startTime;
+}
+
+function handleClick() {
+  const startTime = Date.now();
+  while (getElapsed(startTime) < 105) {
+    //
+  }
+}
+
+function start() {
+  const startTime = Date.now();
+  while (getElapsed(startTime) < 105) {
+    //
+  }
+}
+
+// trigger 2 long-animation-frame events
+// one from the top-level and the other from an event-listener
+start();
+
+const button = document.getElementById('clickme');
+button.addEventListener('click', handleClick);
diff --git a/...ation-tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/init.js b/...ation-tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/init.js
@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      idleTimeout: 9000,
+      enableLongTask: false,
+      enableLongAnimationFrame: true,
+    }),
+  ],
+  tracesSampleRate: 1,
+});
diff --git a/...tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/template.html b/...tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/template.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div>Rendered Before Long Animation Frame</div>
+    <button id="clickme">
+      click me to start the long animation!
+    </button>
+    <script src="https://example.com/path/to/script.js"></script>
+  </body>
+</html>
diff --git a/...ation-tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/test.ts b/...ation-tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/test.ts
@@ -0,0 +1,112 @@
+import type { Route } from '@playwright/test';
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/browser';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should capture long animation frame for top-level script.',
+  async ({ browserName, getLocalTestPath, page }) => {
+    // Long animation frames only work on chrome
+    if (shouldSkipTracingTest() || browserName !== 'chromium') {
+      sentryTest.skip();
+    }
+
+    await page.route('**/path/to/script.js', (route: Route) =>
+      route.fulfill({ path: `${__dirname}/assets/script.js` }),
+    );
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const promise = getFirstSentryEnvelopeRequest<Event>(page);
+
+    await page.goto(url);
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const eventData = await promise;
+
+    const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long-animation-frame'));
+
+    expect(uiSpans?.length).toEqual(1);
+
+    const [topLevelUISpan] = uiSpans || [];
+    expect(topLevelUISpan).toEqual(
+      expect.objectContaining({
+        op: 'ui.long-animation-frame',
+        description: 'Main UI thread blocked',
+        parent_span_id: eventData.contexts?.trace?.span_id,
+        data: {
+          'code.filepath': 'https://example.com/path/to/script.js',
+          'browser.script.source_char_position': 0,
+          'browser.script.invoker': 'https://example.com/path/to/script.js',
+          'browser.script.invoker_type': 'classic-script',
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long-animation-frame',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
+        },
+      }),
+    );
+    const start = topLevelUISpan.start_timestamp ?? 0;
+    const end = topLevelUISpan.timestamp ?? 0;
+    const duration = end - start;
+
+    expect(duration).toBeGreaterThanOrEqual(0.1);
+    expect(duration).toBeLessThanOrEqual(0.15);
+  },
+);
+
+sentryTest(
+  'should capture long animation frame for event listener.',
+  async ({ browserName, getLocalTestPath, page }) => {
+    // Long animation frames only work on chrome
+    if (shouldSkipTracingTest() || browserName !== 'chromium') {
+      sentryTest.skip();
+    }
+
+    await page.route('**/path/to/script.js', (route: Route) =>
+      route.fulfill({ path: `${__dirname}/assets/script.js` }),
+    );
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const promise = getFirstSentryEnvelopeRequest<Event>(page);
+
+    await page.goto(url);
+
+    // trigger long animation frame function
+    await page.getByRole('button').click();
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const eventData = await promise;
+
+    const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long-animation-frame'));
+
+    expect(uiSpans?.length).toEqual(2);
+
+    // ignore the first ui span (top-level long animation frame)
+    const [, eventListenerUISpan] = uiSpans || [];
+
+    expect(eventListenerUISpan).toEqual(
+      expect.objectContaining({
+        op: 'ui.long-animation-frame',
+        description: 'Main UI thread blocked',
+        parent_span_id: eventData.contexts?.trace?.span_id,
+        data: {
+          'browser.script.invoker': 'BUTTON#clickme.onclick',
+          'browser.script.invoker_type': 'event-listener',
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long-animation-frame',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
+        },
+      }),
+    );
+    const start = eventListenerUISpan.start_timestamp ?? 0;
+    const end = eventListenerUISpan.timestamp ?? 0;
+    const duration = end - start;
+
+    expect(duration).toBeGreaterThanOrEqual(0.1);
+    expect(duration).toBeLessThanOrEqual(0.15);
+  },
+);
diff --git a/...ites/tracing/browserTracingIntegration/long-animation-frame-non-chromium/assets/script.js b/...ites/tracing/browserTracingIntegration/long-animation-frame-non-chromium/assets/script.js
@@ -0,0 +1,12 @@
+(() => {
+  const startTime = Date.now();
+
+  function getElasped() {
+    const time = Date.now();
+    return time - startTime;
+  }
+
+  while (getElasped() < 101) {
+    //
+  }
+})();
diff --git a/...-tests/suites/tracing/browserTracingIntegration/long-animation-frame-non-chromium/init.js b/...-tests/suites/tracing/browserTracingIntegration/long-animation-frame-non-chromium/init.js
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({ enableLongTask: true, enableLongAnimationFrame: true, idleTimeout: 9000 }),
+  ],
+  tracesSampleRate: 1,
+});
diff --git a/.../suites/tracing/browserTracingIntegration/long-animation-frame-non-chromium/template.html b/.../suites/tracing/browserTracingIntegration/long-animation-frame-non-chromium/template.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div>Rendered Before Long Task</div>
+    <script src="https://example.com/path/to/script.js"></script>
+  </body>
+</html>
diff --git a/...-tests/suites/tracing/browserTracingIntegration/long-animation-frame-non-chromium/test.ts b/...-tests/suites/tracing/browserTracingIntegration/long-animation-frame-non-chromium/test.ts
@@ -0,0 +1,27 @@
+import type { Route } from '@playwright/test';
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should not capture long animation frame or long task when browser is non-chromium',
+  async ({ browserName, getLocalTestPath, page }) => {
+    // Only test non-chromium browsers
+    if (shouldSkipTracingTest() || browserName === 'chromium') {
+      sentryTest.skip();
+    }
+
+    await page.route('**/path/to/script.js', (route: Route) =>
+      route.fulfill({ path: `${__dirname}/assets/script.js` }),
+    );
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+    const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui'));
+
+    expect(uiSpans?.length).toBe(0);
+  },
+);
diff --git a/...tracing/browserTracingIntegration/long-tasks-and-animation-frame-enabled/assets/script.js b/...tracing/browserTracingIntegration/long-tasks-and-animation-frame-enabled/assets/script.js
@@ -0,0 +1,25 @@
+function getElapsed(startTime) {
+  const time = Date.now();
+  return time - startTime;
+}
+
+function handleClick() {
+  const startTime = Date.now();
+  while (getElapsed(startTime) < 105) {
+    //
+  }
+}
+
+function start() {
+  const startTime = Date.now();
+  while (getElapsed(startTime) < 105) {
+    //
+  }
+}
+
+// trigger 2 long-animation-frame events
+// one from the top-level and the other from an event-listener
+start();
+
+const button = document.getElementById('clickme');
+button.addEventListener('click', handleClick);
diff --git a/...s/suites/tracing/browserTracingIntegration/long-tasks-and-animation-frame-enabled/init.js b/...s/suites/tracing/browserTracingIntegration/long-tasks-and-animation-frame-enabled/init.js
@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      idleTimeout: 9000,
+      enableLongTask: true,
+      enableLongAnimationFrame: true,
+    }),
+  ],
+  tracesSampleRate: 1,
+});
diff --git a/...es/tracing/browserTracingIntegration/long-tasks-and-animation-frame-enabled/template.html b/...es/tracing/browserTracingIntegration/long-tasks-and-animation-frame-enabled/template.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div>Rendered Before Long Animation Frame</div>
+    <button id="clickme">
+      click me to start the long animation!
+    </button>
+    <script src="https://example.com/path/to/script.js"></script>
+  </body>
+</html>