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 in your project directory to automatically configure Sentry in your TanStack Start React application.

The command guides you through setup and asks which optional Sentry features you want to enable beyond error monitoring.

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

The sentry init command 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 project files and manifests to understand your TanStack Start React app structure, including monorepos. It also respects AI instruction files such as CLAUDE.md, AGENTS.md, and .cursorrules.
  • Detects your framework — identifies TanStack Start and selects the @sentry/tanstackstart-react SDK.
  • Fetches official Sentry docs — uses the current Sentry documentation as the source of truth when generating integration code.
  • 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 based on your project structure.
  • Verifies the integration — re-reads modified files after writing to confirm Sentry was 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").