ref: Remove startTransaction from integration and e2e tests (#10721)

Author: Luca Forstner

dev-packages/browser-integration-tests/suites/public-api/startTransaction/basic_usage/subject.js

@@ -1,35 +1,23 @@
-async function run() {
-  const transaction = Sentry.startTransaction({ name: 'test_transaction_1' });
-  const span_1 = transaction.startChild({
-    op: 'span_1',
-    data: {
-      foo: 'bar',
-      baz: [1, 2, 3],
+Sentry.startSpan({ name: 'root_span' }, () => {
+  Sentry.startSpan(
+    {
+      name: 'span_1',
+      data: {
+        foo: 'bar',
+        baz: [1, 2, 3],
+      },
     },
-  });
-
-  await new Promise(resolve => setTimeout(resolve, 1));
-
-  // span_1 finishes
-  span_1.end();
+    () => undefined,
+  );
 
   // span_2 doesn't finish
-  const span_2 = transaction.startChild({ op: 'span_2' });
-  await new Promise(resolve => setTimeout(resolve, 1));
-
-  const span_3 = transaction.startChild({ op: 'span_3' });
-  await new Promise(resolve => setTimeout(resolve, 1));
+  Sentry.startInactiveSpan({ name: 'span_2' });
 
-  // span_4 is the child of span_3 but doesn't finish.
-  const span_4 = span_3.startChild({ op: 'span_4', data: { qux: 'quux' } });
+  Sentry.startSpan({ name: 'span_3' }, () => {
+    // span_4 is the child of span_3 but doesn't finish.
+    Sentry.startInactiveSpan({ name: 'span_4', data: { qux: 'quux' } });
 
-  // span_5 is another child of span_3 but finishes.
-  const span_5 = span_3.startChild({ op: 'span_5' }).end();
-
-  // span_3 also finishes
-  span_3.end();
-
-  transaction.end();
-}
-
-run();
+    // span_5 is another child of span_3 but finishes.
+    Sentry.startInactiveSpan({ name: 'span_5' }).end();
+  });
+});

dev-packages/browser-integration-tests/suites/public-api/startTransaction/basic_usage/test.ts

@@ -12,11 +12,11 @@ sentryTest('should report a transaction in an envelope', async ({ getLocalTestPa
   const url = await getLocalTestPath({ testDir: __dirname });
   const transaction = await getFirstSentryEnvelopeRequest<SerializedEvent>(page, url);
 
-  expect(transaction.transaction).toBe('test_transaction_1');
+  expect(transaction.transaction).toBe('root_span');
   expect(transaction.spans).toBeDefined();
 });
 
-sentryTest('should report finished spans as children of the root transaction', async ({ getLocalTestPath, page }) => {
+sentryTest('should report finished spans as children of the root span', async ({ getLocalTestPath, page }) => {
   if (shouldSkipTracingTest()) {
     sentryTest.skip();
   }
@@ -31,17 +31,17 @@ sentryTest('should report finished spans as children of the root transaction', a
   const span_1 = transaction.spans?.[0];
 
   expect(span_1).toBeDefined();
-  expect(span_1!.op).toBe('span_1');
+  expect(span_1!.description).toBe('span_1');
   expect(span_1!.parent_span_id).toEqual(rootSpanId);
   expect(span_1!.data).toMatchObject({ foo: 'bar', baz: [1, 2, 3] });
 
   const span_3 = transaction.spans?.[1];
   expect(span_3).toBeDefined();
-  expect(span_3!.op).toBe('span_3');
+  expect(span_3!.description).toBe('span_3');
   expect(span_3!.parent_span_id).toEqual(rootSpanId);
 
   const span_5 = transaction.spans?.[2];
   expect(span_5).toBeDefined();
-  expect(span_5!.op).toBe('span_5');
+  expect(span_5!.description).toBe('span_5');
   expect(span_5!.parent_span_id).toEqual(span_3!.span_id);
 });

dev-packages/browser-integration-tests/suites/public-api/startTransaction/circular_data/subject.js

@@ -2,8 +2,6 @@ const chicken = {};
 const egg = { contains: chicken };
 chicken.lays = egg;
 
-const transaction = Sentry.startTransaction({ name: 'circular_object_test_transaction', data: { chicken } });
-const span = transaction.startChild({ op: 'circular_object_test_span', data: { chicken } });
-
-span.end();
-transaction.end();
+Sentry.startSpan({ name: 'circular_object_test_transaction', data: { chicken } }, () => {
+  Sentry.startSpan({ op: 'circular_object_test_span', data: { chicken } }, () => undefined);
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-custom/init.js

@@ -4,6 +4,6 @@ window.Sentry = Sentry;
 
 Sentry.init({
   dsn: 'https://[email protected]/1337',
-  integrations: [Sentry.browserTracingIntegration({ idleTimeout: 9000 })],
+  integrations: [Sentry.browserTracingIntegration({ idleTimeout: 9000, instrumentPageLoad: false })],
   tracesSampleRate: 1,
 });

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

@@ -5,7 +5,12 @@ document.getElementById('go-background').addEventListener('click', () => {
   document.dispatchEvent(ev);
 });
 
-document.getElementById('start-transaction').addEventListener('click', () => {
-  window.transaction = Sentry.startTransaction({ name: 'test-transaction' });
-  Sentry.getCurrentScope().setSpan(window.transaction);
+document.getElementById('start-span').addEventListener('click', () => {
+  const span = Sentry.startInactiveSpan({ name: 'test-span' });
+  window.span = span;
+  Sentry.getCurrentScope().setSpan(span);
 });
+
+window.getSpanJson = () => {
+  return Sentry.spanToJSON(window.span);
+};

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-custom/template.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
   </head>
   <body>
-    <button id="start-transaction">Start Transaction</button>
+    <button id="start-span">Start Span</button>
     <button id="go-background">New Tab</button>
   </body>
 </html>

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

@@ -1,45 +1,37 @@
-import type { JSHandle } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/types';
+import type { SpanJSON } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
-
-async function getPropertyValue(handle: JSHandle, prop: string) {
-  return (await handle.getProperty(prop))?.jsonValue();
-}
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest('should finish a custom transaction when the page goes background', async ({ getLocalTestPath, page }) => {
   if (shouldSkipTracingTest()) {
     sentryTest.skip();
   }
 
   const url = await getLocalTestPath({ testDir: __dirname });
+  page.goto(url);
 
-  const pageloadTransaction = await getFirstSentryEnvelopeRequest<Event>(page, url);
-  expect(pageloadTransaction).toBeDefined();
-
-  await page.locator('#start-transaction').click();
-  const transactionHandle = await page.evaluateHandle('window.transaction');
+  await page.locator('#start-span').click();
+  const spanJsonBefore: SpanJSON = await page.evaluate('window.getSpanJson()');
 
-  const id_before = await getPropertyValue(transactionHandle, 'span_id');
-  const nameBefore = JSON.parse(await transactionHandle.evaluate((t: any) => JSON.stringify(t))).description;
-  const status_before = await getPropertyValue(transactionHandle, 'status');
-  const tags_before = await getPropertyValue(transactionHandle, 'tags');
+  const id_before = spanJsonBefore.span_id;
+  const description_before = spanJsonBefore.description;
+  const status_before = spanJsonBefore.status;
 
-  expect(nameBefore).toBe('test-transaction');
+  expect(description_before).toBe('test-span');
   expect(status_before).toBeUndefined();
-  expect(tags_before).toStrictEqual({});
 
   await page.locator('#go-background').click();
+  const spanJsonAfter: SpanJSON = await page.evaluate('window.getSpanJson()');
 
-  const id_after = await getPropertyValue(transactionHandle, 'span_id');
-  const nameAfter = JSON.parse(await transactionHandle.evaluate((t: any) => JSON.stringify(t))).description;
-  const status_after = await getPropertyValue(transactionHandle, 'status');
-  const tags_after = await getPropertyValue(transactionHandle, 'tags');
+  const id_after = spanJsonAfter.span_id;
+  const description_after = spanJsonAfter.description;
+  const status_after = spanJsonAfter.status;
+  const data_after = spanJsonAfter.data;
 
   expect(id_before).toBe(id_after);
-  expect(nameAfter).toBe('test-transaction');
+  expect(description_after).toBe(description_before);
   expect(status_after).toBe('cancelled');
-  expect(tags_after).toStrictEqual({ visibilitychange: 'document.hidden' });
+  expect(data_after?.['sentry.cancellation_reason']).toBe('document.hidden');
 });

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

@@ -17,7 +17,5 @@ sentryTest('should finish pageload transaction when the page goes background', a
 
   expect(pageloadTransaction.contexts?.trace?.op).toBe('pageload');
   expect(pageloadTransaction.contexts?.trace?.status).toBe('cancelled');
-  expect(pageloadTransaction.contexts?.trace?.tags).toMatchObject({
-    visibilitychange: 'document.hidden',
-  });
+  expect(pageloadTransaction.contexts?.trace?.data?.['sentry.cancellation_reason']).toBe('document.hidden');
 });

dev-packages/browser-integration-tests/suites/tracing/browsertracing/backgroundtab-custom/init.js

@@ -5,6 +5,6 @@ window.Sentry = Sentry;
 
 Sentry.init({
   dsn: 'https://[email protected]/1337',
-  integrations: [new Integrations.BrowserTracing({ idleTimeout: 9000 })],
+  integrations: [new Integrations.BrowserTracing({ idleTimeout: 9000, startTransactionOnPageLoad: false })],
   tracesSampleRate: 1,
 });

dev-packages/browser-integration-tests/suites/tracing/browsertracing/backgroundtab-custom/subject.js

@@ -5,7 +5,12 @@ document.getElementById('go-background').addEventListener('click', () => {
   document.dispatchEvent(ev);
 });
 
-document.getElementById('start-transaction').addEventListener('click', () => {
-  window.transaction = Sentry.startTransaction({ name: 'test-transaction' });
-  Sentry.getCurrentScope().setSpan(window.transaction);
+document.getElementById('start-span').addEventListener('click', () => {
+  const span = Sentry.startInactiveSpan({ name: 'test-span' });
+  window.span = span;
+  Sentry.getCurrentScope().setSpan(span);
 });
+
+window.getSpanJson = () => {
+  return Sentry.spanToJSON(window.span);
+};

dev-packages/browser-integration-tests/suites/tracing/browsertracing/backgroundtab-custom/template.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
   </head>
   <body>
-    <button id="start-transaction">Start Transaction</button>
+    <button id="start-span">Start Span</button>
     <button id="go-background">New Tab</button>
   </body>
 </html>

dev-packages/browser-integration-tests/suites/tracing/browsertracing/backgroundtab-custom/test.ts

@@ -1,45 +1,37 @@
-import type { JSHandle } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/types';
+import type { SpanJSON } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
-
-async function getPropertyValue(handle: JSHandle, prop: string) {
-  return (await handle.getProperty(prop))?.jsonValue();
-}
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest('should finish a custom transaction when the page goes background', async ({ getLocalTestPath, page }) => {
   if (shouldSkipTracingTest()) {
     sentryTest.skip();
   }
 
   const url = await getLocalTestPath({ testDir: __dirname });
+  page.goto(url);
 
-  const pageloadTransaction = await getFirstSentryEnvelopeRequest<Event>(page, url);
-  expect(pageloadTransaction).toBeDefined();
-
-  await page.locator('#start-transaction').click();
-  const transactionHandle = await page.evaluateHandle('window.transaction');
+  await page.locator('#start-span').click();
+  const spanJsonBefore: SpanJSON = await page.evaluate('window.getSpanJson()');
 
-  const id_before = await getPropertyValue(transactionHandle, 'span_id');
-  const nameBefore = JSON.parse(await transactionHandle.evaluate((t: any) => JSON.stringify(t))).description;
-  const status_before = await getPropertyValue(transactionHandle, 'status');
-  const tags_before = await getPropertyValue(transactionHandle, 'tags');
+  const id_before = spanJsonBefore.span_id;
+  const description_before = spanJsonBefore.description;
+  const status_before = spanJsonBefore.status;
 
-  expect(nameBefore).toBe('test-transaction');
+  expect(description_before).toBe('test-span');
   expect(status_before).toBeUndefined();
-  expect(tags_before).toStrictEqual({});
 
   await page.locator('#go-background').click();
+  const spanJsonAfter: SpanJSON = await page.evaluate('window.getSpanJson()');
 
-  const id_after = await getPropertyValue(transactionHandle, 'span_id');
-  const nameAfter = JSON.parse(await transactionHandle.evaluate((t: any) => JSON.stringify(t))).description;
-  const status_after = await getPropertyValue(transactionHandle, 'status');
-  const tags_after = await getPropertyValue(transactionHandle, 'tags');
+  const id_after = spanJsonAfter.span_id;
+  const description_after = spanJsonAfter.description;
+  const status_after = spanJsonAfter.status;
+  const data_after = spanJsonAfter.data;
 
   expect(id_before).toBe(id_after);
-  expect(nameAfter).toBe('test-transaction');
+  expect(description_after).toBe(description_before);
   expect(status_after).toBe('cancelled');
-  expect(tags_after).toStrictEqual({ visibilitychange: 'document.hidden' });
+  expect(data_after?.['sentry.cancellation_reason']).toBe('document.hidden');
 });

dev-packages/browser-integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/test.ts

@@ -17,7 +17,5 @@ sentryTest('should finish pageload transaction when the page goes background', a
 
   expect(pageloadTransaction.contexts?.trace?.op).toBe('pageload');
   expect(pageloadTransaction.contexts?.trace?.status).toBe('cancelled');
-  expect(pageloadTransaction.contexts?.trace?.tags).toMatchObject({
-    visibilitychange: 'document.hidden',
-  });
+  expect(pageloadTransaction.contexts?.trace?.data?.['sentry.cancellation_reason']).toBe('document.hidden');
 });

dev-packages/e2e-tests/test-applications/nextjs-app-dir/app/layout.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { TransactionContextProvider } from '../components/transaction-context';
+import { SpanContextProvider } from '../components/span-context';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -36,7 +36,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
               <Link href="/redirect">/redirect</Link>
             </li>
           </ul>
-          <TransactionContextProvider>{children}</TransactionContextProvider>
+          <SpanContextProvider>{children}</SpanContextProvider>
         </div>
       </body>
     </html>

dev-packages/e2e-tests/test-applications/nextjs-app-dir/components/client-error-debug-tools.tsx

@@ -2,11 +2,11 @@
 
 import { captureException } from '@sentry/nextjs';
 import { useContext, useState } from 'react';
-import { TransactionContext } from './transaction-context';
+import { SpanContext } from './span-context';
 
 export function ClientErrorDebugTools() {
-  const transactionContextValue = useContext(TransactionContext);
-  const [transactionName, setTransactionName] = useState<string>('');
+  const spanContextValue = useContext(SpanContext);
+  const [spanName, setSpanName] = useState<string>('');
 
   const [isFetchingAPIRoute, setIsFetchingAPIRoute] = useState<boolean>();
   const [isFetchingEdgeAPIRoute, setIsFetchingEdgeAPIRoute] = useState<boolean>();
@@ -19,31 +19,31 @@ export function ClientErrorDebugTools() {
 
   return (
     <div>
-      {transactionContextValue.transactionActive ? (
+      {spanContextValue.spanActive ? (
         <button
           onClick={() => {
-            transactionContextValue.stop();
-            setTransactionName('');
+            spanContextValue.stop();
+            setSpanName('');
           }}
         >
-          Stop transaction
+          Stop span
         </button>
       ) : (
         <>
           <input
             type="text"
-            placeholder="Transaction name"
-            value={transactionName}
+            placeholder="Span name"
+            value={spanName}
             onChange={e => {
-              setTransactionName(e.target.value);
+              setSpanName(e.target.value);
             }}
           />
           <button
             onClick={() => {
-              transactionContextValue.start(transactionName);
+              spanContextValue.start(spanName);
             }}
           >
-            Start transaction
+            Start span
           </button>
         </>
       )}