feat(remix): Update scope transactionName when resolving route (#11420)

This PR updates the current scope's `transactionName` when our Remix
router instrumentation resolves the parameterized route name.

Author: Lms24

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');
+          }
         }
       }
 

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',

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');

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',
+  );
 });