feat(ember): Set url.template, url.path and url.full on router spans

Emit standard URL attributes on Ember pageload and navigation root spans,
updating navigation attributes at routeDidChange once the destination URL
is finalized.

Co-Authored-By: Cursor <cursoragent@cursor.com>

Author: Lms24

dev-packages/e2e-tests/test-applications/ember-classic/tests/performance.test.ts

@@ -15,6 +15,13 @@ test('sends a pageload transaction with a parameterized URL', async ({ page }) =
       trace: {
         op: 'pageload',
         origin: 'auto.pageload.ember',
+        data: {
+          'sentry.origin': 'auto.pageload.ember',
+          'sentry.source': 'route',
+          'url.template': '/',
+          'url.path': '/',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+        },
       },
     },
     transaction: 'route:index',
@@ -43,6 +50,13 @@ test('sends a navigation transaction with a parameterized URL', async ({ page })
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.ember',
+        data: {
+          'sentry.origin': 'auto.navigation.ember',
+          'sentry.source': 'route',
+          'url.template': '/tracing',
+          'url.path': '/tracing',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/tracing$/),
+        },
       },
     },
     transaction: 'route:tracing',
@@ -75,6 +89,13 @@ test('sends a navigation transaction even if the pageload span is still active',
       trace: {
         op: 'pageload',
         origin: 'auto.pageload.ember',
+        data: {
+          'sentry.origin': 'auto.pageload.ember',
+          'sentry.source': 'route',
+          'url.template': '/',
+          'url.path': '/',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+        },
       },
     },
     transaction: 'route:index',
@@ -88,6 +109,13 @@ test('sends a navigation transaction even if the pageload span is still active',
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.ember',
+        data: {
+          'sentry.origin': 'auto.navigation.ember',
+          'sentry.source': 'route',
+          'url.template': '/tracing',
+          'url.path': '/tracing',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/tracing$/),
+        },
       },
     },
     transaction: 'route:tracing',
@@ -124,6 +152,13 @@ test('captures correct spans for navigation', async ({ page }) => {
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.ember',
+        data: {
+          'sentry.origin': 'auto.navigation.ember',
+          'sentry.source': 'route',
+          'url.template': '/slow-loading-route',
+          'url.path': '/slow-loading-route',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/slow-loading-route$/),
+        },
       },
     },
     transaction: 'route:slow-loading-route.index',

dev-packages/e2e-tests/test-applications/ember-embroider/tests/performance.test.ts

@@ -15,6 +15,13 @@ test('sends a pageload transaction with a parameterized URL', async ({ page }) =
       trace: {
         op: 'pageload',
         origin: 'auto.pageload.ember',
+        data: {
+          'sentry.origin': 'auto.pageload.ember',
+          'sentry.source': 'route',
+          'url.template': '/',
+          'url.path': '/',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+        },
       },
     },
     transaction: 'route:index',
@@ -43,6 +50,13 @@ test('sends a navigation transaction with a parameterized URL', async ({ page })
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.ember',
+        data: {
+          'sentry.origin': 'auto.navigation.ember',
+          'sentry.source': 'route',
+          'url.template': '/tracing',
+          'url.path': '/tracing',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/tracing$/),
+        },
       },
     },
     transaction: 'route:tracing',
@@ -75,6 +89,13 @@ test('sends a navigation transaction even if the pageload span is still active',
       trace: {
         op: 'pageload',
         origin: 'auto.pageload.ember',
+        data: {
+          'sentry.origin': 'auto.pageload.ember',
+          'sentry.source': 'route',
+          'url.template': '/',
+          'url.path': '/',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+        },
       },
     },
     transaction: 'route:index',
@@ -88,6 +109,13 @@ test('sends a navigation transaction even if the pageload span is still active',
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.ember',
+        data: {
+          'sentry.origin': 'auto.navigation.ember',
+          'sentry.source': 'route',
+          'url.template': '/tracing',
+          'url.path': '/tracing',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/tracing$/),
+        },
       },
     },
     transaction: 'route:tracing',
@@ -124,6 +152,13 @@ test('captures correct spans for navigation', async ({ page }) => {
       trace: {
         op: 'navigation',
         origin: 'auto.navigation.ember',
+        data: {
+          'sentry.origin': 'auto.navigation.ember',
+          'sentry.source': 'route',
+          'url.template': '/slow-loading-route',
+          'url.path': '/slow-loading-route',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/slow-loading-route$/),
+        },
       },
     },
     transaction: 'route:slow-loading-route.index',

packages/ember/addon/utils/instrumentEmberAppInstanceForPerformance.ts

@@ -5,11 +5,22 @@ import type {
   startBrowserTracingNavigationSpan as startBrowserTracingNavigationSpanType,
   startBrowserTracingPageLoadSpan as startBrowserTracingPageLoadSpanType,
 } from '@sentry/browser';
-import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, startInactiveSpan } from '@sentry/browser';
+import {
+  getAbsoluteUrl,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  startInactiveSpan,
+} from '@sentry/browser';
 import type { Client, Span } from '@sentry/core';
 import type { EmberRouterMain } from '../types';
 import { getBackburner } from './performance';
 
