feat(nextjs): Set url attributes on pageload and navigation spans

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/app-dir-pageloads.test.ts

@@ -27,6 +27,8 @@ test('should create a pageload transaction when the `app` directory is used', as
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.path': '/pageload-transaction',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/pageload-transaction$/),
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -45,4 +47,6 @@ test('should create a pageload transaction when the `app` directory is used', as
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-navigation.test.ts

@@ -34,6 +34,9 @@ test('should report a navigation transaction for pages router navigations', asyn
  'sentry.op': 'navigation',
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/navigation-target-page$/),
+ 'url.path': '/foo/navigation-target-page',
+ 'url.template': '/[param]/navigation-target-page',
  },
  op: 'navigation',
  origin: 'auto.navigation.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-pageload.test.ts

@@ -27,6 +27,9 @@ test('should create a pageload transaction when the `pages` directory is used',
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/pages-pageload$/),
+ 'url.path': '/foo/pages-pageload',
+ 'url.template': '/[param]/pages-pageload',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-14/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/tests/routing-basepath-transaction.test.ts

@@ -54,7 +54,18 @@ test('Creates a navigation transaction for basePath router with prefix', async (
  await page.waitForTimeout(1000);
  await page.getByText('router.push()').click();
 
- expect(await navigationTransactionPromise).toBeDefined();
+ const navigationTransaction = await navigationTransactionPromise;
+ expect(navigationTransaction).toBeDefined();
+
+ const attributes = navigationTransaction.contexts?.trace?.data;
+ expect(attributes).toMatchObject({
+ 'sentry.op': 'navigation',
+ 'sentry.origin': 'auto.navigation.nextjs.app_router_instrumentation',
+ 'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/my-app\/navigation\/42\/router-push$/),
+ 'url.path': '/my-app/navigation/42/router-push',
+ 'url.template': '/my-app/navigation/:param/router-push',
+ });
 });
 
 test('Creates a navigation transaction for basePath <Link> with prefix', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-15/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-16/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts

@@ -38,6 +38,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
  }),
  },
  }),
@@ -49,6 +51,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  },
  }),
  );
+
+ expect(transactionEvent.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('Should send a transaction for instrumented server actions', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/transactions.test.ts

@@ -38,6 +38,9 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
+ 'url.template': '/',
  }),
  },
  }),
@@ -86,6 +89,9 @@ test('Sends a navigation transaction', async ({ page }) => {
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.sample_rate': 1,
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/),
+ 'url.path': '/user/5',
+ 'url.template': '/user/[id]',
  }),
  links: [
  {

packages/browser-utils/src/index.ts

@@ -43,4 +43,6 @@ export { htmlTreeAsString } from './htmlTreeAsString';
 
 export { isElement } from './is';
 
+export { getAbsoluteUrl } from './instrument/location';
+
 export type { FetchHint, NetworkMetaWarning, XhrHint } from './types';

packages/browser-utils/src/instrument/location.ts

@@ -0,0 +1,22 @@
+import { WINDOW } from '../types';
+
+/**
+ *
+ * @param urlOrPath - The URL or path to convert to an absolute URL.
+ *
+ * @return the absolute URL when handed a relative URL path, by
+ * combining the current `window.location.origin` with param urlOrPath.
+ *
+ * If param urlOrPath is already a full or an invalid URL,
+ * or URL determination fails, the original param urlOrPath is returned unchanged.
+ *
+ */
+export function getAbsoluteUrl(urlOrPath: string): string {
+ try {
+ const url = new URL(urlOrPath, WINDOW.location.origin);
+ return url.toString();
+ } catch {
+ // fallback, just do nothing
+ return urlOrPath;
+ }
+}

packages/browser-utils/test/instrument/location.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { getAbsoluteUrl } from '../../src/instrument/location';
+
+describe('getAbsoluteUrl', () => {
+ beforeEach(() => {
+ vi.stubGlobal('location', {
+ origin: 'https://sentry.io',
+ });
+ });
+
+ it('returns the absolute URL when handed a relative URL', () => {
+ expect(getAbsoluteUrl('/foo')).toBe('https://sentry.io/foo');
+ });
+
+ it('returns the original URL when handed a full URL', () => {
+ expect(getAbsoluteUrl('https://santry.io/foo')).toBe('https://santry.io/foo');
+ });
+
+ it('returns query params', () => {
+ expect(getAbsoluteUrl('/foo?bar=baz')).toBe('https://sentry.io/foo?bar=baz');
+ });
+
+ it('returns fragments', () => {
+ expect(getAbsoluteUrl('/foo#bar')).toBe('https://sentry.io/foo#bar');
+ });
+});

packages/browser/src/index.ts

@@ -41,7 +41,7 @@ export {
  startBrowserTracingNavigationSpan,
  startBrowserTracingPageLoadSpan,
 } from './tracing/browserTracingIntegration';
-export { elementTimingIntegration } from '@sentry/browser-utils';
+export { elementTimingIntegration, getAbsoluteUrl } from '@sentry/browser-utils';
 export { normalizeStringifyValue } from './normalizeStringifyValue';
 export { reportPageLoaded } from './tracing/reportPageLoaded';
 export { setActiveSpanInBrowser } from './tracing/setActiveSpan';

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/app-dir-pageloads.test.ts

@@ -27,6 +27,8 @@ test('should create a pageload transaction when the `app` directory is used', as
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.path': '/pageload-transaction',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/pageload-transaction$/),
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -45,4 +47,6 @@ test('should create a pageload transaction when the `app` directory is used', as
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-navigation.test.ts

@@ -34,6 +34,9 @@ test('should report a navigation transaction for pages router navigations', asyn
  'sentry.op': 'navigation',
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/navigation-target-page$/),
+ 'url.path': '/foo/navigation-target-page',
+ 'url.template': '/[param]/navigation-target-page',
  },
  op: 'navigation',
  origin: 'auto.navigation.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-pageload.test.ts

@@ -27,6 +27,9 @@ test('should create a pageload transaction when the `pages` directory is used',
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/pages-pageload$/),
+ 'url.path': '/foo/pages-pageload',
+ 'url.template': '/[param]/pages-pageload',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-14/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/tests/routing-basepath-transaction.test.ts

@@ -54,7 +54,18 @@ test('Creates a navigation transaction for basePath router with prefix', async (
  await page.waitForTimeout(1000);
  await page.getByText('router.push()').click();
 
- expect(await navigationTransactionPromise).toBeDefined();
+ const navigationTransaction = await navigationTransactionPromise;
+ expect(navigationTransaction).toBeDefined();
+
+ const attributes = navigationTransaction.contexts?.trace?.data;
+ expect(attributes).toMatchObject({
+ 'sentry.op': 'navigation',
+ 'sentry.origin': 'auto.navigation.nextjs.app_router_instrumentation',
+ 'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/my-app\/navigation\/42\/router-push$/),
+ 'url.path': '/my-app/navigation/42/router-push',
+ 'url.template': '/my-app/navigation/:param/router-push',
+ });
 });
 
 test('Creates a navigation transaction for basePath <Link> with prefix', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-15/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-16/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts

@@ -38,6 +38,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
  }),
  },
  }),
