From a0d52d7743ac68b5cfa815609a5f23a412d67772 Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Wed, 10 Dec 2025 10:00:00 +0100 Subject: [PATCH 1/4] Add e2e test --- .../tests/routing-instrumentation.test.ts | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/routing-instrumentation.test.ts diff --git a/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/routing-instrumentation.test.ts b/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/routing-instrumentation.test.ts new file mode 100644 index 000000000000..aa8eede2fff6 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/routing-instrumentation.test.ts @@ -0,0 +1,38 @@ +import { expect, test } from '@playwright/test'; +import { waitForTransaction } from '@sentry-internal/test-utils'; + +// we have more thorough tests for tanstack-router in a separate e2e test +// so here we just do a basic check to verify that the integration is automatically enabled if tracing is enabled +test('sends a pageload transaction', async ({ page }) => { + const transactionPromise = waitForTransaction('tanstackstart-react', async transactionEvent => { + console.log('transactionEvent', transactionEvent); + return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; + }); + + await page.goto(`/`); + + const rootSpan = await transactionPromise; + + expect(rootSpan).toMatchObject({ + contexts: { + trace: { + data: { + 'sentry.source': 'route', + 'sentry.origin': 'auto.pageload.react.tanstackstart_react', + 'sentry.op': 'pageload', + }, + op: 'pageload', + origin: 'auto.pageload.react.tanstackstart_react', + }, + }, + transaction: '/', + transaction_info: { + source: 'route', + }, + spans: expect.arrayContaining([ + expect.objectContaining({ + description: 'loading-home', + }), + ]), + }); +}); From 1174c1754e6b49b92a587e61109d2425eed5593e Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Wed, 10 Dec 2025 10:55:45 +0100 Subject: [PATCH 2/4] fix e2e test --- .../tests/routing-instrumentation.test.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/routing-instrumentation.test.ts b/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/routing-instrumentation.test.ts index aa8eede2fff6..8b0b0200e7bc 100644 --- a/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/routing-instrumentation.test.ts +++ b/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/routing-instrumentation.test.ts @@ -5,7 +5,6 @@ import { waitForTransaction } from '@sentry-internal/test-utils'; // so here we just do a basic check to verify that the integration is automatically enabled if tracing is enabled test('sends a pageload transaction', async ({ page }) => { const transactionPromise = waitForTransaction('tanstackstart-react', async transactionEvent => { - console.log('transactionEvent', transactionEvent); return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; }); @@ -18,21 +17,16 @@ test('sends a pageload transaction', async ({ page }) => { trace: { data: { 'sentry.source': 'route', - 'sentry.origin': 'auto.pageload.react.tanstackstart_react', + 'sentry.origin': 'auto.pageload.react.tanstack_router', 'sentry.op': 'pageload', }, op: 'pageload', - origin: 'auto.pageload.react.tanstackstart_react', + origin: 'auto.pageload.react.tanstack_router', }, }, transaction: '/', transaction_info: { source: 'route', }, - spans: expect.arrayContaining([ - expect.objectContaining({ - description: 'loading-home', - }), - ]), }); }); From b320c30bc70fd18a816249a289595c5c3eb3e0df Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Wed, 10 Dec 2025 10:58:11 +0100 Subject: [PATCH 3/4] remove tanstack router intergration from e2e so new test fails now --- .../test-applications/tanstackstart-react/src/router.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/dev-packages/e2e-tests/test-applications/tanstackstart-react/src/router.tsx b/dev-packages/e2e-tests/test-applications/tanstackstart-react/src/router.tsx index b1c6f7727a26..3b1ec9dd7513 100644 --- a/dev-packages/e2e-tests/test-applications/tanstackstart-react/src/router.tsx +++ b/dev-packages/e2e-tests/test-applications/tanstackstart-react/src/router.tsx @@ -12,7 +12,6 @@ export const getRouter = () => { Sentry.init({ environment: 'qa', // dynamic sampling bias to keep transactions dsn: 'https://public@dsn.ingest.sentry.io/1337', - integrations: [Sentry.tanstackRouterBrowserTracingIntegration(router)], // We recommend adjusting this value in production, or using tracesSampler // for finer control tracesSampleRate: 1.0, From 395ba54c374d3d6b80870c826cd4cd6c501009c7 Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Wed, 10 Dec 2025 11:28:50 +0100 Subject: [PATCH 4/4] Enable tracing but router still has to be passed (also doesn't work yet) --- .../tanstackstart-react/src/router.tsx | 1 + .../tanstackstart-react/src/client/index.ts | 1 + .../tanstackstart-react/src/client/sdk.ts | 36 ++++++++++++++++--- 3 files changed, 33 insertions(+), 5 deletions(-) diff --git a/dev-packages/e2e-tests/test-applications/tanstackstart-react/src/router.tsx b/dev-packages/e2e-tests/test-applications/tanstackstart-react/src/router.tsx index 3b1ec9dd7513..bdef82d3d5e2 100644 --- a/dev-packages/e2e-tests/test-applications/tanstackstart-react/src/router.tsx +++ b/dev-packages/e2e-tests/test-applications/tanstackstart-react/src/router.tsx @@ -15,6 +15,7 @@ export const getRouter = () => { // We recommend adjusting this value in production, or using tracesSampler // for finer control tracesSampleRate: 1.0, + router: router, release: 'e2e-test', tunnel: 'http://localhost:3031/', // proxy server }); diff --git a/packages/tanstackstart-react/src/client/index.ts b/packages/tanstackstart-react/src/client/index.ts index 2299b46b7d64..ba0133668fa5 100644 --- a/packages/tanstackstart-react/src/client/index.ts +++ b/packages/tanstackstart-react/src/client/index.ts @@ -4,3 +4,4 @@ export * from '@sentry/react'; export { init } from './sdk'; +export type { TanStackStartBrowserOptions as BrowserOptions } from './sdk'; diff --git a/packages/tanstackstart-react/src/client/sdk.ts b/packages/tanstackstart-react/src/client/sdk.ts index b0ee3b53053f..a3189a62ff92 100644 --- a/packages/tanstackstart-react/src/client/sdk.ts +++ b/packages/tanstackstart-react/src/client/sdk.ts @@ -1,16 +1,28 @@ -import type { Client } from '@sentry/core'; +import type { Client, Integration } from '@sentry/core'; import { applySdkMetadata } from '@sentry/core'; import type { BrowserOptions as ReactBrowserOptions } from '@sentry/react'; -import { getDefaultIntegrations as getReactDefaultIntegrations, init as initReactSDK } from '@sentry/react'; +import { + getDefaultIntegrations as getReactDefaultIntegrations, + init as initReactSDK, + tanstackRouterBrowserTracingIntegration, +} from '@sentry/react'; + +// Treeshakable guard to remove all code related to tracing +declare const __SENTRY_TRACING__: boolean; + +export type TanStackStartBrowserOptions = ReactBrowserOptions & { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + router?: any; +}; /** * Initializes the TanStack Start React SDK * * @param options Configuration options for the SDK. */ -export function init(options: ReactBrowserOptions): Client | undefined { - const sentryOptions: ReactBrowserOptions = { - defaultIntegrations: [...getReactDefaultIntegrations(options)], +export function init(options: TanStackStartBrowserOptions): Client | undefined { + const sentryOptions: TanStackStartBrowserOptions = { + defaultIntegrations: getDefaultIntegrations(options), ...options, }; @@ -18,3 +30,17 @@ export function init(options: ReactBrowserOptions): Client | undefined { return initReactSDK(sentryOptions); } + +function getDefaultIntegrations(options: TanStackStartBrowserOptions): Integration[] { + const integrations = getReactDefaultIntegrations(options); + + // This evaluates to true unless __SENTRY_TRACING__ is text-replaced with "false", + // in which case everything inside will get tree-shaken away + if (typeof __SENTRY_TRACING__ === 'undefined' || __SENTRY_TRACING__) { + if (options.router) { + integrations.push(tanstackRouterBrowserTracingIntegration(options.router)); + } + } + + return integrations; +}