TanStack Start React

Learn how to set up and configure Sentry in your TanStack Start React application using the installation wizard, capturing your first errors, and viewing them in Sentry.

Agent-Assisted Setup
Use curl to download, read and follow: https://skills.sentry.dev/sentry-tanstack-start-sdk/SKILL.md
Your agent will set up Sentry in your TanStack Start app automatically. Works with Cursor, Claude Code, Codex, and more.View docs ↗
Install the full skills package

Run this in your project to add Sentry agent skills. See the installation docs for more details.

Copied
npx @sentry/dotagents add getsentry/sentry-for-ai --name sentry-tanstack-start-sdk

You need:

Run the Sentry init command to automatically configure Sentry in your TanStack Start React application:

Copied
npx sentry@latest init
How does the wizard work?

The Sentry init wizard is AI-powered — it analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does:

  • Analyzes your project — reads your project's files and manifests to understand its structure, including monorepos. It also respects any AI instruction files you have (CLAUDE.md, AGENTS.md, .cursorrules, etc.).
  • Detects your framework — identifies TanStack Start and selects the right SDK (@sentry/tanstackstart-react)
  • Fetches official Sentry docs — uses the current Sentry documentation as the source of truth when generating your integration code, so you always get up-to-date setup
  • Installs dependencies — adds @sentry/tanstackstart-react using your project's package manager
  • Creates and modifies files — sets up client-side and server-side initialization, the Vite plugin for source maps, the server entry point, and middleware — all adapted to your project's structure
  • Verifies the integration — re-reads the modified files after writing to confirm Sentry was correctly integrated

For full details on what each file does, see the Manual Setup guide.

The wizard will have prompted you to select which features to enable. Select the same options here to see the relevant verification steps:

Add a test button to one of your pages to trigger an error:

Copied
<button
  type="button"
  onClick={() => {
    throw new Error("Sentry Test Error");
  }}
>
  Break the world
</button>;

Start your dev server and click the button.

Errors — Open Issues

You should see "Sentry Test Error" with a full stack trace pointing to your source code.

Tracing — Open Traces

You should see page load and navigation traces. Learn more about custom spans.

Session Replay — Open Replays

Watch a video-like recording of your session, including the moment the error occurred. Learn more about Session Replay configuration.

Logs — Open Logs NEW

See structured log entries from your application. You can send logs from anywhere:

Copied
Sentry.logger.info("User action", { userId: "123" });
Sentry.logger.warn("Slow response", { duration: 5000 });
Sentry.logger.error("Operation failed", { reason: "timeout" });

Learn more about Logs configuration.

Are you having problems setting up the SDK?

You've successfully integrated Sentry into your TanStack Start React application! Here's what to explore next:

Previous
Welcome to Sentry
Next
Manual Setup
Was this helpful?
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").