@@ -49,6 +51,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  },
  }),
  );
+
+ expect(transactionEvent.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('Should send a transaction for instrumented server actions', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/transactions.test.ts

@@ -38,6 +38,9 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
+ 'url.template': '/',
  }),
  },
  }),
@@ -86,6 +89,9 @@ test('Sends a navigation transaction', async ({ page }) => {
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.sample_rate': 1,
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/),
+ 'url.path': '/user/5',
+ 'url.template': '/user/[id]',
  }),
  links: [
  {

packages/browser-utils/src/index.ts

@@ -43,4 +43,6 @@ export { htmlTreeAsString } from './htmlTreeAsString';
 
 export { isElement } from './is';
 
+export { getAbsoluteUrl } from './instrument/location';
+
 export type { FetchHint, NetworkMetaWarning, XhrHint } from './types';

packages/browser-utils/src/instrument/location.ts

@@ -0,0 +1,22 @@
+import { WINDOW } from '../types';
+
+/**
+ *
+ * @param urlOrPath - The URL or path to convert to an absolute URL.
+ *
+ * @return the absolute URL when handed a relative URL path, by
+ * combining the current `window.location.origin` with param urlOrPath.
+ *
+ * If param urlOrPath is already a full or an invalid URL,
+ * or URL determination fails, the original param urlOrPath is returned unchanged.
+ *
+ */
+export function getAbsoluteUrl(urlOrPath: string): string {
+ try {
+ const url = new URL(urlOrPath, WINDOW.location.origin);
+ return url.toString();
+ } catch {
+ // fallback, just do nothing
+ return urlOrPath;
+ }
+}

packages/browser-utils/test/instrument/location.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { getAbsoluteUrl } from '../../src/instrument/location';
+
+describe('getAbsoluteUrl', () => {
+ beforeEach(() => {
+ vi.stubGlobal('location', {
+ origin: 'https://sentry.io',
+ });
+ });
+
+ it('returns the absolute URL when handed a relative URL', () => {
+ expect(getAbsoluteUrl('/foo')).toBe('https://sentry.io/foo');
+ });
+
+ it('returns the original URL when handed a full URL', () => {
+ expect(getAbsoluteUrl('https://santry.io/foo')).toBe('https://santry.io/foo');
+ });
+
+ it('returns query params', () => {
+ expect(getAbsoluteUrl('/foo?bar=baz')).toBe('https://sentry.io/foo?bar=baz');
+ });
+
+ it('returns fragments', () => {
+ expect(getAbsoluteUrl('/foo#bar')).toBe('https://sentry.io/foo#bar');
+ });
+});

packages/browser/src/index.ts

@@ -41,7 +41,7 @@ export {
  startBrowserTracingNavigationSpan,
  startBrowserTracingPageLoadSpan,
 } from './tracing/browserTracingIntegration';
-export { elementTimingIntegration } from '@sentry/browser-utils';
+export { elementTimingIntegration, getAbsoluteUrl } from '@sentry/browser-utils';
 export { normalizeStringifyValue } from './normalizeStringifyValue';
 export { reportPageLoaded } from './tracing/reportPageLoaded';
 export { setActiveSpanInBrowser } from './tracing/setActiveSpan';

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/app-dir-pageloads.test.ts

@@ -27,6 +27,8 @@ test('should create a pageload transaction when the `app` directory is used', as
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.path': '/pageload-transaction',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/pageload-transaction$/),
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -45,4 +47,6 @@ test('should create a pageload transaction when the `app` directory is used', as
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-navigation.test.ts

@@ -34,6 +34,9 @@ test('should report a navigation transaction for pages router navigations', asyn
  'sentry.op': 'navigation',
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/navigation-target-page$/),
+ 'url.path': '/foo/navigation-target-page',
+ 'url.template': '/[param]/navigation-target-page',
  },
  op: 'navigation',
  origin: 'auto.navigation.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-pageload.test.ts

@@ -27,6 +27,9 @@ test('should create a pageload transaction when the `pages` directory is used',
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/pages-pageload$/),
+ 'url.path': '/foo/pages-pageload',
+ 'url.template': '/[param]/pages-pageload',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-14/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/tests/routing-basepath-transaction.test.ts

@@ -54,7 +54,18 @@ test('Creates a navigation transaction for basePath router with prefix', async (
  await page.waitForTimeout(1000);
  await page.getByText('router.push()').click();
 
- expect(await navigationTransactionPromise).toBeDefined();
+ const navigationTransaction = await navigationTransactionPromise;
+ expect(navigationTransaction).toBeDefined();
+
+ const attributes = navigationTransaction.contexts?.trace?.data;
+ expect(attributes).toMatchObject({
+ 'sentry.op': 'navigation',
+ 'sentry.origin': 'auto.navigation.nextjs.app_router_instrumentation',
+ 'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/my-app\/navigation\/42\/router-push$/),
+ 'url.path': '/my-app/navigation/42/router-push',
+ 'url.template': '/my-app/navigation/:param/router-push',
+ });
 });
 
 test('Creates a navigation transaction for basePath <Link> with prefix', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-15/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-16/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts

@@ -38,6 +38,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
  }),
  },
  }),
