From 6ef628d45ae971d738f62936d8c7a59cbe0ab8c9 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Fri, 8 Mar 2024 16:54:54 +0100
Subject: [PATCH] ref(browser): Update `scope.transactionName` on pageload and
 navigation span creation

---
 .../error/subject.js                          |  3 ++
 .../browserTracingIntegration/error/test.ts   | 30 +++++++++++++++++++
 .../src/browser/browserTracingIntegration.ts  |  4 +++
 .../browser/browserTracingIntegration.test.ts | 28 +++++++++++++++++
 4 files changed, 65 insertions(+)
 create mode 100644 dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/subject.js
 create mode 100644 dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/test.ts

diff --git a/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/subject.js b/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/subject.js
new file mode 100644
index 000000000000..2bb2bba64d9e
--- /dev/null
+++ b/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/subject.js
@@ -0,0 +1,3 @@
+setTimeout(() => {
+  throw new Error('Error during pageload');
+}, 100);
diff --git a/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/test.ts b/dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/test.ts
new file mode 100644
index 000000000000..df684872e7c0
--- /dev/null
+++ b/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);
+  },
+);
diff --git a/packages/tracing-internal/src/browser/browserTracingIntegration.ts b/packages/tracing-internal/src/browser/browserTracingIntegration.ts
index f2b04ee9d815..390e4d1ed5fb 100644
--- a/packages/tracing-internal/src/browser/browserTracingIntegration.ts
+++ b/packages/tracing-internal/src/browser/browserTracingIntegration.ts
@@ -364,6 +364,8 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
 export function startBrowserTracingPageLoadSpan(client: Client, spanOptions: StartSpanOptions): Span | undefined {
   client.emit('startPageLoadSpan', spanOptions);
 
+  getCurrentScope().setTransactionName(spanOptions.name);
+
   const span = getActiveSpan();
   const op = span && spanToJSON(span).op;
   return op === 'pageload' ? span : undefined;
@@ -376,6 +378,8 @@ export function startBrowserTracingPageLoadSpan(client: Client, spanOptions: Sta
 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;
diff --git a/packages/tracing-internal/test/browser/browserTracingIntegration.test.ts b/packages/tracing-internal/test/browser/browserTracingIntegration.test.ts
index 9df7e23d797b..c6b6b6c0f110 100644
--- a/packages/tracing-internal/test/browser/browserTracingIntegration.test.ts
+++ b/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', () => {