From 668f64f893576a344f8aaf5a52372ddf44dd7206 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Thu, 4 Apr 2024 10:18:24 +0200
Subject: [PATCH] feat(remix): Update scope transactionName when resolving
 route

---
 packages/remix/src/client/performance.tsx       | 17 +++++++++++------
 .../test/client/capture-exception.test.ts       |  3 +--
 .../test/client/capture-message.test.ts         |  3 +--
 .../test/client/errorboundary.test.ts           |  3 +++
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/remix/src/client/performance.tsx b/packages/remix/src/client/performance.tsx
index ea91b816b91a..bc3bc9944ae9 100644
--- a/packages/remix/src/client/performance.tsx
+++ b/packages/remix/src/client/performance.tsx
@@ -2,6 +2,7 @@ import {
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
   getActiveSpan,
+  getCurrentScope,
   getRootSpan,
 } from '@sentry/core';
 import type { browserTracingIntegration as originalBrowserTracingIntegration } from '@sentry/react';
@@ -158,14 +159,18 @@ export function withSentry<P extends Record<string, unknown>, R extends React.Co
     const matches = _useMatches();
 
     _useEffect(() => {
-      const activeRootSpan = getActiveSpan();
+      if (matches && matches.length) {
+        const routeName = matches[matches.length - 1].id;
+        getCurrentScope().setTransactionName(routeName);
 
-      if (activeRootSpan && matches && matches.length) {
-        const transaction = getRootSpan(activeRootSpan);
+        const activeRootSpan = getActiveSpan();
+        if (activeRootSpan) {
+          const transaction = getRootSpan(activeRootSpan);
 
-        if (transaction) {
-          transaction.updateName(matches[matches.length - 1].id);
-          transaction.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+          if (transaction) {
+            transaction.updateName(routeName);
+            transaction.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+          }
         }
       }
 
diff --git a/packages/remix/test/integration/test/client/capture-exception.test.ts b/packages/remix/test/integration/test/client/capture-exception.test.ts
index 18f2fd9af196..b7e38abf2f4c 100644
--- a/packages/remix/test/integration/test/client/capture-exception.test.ts
+++ b/packages/remix/test/integration/test/client/capture-exception.test.ts
@@ -8,8 +8,7 @@ test('should report a manually captured error.', async ({ page }) => {
   const [errorEnvelope, pageloadEnvelope] = envelopes;
 
   expect(errorEnvelope.level).toBe('error');
-  // TODO: Comment back in once we update the scope transaction name on the client side
-  // expect(errorEnvelope.transaction).toBe('/capture-exception');
+  expect(errorEnvelope.transaction).toBe('/capture-exception');
   expect(errorEnvelope.exception?.values).toMatchObject([
     {
       type: 'Error',
diff --git a/packages/remix/test/integration/test/client/capture-message.test.ts b/packages/remix/test/integration/test/client/capture-message.test.ts
index 5c3e578ad81f..234b6ee3d961 100644
--- a/packages/remix/test/integration/test/client/capture-message.test.ts
+++ b/packages/remix/test/integration/test/client/capture-message.test.ts
@@ -8,8 +8,7 @@ test('should report a manually captured message.', async ({ page }) => {
   const [messageEnvelope, pageloadEnvelope] = envelopes;
 
   expect(messageEnvelope.level).toBe('info');
-  // TODO: Comment back in once we update the scope transaction name on the client side
-  // expect(messageEnvelope.transaction).toBe('/capture-message');
+  expect(messageEnvelope.transaction).toBe('/capture-message');
   expect(messageEnvelope.message).toBe('Sentry Manually Captured Message');
 
   expect(pageloadEnvelope.contexts?.trace?.op).toBe('pageload');
diff --git a/packages/remix/test/integration/test/client/errorboundary.test.ts b/packages/remix/test/integration/test/client/errorboundary.test.ts
index b1af46338345..6d249d563a41 100644
--- a/packages/remix/test/integration/test/client/errorboundary.test.ts
+++ b/packages/remix/test/integration/test/client/errorboundary.test.ts
@@ -39,4 +39,7 @@ test('should capture React component errors.', async ({ page }) => {
       mechanism: { type: useV2 ? 'instrument' : 'generic', handled: !useV2 },
     },
   ]);
+  expect(errorEnvelope.transaction).toBe(
+    useV2 ? 'routes/error-boundary-capture.$id' : 'routes/error-boundary-capture/$id',
+  );
 });