+const URL_FULL = 'url.full';
+const URL_PATH = 'url.path';
+const URL_TEMPLATE = 'url.template';
+
+type TransitionWithIntent = Transition & { intent?: { url?: string } };
+
 export function instrumentEmberAppInstanceForPerformance(
   client: Client,
   appInstance: ApplicationInstance,
@@ -22,6 +33,7 @@ export function instrumentEmberAppInstanceForPerformance(
   let routerService = appInstance.lookup('service:router') as RouterService & {
     externalRouter?: RouterService;
     _hasMountedSentryPerformanceRouting?: boolean;
+    currentURL?: string;
   };
 
   if (routerService.externalRouter) {
@@ -60,6 +72,49 @@ function getTransitionInformation(
   };
 }
 
+function getUrlPathFromEmberLocation(url: string): string {
+  if (!url) {
+    return '/';
+  }
+
+  const withoutQuery = url.split('?')[0] ?? url;
+
+  if (withoutQuery.includes('#')) {
+    const hashPart = withoutQuery.substring(withoutQuery.indexOf('#') + 1);
+    return hashPart.startsWith('/') ? hashPart : `/${hashPart}`;
+  }
+
+  return withoutQuery.startsWith('/') ? withoutQuery : `/${withoutQuery}`;
+}
+
+function buildUrlTemplate(path: string, params: Record<string, unknown> = {}): string {
+  let template = path;
+
+  const paramEntries = Object.entries(params)
+    .filter((entry): entry is [string, string] => typeof entry[1] === 'string' && entry[1].length > 0)
+    .sort(([, a], [, b]) => b.length - a.length);
+
+  for (const [key, value] of paramEntries) {
+    template = template.replace(`/${value}`, `/:${key}`);
+  }
+
+  return template;
+}
+
+// Only exported for testing
+export function _getRouteUrlAttributes(
+  url: string,
+  params: Record<string, unknown> = {},
+): Record<string, string> {
+  const path = getUrlPathFromEmberLocation(url);
+
+  return {
+    [URL_PATH]: path,
+    [URL_FULL]: getAbsoluteUrl(path),
+    [URL_TEMPLATE]: buildUrlTemplate(path, params),
+  };
+}
+
 // Only exported for testing
 export function _getLocationURL(location: EmberRouterMain['location']): string {
   if (!location?.getURL || !location?.formatURL) {
@@ -76,7 +131,7 @@ export function _getLocationURL(location: EmberRouterMain['location']): string {
 
 function _instrumentEmberRouter(
   client: Client,
-  routerService: RouterService,
+  routerService: RouterService & { currentURL?: string },
   routerMain: EmberRouterMain,
   config: { disableRunloopPerformance?: boolean; instrumentPageLoad?: boolean; instrumentNavigation?: boolean },
   startBrowserTracingPageLoadSpan: typeof startBrowserTracingPageLoadSpanType,
@@ -96,6 +151,7 @@ function _instrumentEmberRouter(
       attributes: {
         [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
         [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.ember',
+        ..._getRouteUrlAttributes(url, routeInfo.params),
         url,
         toRoute: routeInfo.name,
       },
@@ -124,11 +180,16 @@ function _instrumentEmberRouter(
 
     activeRootSpan?.end();
 
+    const targetUrl =
+      (transition as TransitionWithIntent).intent?.url ?? _getLocationURL(location);
+    const urlAttributes = _getRouteUrlAttributes(targetUrl, transition.to?.params);
+
     activeRootSpan = startBrowserTracingNavigationSpan(client, {
       name: `route:${toRoute}`,
       attributes: {
         [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
         [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.ember',
+        ...urlAttributes,
         fromRoute,
         toRoute,
       },
@@ -150,6 +211,12 @@ function _instrumentEmberRouter(
     }
     transitionSpan.end();
 
+    const url = routerService.currentURL ?? _getLocationURL(location);
+    if (url) {
+      const routeInfo = routerService.recognize(url);
+      activeRootSpan.setAttributes(_getRouteUrlAttributes(url, routeInfo.params ?? transition.to?.params));
+    }
+
     if (disableRunloopPerformance) {
       activeRootSpan.end();
       return;

packages/ember/tests/unit/instrument-router-location-test.ts

@@ -1,5 +1,8 @@
 import type { EmberRouterMain } from '@sentry/ember/addon/types';
-import { _getLocationURL } from '@sentry/ember/utils/instrumentEmberAppInstanceForPerformance';
+import {
+  _getLocationURL,
+  _getRouteUrlAttributes,
+} from '@sentry/ember/utils/instrumentEmberAppInstanceForPerformance';
 import { setupTest } from 'ember-qunit';
 import { module, test } from 'qunit';
 import type { SentryTestContext } from '../helpers/setup-sentry';
@@ -97,4 +100,28 @@ module('Unit | Utility | instrument-router-location', function (hooks) {
     const result = _getLocationURL(mockLocation);
     assert.strictEqual(result, '', 'Should return empty string when formatURL is not available');
   });
+
+  test('_getRouteUrlAttributes handles history location paths', function (this: SentryTestContext, assert) {
+    const result = _getRouteUrlAttributes('/tracing');
+
+    assert.strictEqual(result['url.path'], '/tracing');
+    assert.strictEqual(result['url.template'], '/tracing');
+    assert.ok(result['url.full']?.includes('/tracing'), 'url.full includes the path');
+  });
+
+  test('_getRouteUrlAttributes parameterizes dynamic segments', function (this: SentryTestContext, assert) {
+    const result = _getRouteUrlAttributes('/users/123', { user_id: '123' });
+
+    assert.strictEqual(result['url.path'], '/users/123');
+    assert.strictEqual(result['url.template'], '/users/:user_id');
+    assert.ok(result['url.full']?.includes('/users/123'), 'url.full includes the path');
+  });
+
+  test('_getRouteUrlAttributes handles hash location paths', function (this: SentryTestContext, assert) {
+    const result = _getRouteUrlAttributes('/#/tracing');
+
+    assert.strictEqual(result['url.path'], '/tracing');
+    assert.strictEqual(result['url.template'], '/tracing');
+    assert.ok(result['url.full']?.includes('/tracing'), 'url.full includes the path');
+  });
 });