feat(tracing): add long animation frame tracing

[KevinL10]

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:

Sentry.init({
  dsn: '__PUBLIC_DSN__',
  integrations: [
    Sentry.browserTracingIntegration({
      enableLongAnimationFrame: true,
    }),
  ],
  tracesSampleRate: 1,
});

[github-actions]

size-limit report 📦

Path	Size
@sentry/browser	22.29 KB (0%)
@sentry/browser (incl. Tracing)	33.63 KB (+0.58% 🔺)
@sentry/browser (incl. Tracing, Replay)	69.41 KB (+0.32% 🔺)
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	62.74 KB (+0.36% 🔺)
@sentry/browser (incl. Tracing, Replay with Canvas)	73.46 KB (+0.29% 🔺)
@sentry/browser (incl. Tracing, Replay, Feedback)	86.12 KB (+0.28% 🔺)
@sentry/browser (incl. Tracing, Replay, Feedback, metrics)	87.97 KB (+0.27% 🔺)
@sentry/browser (incl. metrics)	26.58 KB (0%)
@sentry/browser (incl. Feedback)	38.97 KB (0%)
@sentry/browser (incl. sendFeedback)	26.92 KB (0%)
@sentry/browser (incl. FeedbackAsync)	31.53 KB (0%)
@sentry/react	25.04 KB (0%)
@sentry/react (incl. Tracing)	36.68 KB (+0.55% 🔺)
@sentry/vue	26.4 KB (0%)
@sentry/vue (incl. Tracing)	35.52 KB (+0.61% 🔺)
@sentry/svelte	22.43 KB (0%)
CDN Bundle	23.51 KB (0%)
CDN Bundle (incl. Tracing)	35.41 KB (+0.59% 🔺)
CDN Bundle (incl. Tracing, Replay)	69.52 KB (+0.31% 🔺)
CDN Bundle (incl. Tracing, Replay, Feedback)	74.72 KB (+0.29% 🔺)
CDN Bundle - uncompressed	69 KB (0%)
CDN Bundle (incl. Tracing) - uncompressed	104.75 KB (+0.71% 🔺)
CDN Bundle (incl. Tracing, Replay) - uncompressed	215.15 KB (+0.35% 🔺)
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	227.86 KB (+0.33% 🔺)
@sentry/nextjs (client)	36.56 KB (+0.54% 🔺)
@sentry/sveltekit (client)	34.29 KB (+0.59% 🔺)
@sentry/node	130.79 KB (0%)
@sentry/node - without tracing	91.88 KB (0%)
@sentry/aws-serverless	117.05 KB (0%)

[AbhiPrasad]

Can you share a link/screenshot of an example trace with these spans?

[AbhiPrasad]

We also need to test the scenarios where:

1. enableLongAnimationFrame is true, but non-chromium browser
2. enableLongAnimationFrame is false and enableLongTask is true

afterwards we are good to merge. Thanks for sticking with this!

[KevinL10]

Example spans from the long-tasks-and-animation-frame-enabled test:

[AbhiPrasad]

You'll have to adjust https://github.com/getsentry/sentry-javascript/blob/develop/.size-limit.js - you can run yarn size-limit in the root after you run yarn build to see what to change.

I also updated #11719 with a tasklist of follow up items. Do you have the item to do these?

[AbhiPrasad]

You can ignore Secret Scan as well!

Please make sure to Squash and Merge after the size-limit stuff is resolved.