feat(solid): Set url attributes on solid router and tanstack router spans (#22090)

Lms24 · cursoragent · web-flow · commit 24ef5c3e33db · 2026-07-09T19:10:46.000+02:00
Adds `url.template`, `url.path`, and `url.full` to pageload and navigation spans for Solid Router and TanStack Solid Router integrations, including redirect and back-button navigation cases. Ports `locationToSpanUrlAttributes` from the React TanStack Router integration and updates Solid Router to pass the destination URL when starting navigation spans. Includes e2e test coverage for solidstart and solid-tanstack-router. part of #21921 Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com>
diff --git a/dev-packages/e2e-tests/test-applications/solid-tanstack-router/tests/routing-instrumentation.test.ts b/dev-packages/e2e-tests/test-applications/solid-tanstack-router/tests/routing-instrumentation.test.ts
@@ -18,6 +18,9 @@ test('sends a pageload transaction with a parameterized URL', async ({ page }) =
           'sentry.origin': 'auto.pageload.solid.tanstack_router',
           'sentry.op': 'pageload',
           'url.path.parameter.postId': '456',
+          'url.template': '/posts/$postId',
+          'url.path': '/posts/456',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/posts\/456$/),
         },
         op: 'pageload',
         origin: 'auto.pageload.solid.tanstack_router',
@@ -59,6 +62,9 @@ test('sends a navigation transaction with a parameterized URL', async ({ page })
           'sentry.origin': 'auto.navigation.solid.tanstack_router',
           'sentry.op': 'navigation',
           'url.path.parameter.postId': '2',
+          'url.template': '/posts/$postId',
+          'url.path': '/posts/2',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/posts\/2$/),
         },
         op: 'navigation',
         origin: 'auto.navigation.solid.tanstack_router',
@@ -90,6 +96,9 @@ test('sends a pageload transaction named after the resolved route when a redirec
           'sentry.origin': 'auto.pageload.solid.tanstack_router',
           'sentry.op': 'pageload',
           'url.path.parameter.postId': '1',
+          'url.template': '/posts/$postId',
+          'url.path': '/posts/1',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/posts\/1$/),
         },
         op: 'pageload',
         origin: 'auto.pageload.solid.tanstack_router',
@@ -130,6 +139,9 @@ test('sends a navigation transaction when a redirect is thrown in beforeLoad', a
           'sentry.origin': 'auto.navigation.solid.tanstack_router',
           'sentry.op': 'navigation',
           'url.path.parameter.postId': '1',
+          'url.template': '/posts/$postId',
+          'url.path': '/posts/1',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/posts\/1$/),
         },
         op: 'navigation',
         origin: 'auto.navigation.solid.tanstack_router',
@@ -175,6 +187,9 @@ test('sends a navigation transaction for a normal navigation that happens after
           'sentry.origin': 'auto.navigation.solid.tanstack_router',
           'sentry.op': 'navigation',
           'url.path.parameter.postId': '2',
+          'url.template': '/posts/$postId',
+          'url.path': '/posts/2',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/posts\/2$/),
         },
         op: 'navigation',
         origin: 'auto.navigation.solid.tanstack_router',
@@ -201,6 +216,12 @@ test('sends pageload transaction with web vitals measurements', async ({ page })
       trace: {
         op: 'pageload',
         origin: 'auto.pageload.solid.tanstack_router',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/',
+          'url.path': '/',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+        },
       },
     },
     transaction: '/',
diff --git a/dev-packages/e2e-tests/test-applications/solidstart-dynamic-import/tests/performance.client.test.ts b/dev-packages/e2e-tests/test-applications/solidstart-dynamic-import/tests/performance.client.test.ts
@@ -14,6 +14,12 @@ test('sends a pageload transaction', async ({ page }) => {
       trace: {
         op: 'pageload',
         origin: 'auto.pageload.browser',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/',
+          'url.path': '/',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+        },
       },
     },
     transaction: '/',
@@ -37,6 +43,12 @@ test('sends a navigation transaction with parametrized route', async ({ page })
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/users/:id',
+          'url.path': '/users/5',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/users\/5$/),
+        },
       },
     },
     transaction: '/users/:id',
