sentry-tanstack-start-sdk

Q: How do I install sentry-tanstack-start-sdk?

Run npx skills add https://github.com/getsentry/sentry-for-ai --skill sentry-tanstack-start-sdk in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sentry-tanstack-start-sdk/ (personal) or .claude/skills/sentry-tanstack-start-sdk/ (project).

by getsentry OfficialDevOps & Cloud

Full Sentry SDK setup for TanStack Start React. Use when asked to "add Sentry to TanStack Start", "install @sentry/tanstackstart-react", or configure error monitoring, tracing, session replay, logs, or user feedback in a TanStack Start React app.

Installs: 1.9K
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/getsentry/sentry-for-ai --skill sentry-tanstack-start-sdk

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads sentry-tanstack-start-sdk automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

All Skills > SDK Setup > TanStack Start React SDK

Sentry TanStack Start React SDK

Opinionated wizard that scans your TanStack Start React project and guides you through complete Sentry setup for browser and server runtimes.

Invoke This Skill When

User asks to "add Sentry to TanStack Start" or "set up Sentry" in a TanStack Start React app
User wants to install or configure @sentry/tanstackstart-react
User wants error monitoring, tracing, session replay, logs, or user feedback for TanStack Start React
User asks about sentryTanstackStart, wrapFetchWithSentry, instrument.server.mjs, or TanStack Start middleware instrumentation

Note: This SDK is currently alpha and documented as compatible with TanStack Start 1.0 RC. Always verify against docs.sentry.io/platforms/javascript/guides/tanstackstart-react/ before implementing.

Phase 1: Detect

Run these commands to understand the project before making any recommendations:

# Detect TanStack Start / Router and existing Sentry
cat package.json | grep -E '"@tanstack/react-start"|"@tanstack/react-router"|"@sentry/tanstackstart-react"'

# Check if Sentry is already present
cat package.json | grep '"@sentry/'

# Detect key files used by the TanStack Start setup
ls src/router.tsx src/start.ts src/server.ts instrument.server.mjs vite.config.ts vite.config.js 2>/dev/null

# Check whether source map upload credentials are configured
cat .env .env.local .env.sentry-build-plugin 2>/dev/null | grep "SENTRY_AUTH_TOKEN"

# Detect deployment hints in scripts
cat package.json | grep -E '"dev"|"build"|"start"|NODE_OPTIONS|--import'

# Detect logging libraries
cat package.json | grep -E '"pino"|"winston"|"loglevel"'

# Detect companion backend directories
ls ../backend ../server ../api 2>/dev/null
cat ../go.mod ../requirements.txt ../Gemfile ../pom.xml 2>/dev/null | head -3

What to determine:

Question	Impact
`@tanstack/react-start` present?	Confirms this skill is the right setup path
`@sentry/tanstackstart-react` already installed?	Skip install and go to feature tuning
`src/router.tsx` exists?	Client-side `Sentry.init` placement
`src/start.ts` exists?	Global middleware setup for server-side errors
`src/server.ts` exists?	Server entry instrumentation placement
`instrument.server.mjs` exists?	Runtime startup instrumentation path
`vite.config.ts` exists?	Add `sentryTanstackStart` plugin and source maps
`SENTRY_AUTH_TOKEN` configured?	Source map upload readiness
Backend directory found?	Trigger Phase 4 cross-link suggestion

Phase 2: Recommend

Present a concrete recommendation based on what you found. Do not ask open-ended questions — lead with a proposal:

Recommended (core coverage):

✅ Error Monitoring — always; captures unhandled client and server errors
✅ Tracing — high-value for request and route timing across browser and server
✅ Session Replay — recommended for user-facing apps

Optional (enhanced observability):

⚡ Logs — recommend when structured log search and log-to-trace correlation are needed
⚡ User Feedback — recommend when product teams want in-app issue reports

Recommendation logic:

