fix(browser): Ensure suppressTracing does not leak when async (#16545)

This changes the behavior of `suppressTracing` to be less problematic
(or, problematic in a different way).

Today, because in the browser we do not have async context isolation,
there is only a single shared top scope. Because of this, if you have
code like this:

```js
const spanPromise = suppressTracing(async () => {
  await new Promise(resolve => setTimeout(resolve, 100));
  return startInactiveSpan({ name: 'span' });
});

const span = startInactiveSpan({ name: 'span2' });
```

The span2 will also be suppressed, because `suppressTracing` forks the
scope and sets data on it to ensure spans are not recorded. This is
problematic as that will result in completely unrelated spans, e.g.
pageload/navigation spans, being suppressed while e.g. an ongoing fetch
call that is suppressed happens.

This PR changes this to instead only suppress tracing synchronously in
the browser. This obviously is also not really ideal and can lead to
things _not_ being suppressed, but it feels like the better tradeoff for
now.

Author: mydea

packages/cloudflare/src/async.ts

@@ -64,7 +64,16 @@ export function setAsyncLocalStorageAsyncContextStrategy(): void {
     });
   }
 
+  // In contrast to the browser, we can rely on async context isolation here
+  function suppressTracing<T>(callback: () => T): T {
+    return withScope(scope => {
+      scope.setSDKProcessingMetadata({ __SENTRY_SUPPRESS_TRACING__: true });
+      return callback();
+    });
+  }
+
   setAsyncContextStrategy({
+    suppressTracing,
     withScope,
     withSetScope,
     withIsolationScope,

packages/core/src/tracing/trace.ts

@@ -253,8 +253,15 @@ export function suppressTracing<T>(callback: () => T): T {
   }
 
   return withScope(scope => {
+    // Note: We do not wait for the callback to finish before we reset the metadata
+    // the reason for this is that otherwise, in the browser this can lead to very weird behavior
+    // as there is only a single top scope, if the callback takes longer to finish,
+    // other, unrelated spans may also be suppressed, which we do not want
+    // so instead, we only suppress tracing synchronoysly in the browser
     scope.setSDKProcessingMetadata({ [SUPPRESS_TRACING_KEY]: true });
-    return callback();
+    const res = callback();
+    scope.setSDKProcessingMetadata({ [SUPPRESS_TRACING_KEY]: undefined });
+    return res;
   });
 }
 

packages/core/test/lib/tracing/trace.test.ts

@@ -1975,6 +1975,40 @@ describe('suppressTracing', () => {
       expect(spanIsSampled(child)).toBe(false);
     });
   });
+
+  it('works with parallel processes', async () => {
+    const span = suppressTracing(() => {
+      return startInactiveSpan({ name: 'span' });
+    });
+
+    // Note: This is unintuitive, but it is the expected behavior
+    // because we only suppress tracing synchronously in the browser
+    const span2Promise = suppressTracing(async () => {
+      await new Promise(resolve => setTimeout(resolve, 100));
+      return startInactiveSpan({ name: 'span2' });
+    });
+
+    const span3Promise = suppressTracing(async () => {
+      const span = startInactiveSpan({ name: 'span3' });
+      await new Promise(resolve => setTimeout(resolve, 100));
+      return span;
+    });
+
+    const span4 = suppressTracing(() => {
+      return startInactiveSpan({ name: 'span' });
+    });
+
+    const span5 = startInactiveSpan({ name: 'span5' });
+
+    const span2 = await span2Promise;
+    const span3 = await span3Promise;
+
+    expect(spanIsSampled(span)).toBe(false);
+    expect(spanIsSampled(span2)).toBe(true);
+    expect(spanIsSampled(span3)).toBe(false);
+    expect(spanIsSampled(span4)).toBe(false);
+    expect(spanIsSampled(span5)).toBe(true);
+  });
 });
 
 describe('startNewTrace', () => {

packages/opentelemetry/test/trace.test.ts

@@ -1921,6 +1921,38 @@ describe('suppressTracing', () => {
       expect(spanIsSampled(child)).toBe(false);
     });
   });
+
+  it('works with parallel processes', async () => {
+    const span = suppressTracing(() => {
+      return startInactiveSpan({ name: 'span' });
+    });
+
+    const span2Promise = suppressTracing(async () => {
+      await new Promise(resolve => setTimeout(resolve, 100));
+      return startInactiveSpan({ name: 'span2' });
+    });
+
+    const span3Promise = suppressTracing(async () => {
+      const span = startInactiveSpan({ name: 'span3' });
+      await new Promise(resolve => setTimeout(resolve, 100));
+      return span;
+    });
+
+    const span4 = suppressTracing(() => {
+      return startInactiveSpan({ name: 'span' });
+    });
+
+    const span5 = startInactiveSpan({ name: 'span5' });
+
+    const span2 = await span2Promise;
+    const span3 = await span3Promise;
+
+    expect(spanIsSampled(span)).toBe(false);
+    expect(spanIsSampled(span2)).toBe(false);
+    expect(spanIsSampled(span3)).toBe(false);
+    expect(spanIsSampled(span4)).toBe(false);
+    expect(spanIsSampled(span5)).toBe(true);
+  });
 });
 
 function getSpanName(span: AbstractSpan): string | undefined {