add long animation frame observer

getsentry · Jul 5, 2024 · 2083357 · 2083357
1 parent 683ea21
commit 2083357
Showing 1 changed file with 26 additions and 0 deletions.
diff --git 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()) {