Feature	Recommend when...
Error Monitoring	Always — non-negotiable baseline
Tracing	Usually yes for TanStack Start; route + fetch instrumentation gives immediate value
Session Replay	User-facing app, login flows, checkout flows, or hard-to-reproduce UX bugs
Logs	Existing logging strategy, support workflow, or trace/log correlation needs
User Feedback	Team wants direct user reports without leaving the app

Propose: "I recommend Error Monitoring + Tracing + Session Replay. Want me to also enable Logs and User Feedback?"

Phase 3: Guide

Install

npm install @sentry/tanstackstart-react --save

Configure Client-Side Sentry in `src/router.tsx`

Initialize Sentry inside the router factory and gate it to the browser:

import * as Sentry from "@sentry/tanstackstart-react";
import { createRouter } from "@tanstack/react-router";

export const getRouter = () => {
  const router = createRouter();

  if (!router.isServer) {
    Sentry.init({
      dsn: "___PUBLIC_DSN___",
      dataCollection: {
        // userInfo: false,
        // httpBodies: [],
      },

      integrations: [
        Sentry.tanstackRouterBrowserTracingIntegration(router),
        Sentry.replayIntegration(),
        Sentry.feedbackIntegration({
          colorScheme: "system",
        }),
      ],

      enableLogs: true,
      tracesSampleRate: 1.0,
      replaysSessionSampleRate: 0.1,
      replaysOnErrorSampleRate: 1.0,
    });
  }

  return router;
};

Configure Server-Side Sentry in `instrument.server.mjs`

Create instrument.server.mjs in project root:

import * as Sentry from "@sentry/tanstackstart-react";

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  dataCollection: {
    // To disable sending user data and HTTP bodies, uncomment the lines below. For more info visit:
    // https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/configuration/options/#dataCollection
    // userInfo: false,
    // httpBodies: [],
  },
  enableLogs: true,
  tracesSampleRate: 1.0,
});

Configure Vite Plugin in `vite.config.ts`

sentryTanstackStart should be the last plugin:

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

