Skip to content

Commit 5534ba9

Browse files
authored
feat(nuxt): Parametrize SSR routes (#16843)
Adds route parametrization to SSR server routes. The parametrized route data is gathered during build time and saved in a virtual file (added with [`addTemplate`](https://nuxt.com/docs/4.x/api/kit/templates#creating-a-virtual-file-for-runtime-plugin)) which can hand-over the data to be accessed during runtime. The `nuxt-3-min` test (Nuxt 3.7) shows that the route parametrization does not work yet with this version. From Nuxt 3.9 onwards, it works. This is fine, as most people are on a more recent version anyways. part of #16684
1 parent 3e5eac5 commit 5534ba9

File tree

15 files changed

+506
-42
lines changed

15 files changed

+506
-42
lines changed

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/tracing.server.test.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,5 @@ test('does not send transactions for build asset folder "_nuxt"', async ({ page
4141

4242
expect(buildAssetFolderOccurred).toBe(false);
4343

44-
// todo: url not yet parametrized
45-
expect(transactionEvent.transaction).toBe('GET /test-param/1234');
44+
expect(transactionEvent.transaction).toBe('GET /test-param/:param()');
4645
});

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/tracing.test.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ test.describe('distributed tracing', () => {
2222

2323
const baggageMetaTagContent = await page.locator('meta[name="baggage"]').getAttribute('content');
2424

25+
// URL-encoded for parametrized 'GET /test-param/s0me-param' -> `GET /test-param/:param`
26+
expect(baggageMetaTagContent).toContain(`sentry-transaction=GET%20%2Ftest-param%2F%3Aparam`);
2527
expect(baggageMetaTagContent).toContain(`sentry-trace_id=${serverTxnEvent.contexts?.trace?.trace_id}`);
26-
expect(baggageMetaTagContent).toContain(`sentry-transaction=GET%20%2Ftest-param%2F${PARAM}`); // URL-encoded for 'GET /test-param/s0me-param'
2728
expect(baggageMetaTagContent).toContain('sentry-sampled=true');
2829
expect(baggageMetaTagContent).toContain('sentry-sample_rate=1');
2930

@@ -47,8 +48,8 @@ test.describe('distributed tracing', () => {
4748
});
4849

4950
expect(serverTxnEvent).toMatchObject({
50-
transaction: `GET /test-param/${PARAM}`, // todo: parametrize
51-
transaction_info: { source: 'url' },
51+
transaction: `GET /test-param/:param()`, // parametrized
52+
transaction_info: { source: 'route' },
5253
type: 'transaction',
5354
contexts: {
5455
trace: {
@@ -121,8 +122,8 @@ test.describe('distributed tracing', () => {
121122
expect(ssrTxnEvent).toEqual(
122123
expect.objectContaining({
123124
type: 'transaction',
124-
transaction: `GET /test-param/user/${PARAM}`, // fixme: parametrize (nitro)
125-
transaction_info: { source: 'url' },
125+
transaction: `GET /test-param/user/:userId()`, // parametrized route
126+
transaction_info: { source: 'route' },
126127
contexts: expect.objectContaining({
127128
trace: expect.objectContaining({
128129
op: 'http.server',

dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/tracing.server.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,6 @@ test('does not send transactions for build asset folder "_nuxt"', async ({ page
4141

4242
expect(buildAssetFolderOccurred).toBe(false);
4343

44-
// todo: url not yet parametrized
44+
// Parametrization does not work in Nuxt 3.7 yet (only in newer versions)
4545
expect(transactionEvent.transaction).toBe('GET /test-param/1234');
4646
});

dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/tracing.test.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ test.describe('distributed tracing', () => {
2222

2323
const baggageMetaTagContent = await page.locator('meta[name="baggage"]').getAttribute('content');
2424

25-
expect(baggageMetaTagContent).toContain(`sentry-trace_id=${serverTxnEvent.contexts?.trace?.trace_id}`);
25+
// Parametrization does not work in Nuxt 3.7 yet (only in newer versions)
2626
expect(baggageMetaTagContent).toContain(`sentry-transaction=GET%20%2Ftest-param%2F${PARAM}`); // URL-encoded for 'GET /test-param/s0me-param'
27+
expect(baggageMetaTagContent).toContain(`sentry-trace_id=${serverTxnEvent.contexts?.trace?.trace_id}`);
2728
expect(baggageMetaTagContent).toContain('sentry-sampled=true');
2829
expect(baggageMetaTagContent).toContain('sentry-sample_rate=1');
2930

@@ -47,7 +48,7 @@ test.describe('distributed tracing', () => {
4748
});
4849

4950
expect(serverTxnEvent).toMatchObject({
50-
transaction: `GET /test-param/${PARAM}`, // todo: parametrize
51+
transaction: `GET /test-param/${PARAM}`, // Parametrization does not work in Nuxt 3.7 yet (only in newer versions)
5152
transaction_info: { source: 'url' },
5253
type: 'transaction',
5354
contexts: {
@@ -121,7 +122,7 @@ test.describe('distributed tracing', () => {
121122
expect(ssrTxnEvent).toEqual(
122123
expect.objectContaining({
123124
type: 'transaction',
124-
transaction: `GET /test-param/user/${PARAM}`, // fixme: parametrize (nitro)
125+
transaction: `GET /test-param/user/${PARAM}`, // Parametrization does not work in Nuxt 3.7 yet (only in newer versions)
125126
transaction_info: { source: 'url' },
126127
contexts: expect.objectContaining({
127128
trace: expect.objectContaining({

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/tracing.server.test.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,5 @@ test('does not send transactions for build asset folder "_nuxt"', async ({ page
4141

4242
expect(buildAssetFolderOccurred).toBe(false);
4343

44-
// todo: url not yet parametrized
45-
expect(transactionEvent.transaction).toBe('GET /test-param/1234');
44+
expect(transactionEvent.transaction).toBe('GET /test-param/:param()');
4645
});

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/tracing.test.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ test.describe('distributed tracing', () => {
2222

2323
const baggageMetaTagContent = await page.locator('meta[name="baggage"]').getAttribute('content');
2424

25+
// URL-encoded for parametrized 'GET /test-param/s0me-param' -> `GET /test-param/:param`
26+
expect(baggageMetaTagContent).toContain(`sentry-transaction=GET%20%2Ftest-param%2F%3Aparam`);
2527
expect(baggageMetaTagContent).toContain(`sentry-trace_id=${serverTxnEvent.contexts?.trace?.trace_id}`);
26-
expect(baggageMetaTagContent).toContain(`sentry-transaction=GET%20%2Ftest-param%2F${PARAM}`); // URL-encoded for 'GET /test-param/s0me-param'
2728
expect(baggageMetaTagContent).toContain('sentry-sampled=true');
2829
expect(baggageMetaTagContent).toContain('sentry-sample_rate=1');
2930

@@ -47,8 +48,8 @@ test.describe('distributed tracing', () => {
4748
});
4849

4950
expect(serverTxnEvent).toMatchObject({
50-
transaction: `GET /test-param/${PARAM}`, // todo: parametrize
51-
transaction_info: { source: 'url' },
51+
transaction: `GET /test-param/:param()`, // parametrized
52+
transaction_info: { source: 'route' },
5253
type: 'transaction',
5354
contexts: {
5455
trace: {
@@ -121,8 +122,8 @@ test.describe('distributed tracing', () => {
121122
expect(ssrTxnEvent).toEqual(
122123
expect.objectContaining({
123124
type: 'transaction',
124-
transaction: `GET /test-param/user/${PARAM}`, // fixme: parametrize (nitro)
125-
transaction_info: { source: 'url' },
125+
transaction: `GET /test-param/user/:userId()`, // parametrized route
126+
transaction_info: { source: 'route' },
126127
contexts: expect.objectContaining({
127128
trace: expect.objectContaining({
128129
op: 'http.server',

dev-packages/e2e-tests/test-applications/nuxt-3/tests/tracing.server.test.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,5 @@ test('does not send transactions for build asset folder "_nuxt"', async ({ page
4141

4242
expect(buildAssetFolderOccurred).toBe(false);
4343

44-
// todo: url not yet parametrized
45-
expect(transactionEvent.transaction).toBe('GET /test-param/1234');
44+
expect(transactionEvent.transaction).toBe('GET /test-param/:param()');
4645
});

dev-packages/e2e-tests/test-applications/nuxt-3/tests/tracing.test.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ test.describe('distributed tracing', () => {
2222

2323
const baggageMetaTagContent = await page.locator('meta[name="baggage"]').getAttribute('content');
2424

25+
// URL-encoded for parametrized 'GET /test-param/s0me-param' -> `GET /test-param/:param`
26+
expect(baggageMetaTagContent).toContain(`sentry-transaction=GET%20%2Ftest-param%2F%3Aparam`);
2527
expect(baggageMetaTagContent).toContain(`sentry-trace_id=${serverTxnEvent.contexts?.trace?.trace_id}`);
26-
expect(baggageMetaTagContent).toContain(`sentry-transaction=GET%20%2Ftest-param%2F${PARAM}`); // URL-encoded for 'GET /test-param/s0me-param'
2728
expect(baggageMetaTagContent).toContain('sentry-sampled=true');
2829
expect(baggageMetaTagContent).toContain('sentry-sample_rate=1');
2930

@@ -47,8 +48,8 @@ test.describe('distributed tracing', () => {
4748
});
4849

4950
expect(serverTxnEvent).toMatchObject({
50-
transaction: `GET /test-param/${PARAM}`, // todo: parametrize
51-
transaction_info: { source: 'url' },
51+
transaction: `GET /test-param/:param()`, // parametrized
52+
transaction_info: { source: 'route' },
5253
type: 'transaction',
5354
contexts: {
5455
trace: {
@@ -121,8 +122,8 @@ test.describe('distributed tracing', () => {
121122
expect(ssrTxnEvent).toEqual(
122123
expect.objectContaining({
123124
type: 'transaction',
124-
transaction: `GET /test-param/user/${PARAM}`, // fixme: parametrize (nitro)
125-
transaction_info: { source: 'url' },
125+
transaction: `GET /test-param/user/:userId()`, // parametrized route
126+
transaction_info: { source: 'route' },
126127
contexts: expect.objectContaining({
127128
trace: expect.objectContaining({
128129
op: 'http.server',

dev-packages/e2e-tests/test-applications/nuxt-4/tests/tracing.server.test.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,5 @@ test('does not send transactions for build asset folder "_nuxt"', async ({ page
4141

4242
expect(buildAssetFolderOccurred).toBe(false);
4343

44-
// todo: url not yet parametrized
45-
expect(transactionEvent.transaction).toBe('GET /test-param/1234');
44+
expect(transactionEvent.transaction).toBe('GET /test-param/:param()');
4645
});

dev-packages/e2e-tests/test-applications/nuxt-4/tests/tracing.test.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ test.describe('distributed tracing', () => {
2222

2323
const baggageMetaTagContent = await page.locator('meta[name="baggage"]').getAttribute('content');
2424

25+
// URL-encoded for parametrized 'GET /test-param/s0me-param' -> `GET /test-param/:param`
26+
expect(baggageMetaTagContent).toContain(`sentry-transaction=GET%20%2Ftest-param%2F%3Aparam`);
2527
expect(baggageMetaTagContent).toContain(`sentry-trace_id=${serverTxnEvent.contexts?.trace?.trace_id}`);
26-
expect(baggageMetaTagContent).toContain(`sentry-transaction=GET%20%2Ftest-param%2F${PARAM}`); // URL-encoded for 'GET /test-param/s0me-param'
2728
expect(baggageMetaTagContent).toContain('sentry-sampled=true');
2829
expect(baggageMetaTagContent).toContain('sentry-sample_rate=1');
2930

@@ -47,8 +48,8 @@ test.describe('distributed tracing', () => {
4748
});
4849

4950
expect(serverTxnEvent).toMatchObject({
50-
transaction: `GET /test-param/${PARAM}`, // todo: parametrize
51-
transaction_info: { source: 'url' },
51+
transaction: `GET /test-param/:param()`, // parametrized route
52+
transaction_info: { source: 'route' },
5253
type: 'transaction',
5354
contexts: {
5455
trace: {
@@ -121,8 +122,8 @@ test.describe('distributed tracing', () => {
121122
expect(ssrTxnEvent).toEqual(
122123
expect.objectContaining({
123124
type: 'transaction',
124-
transaction: `GET /test-param/user/${PARAM}`, // fixme: parametrize (nitro)
125-
transaction_info: { source: 'url' },
125+
transaction: `GET /test-param/user/:userId()`, // parametrized route
126+
transaction_info: { source: 'route' },
126127
contexts: expect.objectContaining({
127128
trace: expect.objectContaining({
128129
op: 'http.server',

0 commit comments

Comments
 (0)