sentry-react-router-framework-sdk

Name: sentry-react-router-framework-sdk
Author: getsentry

242stars30forks

How to install sentry-react-router-framework-sdk?

getsentry/sentry-for-ai/sentry-react-router-framework-sdk

$npx -y skills add getsentry/sentry-for-ai --skill sentry-react-router-framework-sdk

Installs into the current project.

Summary

Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.

Files · 1

View on GitHub

SKILL.md

1	> [All Skills](../../SKILL_TREE.md) > [SDK Setup](../sentry-sdk-setup/SKILL.md) > React Router Framework SDK
2
3	# Sentry React Router Framework SDK
4
5	Opinionated wizard that scans your React Router Framework project and guides you through complete Sentry setup across client and server entry points.
6
7	## Invoke This Skill When
8
9	- User asks to "add Sentry to React Router Framework" or "set up Sentry in React Router v7 framework mode"
10	- User wants to install or configure `@sentry/react-router`
11	- User uses React Router framework entry files (`entry.client.tsx`, `entry.server.tsx`) and wants tracing/error capture
12	- User asks about `reactRouterTracingIntegration`, `sentryOnError`, `createSentryHandleRequest`, or React Router wizard setup
13
14	> Important: This SDK is currently beta.
15	> For React Router non-framework/data/declarative mode (v5/v6/v7), use `sentry-react-sdk` with `@sentry/react` integrations instead.
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 React Router Framework indicators and versions
25	cat package.json \| grep -E '"react-router"\|"@react-router/"\|"react-router-dev"\|"react-router-serve"'
26
27	# Detect Sentry package choice
28	cat package.json \| grep -E '"@sentry/react-router"\|"@sentry/react"\|"@sentry/profiling-node"'
29
30	# Check entry point visibility and server instrumentation files
31	ls entry.client.tsx entry.server.tsx instrument.server.mjs react-router.config.ts vite.config.ts 2>/dev/null
32
33	# Check if React Router files are still hidden (framework mode helper command available)
34	cat package.json \| grep -E '"reveal"\|react-router'
35
36	# Detect runtime startup scripts and import strategy
37	cat package.json \| grep -E '"dev"\|"start"\|NODE_OPTIONS\|--import'
38
39	# Detect optional logging/profile-related dependencies
40	cat package.json \| grep -E '"pino"\|"winston"\|"@sentry/profiling-node"'
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	\| `@sentry/react-router` already installed? \| Skip install and move to feature setup \|
52	\| Framework entry files exposed? \| Need `npx react-router reveal` before manual config \|
53	\| Using `@sentry/react` instead? \| This is likely non-framework routing; redirect to `sentry-react-sdk` \|
54	\| `react-router.config.ts` + Vite config present? \| Source map upload and build-end hook setup path \|
55	\| `NODE_OPTIONS --import` available? \| Preferred server instrumentation startup path \|
56	\| `@sentry/profiling-node` desired/available? \| Enable server profiling integration \|
57	\| Backend directory found? \| Trigger Phase 4 cross-link suggestion \|
58
59	---
60
61	## Phase 2: Recommend
62
63	Present a concrete recommendation based on what you found. Do not ask open-ended questions — lead with a proposal:
64
65	Recommended (core coverage):
66	- ✅ Error Monitoring — always; captures client and server errors with framework hooks
67	- ✅ Tracing — recommended baseline in framework apps with client/server request flow
68	- ✅ Session Replay — recommended for user-facing applications
69
70	Optional (enhanced observability):
71	- ⚡ Profiling — server-side profiling with `@sentry/profiling-node`
72	- ⚡ Logs — structured `Sentry.logger.*` ingestion and correlation
73	- ⚡ User Feedback — in-app feedback widget/reporting flows
74
75	Recommendation logic:
76
77	\| Feature \| Recommend when... \|
78	\|---------\|------------------\|
79	\| Error Monitoring \| Always — non-negotiable baseline \|
80	\| Tracing \| Usually yes in framework apps; route and request timing is high-value \|
81	\| Session Replay \| User-facing product or difficult UX debugging \|
82	\| Profiling \| Server performance investigations needed; Node runtime compatibility verified \|
83	\| Logs \| Team wants log-search and trace correlation in Sentry \|
84	\| User Feedback \| Product/support teams need direct in-app issue reports \|
85
86	Propose: "I recommend Error Monitoring + Tracing + Session Replay first. Want me to also enable Profiling, Logs, and User Feedback?"
87
88	---
89
90	## Phase 3: Guide
91
92	### Option 1: Wizard (Recommended)
93
94	> You need to run this yourself — the wizard is interactive and may require browser login:
95	>
96	> ```bash
97	> npx @sentry/wizard@latest -i reactRouter
98	> ```
99	>
100	> It installs `@sentry/react-router`, exposes React Router entry files, creates instrumentation files, updates root error handling, configures source map upload, and adds verification examples.
101	>
102	> Once it finishes, continue at [Verification](#verification).
103
104	If the u

People who liked this also viewed

6 picks

Type

sentry-react-router-framework-sdk

242stars30forks

View on GitHub

How to install sentry-react-router-framework-sdk?

getsentry/sentry-for-ai/sentry-react-router-framework-sdk

$npx -y skills add getsentry/sentry-for-ai --skill sentry-react-router-framework-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) > React Router Framework SDK
2
3	# Sentry React Router Framework SDK
4
5	Opinionated wizard that scans your React Router Framework project and guides you through complete Sentry setup across client and server entry points.
6
7	## Invoke This Skill When
8
9	- User asks to "add Sentry to React Router Framework" or "set up Sentry in React Router v7 framework mode"
10	- User wants to install or configure `@sentry/react-router`
11	- User uses React Router framework entry files (`entry.client.tsx`, `entry.server.tsx`) and wants tracing/error capture
12	- User asks about `reactRouterTracingIntegration`, `sentryOnError`, `createSentryHandleRequest`, or React Router wizard setup
13
14	> Important: This SDK is currently beta.
15	> For React Router non-framework/data/declarative mode (v5/v6/v7), use `sentry-react-sdk` with `@sentry/react` integrations instead.
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 React Router Framework indicators and versions
25	cat package.json \| grep -E '"react-router"\|"@react-router/"\|"react-router-dev"\|"react-router-serve"'
26
27	# Detect Sentry package choice
28	cat package.json \| grep -E '"@sentry/react-router"\|"@sentry/react"\|"@sentry/profiling-node"'
29
30	# Check entry point visibility and server instrumentation files
31	ls entry.client.tsx entry.server.tsx instrument.server.mjs react-router.config.ts vite.config.ts 2>/dev/null
32
33	# Check if React Router files are still hidden (framework mode helper command available)
34	cat package.json \| grep -E '"reveal"\|react-router'
35
36	# Detect runtime startup scripts and import strategy
37	cat package.json \| grep -E '"dev"\|"start"\|NODE_OPTIONS\|--import'
38
39	# Detect optional logging/profile-related dependencies
40	cat package.json \| grep -E '"pino"\|"winston"\|"@sentry/profiling-node"'
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	\| `@sentry/react-router` already installed? \| Skip install and move to feature setup \|
52	\| Framework entry files exposed? \| Need `npx react-router reveal` before manual config \|
53	\| Using `@sentry/react` instead? \| This is likely non-framework routing; redirect to `sentry-react-sdk` \|
54	\| `react-router.config.ts` + Vite config present? \| Source map upload and build-end hook setup path \|
55	\| `NODE_OPTIONS --import` available? \| Preferred server instrumentation startup path \|
56	\| `@sentry/profiling-node` desired/available? \| Enable server profiling integration \|
57	\| Backend directory found? \| Trigger Phase 4 cross-link suggestion \|
58
59	---
60
61	## Phase 2: Recommend
62
63	Present a concrete recommendation based on what you found. Do not ask open-ended questions — lead with a proposal:
64
65	Recommended (core coverage):
66	- ✅ Error Monitoring — always; captures client and server errors with framework hooks
67	- ✅ Tracing — recommended baseline in framework apps with client/server request flow
68	- ✅ Session Replay — recommended for user-facing applications
69
70	Optional (enhanced observability):
71	- ⚡ Profiling — server-side profiling with `@sentry/profiling-node`
72	- ⚡ Logs — structured `Sentry.logger.*` ingestion and correlation
73	- ⚡ User Feedback — in-app feedback widget/reporting flows
74
75	Recommendation logic:
76
77	\| Feature \| Recommend when... \|
78	\|---------\|------------------\|
79	\| Error Monitoring \| Always — non-negotiable baseline \|
80	\| Tracing \| Usually yes in framework apps; route and request timing is high-value \|
81	\| Session Replay \| User-facing product or difficult UX debugging \|
82	\| Profiling \| Server performance investigations needed; Node runtime compatibility verified \|
83	\| Logs \| Team wants log-search and trace correlation in Sentry \|
84	\| User Feedback \| Product/support teams need direct in-app issue reports \|
85
86	Propose: "I recommend Error Monitoring + Tracing + Session Replay first. Want me to also enable Profiling, Logs, and User Feedback?"
87
88	---
89
90	## Phase 3: Guide
91
92	### Option 1: Wizard (Recommended)
93
94	> You need to run this yourself — the wizard is interactive and may require browser login:
95	>
96	> ```bash
97	> npx @sentry/wizard@latest -i reactRouter
98	> ```
99	>
100	> It installs `@sentry/react-router`, exposes React Router entry files, creates instrumentation files, updates root error handling, configures source map upload, and adds verification examples.
101	>
102	> Once it finishes, continue at [Verification](#verification).
103
104	If the u

People who liked this also viewed

6 picks

Type