export default defineConfig({
  plugins: [
    tanstackStart(),
    sentryTanstackStart({
      org: "___ORG_SLUG___",
      project: "___PROJECT_SLUG___",
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
});

If the token is stored in .env, load it with loadEnv in the Vite config before passing it to the plugin.

Instrument Server Entry Point in `src/server.ts`

Wrap the fetch handler with wrapFetchWithSentry:

import { wrapFetchWithSentry } from "@sentry/tanstackstart-react";
import handler, { createServerEntry } from "@tanstack/react-start/server-entry";

export default createServerEntry(
  wrapFetchWithSentry({
    fetch(request: Request) {
      return handler.fetch(request);
    },
  }),
);

Add Global Server Middleware in `src/start.ts`

These middleware capture server-side request and function errors:

import {
  sentryGlobalFunctionMiddleware,
  sentryGlobalRequestMiddleware,
} from "@sentry/tanstackstart-react";
import { createStart } from "@tanstack/react-start";

export const startInstance = createStart(() => {
  return {
    requestMiddleware: [sentryGlobalRequestMiddleware],
    functionMiddleware: [sentryGlobalFunctionMiddleware],
  };
});

Sentry middleware should be first in each array.

Runtime Startup Patterns

Choose one runtime method:

Runtime pattern	Use when...	Notes
`--import` flag	You can control Node startup flags	Preferred for production monitoring
Direct import in `src/server.ts`	Host restricts startup flags (for example serverless hosts)	Limits instrumentation to native Node APIs

--import examples:

{
  "scripts": {
    "dev": "NODE_OPTIONS='--import ./instrument.server.mjs' vite dev --port 3000",
    "build": "vite build && cp instrument.server.mjs .output/server",
    "start": "node --import ./.output/server/instrument.server.mjs .output/server/index.mjs"
  }
}

Direct import fallback (top of src/server.ts):

import "../instrument.server.mjs";

For Each Agreed Feature

Walk through features one at a time. Load the reference file, follow steps exactly, and verify before moving on:

Feature	Reference	Load when...
Error Monitoring	`${SKILL_ROOT}/references/error-monitoring.md`	Always
Tracing	`${SKILL_ROOT}/references/tracing.md`	Route/API performance visibility needed
Session Replay	`${SKILL_ROOT}/references/session-replay.md`	User-facing app
Logs	`${SKILL_ROOT}/references/logging.md`	Structured logs and correlation needed
User Feedback	`${SKILL_ROOT}/references/user-feedback.md`	In-app feedback collection needed
TanStack Start Features	`${SKILL_ROOT}/references/tanstackstart-features.md`	Server entry, Vite plugin, source maps, runtime startup

For each feature: Read ${SKILL_ROOT}/references/<feature>.md, follow steps exactly, verify it works.

Configuration Reference

Key `Sentry.init()` Options

Option	Type	Default	Notes
`dsn`	`string`	—	Required; SDK is disabled when empty
`dataCollection`	`object`	conservative unless set	Fine-grained control over auto-collected categories (`userInfo`, `cookies`, `httpHeaders`, `httpBodies`, `queryParams`, `genAI`). When omitted, the SDK falls back to `sendDefaultPii` (default `false`). Passing the object — even `{}` — flips unset categories to their permissive defaults; opt out per category.
`integrations`	`Integration[]`	SDK defaults	Include TanStack Router tracing, replay, feedback as needed
`enableLogs`	`boolean`	`false`	Enables `Sentry.logger.*` APIs
`tracesSampleRate`	`number`	—	`1.0` in development, lower in production
`replaysSessionSampleRate`	`number`	—	Fraction of all sessions recorded
`replaysOnErrorSampleRate`	`number`	—	Fraction of error sessions recorded
`tunnel`	`string`	—	Optional ad-blocker bypass endpoint
`debug`	`boolean`	`false`	SDK diagnostic logging

TanStack Start-Specific APIs

API	Purpose
`tanstackRouterBrowserTracingIntegration(router)`	Browser navigation tracing
`wrapFetchWithSentry(...)`	Server request tracing + error capture on fetch handler
`sentryGlobalRequestMiddleware`	Captures request-level server errors
`sentryGlobalFunctionMiddleware`	Captures server function errors
`sentryTanstackStart({...})`	Vite plugin for source maps and middleware instrumentation

Verification

Trigger test events to confirm Sentry receives data.

Issues Test (Frontend)

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

Tracing Test (Frontend + API Route)

<button
  type="button"
  onClick={async () => {
    await Sentry.startSpan({ name: "Example Frontend Span", op: "test" }, async () => {
      const res = await fetch("/api/sentry-example");
      if (!res.ok) {
        throw new Error("Sentry Example Frontend Error");
      }
    });
  }}
>
  Break the world
</button>

Logs Test

Sentry.logger.info("User example action completed");
Sentry.logger.warn("Slow operation detected", { operation: "data_fetch", duration: 3500 });
Sentry.logger.error("Validation failed", { field: "email", reason: "Invalid email" });

Confirm in Sentry:

Issues: frontend/server errors appear
Traces: browser and server spans appear
Replays: session replay appears when enabled
Logs: log lines appear when enableLogs: true
User Feedback: submissions appear when feedback integration is enabled

Phase 4: Cross-Link

After completing TanStack Start setup, check whether a companion backend exists without Sentry:

ls ../backend ../server ../api ../go ../python 2>/dev/null
cat ../go.mod ../requirements.txt ../pyproject.toml ../Gemfile ../pom.xml 2>/dev/null | head -5

If a backend exists without Sentry configured, suggest the matching skill:

Backend detected	Suggest skill
Go (`go.mod`)	`sentry-go-sdk`
Python (`requirements.txt`, `pyproject.toml`)	`sentry-python-sdk`
Ruby (`Gemfile`)	`sentry-ruby-sdk`
Java (`pom.xml`, `build.gradle`)	Use `@sentry/java` docs
Node.js backend services	`sentry-node-sdk`

Troubleshooting

Issue	Solution
Events not appearing	Set `debug: true`, verify DSN, and ensure client/server init files both run
No server traces	Confirm `src/server.ts` uses `wrapFetchWithSentry` and runtime loads `instrument.server.mjs`
Server errors missing from route handlers	Ensure `sentryGlobalRequestMiddleware` and `sentryGlobalFunctionMiddleware` are first in arrays
Source maps not resolving	Verify `SENTRY_AUTH_TOKEN`, `org`, and `project` in `sentryTanstackStart` config
`SENTRY_AUTH_TOKEN` undefined in Vite config	Use `loadEnv(mode, process.cwd(), "")` or `.env.sentry-build-plugin`
Replay not recording	Ensure `replayIntegration()` is in `integrations` and sample rates are non-zero
Feedback widget not visible	Confirm `feedbackIntegration()` is configured and check CSS z-index conflicts
Logs missing in Sentry	Set `enableLogs: true` and use `Sentry.logger.*` APIs
Direct-import setup misses library spans	Prefer `--import` startup when possible; direct import supports native Node instrumentation only
SSR rendering exceptions not auto-captured	Capture manually with `Sentry.captureException` in error boundaries / fallback handlers

FAQ

What does the sentry-tanstack-start-sdk skill do?

How do I install sentry-tanstack-start-sdk?

Run npx skills add https://github.com/getsentry/sentry-for-ai --skill sentry-tanstack-start-sdk in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sentry-tanstack-start-sdk/ (personal) or .claude/skills/sentry-tanstack-start-sdk/ (project).

Which AI agents can use sentry-tanstack-start-sdk?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is sentry-tanstack-start-sdk safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains sentry-tanstack-start-sdk?

It is published by getsentry in getsentry/sentry-for-ai, and it is an official skill from the maker of the technology it covers. It has 1,921 recorded installs.

More from getsentry/sentry-for-ai

View all →

sentry-fix-issues

getsentry/sentry-for-ai

Find and fix issues from Sentry using MCP. Use when asked to fix Sentry errors, debug production issues, investigate exceptions, or resolve bugs reported in Sentry. Methodically analyzes stack traces, breadcrumbs, traces, and context to identify root causes.

OfficialDevOps & Cloud10K installs

sentry-react-native-sdk

getsentry/sentry-for-ai

Full Sentry SDK setup for React Native and Expo. Use when asked to "add Sentry to React Native", "install @sentry/react-native", "setup Sentry in Expo", or configure error monitoring, tracing, profiling, session replay, or logging for React Native applications. Supports Expo managed, Expo bare, and vanilla React Native.

OfficialDevOps & Cloud4.1K installs

sentry-create-alert

getsentry/sentry-for-ai

Create Sentry alerts using the workflow engine API. Use when asked to create alerts, set up notifications, configure issue priority alerts, or build workflow automations. Supports email, Slack, PagerDuty, Discord, and other notification actions.

OfficialDevOps & Cloud4.1K installs

sentry-nextjs-sdk

getsentry/sentry-for-ai

Full Sentry SDK setup for Next.js. Use when asked to "add Sentry to Next.js", "install @sentry/nextjs", or configure error monitoring, tracing, session replay, logging, profiling, AI monitoring, or crons for Next.js applications. Supports Next.js 13+ with App Router and Pages Router.

OfficialDevOps & Cloud3.6K installs

sentry-sdk-setup

getsentry/sentry-for-ai

Set up Sentry in any language or framework. Detects the user's platform and loads the right SDK skill. Use when asked to add Sentry, install an SDK, or set up error monitoring in a project.

OfficialDevOps & Cloud3.6K installs

sentry-workflow

getsentry/sentry-for-ai

Keep Sentry SDKs up to date. Use when asked to upgrade the Sentry SDK across major versions, migrate SDK versions, or fix deprecated APIs.

OfficialDevOps & Cloud3.6K installs

Popular devops & cloud skills

View category →

microsoft-foundry

microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and resources end to end. USE FOR: foundry, azd ai agent, azd provision/deploy, hosted agent scaffold/develop/run/deploy/troubleshoot, prompt agent create, managed harness agent create, GitHub Copilot harness agent, create agent, update agent, add tool to agent, invoke agent, agent insights, evaluate agent, batch eval, continuous eval, continuous monitoring, agent CI/CD, optimize prompt, improve prompt, optimize agent instructions, Agent Optimizer scaffold, dataset curation from traces, deploy model, model fine-tuning (SFT/DPO/RFT), Foundry project, RBAC, role assignment, permissions, quota, capacity, region, deployment failure, AI Services, create Foundry resource, knowledge index, customize deployment, onboard, availability, training-data, grader, distillation, large file upload. DO NOT USE FOR: Azure Functions, App Service, general Azure deploy (use azure-deploy), general Azure prep (use azure

OfficialDevOps & Cloud579.1K installs

azure-diagnostics

microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, container app 503 or target port mismatch, troubleshoot functions, function telemetry missing or stopped after a config/connection-string change, troubleshoot AKS, VM RDP, Linux SSH, VM black screen, can't connect to VM, reset VM password, NSG or firewall blocking, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource health, root cause of errors, troubleshoot event hubs, troubleshoot service bus, messaging SDK error, AMQP connection failure, message lock lost, lock renewal during long-running processing, service bus dead letter.

OfficialDevOps & Cloud569.8K installs

azure-prepare

microsoft/azure-skills

Prepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wants to use azd as the deployment tool, or the project already has an azure.yaml file. DO NOT USE FOR: non-azd deployments, Python App Service code-only deploys (use python-appservice-deploy), or cross-cloud migration (use azure-cloud-migrate). WHEN: prepare app for azd, create azure.yaml, set up azd infrastructure, modernize app for Azure with azd, deploy with azd, function app, timer trigger, service bus trigger, event-driven function, managed identity, generate Bicep, generate Terraform, create and deploy to Azure.

OfficialDevOps & Cloud569K installs

azure-ai

microsoft/azure-skills

Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector search, hybrid search, semantic search, speech-to-text, text-to-speech, transcribe, OCR, convert text to speech.

OfficialDevOps & Cloud568.8K installs

azure-deploy

microsoft/azure-skills

Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "push to production", "push to cloud", "go live", "ship it", "bicep deploy", "terraform apply", "publish to Azure", "launch on Azure". DO NOT USE WHEN: "create and deploy", "build and deploy", "create a new app", "set up infrastructure", "create and deploy to Azure using Terraform" — use azure-prepare for these.

OfficialDevOps & Cloud568.6K installs

azure-validate

microsoft/azure-skills

Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity permissions, and prerequisites before deploying. WHEN: validate my app, check deployment readiness, run preflight checks, verify configuration, check if ready to deploy, validate azure.yaml, validate Bicep, test before deploying, troubleshoot deployment errors, validate Azure Functions, validate function app, validate serverless deployment, verify RBAC roles, check role assignments, review managed identity permissions, what-if analysis, validate Container Apps deployment.

OfficialDevOps & Cloud568K installs

sentry-tanstack-start-sdk

Install

Install

Describe the task

Review the result

SKILL.md

Sentry TanStack Start React SDK

Invoke This Skill When

Phase 1: Detect

Phase 2: Recommend

Phase 3: Guide

Install

Configure Client-Side Sentry in src/router.tsx

Configure Server-Side Sentry in instrument.server.mjs

Configure Vite Plugin in vite.config.ts

Instrument Server Entry Point in src/server.ts

Add Global Server Middleware in src/start.ts

Runtime Startup Patterns

For Each Agreed Feature

Configuration Reference

Key Sentry.init() Options

TanStack Start-Specific APIs

Verification

Issues Test (Frontend)

Tracing Test (Frontend + API Route)

Logs Test

Phase 4: Cross-Link

Troubleshooting

FAQ

More from getsentry/sentry-for-ai

Popular devops & cloud skills

Configure Client-Side Sentry in `src/router.tsx`

Configure Server-Side Sentry in `instrument.server.mjs`

Configure Vite Plugin in `vite.config.ts`

Instrument Server Entry Point in `src/server.ts`

Add Global Server Middleware in `src/start.ts`

Key `Sentry.init()` Options