Add ErrorBoundary propagation test.

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/client-error.tsx

@@ -1,6 +1,17 @@
+import { useSearchParams } from '@remix-run/react';
+import * as Sentry from '@sentry/remix';
+
 import { useState } from 'react';
 
 export default function ErrorBoundaryCapture() {
+  const [searchParams] = useSearchParams();
+
+  if (searchParams.get('tag')) {
+    Sentry.setTags({
+      sentry_test: searchParams.get('tag'),
+    });
+  }
+
   const [count, setCount] = useState(0);
 
   if (count > 0) {

dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/behaviour-server.test.ts

@@ -105,3 +105,52 @@ test('Sends two linked transactions (server & client) to Sentry', async ({ page
   expect(pageLoadParentSpanId).toEqual(loaderSpanId);
   expect(pageLoadSpanId).not.toEqual(httpServerSpanId);
 });
+
+test('Propagates trace when ErrorBoundary is triggered', async ({ page }) => {
+  // We use this to identify the transactions
+  const testTag = uuid4();
+
+  const httpServerTransactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
+    return (
+      transactionEvent.type === 'transaction' &&
+      transactionEvent.contexts?.trace?.op === 'http' &&
+      transactionEvent.tags?.['sentry_test'] === testTag
+    );
+  });
+
+  const pageLoadTransactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
+    return (
+      transactionEvent.type === 'transaction' &&
+      transactionEvent.contexts?.trace?.op === 'pageload' &&
+      transactionEvent.tags?.['sentry_test'] === testTag
+    );
+  });
+
+  page.goto(`/client-error?tag=${testTag}`);
+
+  const pageloadTransaction = await pageLoadTransactionPromise;
+  const httpServerTransaction = await httpServerTransactionPromise;
+
+  expect(pageloadTransaction).toBeDefined();
+  expect(httpServerTransaction).toBeDefined();
+
+  const httpServerTraceId = httpServerTransaction.contexts?.trace?.trace_id;
+  const httpServerSpanId = httpServerTransaction.contexts?.trace?.span_id;
+  const loaderSpanId = httpServerTransaction.spans.find(
+    span => span.data && span.data['code.function'] === 'loader',
+  )?.span_id;
+
+  const pageLoadTraceId = pageloadTransaction.contexts?.trace?.trace_id;
+  const pageLoadSpanId = pageloadTransaction.contexts?.trace?.span_id;
+  const pageLoadParentSpanId = pageloadTransaction.contexts?.trace?.parent_span_id;
+
+  expect(httpServerTransaction.transaction).toBe('GET client-error');
+  expect(pageloadTransaction.transaction).toBe('routes/client-error');
+
+  expect(httpServerTraceId).toBeDefined();
+  expect(httpServerSpanId).toBeDefined();
+
+  expect(pageLoadTraceId).toEqual(httpServerTraceId);
+  expect(pageLoadParentSpanId).toEqual(loaderSpanId);
+  expect(pageLoadSpanId).not.toEqual(httpServerSpanId);
+});