ref(browser): Ensure start time of interaction root and child span is aligned (#14188)

Replace the manual span start and end calls for interaction child
spans with our `startAndEndSpan` helper.
Using `startAndEndSpan` also will adjust the root span's start time
stamp if the (in this case interaction-) child span starts earlier than
the parent span.

Author: Lms24

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

@@ -200,7 +200,8 @@ export function startTrackingLongAnimationFrames(): void {
  */
 export function startTrackingInteractions(): void {
   addPerformanceInstrumentationHandler('event', ({ entries }) => {
-    if (!getActiveSpan()) {
+    const parent = getActiveSpan();
+    if (!parent) {
       return;
     }
     for (const entry of entries) {
@@ -222,10 +223,7 @@ export function startTrackingInteractions(): void {
           spanOptions.attributes['ui.component_name'] = componentName;
         }
 
-        const span = startInactiveSpan(spanOptions);
-        if (span) {
-          span.end(startTime + duration);
-        }
+        startAndEndSpan(parent, startTime, startTime + duration, spanOptions);
       }
     }
   });