feat(browser): Add afterStartPageloadSpan hook to improve spanId assignment on web vital spans

Author: Lms24

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

@@ -237,13 +237,9 @@ export function listenForWebVitalReportEvents(
       }
     });
 
-    const activeSpan = getActiveSpan();
-    if (activeSpan) {
-      const rootSpan = getRootSpan(activeSpan);
-      const spanJSON = spanToJSON(rootSpan);
-      if (spanJSON.op === 'pageload') {
-        pageloadSpanId = rootSpan.spanContext().spanId;
-      }
-    }
+    const unsubscribeAfterStartPageLoadSpan = client.on('afterStartPageLoadSpan', span => {
+      pageloadSpanId = span.spanContext().spanId;
+      unsubscribeAfterStartPageLoadSpan?.();
+    });
   }, 0);
 }

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -644,7 +644,13 @@ export function startBrowserTracingPageLoadSpan(
   client.emit('startPageLoadSpan', spanOptions, traceOptions);
   getCurrentScope().setTransactionName(spanOptions.name);
 
-  return getActiveIdleSpan(client);
+  const pageloadSpan = getActiveIdleSpan(client);
+
+  if (pageloadSpan) {
+    client.emit('afterStartPageLoadSpan', pageloadSpan);
+  }
+
+  return pageloadSpan;
 }
 
 /**

packages/core/src/client.ts

@@ -603,6 +603,12 @@ export abstract class Client<O extends ClientOptions = ClientOptions> {
     ) => void,
   ): () => void;
 
+  /**
+   * A hook for the browser tracing integrations to trigger after the pageload span was started.
+   * @returns {() => void} A function that, when executed, removes the registered callback.
+   */
+  public on(hook: 'afterStartPageLoadSpan', callback: (span: Span) => void): () => void;
+
   /**
    * A hook for triggering right before a navigation span is started.
    * @returns {() => void} A function that, when executed, removes the registered callback.
@@ -791,6 +797,11 @@ export abstract class Client<O extends ClientOptions = ClientOptions> {
     traceOptions?: { sentryTrace?: string | undefined; baggage?: string | undefined },
   ): void;
 
+  /**
+   * Emit a hook event for browser tracing integrations to trigger aafter the pageload span was started.
+   */
+  public emit(hook: 'afterStartPageLoadSpan', span: Span): void;
+
   /**
    * Emit a hook event for triggering right before a navigation span is started.
    */