@@ -49,6 +51,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  },
  }),
  );
+
+ expect(transactionEvent.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('Should send a transaction for instrumented server actions', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/transactions.test.ts

@@ -38,6 +38,9 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
+ 'url.template': '/',
  }),
  },
  }),
@@ -86,6 +89,9 @@ test('Sends a navigation transaction', async ({ page }) => {
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.sample_rate': 1,
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/),
+ 'url.path': '/user/5',
+ 'url.template': '/user/[id]',
  }),
  links: [
  {

packages/browser-utils/src/index.ts

@@ -43,4 +43,6 @@ export { htmlTreeAsString } from './htmlTreeAsString';
 
 export { isElement } from './is';
 
+export { getAbsoluteUrl } from './instrument/location';
+
 export type { FetchHint, NetworkMetaWarning, XhrHint } from './types';

packages/browser-utils/src/instrument/location.ts

@@ -0,0 +1,22 @@
+import { WINDOW } from '../types';
+
+/**
+ *
+ * @param urlOrPath - The URL or path to convert to an absolute URL.
+ *
+ * @return the absolute URL when handed a relative URL path, by
+ * combining the current `window.location.origin` with param urlOrPath.
+ *
+ * If param urlOrPath is already a full or an invalid URL,
+ * or URL determination fails, the original param urlOrPath is returned unchanged.
+ *
+ */
+export function getAbsoluteUrl(urlOrPath: string): string {
+ try {
+ const url = new URL(urlOrPath, WINDOW.location.origin);
+ return url.toString();
+ } catch {
+ // fallback, just do nothing
+ return urlOrPath;
+ }
+}

packages/browser-utils/test/instrument/location.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { getAbsoluteUrl } from '../../src/instrument/location';
+
+describe('getAbsoluteUrl', () => {
+ beforeEach(() => {
+ vi.stubGlobal('location', {
+ origin: 'https://sentry.io',
+ });
+ });
+
+ it('returns the absolute URL when handed a relative URL', () => {
+ expect(getAbsoluteUrl('/foo')).toBe('https://sentry.io/foo');
+ });
+
+ it('returns the original URL when handed a full URL', () => {
+ expect(getAbsoluteUrl('https://santry.io/foo')).toBe('https://santry.io/foo');
+ });
+
+ it('returns query params', () => {
+ expect(getAbsoluteUrl('/foo?bar=baz')).toBe('https://sentry.io/foo?bar=baz');
+ });
+
+ it('returns fragments', () => {
+ expect(getAbsoluteUrl('/foo#bar')).toBe('https://sentry.io/foo#bar');
+ });
+});

packages/browser/src/index.ts

@@ -41,7 +41,7 @@ export {
  startBrowserTracingNavigationSpan,
  startBrowserTracingPageLoadSpan,
 } from './tracing/browserTracingIntegration';
-export { elementTimingIntegration } from '@sentry/browser-utils';
+export { elementTimingIntegration, getAbsoluteUrl } from '@sentry/browser-utils';
 export { normalizeStringifyValue } from './normalizeStringifyValue';
 export { reportPageLoaded } from './tracing/reportPageLoaded';
 export { setActiveSpanInBrowser } from './tracing/setActiveSpan';

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/app-dir-pageloads.test.ts

@@ -27,6 +27,8 @@ test('should create a pageload transaction when the `app` directory is used', as
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.path': '/pageload-transaction',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/pageload-transaction$/),
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -45,4 +47,6 @@ test('should create a pageload transaction when the `app` directory is used', as
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-navigation.test.ts

@@ -34,6 +34,9 @@ test('should report a navigation transaction for pages router navigations', asyn
  'sentry.op': 'navigation',
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/navigation-target-page$/),
+ 'url.path': '/foo/navigation-target-page',
+ 'url.template': '/[param]/navigation-target-page',
  },
  op: 'navigation',
  origin: 'auto.navigation.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-pageload.test.ts

@@ -27,6 +27,9 @@ test('should create a pageload transaction when the `pages` directory is used',
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/pages-pageload$/),
+ 'url.path': '/foo/pages-pageload',
+ 'url.template': '/[param]/pages-pageload',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-14/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/tests/routing-basepath-transaction.test.ts

@@ -54,7 +54,18 @@ test('Creates a navigation transaction for basePath router with prefix', async (
  await page.waitForTimeout(1000);
  await page.getByText('router.push()').click();
 
- expect(await navigationTransactionPromise).toBeDefined();
+ const navigationTransaction = await navigationTransactionPromise;
+ expect(navigationTransaction).toBeDefined();
+
+ const attributes = navigationTransaction.contexts?.trace?.data;
+ expect(attributes).toMatchObject({
+ 'sentry.op': 'navigation',
+ 'sentry.origin': 'auto.navigation.nextjs.app_router_instrumentation',
+ 'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/my-app\/navigation\/42\/router-push$/),
+ 'url.path': '/my-app/navigation/42/router-push',
+ 'url.template': '/my-app/navigation/:param/router-push',
+ });
 });
 
 test('Creates a navigation transaction for basePath <Link> with prefix', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-15/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-16/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts

@@ -38,6 +38,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
  }),
  },
  }),
