sentry-tanstack-start-sdk

Name: sentry-tanstack-start-sdk
Author: getsentry

242stars30forks

How to install sentry-tanstack-start-sdk?

getsentry/sentry-for-ai/sentry-tanstack-start-sdk

$npx -y skills add getsentry/sentry-for-ai --skill sentry-tanstack-start-sdk

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	> [All Skills](../../SKILL_TREE.md) > [SDK Setup](../sentry-sdk-setup/SKILL.md) > TanStack Start React SDK
2
3	# Sentry TanStack Start React SDK
4
5	Opinionated wizard that scans your TanStack Start React project and guides you through complete Sentry setup for browser and server runtimes.
6
7	## Invoke This Skill When
8
9	- User asks to "add Sentry to TanStack Start" or "set up Sentry" in a TanStack Start React app
10	- User wants to install or configure `@sentry/tanstackstart-react`
11	- User wants error monitoring, tracing, session replay, logs, or user feedback for TanStack Start React
12	- User asks about `sentryTanstackStart`, `wrapFetchWithSentry`, `instrument.server.mjs`, or TanStack Start middleware instrumentation
13
14	> Note: This SDK is currently alpha and documented as compatible with TanStack Start `1.0 RC`.
15	> Always verify against [docs.sentry.io/platforms/javascript/guides/tanstackstart-react/](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/) before implementing.
16
17	---
18
19	## Phase 1: Detect
20
21	Run these commands to understand the project before making any recommendations:
22
23	```bash
24	# Detect TanStack Start / Router and existing Sentry
25	cat package.json \| grep -E '"@tanstack/react-start"\|"@tanstack/react-router"\|"@sentry/tanstackstart-react"'
26
27	# Check if Sentry is already present
28	cat package.json \| grep '"@sentry/'
29
30	# Detect key files used by the TanStack Start setup
31	ls src/router.tsx src/start.ts src/server.ts instrument.server.mjs vite.config.ts vite.config.js 2>/dev/null
32
33	# Check whether source map upload credentials are configured
34	cat .env .env.local .env.sentry-build-plugin 2>/dev/null \| grep "SENTRY_AUTH_TOKEN"
35
36	# Detect deployment hints in scripts
37	cat package.json \| grep -E '"dev"\|"build"\|"start"\|NODE_OPTIONS\|--import'
38
39	# Detect logging libraries
40	cat package.json \| grep -E '"pino"\|"winston"\|"loglevel"'
41
42	# Detect companion backend directories
43	ls ../backend ../server ../api 2>/dev/null
44	cat ../go.mod ../requirements.txt ../Gemfile ../pom.xml 2>/dev/null \| head -3
45	```
46
47	What to determine:
48
49	\| Question \| Impact \|
50	\|----------\|--------\|
51	\| `@tanstack/react-start` present? \| Confirms this skill is the right setup path \|
52	\| `@sentry/tanstackstart-react` already installed? \| Skip install and go to feature tuning \|
53	\| `src/router.tsx` exists? \| Client-side `Sentry.init` placement \|
54	\| `src/start.ts` exists? \| Global middleware setup for server-side errors \|
55	\| `src/server.ts` exists? \| Server entry instrumentation placement \|
56	\| `instrument.server.mjs` exists? \| Runtime startup instrumentation path \|
57	\| `vite.config.ts` exists? \| Add `sentryTanstackStart` plugin and source maps \|
58	\| `SENTRY_AUTH_TOKEN` configured? \| Source map upload readiness \|
59	\| Backend directory found? \| Trigger Phase 4 cross-link suggestion \|
60
61	---
62
63	## Phase 2: Recommend
64
65	Present a concrete recommendation based on what you found. Do not ask open-ended questions — lead with a proposal:
66
67	Recommended (core coverage):
68	- ✅ Error Monitoring — always; captures unhandled client and server errors
69	- ✅ Tracing — high-value for request and route timing across browser and server
70	- ✅ Session Replay — recommended for user-facing apps
71
72	Optional (enhanced observability):
73	- ⚡ Logs — recommend when structured log search and log-to-trace correlation are needed
74	- ⚡ User Feedback — recommend when product teams want in-app issue reports
75
76	Recommendation logic:
77
78	\| Feature \| Recommend when... \|
79	\|---------\|------------------\|
80	\| Error Monitoring \| Always — non-negotiable baseline \|
81	\| Tracing \| Usually yes for TanStack Start; route + fetch instrumentation gives immediate value \|
82	\| Session Replay \| User-facing app, login flows, checkout flows, or hard-to-reproduce UX bugs \|
83	\| Logs \| Existing logging strategy, support workflow, or trace/log correlation needs \|
84	\| User Feedback \| Team wants direct user reports without leaving the app \|
85
86	Propose: "I recommend Error Monitoring + Tracing + Session Replay. Want me to also enable Logs and User Feedback?"
87
88	---
89
90	## Phase 3: Guide
91
92	### Install
93
94	```bash
95	npm install @sentry/tanstackstart-react --save
96	```
97
98	### Configure Client-Side Sentry in `src/router.tsx`
99
100	Initialize Sentry inside the router factory and gate it to the browser:
101
102	```tsx
103	import * as Sentry from "@sentry/tanstackstart-react";
104	import { createRouter } from "@tanstack/react-router";
105
106	export const getRouter = () => {
107	const router = createRouter();
108
109	if (!router.isServer) {
110	Sentry.init({
111	dsn: "___PUBLIC_DSN___",
112	dataCollection: {
113	// userInfo: false,
114	// httpBodies: [],
115	},
116
117	integrations: [

People who liked this also viewed

6 picks

Type

sentry-tanstack-start-sdk

242stars30forks

View on GitHub

How to install sentry-tanstack-start-sdk?

getsentry/sentry-for-ai/sentry-tanstack-start-sdk

$npx -y skills add getsentry/sentry-for-ai --skill sentry-tanstack-start-sdk

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	> [All Skills](../../SKILL_TREE.md) > [SDK Setup](../sentry-sdk-setup/SKILL.md) > TanStack Start React SDK
2
3	# Sentry TanStack Start React SDK
4
5	Opinionated wizard that scans your TanStack Start React project and guides you through complete Sentry setup for browser and server runtimes.
6
7	## Invoke This Skill When
8
9	- User asks to "add Sentry to TanStack Start" or "set up Sentry" in a TanStack Start React app
10	- User wants to install or configure `@sentry/tanstackstart-react`
11	- User wants error monitoring, tracing, session replay, logs, or user feedback for TanStack Start React
12	- User asks about `sentryTanstackStart`, `wrapFetchWithSentry`, `instrument.server.mjs`, or TanStack Start middleware instrumentation
13
14	> Note: This SDK is currently alpha and documented as compatible with TanStack Start `1.0 RC`.
15	> Always verify against [docs.sentry.io/platforms/javascript/guides/tanstackstart-react/](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/) before implementing.
16
17	---
18
19	## Phase 1: Detect
20
21	Run these commands to understand the project before making any recommendations:
22
23	```bash
24	# Detect TanStack Start / Router and existing Sentry
25	cat package.json \| grep -E '"@tanstack/react-start"\|"@tanstack/react-router"\|"@sentry/tanstackstart-react"'
26
27	# Check if Sentry is already present
28	cat package.json \| grep '"@sentry/'
29
30	# Detect key files used by the TanStack Start setup
31	ls src/router.tsx src/start.ts src/server.ts instrument.server.mjs vite.config.ts vite.config.js 2>/dev/null
32
33	# Check whether source map upload credentials are configured
34	cat .env .env.local .env.sentry-build-plugin 2>/dev/null \| grep "SENTRY_AUTH_TOKEN"
35
36	# Detect deployment hints in scripts
37	cat package.json \| grep -E '"dev"\|"build"\|"start"\|NODE_OPTIONS\|--import'
38
39	# Detect logging libraries
40	cat package.json \| grep -E '"pino"\|"winston"\|"loglevel"'
41
42	# Detect companion backend directories
43	ls ../backend ../server ../api 2>/dev/null
44	cat ../go.mod ../requirements.txt ../Gemfile ../pom.xml 2>/dev/null \| head -3
45	```
46
47	What to determine:
48
49	\| Question \| Impact \|
50	\|----------\|--------\|
51	\| `@tanstack/react-start` present? \| Confirms this skill is the right setup path \|
52	\| `@sentry/tanstackstart-react` already installed? \| Skip install and go to feature tuning \|
53	\| `src/router.tsx` exists? \| Client-side `Sentry.init` placement \|
54	\| `src/start.ts` exists? \| Global middleware setup for server-side errors \|
55	\| `src/server.ts` exists? \| Server entry instrumentation placement \|
56	\| `instrument.server.mjs` exists? \| Runtime startup instrumentation path \|
57	\| `vite.config.ts` exists? \| Add `sentryTanstackStart` plugin and source maps \|
58	\| `SENTRY_AUTH_TOKEN` configured? \| Source map upload readiness \|
59	\| Backend directory found? \| Trigger Phase 4 cross-link suggestion \|
60
61	---
62
63	## Phase 2: Recommend
64
65	Present a concrete recommendation based on what you found. Do not ask open-ended questions — lead with a proposal:
66
67	Recommended (core coverage):
68	- ✅ Error Monitoring — always; captures unhandled client and server errors
69	- ✅ Tracing — high-value for request and route timing across browser and server
70	- ✅ Session Replay — recommended for user-facing apps
71
72	Optional (enhanced observability):
73	- ⚡ Logs — recommend when structured log search and log-to-trace correlation are needed
74	- ⚡ User Feedback — recommend when product teams want in-app issue reports
75
76	Recommendation logic:
77
78	\| Feature \| Recommend when... \|
79	\|---------\|------------------\|
80	\| Error Monitoring \| Always — non-negotiable baseline \|
81	\| Tracing \| Usually yes for TanStack Start; route + fetch instrumentation gives immediate value \|
82	\| Session Replay \| User-facing app, login flows, checkout flows, or hard-to-reproduce UX bugs \|
83	\| Logs \| Existing logging strategy, support workflow, or trace/log correlation needs \|
84	\| User Feedback \| Team wants direct user reports without leaving the app \|
85
86	Propose: "I recommend Error Monitoring + Tracing + Session Replay. Want me to also enable Logs and User Feedback?"
87
88	---
89
90	## Phase 3: Guide
91
92	### Install
93
94	```bash
95	npm install @sentry/tanstackstart-react --save
96	```
97
98	### Configure Client-Side Sentry in `src/router.tsx`
99
100	Initialize Sentry inside the router factory and gate it to the browser:
101
102	```tsx
103	import * as Sentry from "@sentry/tanstackstart-react";
104	import { createRouter } from "@tanstack/react-router";
105
106	export const getRouter = () => {
107	const router = createRouter();
108
109	if (!router.isServer) {
110	Sentry.init({
111	dsn: "___PUBLIC_DSN___",
112	dataCollection: {
113	// userInfo: false,
114	// httpBodies: [],
115	},
116
117	integrations: [

People who liked this also viewed

6 picks

Type