fix(browser-utils): Ensure web vital client hooks unsubscribe correctly (#17272)

So this was a fun one to track down 😅 

In our standalone span web vitals code, we register multiple client
hooks to listen e.g. for `afterStartPageloadSpan` events. This hook will
only fire once (by design), so we want to unsbscribe from it afterwards.

Howerver, we register two callbacks (one for LCP, once for CLS). Because
we used to unsubscribe synchronously from within the client hook
callback, we synchronously removed the callback from the client's hooks
array. This synchronous array mutation (shrinking) caused the second
callback to no longer be executed.

This surfaced by the LCP span being sent but the CLS span not being
sent, due to the CLS span's hook callback no longer being called.

This PR fixes this incorrect unsubscription by deferring the
unsubscription calls to the next tick. This way, the array mutation no
longer happens synchronously and all remaining callback hooks are
invoked correctly.

If you're confused by this, rest assured, I was too 😅 Happy to explain
better/in-person on request :D

closes
https://linear.app/getsentry/issue/JS-811/investigate-missing-standalone-cls-spans-in-latest-sdk-versions

Author: Lms24

packages/browser-utils/src/metrics/utils.ts

@@ -226,13 +226,21 @@ export function listenForWebVitalReportEvents(
     // we only want to collect LCP if we actually navigate. Redirects should be ignored.
     if (!options?.isRedirect) {
       _runCollectorCallbackOnce('navigation');
-      unsubscribeStartNavigation?.();
-      unsubscribeAfterStartPageLoadSpan?.();
+      safeUnsubscribe(unsubscribeStartNavigation, unsubscribeAfterStartPageLoadSpan);
     }
   });
 
   const unsubscribeAfterStartPageLoadSpan = client.on('afterStartPageLoadSpan', span => {
     pageloadSpanId = span.spanContext().spanId;
-    unsubscribeAfterStartPageLoadSpan?.();
+    safeUnsubscribe(unsubscribeAfterStartPageLoadSpan);
   });
 }
+
+/**
+ * Invoke a list of unsubscribers in a safe way, by deferring the invocation to the next tick.
+ * This is necessary because unsubscribing in sync can lead to other callbacks no longer being invoked
+ * due to in-place array mutation of the subscribers array on the client.
+ */
+function safeUnsubscribe(...unsubscribers: (() => void | undefined)[]): void {
+  unsubscribers.forEach(u => u && setTimeout(u, 0));
+}