@@ -49,6 +51,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  },
  }),
  );
+
+ expect(transactionEvent.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('Should send a transaction for instrumented server actions', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/transactions.test.ts

@@ -38,6 +38,9 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
+ 'url.template': '/',
  }),
  },
  }),
@@ -86,6 +89,9 @@ test('Sends a navigation transaction', async ({ page }) => {
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.sample_rate': 1,
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/),
+ 'url.path': '/user/5',
+ 'url.template': '/user/[id]',
  }),
  links: [
  {

packages/browser-utils/src/index.ts

@@ -43,4 +43,6 @@ export { htmlTreeAsString } from './htmlTreeAsString';
 
 export { isElement } from './is';
 
+export { getAbsoluteUrl } from './instrument/location';
+
 export type { FetchHint, NetworkMetaWarning, XhrHint } from './types';

packages/browser-utils/src/instrument/location.ts

@@ -0,0 +1,22 @@
+import { WINDOW } from '../types';
+
+/**
+ *
+ * @param urlOrPath - The URL or path to convert to an absolute URL.
+ *
+ * @return the absolute URL when handed a relative URL path, by
+ * combining the current `window.location.origin` with param urlOrPath.
+ *
+ * If param urlOrPath is already a full or an invalid URL,
+ * or URL determination fails, the original param urlOrPath is returned unchanged.
+ *
+ */
+export function getAbsoluteUrl(urlOrPath: string): string {
+ try {
+ const url = new URL(urlOrPath, WINDOW.location.origin);
+ return url.toString();
+ } catch {
+ // fallback, just do nothing
+ return urlOrPath;
+ }
+}

packages/browser-utils/test/instrument/location.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { getAbsoluteUrl } from '../../src/instrument/location';
+
+describe('getAbsoluteUrl', () => {
+ beforeEach(() => {
+ vi.stubGlobal('location', {
+ origin: 'https://sentry.io',
+ });
+ });
+
+ it('returns the absolute URL when handed a relative URL', () => {
+ expect(getAbsoluteUrl('/foo')).toBe('https://sentry.io/foo');
+ });
+
+ it('returns the original URL when handed a full URL', () => {
+ expect(getAbsoluteUrl('https://santry.io/foo')).toBe('https://santry.io/foo');
+ });
+
+ it('returns query params', () => {
+ expect(getAbsoluteUrl('/foo?bar=baz')).toBe('https://sentry.io/foo?bar=baz');
+ });
+
+ it('returns fragments', () => {
+ expect(getAbsoluteUrl('/foo#bar')).toBe('https://sentry.io/foo#bar');
+ });
+});

packages/browser/src/index.ts

@@ -41,7 +41,7 @@ export {
  startBrowserTracingNavigationSpan,
  startBrowserTracingPageLoadSpan,
 } from './tracing/browserTracingIntegration';
-export { elementTimingIntegration } from '@sentry/browser-utils';
+export { elementTimingIntegration, getAbsoluteUrl } from '@sentry/browser-utils';
 export { normalizeStringifyValue } from './normalizeStringifyValue';
 export { reportPageLoaded } from './tracing/reportPageLoaded';
 export { setActiveSpanInBrowser } from './tracing/setActiveSpan';

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/app-dir-pageloads.test.ts

@@ -27,6 +27,8 @@ test('should create a pageload transaction when the `app` directory is used', as
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.path': '/pageload-transaction',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/pageload-transaction$/),
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -45,4 +47,6 @@ test('should create a pageload transaction when the `app` directory is used', as
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-navigation.test.ts

@@ -34,6 +34,9 @@ test('should report a navigation transaction for pages router navigations', asyn
  'sentry.op': 'navigation',
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/navigation-target-page$/),
+ 'url.path': '/foo/navigation-target-page',
+ 'url.template': '/[param]/navigation-target-page',
  },
  op: 'navigation',
  origin: 'auto.navigation.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-pageload.test.ts

@@ -27,6 +27,9 @@ test('should create a pageload transaction when the `pages` directory is used',
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/pages-pageload$/),
+ 'url.path': '/foo/pages-pageload',
+ 'url.template': '/[param]/pages-pageload',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-14/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/tests/routing-basepath-transaction.test.ts

@@ -54,7 +54,18 @@ test('Creates a navigation transaction for basePath router with prefix', async (
  await page.waitForTimeout(1000);
  await page.getByText('router.push()').click();
 
- expect(await navigationTransactionPromise).toBeDefined();
+ const navigationTransaction = await navigationTransactionPromise;
+ expect(navigationTransaction).toBeDefined();
+
+ const attributes = navigationTransaction.contexts?.trace?.data;
+ expect(attributes).toMatchObject({
+ 'sentry.op': 'navigation',
+ 'sentry.origin': 'auto.navigation.nextjs.app_router_instrumentation',
+ 'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/my-app\/navigation\/42\/router-push$/),
+ 'url.path': '/my-app/navigation/42/router-push',
+ 'url.template': '/my-app/navigation/:param/router-push',
+ });
 });
 
 test('Creates a navigation transaction for basePath <Link> with prefix', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-15/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-16/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts

@@ -38,6 +38,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
  }),
  },
  }),
