Add e2e tests

Author: Luca Forstner

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

@@ -5,7 +5,8 @@ import { TransactionContext } from './transaction-context';
 import { captureException } from '@sentry/nextjs';
 
 export function ClientErrorDebugTools() {
-  const { transactionActive, toggle } = useContext(TransactionContext);
+  const transactionContextValue = useContext(TransactionContext);
+  const [transactionName, setTransactionName] = useState<string>('');
 
   const [isFetchingAPIRoute, setIsFetchingAPIRoute] = useState<boolean>();
   const [isFetchingEdgeAPIRoute, setIsFetchingEdgeAPIRoute] = useState<boolean>();
@@ -18,13 +19,34 @@ export function ClientErrorDebugTools() {
 
   return (
     <div>
-      <button
-        onClick={() => {
-          toggle();
-        }}
-      >
-        {transactionActive ? 'Stop Transaction' : 'Start Transaction'}
-      </button>
+      {transactionContextValue.transactionActive ? (
+        <button
+          onClick={() => {
+            transactionContextValue.stop();
+            setTransactionName('');
+          }}
+        >
+          Stop transaction
+        </button>
+      ) : (
+        <>
+          <input
+            type="text"
+            placeholder="Transaction name"
+            value={transactionName}
+            onChange={e => {
+              setTransactionName(e.target.value);
+            }}
+          />
+          <button
+            onClick={() => {
+              transactionContextValue.start(transactionName);
+            }}
+          >
+            Start transaction
+          </button>
+        </>
+      )}
       <br />
       <br />
       <button

packages/e2e-tests/test-applications/nextjs-app-dir/components/transaction-context.tsx

@@ -4,29 +4,36 @@ import { createContext, PropsWithChildren, useState } from 'react';
 import { Transaction } from '@sentry/types';
 import { startTransaction, getCurrentHub } from '@sentry/nextjs';
 
-export const TransactionContext = createContext<{ transactionActive: boolean; toggle: () => void }>({
+export const TransactionContext = createContext<
+  { transactionActive: false; start: (transactionName: string) => void } | { transactionActive: true; stop: () => void }
+>({
   transactionActive: false,
-  toggle: () => undefined,
+  start: () => undefined,
 });
 
 export function TransactionContextProvider({ children }: PropsWithChildren) {
   const [transaction, setTransaction] = useState<Transaction | undefined>(undefined);
 
   return (
     <TransactionContext.Provider
-      value={{
-        transactionActive: !!transaction,
-        toggle: () => {
-          if (transaction) {
-            transaction.finish();
-            setTransaction(undefined);
-          } else {
-            const t = startTransaction({ name: 'Manual Transaction' });
-            getCurrentHub().getScope()?.setSpan(t);
-            setTransaction(t);
-          }
-        },
-      }}
+      value={
+        transaction
+          ? {
+              transactionActive: true,
+              stop: () => {
+                transaction.finish();
+                setTransaction(undefined);
+              },
+            }
+          : {
+              transactionActive: false,
+              start: (transactionName: string) => {
+                const t = startTransaction({ name: transactionName });
+                getCurrentHub().getScope()?.setSpan(t);
+                setTransaction(t);
+              },
+            }
+      }
     >
       {children}
     </TransactionContext.Provider>

packages/e2e-tests/test-applications/nextjs-app-dir/tests/trace.test.ts

@@ -0,0 +1,31 @@
+import { test } from '@playwright/test';
+import * as crypto from 'crypto';
+import { waitForTransaction } from '../../../test-utils/event-proxy-server';
+
+if (process.env.TEST_ENV === 'production') {
+  // TODO: Fix that this is flakey on dev server - might be an SDK bug
+  test('Sends connected traces for server components', async ({ page }) => {
+    await page.goto('/client-component');
+
+    const clientTransactionName = crypto.randomUUID();
+
+    const serverComponentTransaction = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+      return (
+        transactionEvent?.transaction === 'Page Server Component (/server-component)' &&
+        (await clientTransactionPromise).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id
+      );
+    });
+
+    const clientTransactionPromise = waitForTransaction('nextjs-13-app-dir', transactionEvent => {
+      return transactionEvent?.transaction === clientTransactionName;
+    });
+
+    await page.getByPlaceholder('Transaction name').fill(clientTransactionName);
+    await page.getByText('Start transaction').click();
+    await page.getByRole('link', { name: /^\/server-component$/ }).click();
+    await page.getByText('Page (/server-component)').isVisible();
+    await page.getByText('Stop transaction').click();
+
+    await serverComponentTransaction;
+  });
+}

packages/e2e-tests/test-utils/event-proxy-server.ts

@@ -138,7 +138,7 @@ export async function startEventProxyServer(options: EventProxyServerOptions): P
 
 export async function waitForRequest(
   proxyServerName: string,
-  callback: (eventData: SentryRequestCallbackData) => boolean,
+  callback: (eventData: SentryRequestCallbackData) => Promise<boolean> | boolean,
 ): Promise<SentryRequestCallbackData> {
   const eventCallbackServerPort = await retrieveCallbackServerPort(proxyServerName);
 
@@ -157,7 +157,20 @@ export async function waitForRequest(
             const eventCallbackData: SentryRequestCallbackData = JSON.parse(
               Buffer.from(eventContents, 'base64').toString('utf8'),
             );
-            if (callback(eventCallbackData)) {
+            const callbackResult = callback(eventCallbackData);
+            if (typeof callbackResult !== 'boolean') {
+              callbackResult.then(
+                match => {
+                  if (match) {
+                    response.destroy();
+                    resolve(eventCallbackData);
+                  }
+                },
+                err => {
+                  throw err;
+                },
+              );
+            } else if (callbackResult) {
               response.destroy();
               resolve(eventCallbackData);
             }
@@ -175,13 +188,13 @@ export async function waitForRequest(
 
 export function waitForEnvelopeItem(
   proxyServerName: string,
-  callback: (envelopeItem: EnvelopeItem) => boolean,
+  callback: (envelopeItem: EnvelopeItem) => Promise<boolean> | boolean,
 ): Promise<EnvelopeItem> {
   return new Promise((resolve, reject) => {
-    waitForRequest(proxyServerName, eventData => {
+    waitForRequest(proxyServerName, async eventData => {
       const envelopeItems = eventData.envelope[1];
       for (const envelopeItem of envelopeItems) {
-        if (callback(envelopeItem)) {
+        if (await callback(envelopeItem)) {
           resolve(envelopeItem);
           return true;
         }
@@ -191,11 +204,14 @@ export function waitForEnvelopeItem(
   });
 }
 
-export function waitForError(proxyServerName: string, callback: (transactionEvent: Event) => boolean): Promise<Event> {
+export function waitForError(
+  proxyServerName: string,
+  callback: (transactionEvent: Event) => Promise<boolean> | boolean,
+): Promise<Event> {
   return new Promise((resolve, reject) => {
-    waitForEnvelopeItem(proxyServerName, envelopeItem => {
+    waitForEnvelopeItem(proxyServerName, async envelopeItem => {
       const [envelopeItemHeader, envelopeItemBody] = envelopeItem;
-      if (envelopeItemHeader.type === 'event' && callback(envelopeItemBody as Event)) {
+      if (envelopeItemHeader.type === 'event' && (await callback(envelopeItemBody as Event))) {
         resolve(envelopeItemBody as Event);
         return true;
       }
@@ -206,12 +222,12 @@ export function waitForError(proxyServerName: string, callback: (transactionEven
 
 export function waitForTransaction(
   proxyServerName: string,
-  callback: (transactionEvent: Event) => boolean,
+  callback: (transactionEvent: Event) => Promise<boolean> | boolean,
 ): Promise<Event> {
   return new Promise((resolve, reject) => {
-    waitForEnvelopeItem(proxyServerName, envelopeItem => {
+    waitForEnvelopeItem(proxyServerName, async envelopeItem => {
       const [envelopeItemHeader, envelopeItemBody] = envelopeItem;
-      if (envelopeItemHeader.type === 'transaction' && callback(envelopeItemBody as Event)) {
+      if (envelopeItemHeader.type === 'transaction' && (await callback(envelopeItemBody as Event))) {
         resolve(envelopeItemBody as Event);
         return true;
       }