From 8941895d4c02248520660102603eb37cd534a1e7 Mon Sep 17 00:00:00 2001
From: Onur Temizkan <onur@narval.co.uk>
Date: Mon, 20 May 2024 11:58:34 +0100
Subject: [PATCH] Add ErrorBoundary propagation test.

---
 .../app/routes/client-error.tsx               | 11 +++++
 .../tests/behaviour-server.test.ts            | 49 +++++++++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/client-error.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/client-error.tsx
index 4e5330621191..f4d6ec9c4f0a 100644
--- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/client-error.tsx
+++ b/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) {
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/behaviour-server.test.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/behaviour-server.test.ts
index 1377ddb30e70..b4fc264bd98e 100644
--- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/behaviour-server.test.ts
+++ b/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);
+});