@@ -49,6 +51,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  },
  }),
  );
+
+ expect(transactionEvent.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('Should send a transaction for instrumented server actions', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/transactions.test.ts

@@ -38,6 +38,9 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
+ 'url.template': '/',
  }),
  },
  }),
@@ -86,6 +89,9 @@ test('Sends a navigation transaction', async ({ page }) => {
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.sample_rate': 1,
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/),
+ 'url.path': '/user/5',
+ 'url.template': '/user/[id]',
  }),
  links: [
  {

packages/browser-utils/src/index.ts

@@ -43,4 +43,6 @@ export { htmlTreeAsString } from './htmlTreeAsString';
 
 export { isElement } from './is';
 
+export { getAbsoluteUrl } from './instrument/location';
+
 export type { FetchHint, NetworkMetaWarning, XhrHint } from './types';

packages/browser-utils/src/instrument/location.ts

@@ -0,0 +1,22 @@
+import { WINDOW } from '../types';
+
+/**
+ *
+ * @param urlOrPath - The URL or path to convert to an absolute URL.
+ *
+ * @return the absolute URL when handed a relative URL path, by
+ * combining the current `window.location.origin` with param urlOrPath.
+ *
+ * If param urlOrPath is already a full or an invalid URL,
+ * or URL determination fails, the original param urlOrPath is returned unchanged.
+ *
+ */
+export function getAbsoluteUrl(urlOrPath: string): string {
+ try {
+ const url = new URL(urlOrPath, WINDOW.location.origin);
+ return url.toString();
+ } catch {
+ // fallback, just do nothing
+ return urlOrPath;
+ }
+}

packages/browser-utils/test/instrument/location.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { getAbsoluteUrl } from '../../src/instrument/location';
+
+describe('getAbsoluteUrl', () => {
+ beforeEach(() => {
+ vi.stubGlobal('location', {
+ origin: 'https://sentry.io',
+ });
+ });
+
+ it('returns the absolute URL when handed a relative URL', () => {
+ expect(getAbsoluteUrl('/foo')).toBe('https://sentry.io/foo');
+ });
+
+ it('returns the original URL when handed a full URL', () => {
+ expect(getAbsoluteUrl('https://santry.io/foo')).toBe('https://santry.io/foo');
+ });
+
+ it('returns query params', () => {
+ expect(getAbsoluteUrl('/foo?bar=baz')).toBe('https://sentry.io/foo?bar=baz');
+ });
+
+ it('returns fragments', () => {
+ expect(getAbsoluteUrl('/foo#bar')).toBe('https://sentry.io/foo#bar');
+ });
+});

packages/browser/src/index.ts

@@ -41,7 +41,7 @@ export {
  startBrowserTracingNavigationSpan,
  startBrowserTracingPageLoadSpan,
 } from './tracing/browserTracingIntegration';
-export { elementTimingIntegration } from '@sentry/browser-utils';
+export { elementTimingIntegration, getAbsoluteUrl } from '@sentry/browser-utils';
 export { normalizeStringifyValue } from './normalizeStringifyValue';
 export { reportPageLoaded } from './tracing/reportPageLoaded';
 export { setActiveSpanInBrowser } from './tracing/setActiveSpan';

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/app-dir-pageloads.test.ts

@@ -27,6 +27,8 @@ test('should create a pageload transaction when the `app` directory is used', as
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.path': '/pageload-transaction',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/pageload-transaction$/),
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -45,4 +47,6 @@ test('should create a pageload transaction when the `app` directory is used', as
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-navigation.test.ts

@@ -34,6 +34,9 @@ test('should report a navigation transaction for pages router navigations', asyn
  'sentry.op': 'navigation',
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/navigation-target-page$/),
+ 'url.path': '/foo/navigation-target-page',
+ 'url.template': '/[param]/navigation-target-page',
  },
  op: 'navigation',
  origin: 'auto.navigation.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-pageload.test.ts

@@ -27,6 +27,9 @@ test('should create a pageload transaction when the `pages` directory is used',
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/pages-pageload$/),
+ 'url.path': '/foo/pages-pageload',
+ 'url.template': '/[param]/pages-pageload',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-14/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/tests/routing-basepath-transaction.test.ts

@@ -54,7 +54,18 @@ test('Creates a navigation transaction for basePath router with prefix', async (
  await page.waitForTimeout(1000);
  await page.getByText('router.push()').click();
 
- expect(await navigationTransactionPromise).toBeDefined();
+ const navigationTransaction = await navigationTransactionPromise;
+ expect(navigationTransaction).toBeDefined();
+
+ const attributes = navigationTransaction.contexts?.trace?.data;
+ expect(attributes).toMatchObject({
+ 'sentry.op': 'navigation',
+ 'sentry.origin': 'auto.navigation.nextjs.app_router_instrumentation',
+ 'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/my-app\/navigation\/42\/router-push$/),
+ 'url.path': '/my-app/navigation/42/router-push',
+ 'url.template': '/my-app/navigation/:param/router-push',
+ });
 });
 
 test('Creates a navigation transaction for basePath <Link> with prefix', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-15/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-16/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts

@@ -38,6 +38,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
  }),
  },
  }),
