From 20833575aa83bb1dab12845b1c2cf44cf72863fc Mon Sep 17 00:00:00 2001
From: KevinL10 <kevinsliu0@gmail.com>
Date: Fri, 5 Jul 2024 11:56:03 -0400
Subject: [PATCH] add long animation frame observer

---
 .../src/metrics/browserMetrics.ts             | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/browser-utils/src/metrics/browserMetrics.ts b/packages/browser-utils/src/metrics/browserMetrics.ts
index 8de274c2c1de..3d29f8b6459a 100644
--- a/packages/browser-utils/src/metrics/browserMetrics.ts
+++ b/packages/browser-utils/src/metrics/browserMetrics.ts
@@ -127,6 +127,32 @@ export function startTrackingLongAnimationFrames(): void {
   // NOTE: the current web-vitals version (3.5.2) does not support long-animation-frame, so
   // we should directly observe `long-animation-frame` events here instead of through the web-vitals
   // `observe` helper function.
+  if (PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
+    const observer = new PerformanceObserver(list => {
+      for (const entry of list.getEntries()) {
+        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);
+        }
+      }
+    });
+
+    observer.observe({ type: 'long-animation-frame', buffered: true });
+  }
+
   // addPerformanceInstrumentationHandler('long-animation-frame', ({ entries }) => {
   //   for (const entry of entries) {
   //     if (!getActiveSpan()) {