From 398612466658c2b9db9101b8842a959ece84271d Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Tue, 26 May 2026 14:36:10 +0200 Subject: [PATCH 1/3] docs: Add component name annotation to TanStack Start docs --- .../features/sentryTanstackStart.mdx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx b/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx index 8e971320d2e54..eb7a023512167 100644 --- a/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx +++ b/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx @@ -62,6 +62,31 @@ sentryTanstackStart({ }), ``` +## Component Name Annotation + +The `reactComponentAnnotation` option annotates your React components with `data-sentry-component` and `data-sentry-source-file` attributes at build time. This lets you see component names instead of generic selectors in Session Replay, breadcrumbs, and performance monitoring. + +```typescript {filename:vite.config.ts} +sentryTanstackStart({ + // ... + reactComponentAnnotation: { + enabled: true, + }, +}), +``` + +To exclude specific components from annotation: + +```typescript {filename:vite.config.ts} +sentryTanstackStart({ + // ... + reactComponentAnnotation: { + enabled: true, + ignoredComponents: ["MyInternalComponent"], + }, +}), +``` + ## Tunnel Route From 8a4df507a9b16be4bfae1d107265cf0fe5b1e09d Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Tue, 26 May 2026 14:47:04 +0200 Subject: [PATCH 2/3] docs: Restructure config options as subsections, add middleware heading --- .../features/sentryTanstackStart.mdx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx b/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx index eb7a023512167..16998df24761d 100644 --- a/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx +++ b/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx @@ -53,7 +53,9 @@ export default defineConfig({ The plugin passes through all options to the underlying [`@sentry/vite-plugin`](/platforms/javascript/sourcemaps/uploading/vite/). See the [Sentry Vite Plugin documentation](/platforms/javascript/sourcemaps/uploading/vite/) for the full list of available options. -Additionally, the plugin automatically instruments all TanStack Start middlewares for tracing by default. To disable this behavior: +### Automatic Middleware Instrumentation + +The plugin automatically instruments all TanStack Start middlewares for tracing by default. To disable this behavior: ```typescript {filename:vite.config.ts} sentryTanstackStart({ @@ -62,7 +64,7 @@ sentryTanstackStart({ }), ``` -## Component Name Annotation +### Component Name Annotation The `reactComponentAnnotation` option annotates your React components with `data-sentry-component` and `data-sentry-source-file` attributes at build time. This lets you see component names instead of generic selectors in Session Replay, breadcrumbs, and performance monitoring. @@ -87,7 +89,7 @@ sentryTanstackStart({ }), ``` -## Tunnel Route +### Tunnel Route @@ -95,7 +97,7 @@ The `tunnelRoute` option registers a same-origin TanStack Start server route tha `tunnelRoute` accepts three shapes: -### `tunnelRoute: true` (recommended) +#### `tunnelRoute: true` (recommended) Generates an opaque, unguessable route path for each dev session and production build. Because the path changes between builds, ad blockers can't reliably target it. @@ -105,7 +107,7 @@ sentryTanstackStart({ }), ``` -### Static path +#### Static path Pass a string to use a fixed route path. This is easier to reason about, but a known path is easier for ad blockers to add to a list. @@ -115,7 +117,7 @@ sentryTanstackStart({ }), ``` -### Object form +#### Object form Use the object form to control the DSN allowlist or set a static path explicitly: From 5e9d24ed58371d0f3f106731c8e0db2d015ab6ff Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Tue, 26 May 2026 14:48:56 +0200 Subject: [PATCH 3/3] docs: Add AvailableSince banners for middleware and component annotation --- .../tanstackstart-react/features/sentryTanstackStart.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx b/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx index 16998df24761d..ab4ae0a30a655 100644 --- a/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx +++ b/docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx @@ -55,6 +55,8 @@ The plugin passes through all options to the underlying [`@sentry/vite-plugin`]( ### Automatic Middleware Instrumentation + + The plugin automatically instruments all TanStack Start middlewares for tracing by default. To disable this behavior: ```typescript {filename:vite.config.ts} @@ -66,6 +68,8 @@ sentryTanstackStart({ ### Component Name Annotation + + The `reactComponentAnnotation` option annotates your React components with `data-sentry-component` and `data-sentry-source-file` attributes at build time. This lets you see component names instead of generic selectors in Session Replay, breadcrumbs, and performance monitoring. ```typescript {filename:vite.config.ts}