@@ -49,6 +51,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  },
  }),
  );
+
+ expect(transactionEvent.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('Should send a transaction for instrumented server actions', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/transactions.test.ts

@@ -38,6 +38,9 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
+ 'url.template': '/',
  }),
  },
  }),
@@ -86,6 +89,9 @@ test('Sends a navigation transaction', async ({ page }) => {
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.sample_rate': 1,
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/),
+ 'url.path': '/user/5',
+ 'url.template': '/user/[id]',
  }),
  links: [
  {

packages/browser-utils/src/index.ts

@@ -43,4 +43,6 @@ export { htmlTreeAsString } from './htmlTreeAsString';
 
 export { isElement } from './is';
 
+export { getAbsoluteUrl } from './instrument/location';
+
 export type { FetchHint, NetworkMetaWarning, XhrHint } from './types';

packages/browser-utils/src/instrument/location.ts

@@ -0,0 +1,22 @@
+import { WINDOW } from '../types';
+
+/**
+ *
+ * @param urlOrPath - The URL or path to convert to an absolute URL.
+ *
+ * @return the absolute URL when handed a relative URL path, by
+ * combining the current `window.location.origin` with param urlOrPath.
+ *
+ * If param urlOrPath is already a full or an invalid URL,
+ * or URL determination fails, the original param urlOrPath is returned unchanged.
+ *
+ */
+export function getAbsoluteUrl(urlOrPath: string): string {
+ try {
+ const url = new URL(urlOrPath, WINDOW.location.origin);
+ return url.toString();
+ } catch {
+ // fallback, just do nothing
+ return urlOrPath;
+ }
+}

packages/browser-utils/test/instrument/location.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { getAbsoluteUrl } from '../../src/instrument/location';
+
+describe('getAbsoluteUrl', () => {
+ beforeEach(() => {
+ vi.stubGlobal('location', {
+ origin: 'https://sentry.io',
+ });
+ });
+
+ it('returns the absolute URL when handed a relative URL', () => {
+ expect(getAbsoluteUrl('/foo')).toBe('https://sentry.io/foo');
+ });
+
+ it('returns the original URL when handed a full URL', () => {
+ expect(getAbsoluteUrl('https://santry.io/foo')).toBe('https://santry.io/foo');
+ });
+
+ it('returns query params', () => {
+ expect(getAbsoluteUrl('/foo?bar=baz')).toBe('https://sentry.io/foo?bar=baz');
+ });
+
+ it('returns fragments', () => {
+ expect(getAbsoluteUrl('/foo#bar')).toBe('https://sentry.io/foo#bar');
+ });
+});

packages/browser/src/index.ts

@@ -41,7 +41,7 @@ export {
  startBrowserTracingNavigationSpan,
  startBrowserTracingPageLoadSpan,
 } from './tracing/browserTracingIntegration';
-export { elementTimingIntegration } from '@sentry/browser-utils';
+export { elementTimingIntegration, getAbsoluteUrl } from '@sentry/browser-utils';
 export { normalizeStringifyValue } from './normalizeStringifyValue';
 export { reportPageLoaded } from './tracing/reportPageLoaded';
 export { setActiveSpanInBrowser } from './tracing/setActiveSpan';

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/app-dir-pageloads.test.ts

@@ -27,6 +27,8 @@ test('should create a pageload transaction when the `app` directory is used', as
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.path': '/pageload-transaction',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/pageload-transaction$/),
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -45,4 +47,6 @@ test('should create a pageload transaction when the `app` directory is used', as
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-navigation.test.ts

@@ -34,6 +34,9 @@ test('should report a navigation transaction for pages router navigations', asyn
  'sentry.op': 'navigation',
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/navigation-target-page$/),
+ 'url.path': '/foo/navigation-target-page',
+ 'url.template': '/[param]/navigation-target-page',
  },
  op: 'navigation',
  origin: 'auto.navigation.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-pageload.test.ts

@@ -27,6 +27,9 @@ test('should create a pageload transaction when the `pages` directory is used',
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/pages-pageload$/),
+ 'url.path': '/foo/pages-pageload',
+ 'url.template': '/[param]/pages-pageload',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-14/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/tests/routing-basepath-transaction.test.ts

@@ -54,7 +54,18 @@ test('Creates a navigation transaction for basePath router with prefix', async (
  await page.waitForTimeout(1000);
  await page.getByText('router.push()').click();
 
- expect(await navigationTransactionPromise).toBeDefined();
+ const navigationTransaction = await navigationTransactionPromise;
+ expect(navigationTransaction).toBeDefined();
+
+ const attributes = navigationTransaction.contexts?.trace?.data;
+ expect(attributes).toMatchObject({
+ 'sentry.op': 'navigation',
+ 'sentry.origin': 'auto.navigation.nextjs.app_router_instrumentation',
+ 'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/my-app\/navigation\/42\/router-push$/),
+ 'url.path': '/my-app/navigation/42/router-push',
+ 'url.template': '/my-app/navigation/:param/router-push',
+ });
 });
 
 test('Creates a navigation transaction for basePath <Link> with prefix', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-15/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-16/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts

@@ -38,6 +38,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
  }),
  },
  }),
