Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,11 @@ 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

<AvailableSince version="10.37.0" />

The plugin automatically instruments all TanStack Start middlewares for tracing by default. To disable this behavior:

```typescript {filename:vite.config.ts}
sentryTanstackStart({
Expand All @@ -62,15 +66,42 @@ sentryTanstackStart({
}),
```

## Tunnel Route
### Component Name Annotation

<AvailableSince version="10.55.0" />

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.
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not 100% sure how we handle capitalization in the docs but we should be consistent here (as Replay is capitalized as it's a feature name but the others are not capitalized).

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what I've seen this is the capitalization that we use in the docs everywhere so should be consistent


```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

<AvailableSince version="10.51.0" />

The `tunnelRoute` option registers a same-origin TanStack Start server route that forwards Sentry envelopes to Sentry's ingest servers. It also automatically sets the client `tunnel` option in `Sentry.init()` so browser events go through that route. This helps avoid ad blockers and corporate firewalls that block requests to `*.sentry.io`.

`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.

Expand All @@ -80,7 +111,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.

Expand All @@ -90,7 +121,7 @@ sentryTanstackStart({
}),
```

### Object form
#### Object form

Use the object form to control the DSN allowlist or set a static path explicitly:

Expand Down
Loading