ref(browser): Update scope.transactionName on pageload and navigation span creation (#10992)

Update the transaction name on the scope in the default
`browserTracingIntegration` and whenever
`startBrowserTracingNavigationSpan` and
`startBrowserTracingPageLoadSpan` are called from higher-level SDKs'
integrations.

Author: Lms24

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/subject.js

@@ -0,0 +1,3 @@
+setTimeout(() => {
+  throw new Error('Error during pageload');
+}, 100);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/test.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getMultipleSentryEnvelopeRequests, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should put the pageload transaction name onto an error event caught during pageload',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    await page.goto(url);
+
+    const [e1, e2] = await getMultipleSentryEnvelopeRequests<Event>(page, 2);
+
+    const pageloadTxnEvent = e1.type === 'transaction' ? e1 : e2;
+    const errorEvent = e1.type === 'transaction' ? e2 : e1;
+
+    expect(pageloadTxnEvent.contexts?.trace?.op).toEqual('pageload');
+    expect(pageloadTxnEvent.spans?.length).toBeGreaterThan(0);
+    expect(errorEvent.exception?.values?.[0]).toBeDefined();
+
+    expect(pageloadTxnEvent.transaction?.endsWith('index.html')).toBe(true);
+
+    expect(errorEvent.transaction).toEqual(pageloadTxnEvent.transaction);
+  },
+);

packages/tracing-internal/src/browser/browserTracingIntegration.ts

@@ -375,6 +375,8 @@ export function startBrowserTracingPageLoadSpan(
 ): Span | undefined {
   client.emit('startPageLoadSpan', spanOptions, traceOptions);
 
+  getCurrentScope().setTransactionName(spanOptions.name);
+
   const span = getActiveSpan();
   const op = span && spanToJSON(span).op;
   return op === 'pageload' ? span : undefined;
@@ -387,6 +389,8 @@ export function startBrowserTracingPageLoadSpan(
 export function startBrowserTracingNavigationSpan(client: Client, spanOptions: StartSpanOptions): Span | undefined {
   client.emit('startNavigationSpan', spanOptions);
 
+  getCurrentScope().setTransactionName(spanOptions.name);
+
   const span = getActiveSpan();
   const op = span && spanToJSON(span).op;
   return op === 'navigation' ? span : undefined;

packages/tracing-internal/test/browser/browserTracingIntegration.test.ts

@@ -374,6 +374,20 @@ describe('browserTracingIntegration', () => {
 
       expect(spanToJSON(pageloadSpan!).op).toBe('test op');
     });
+
+    it('sets the pageload span name on `scope.transactionName`', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          integrations: [browserTracingIntegration()],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      startBrowserTracingPageLoadSpan(client, { name: 'test pageload span' });
+
+      expect(getCurrentScope().getScopeData().transactionName).toBe('test pageload span');
+    });
   });
 
   it('sets source to "custom" if name is changed in beforeStartSpan', () => {
@@ -584,6 +598,20 @@ describe('browserTracingIntegration', () => {
       expect(spanToJSON(pageloadSpan!).description).toBe('changed');
       expect(spanToJSON(pageloadSpan!).data?.[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]).toBe('custom');
     });
+
+    it('sets the pageload span name on `scope.transactionName`', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          integrations: [browserTracingIntegration()],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      startBrowserTracingPageLoadSpan(client, { name: 'test navigation span' });
+
+      expect(getCurrentScope().getScopeData().transactionName).toBe('test navigation span');
+    });
   });
 
   describe('using the <meta> tag data', () => {