@@ -49,6 +51,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  },
  }),
  );
+
+ expect(transactionEvent.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('Should send a transaction for instrumented server actions', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/transactions.test.ts

@@ -38,6 +38,9 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
+ 'url.template': '/',
  }),
  },
  }),
@@ -86,6 +89,9 @@ test('Sends a navigation transaction', async ({ page }) => {
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.sample_rate': 1,
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/),
+ 'url.path': '/user/5',
+ 'url.template': '/user/[id]',
  }),
  links: [
  {

packages/browser-utils/src/index.ts

@@ -43,4 +43,6 @@ export { htmlTreeAsString } from './htmlTreeAsString';
 
 export { isElement } from './is';
 
+export { getAbsoluteUrl } from './instrument/location';
+
 export type { FetchHint, NetworkMetaWarning, XhrHint } from './types';

packages/browser-utils/src/instrument/location.ts

@@ -0,0 +1,22 @@
+import { WINDOW } from '../types';
+
+/**
+ *
+ * @param urlOrPath - The URL or path to convert to an absolute URL.
+ *
+ * @return the absolute URL when handed a relative URL path, by
+ * combining the current `window.location.origin` with param urlOrPath.
+ *
+ * If param urlOrPath is already a full or an invalid URL,
+ * or URL determination fails, the original param urlOrPath is returned unchanged.
+ *
+ */
+export function getAbsoluteUrl(urlOrPath: string): string {
+ try {
+ const url = new URL(urlOrPath, WINDOW.location.origin);
+ return url.toString();
+ } catch {
+ // fallback, just do nothing
+ return urlOrPath;
+ }
+}

packages/browser-utils/test/instrument/location.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { getAbsoluteUrl } from '../../src/instrument/location';
+
+describe('getAbsoluteUrl', () => {
+ beforeEach(() => {
+ vi.stubGlobal('location', {
+ origin: 'https://sentry.io',
+ });
+ });
+
+ it('returns the absolute URL when handed a relative URL', () => {
+ expect(getAbsoluteUrl('/foo')).toBe('https://sentry.io/foo');
+ });
+
+ it('returns the original URL when handed a full URL', () => {
+ expect(getAbsoluteUrl('https://santry.io/foo')).toBe('https://santry.io/foo');
+ });
+
+ it('returns query params', () => {
+ expect(getAbsoluteUrl('/foo?bar=baz')).toBe('https://sentry.io/foo?bar=baz');
+ });
+
+ it('returns fragments', () => {
+ expect(getAbsoluteUrl('/foo#bar')).toBe('https://sentry.io/foo#bar');
+ });
+});

packages/browser/src/index.ts

@@ -41,7 +41,7 @@ export {
  startBrowserTracingNavigationSpan,
  startBrowserTracingPageLoadSpan,
 } from './tracing/browserTracingIntegration';
-export { elementTimingIntegration } from '@sentry/browser-utils';
+export { elementTimingIntegration, getAbsoluteUrl } from '@sentry/browser-utils';
 export { normalizeStringifyValue } from './normalizeStringifyValue';
 export { reportPageLoaded } from './tracing/reportPageLoaded';
 export { setActiveSpanInBrowser } from './tracing/setActiveSpan';

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/app-dir-pageloads.test.ts

@@ -27,6 +27,8 @@ test('should create a pageload transaction when the `app` directory is used', as
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.path': '/pageload-transaction',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/pageload-transaction$/),
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -45,4 +47,6 @@ test('should create a pageload transaction when the `app` directory is used', as
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-navigation.test.ts

@@ -34,6 +34,9 @@ test('should report a navigation transaction for pages router navigations', asyn
  'sentry.op': 'navigation',
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/navigation-target-page$/),
+ 'url.path': '/foo/navigation-target-page',
+ 'url.template': '/[param]/navigation-target-page',
  },
  op: 'navigation',
  origin: 'auto.navigation.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/pages-dir-pageload.test.ts

@@ -27,6 +27,9 @@ test('should create a pageload transaction when the `pages` directory is used',
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/foo\/pages-pageload$/),
+ 'url.path': '/foo/pages-pageload',
+ 'url.template': '/[param]/pages-pageload',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.pages_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-14/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-15-basepath/tests/routing-basepath-transaction.test.ts

@@ -54,7 +54,18 @@ test('Creates a navigation transaction for basePath router with prefix', async (
  await page.waitForTimeout(1000);
  await page.getByText('router.push()').click();
 
- expect(await navigationTransactionPromise).toBeDefined();
+ const navigationTransaction = await navigationTransactionPromise;
+ expect(navigationTransaction).toBeDefined();
+
+ const attributes = navigationTransaction.contexts?.trace?.data;
+ expect(attributes).toMatchObject({
+ 'sentry.op': 'navigation',
+ 'sentry.origin': 'auto.navigation.nextjs.app_router_instrumentation',
+ 'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/my-app\/navigation\/42\/router-push$/),
+ 'url.path': '/my-app/navigation/42/router-push',
+ 'url.template': '/my-app/navigation/:param/router-push',
+ });
 });
 
 test('Creates a navigation transaction for basePath <Link> with prefix', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-15/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-16/tests/parameterized-routes.test.ts

@@ -20,6 +20,9 @@ test('should create a parameterized transaction when the `app` directory is used
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino$/),
+ 'url.path': '/parameterized/cappuccino',
+ 'url.template': '/parameterized/:one',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -61,6 +64,8 @@ test('should create a static transaction when the `app` directory is used and th
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/static$/),
+ 'url.path': '/parameterized/static',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -79,6 +84,8 @@ test('should create a static transaction when the `app` directory is used and th
  transaction_info: { source: 'url' },
  type: 'transaction',
  });
+
+ expect(transaction.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
@@ -100,6 +107,9 @@ test('should create a partially parameterized transaction when the `app` directo
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep$/),
+ 'url.path': '/parameterized/cappuccino/beep',
+ 'url.template': '/parameterized/:one/beep',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',
@@ -140,6 +150,9 @@ test('should create a nested parameterized transaction when the `app` directory
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/parameterized\/cappuccino\/beep\/espresso$/),
+ 'url.path': '/parameterized/cappuccino/beep/espresso',
+ 'url.template': '/parameterized/:one/beep/:two',
  },
  op: 'pageload',
  origin: 'auto.pageload.nextjs.app_router_instrumentation',

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts

@@ -38,6 +38,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
  'sentry.source': 'url',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
  }),
  },
  }),
