---
title: "sentryTanstackStart"
description: "Learn about the sentryTanstackStart Vite plugin."
url: https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart/
---

# sentryTanstackStart | Sentry for TanStack Start React

Available since: `v10.35.0`

The `sentryTanstackStart` Vite plugin simplifies source map configuration for TanStack Start applications. It automatically handles source map generation and upload to Sentry during production builds.

## [Usage](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.md#usage)

To automatically upload source maps, you need to provide your Sentry auth token, organization, and project slugs in your Vite configuration. The plugin then, by default, automatically enables hidden source maps and deletes `.map` files after upload.

**Make sure you add your auth token to your CI, if you are using one to deploy your application.**

Add your auth token to your environment:

**\[bash] .env**

```bash
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
```

Using environment variables in Vite configs

Vite doesn't automatically load `.env` files into `process.env` when evaluating the config file. If you store your auth token in a `.env` file and want to access it via `process.env.SENTRY_AUTH_TOKEN`, use Vite's [`loadEnv`](https://vite.dev/guide/api-javascript#loadenv) helper:

**\[javascript] vite.config.js**

```javascript
import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    plugins: [
      sentryVitePlugin({
        authToken: env.SENTRY_AUTH_TOKEN,
        // ...
      }),
    ],
  };
});
```

Alternatively, use a `.env.sentry-build-plugin` file, which the Sentry plugin reads automatically.

Configure `sentryTanstackStart` in your vite.config.ts:

**\[typescript] vite.config.ts**

```typescript
import { defineConfig } from "vite";
import { sentryTanstackStart } from "@sentry/tanstackstart-react/vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";

export default defineConfig({
  plugins: [
    tanstackStart(),
    // other plugins - sentryTanstackStart should be last
    sentryTanstackStart({
      org: "___ORG_SLUG___",
      project: "___PROJECT_SLUG___",
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
});
```

Source map upload **only** works when `org`, `project`, and `authToken` are all configured. Without these options, source maps will not be uploaded to Sentry.

## [Configuration Options](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.md#configuration-options)

The plugin passes through all options to the underlying [`@sentry/vite-plugin`](https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/vite.md). See the [Sentry Vite Plugin documentation](https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/vite.md) for the full list of available options.

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

**\[typescript] vite.config.ts**

```typescript
sentryTanstackStart({
  // ...
  autoInstrumentMiddleware: false,
}),
```

## [Tunnel Route](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.md#tunnel-route)

Available since: `v10.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)](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.md#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.

**\[typescript] vite.config.ts**

```typescript
sentryTanstackStart({
  tunnelRoute: true,
}),
```

### [Static path](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.md#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.

**\[typescript] vite.config.ts**

```typescript
sentryTanstackStart({
  tunnelRoute: "/monitor",
}),
```

### [Object form](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.md#object-form)

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

**\[typescript] vite.config.ts**

```typescript
sentryTanstackStart({
  tunnelRoute: {
    allowedDsns: ["___PUBLIC_DSN___"],
    path: "/monitor",
  },
}),
```

* **`allowedDsns`** — only envelopes targeting one of these DSNs are forwarded. If omitted or empty, the route falls back to the DSN of the active server-side Sentry SDK at runtime.
* **`path`** — the public route path. If omitted, an opaque path is generated (same behavior as `tunnelRoute: true`).

##### Setting \`tunnel\` in \`Sentry.init()\` overrides this option

If you also pass `tunnel` to `Sentry.init()`, the runtime option wins and the managed tunnel route is bypassed. The SDK logs a warning when this happens.

##### Opaque paths are not stable

When using `tunnelRoute: true` (or the object form without `path`), the generated path changes for each dev session and each production build. Don't hard-code it elsewhere in your app or infrastructure.