@@ -63,6 +75,12 @@ test('updates the transaction when using the back button', async ({ page }) => {
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/users/:id',
+          'url.path': '/users/6',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/users\/6$/),
+        },
       },
     },
     transaction: '/users/:id',
@@ -85,6 +103,12 @@ test('updates the transaction when using the back button', async ({ page }) => {
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/back-navigation',
+          'url.path': '/back-navigation',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/back-navigation$/),
+        },
       },
     },
     transaction: '/back-navigation',
diff --git a/dev-packages/e2e-tests/test-applications/solidstart-spa/tests/performance.client.test.ts b/dev-packages/e2e-tests/test-applications/solidstart-spa/tests/performance.client.test.ts
@@ -14,6 +14,12 @@ test('sends a pageload transaction', async ({ page }) => {
       trace: {
         op: 'pageload',
         origin: 'auto.pageload.browser',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/',
+          'url.path': '/',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+        },
       },
     },
     transaction: '/',
@@ -37,6 +43,12 @@ test('sends a navigation transaction with parametrized route', async ({ page })
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/users/:id',
+          'url.path': '/users/5',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/users\/5$/),
+        },
       },
     },
     transaction: '/users/:id',
@@ -63,6 +75,12 @@ test('updates the transaction when using the back button', async ({ page }) => {
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/users/:id',
+          'url.path': '/users/6',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/users\/6$/),
+        },
       },
     },
     transaction: '/users/:id',
@@ -85,6 +103,12 @@ test('updates the transaction when using the back button', async ({ page }) => {
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/back-navigation',
+          'url.path': '/back-navigation',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/back-navigation$/),
+        },
       },
     },
     transaction: '/back-navigation',
diff --git a/dev-packages/e2e-tests/test-applications/solidstart-top-level-import/tests/performance.client.test.ts b/dev-packages/e2e-tests/test-applications/solidstart-top-level-import/tests/performance.client.test.ts
@@ -14,6 +14,12 @@ test('sends a pageload transaction', async ({ page }) => {
       trace: {
         op: 'pageload',
         origin: 'auto.pageload.browser',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/',
+          'url.path': '/',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+        },
       },
     },
     transaction: '/',
@@ -37,6 +43,12 @@ test('sends a navigation transaction with parametrized route', async ({ page })
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/users/:id',
+          'url.path': '/users/5',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/users\/5$/),
+        },
       },
     },
     transaction: '/users/:id',
@@ -63,6 +75,12 @@ test('updates the transaction when using the back button', async ({ page }) => {
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/users/:id',
+          'url.path': '/users/6',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/users\/6$/),
+        },
       },
     },
     transaction: '/users/:id',
@@ -85,6 +103,12 @@ test('updates the transaction when using the back button', async ({ page }) => {
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/back-navigation',
+          'url.path': '/back-navigation',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/back-navigation$/),
+        },
       },
     },
     transaction: '/back-navigation',
diff --git a/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts b/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts
@@ -14,6 +14,12 @@ test('sends a pageload transaction', async ({ page }) => {
       trace: {
         op: 'pageload',
         origin: 'auto.pageload.browser',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/',
+          'url.path': '/',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+        },
       },
     },
     transaction: '/',
@@ -37,6 +43,12 @@ test('sends a navigation transaction with parametrized route', async ({ page })
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/users/:id',
+          'url.path': '/users/5',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/users\/5$/),
+        },
       },
     },
     transaction: '/users/:id',
@@ -63,6 +75,12 @@ test('updates the transaction when using the back button', async ({ page }) => {
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/users/:id',
+          'url.path': '/users/6',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/users\/6$/),
+        },
       },
     },
     transaction: '/users/:id',
@@ -85,6 +103,12 @@ test('updates the transaction when using the back button', async ({ page }) => {
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.solidstart.solidrouter',
+        data: {
+          'sentry.source': 'route',
+          'url.template': '/back-navigation',
+          'url.path': '/back-navigation',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/back-navigation$/),
+        },
       },
     },
     transaction: '/back-navigation',