@@ -49,6 +51,8 @@ test('Sends a pageload transaction', async ({ page }) => {
  },
  }),
  );
+
+ expect(transactionEvent.contexts?.trace?.data).not.toHaveProperty('url.template');
 });
 
 test('Should send a transaction for instrumented server actions', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/transactions.test.ts

@@ -38,6 +38,9 @@ test('Sends a pageload transaction', async ({ page }) => {
  'sentry.op': 'pageload',
  'sentry.origin': 'auto.pageload.nextjs.pages_router_instrumentation',
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
+ 'url.path': '/',
+ 'url.template': '/',
  }),
  },
  }),
@@ -86,6 +89,9 @@ test('Sends a navigation transaction', async ({ page }) => {
  'sentry.origin': 'auto.navigation.nextjs.pages_router_instrumentation',
  'sentry.sample_rate': 1,
  'sentry.source': 'route',
+ 'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/),
+ 'url.path': '/user/5',
+ 'url.template': '/user/[id]',
  }),
  links: [
  {

packages/browser-utils/src/index.ts

@@ -43,4 +43,6 @@ export { htmlTreeAsString } from './htmlTreeAsString';
 
 export { isElement } from './is';
 
+export { getAbsoluteUrl } from './instrument/location';
+
 export type { FetchHint, NetworkMetaWarning, XhrHint } from './types';

packages/browser-utils/src/instrument/location.ts

@@ -0,0 +1,22 @@
+import { WINDOW } from '../types';
+
+/**
+ *
+ * @param urlOrPath - The URL or path to convert to an absolute URL.
+ *
+ * @return the absolute URL when handed a relative URL path, by
+ * combining the current `window.location.origin` with param urlOrPath.
+ *
+ * If param urlOrPath is already a full or an invalid URL,
+ * or URL determination fails, the original param urlOrPath is returned unchanged.
+ *
+ */
+export function getAbsoluteUrl(urlOrPath: string): string {
+ try {
+ const url = new URL(urlOrPath, WINDOW.location.origin);
+ return url.toString();
+ } catch {
+ // fallback, just do nothing
+ return urlOrPath;
+ }
+}

packages/browser-utils/test/instrument/location.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { getAbsoluteUrl } from '../../src/instrument/location';
+
+describe('getAbsoluteUrl', () => {
+ beforeEach(() => {
+ vi.stubGlobal('location', {
+ origin: 'https://sentry.io',
+ });
+ });
+
+ it('returns the absolute URL when handed a relative URL', () => {
+ expect(getAbsoluteUrl('/foo')).toBe('https://sentry.io/foo');
+ });
+
+ it('returns the original URL when handed a full URL', () => {
+ expect(getAbsoluteUrl('https://santry.io/foo')).toBe('https://santry.io/foo');
+ });
+
+ it('returns query params', () => {
+ expect(getAbsoluteUrl('/foo?bar=baz')).toBe('https://sentry.io/foo?bar=baz');
+ });
+
+ it('returns fragments', () => {
+ expect(getAbsoluteUrl('/foo#bar')).toBe('https://sentry.io/foo#bar');
+ });
+});

packages/browser/src/index.ts

@@ -41,7 +41,7 @@ export {
  startBrowserTracingNavigationSpan,
  startBrowserTracingPageLoadSpan,
 } from './tracing/browserTracingIntegration';
-export { elementTimingIntegration } from '@sentry/browser-utils';
+export { elementTimingIntegration, getAbsoluteUrl } from '@sentry/browser-utils';
 export { normalizeStringifyValue } from './normalizeStringifyValue';
 export { reportPageLoaded } from './tracing/reportPageLoaded';
 export { setActiveSpanInBrowser } from './tracing/setActiveSpan';