From e8fc14371fcf6f1dd48f05d3e8a258e6f9827770 Mon Sep 17 00:00:00 2001
From: KevinL10 <kevinsliu0@gmail.com>
Date: Mon, 8 Jul 2024 16:34:33 -0400
Subject: [PATCH] fix enable loaf logic

---
 .../src/metrics/browserMetrics.ts             | 78 +++++++++----------
 .../src/tracing/browserTracingIntegration.ts  |  9 +--
 2 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/packages/browser-utils/src/metrics/browserMetrics.ts b/packages/browser-utils/src/metrics/browserMetrics.ts
index acc6439d468c..cb48c2e8b675 100644
--- a/packages/browser-utils/src/metrics/browserMetrics.ts
+++ b/packages/browser-utils/src/metrics/browserMetrics.ts
@@ -128,52 +128,50 @@ export function startTrackingLongAnimationFrames(): void {
   // NOTE: the current web-vitals version (3.5.2) does not support long-animation-frame, so
   // we directly observe `long-animation-frame` events 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() as PerformanceLongAnimationFrameTiming[]) {
-        if (!getActiveSpan()) {
-          return;
-        }
-        if (!entry.scripts[0]) {
-          return;
-        }
+  const observer = new PerformanceObserver(list => {
+    for (const entry of list.getEntries() as PerformanceLongAnimationFrameTiming[]) {
+      if (!getActiveSpan()) {
+        return;
+      }
+      if (!entry.scripts[0]) {
+        return;
+      }
 
-        const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
-        const duration = msToSec(entry.duration);
+      const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
+      const duration = msToSec(entry.duration);
 
-        const attributes: SpanAttributes = {
-          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
-        };
-        const initialScript = entry.scripts[0];
-        if (initialScript) {
-          const { invoker, invokerType, sourceURL, sourceFunctionName, sourceCharPosition } = initialScript;
-          attributes['browser.script.invoker'] = invoker;
-          attributes['browser.script.invoker_type'] = invokerType;
-          if (sourceURL) {
-            attributes['code.filepath'] = sourceURL;
-          }
-          if (sourceFunctionName) {
-            attributes['code.function'] = sourceFunctionName;
-          }
-          if (sourceCharPosition !== -1) {
-            attributes['browser.script.source_char_position'] = sourceCharPosition;
-          }
+      const attributes: SpanAttributes = {
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
+      };
+      const initialScript = entry.scripts[0];
+      if (initialScript) {
+        const { invoker, invokerType, sourceURL, sourceFunctionName, sourceCharPosition } = initialScript;
+        attributes['browser.script.invoker'] = invoker;
+        attributes['browser.script.invoker_type'] = invokerType;
+        if (sourceURL) {
+          attributes['code.filepath'] = sourceURL;
         }
-
-        const span = startInactiveSpan({
-          name: 'Main UI thread blocked',
-          op: 'ui.long-animation-frame',
-          startTime,
-          attributes,
-        });
-        if (span) {
-          span.end(startTime + duration);
+        if (sourceFunctionName) {
+          attributes['code.function'] = sourceFunctionName;
+        }
+        if (sourceCharPosition !== -1) {
+          attributes['browser.script.source_char_position'] = sourceCharPosition;
         }
       }
-    });
 
-    observer.observe({ type: 'long-animation-frame', buffered: true });
-  }
+      const span = startInactiveSpan({
+        name: 'Main UI thread blocked',
+        op: 'ui.long-animation-frame',
+        startTime,
+        attributes,
+      });
+      if (span) {
+        span.end(startTime + duration);
+      }
+    }
+  });
+
+  observer.observe({ type: 'long-animation-frame', buffered: true });
 }
 
 /**
diff --git a/packages/browser/src/tracing/browserTracingIntegration.ts b/packages/browser/src/tracing/browserTracingIntegration.ts
index 559edb5a6b6d..0423831219e2 100644
--- a/packages/browser/src/tracing/browserTracingIntegration.ts
+++ b/packages/browser/src/tracing/browserTracingIntegration.ts
@@ -213,13 +213,10 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
     startTrackingINP();
   }
 
-  if (enableLongTask) {
-    startTrackingLongTasks();
-  }
-
-  // At most one of long-task and long-animation-frames should be enabled, since they track the same events
-  if (!enableLongTask && enableLongAnimationFrame) {
+  if (enableLongAnimationFrame && PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
     startTrackingLongAnimationFrames();
+  } else if (enableLongTask) {
+    startTrackingLongTasks();
   }
 
   if (enableInteractions) {