diff --git a/packages/solid/package.json b/packages/solid/package.json
@@ -55,7 +55,8 @@
   },
   "dependencies": {
     "@sentry/browser": "10.64.0",
-    "@sentry/core": "10.64.0"
+    "@sentry/core": "10.64.0",
+    "@sentry/conventions": "^0.15.1"
   },
   "peerDependencies": {
     "@solidjs/router": "^0.13.4 || ^0.14.0 || ^0.15.0",
diff --git a/packages/solid/src/solidrouter.ts b/packages/solid/src/solidrouter.ts
@@ -1,10 +1,12 @@
 import {
   browserTracingIntegration,
+  getAbsoluteUrl,
   getActiveSpan,
   getRootSpan,
   spanToJSON,
   startBrowserTracingNavigationSpan,
 } from '@sentry/browser';
+import { PARAMS_KEY, URL_FULL, URL_PATH, URL_PATH_PARAMETER_KEY, URL_TEMPLATE } from '@sentry/conventions/attributes';
 import type { Client, Integration, Span } from '@sentry/core';
 import {
   getClient,
@@ -27,6 +29,15 @@ import { createComponent } from 'solid-js/web';
 
 const CLIENTS_WITH_INSTRUMENT_NAVIGATION = new WeakSet<Client>();
 
+function locationToSpanUrlAttributes(pathname: string, search: string = '', hash: string = ''): Record<string, string> {
+  const pathWithSearch = `${pathname}${search}${hash}`;
+
+  return {
+    [URL_PATH]: pathname,
+    [URL_FULL]: getAbsoluteUrl(pathWithSearch),
+  };
+}
+
 function handleNavigation(location: string): void {
   const client = getClient();
   if (!client || !CLIENTS_WITH_INSTRUMENT_NAVIGATION.has(client)) {
@@ -40,14 +51,20 @@ function handleNavigation(location: string): void {
   const { name } = metaData?.sdk || {};
   const framework = name?.includes('solidstart') ? 'solidstart' : 'solid';
 
-  startBrowserTracingNavigationSpan(client, {
-    name: location,
-    attributes: {
-      [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
-      [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.${framework}.solidrouter`,
-      [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+  const isBackNavigation = location === '-1';
+
+  startBrowserTracingNavigationSpan(
+    client,
+    {
+      name: location,
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.${framework}.solidrouter`,
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+      },
     },
-  });
+    isBackNavigation ? undefined : { url: getAbsoluteUrl(location) },
+  );
 }
 
 function getActiveRootSpan(): Span | undefined {
@@ -101,16 +118,22 @@ function withSentryRouterRoot(Root: Component<RouteSectionProps>): Component<Rou
       const currentMatches = matches();
       const lastMatch = currentMatches[currentMatches.length - 1];
 
+      const urlAttributes = locationToSpanUrlAttributes(name, location.search, location.hash);
+
       if (lastMatch) {
         const parametrizedRoute = lastMatch.route.pattern || name;
         rootSpan.updateName(parametrizedRoute);
-        rootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+        rootSpan.setAttributes({
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+          [URL_TEMPLATE]: parametrizedRoute,
+          ...urlAttributes,
+        });
 
         const params = lastMatch.params;
         for (const [key, value] of Object.entries(params)) {
           if (value !== undefined) {
-            rootSpan.setAttribute(`url.path.parameter.${key}`, value);
-            rootSpan.setAttribute(`params.${key}`, value);
+            rootSpan.setAttribute(URL_PATH_PARAMETER_KEY.replace('<key>', key), value);
+            rootSpan.setAttribute(PARAMS_KEY.replace('<key>', key), value);
           }
         }
       } else {
@@ -119,7 +142,7 @@ function withSentryRouterRoot(Root: Component<RouteSectionProps>): Component<Rou
         if (op === 'navigation' && description === '-1') {
           rootSpan.updateName(name);
         }
-        rootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'url');
+        rootSpan.setAttributes({ [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url', ...urlAttributes });
       }
     });
 
diff --git a/packages/solid/src/tanstackrouter.ts b/packages/solid/src/tanstackrouter.ts
diff --git a/packages/solid/test/tanstackrouter.test.ts b/packages/solid/test/tanstackrouter.test.ts
