sentry-react-sdk

Name: sentry-react-sdk
Author: getsentry

242stars30forks

How to install sentry-react-sdk?

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

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

Installs into the current project.

Summary

Full Sentry SDK setup for React. Use when asked to "add Sentry to React", "install @sentry/react", or configure error monitoring, tracing, session replay, profiling, or logging for React applications. Supports React 16+, React Router v5-v7 non-framework mode, TanStack Router, Red

Files · 1

View on GitHub

SKILL.md

1	> [All Skills](../../SKILL_TREE.md) > [SDK Setup](../sentry-sdk-setup/SKILL.md) > React SDK
2
3	# Sentry React SDK
4
5	Opinionated wizard that scans your React project and guides you through complete Sentry setup.
6
7	## Invoke This Skill When
8
9	- User asks to "add Sentry to React" or "set up Sentry" in a React app
10	- User wants error monitoring, tracing, session replay, profiling, or logging in React
11	- User mentions `@sentry/react`, React Sentry SDK, or Sentry error boundaries
12	- User wants to monitor React Router v5/v6/v7 non-framework navigation, Redux state, or component performance
13
14	If project is React Router Framework mode using `@sentry/react-router`, use `sentry-react-router-framework-sdk` instead of this skill.
15
16	> Note: SDK versions and APIs below reflect current Sentry docs at time of writing (`@sentry/react` ≥8.0.0).
17	> Always verify against [docs.sentry.io/platforms/javascript/guides/react/](https://docs.sentry.io/platforms/javascript/guides/react/) before implementing.
18
19	---
20
21	## Phase 1: Detect
22
23	Run these commands to understand the project before making any recommendations:
24
25	```bash
26	# Detect React version
27	cat package.json \| grep -E '"react"\|"react-dom"'
28
29	# Check for existing Sentry
30	cat package.json \| grep '"@sentry/'
31
32	# Detect router and framework mode hints
33	cat package.json \| grep -E '"react-router-dom"\|"react-router"\|"@react-router/"\|"@tanstack/react-router"\|"@sentry/react-router"'
34
35	# Detect state management
36	cat package.json \| grep -E '"redux"\|"@reduxjs/toolkit"'
37
38	# Detect build tool
39	ls vite.config.ts vite.config.js webpack.config.js craco.config.js 2>/dev/null
40	cat package.json \| grep -E '"vite"\|"react-scripts"\|"webpack"'
41
42	# Detect logging libraries
43	cat package.json \| grep -E '"pino"\|"winston"\|"loglevel"'
44
45	# Check for companion backend in adjacent directories
46	ls ../backend ../server ../api 2>/dev/null
47	cat ../go.mod ../requirements.txt ../Gemfile ../pom.xml 2>/dev/null \| head -3
48	```
49
50	What to determine:
51
52	\| Question \| Impact \|
53	\|----------\|--------\|
54	\| React 19+? \| Use `reactErrorHandler()` hook pattern \|
55	\| React <19? \| Use `Sentry.ErrorBoundary` \|
56	\| `@sentry/react` already present? \| Skip install, go straight to feature config \|
57	\| React Router Framework mode indicators (`@sentry/react-router`, `@react-router/*`)? \| Use `sentry-react-router-framework-sdk` \|
58	\| `react-router-dom` v5 / v6 / v7? \| Determines which router integration to use \|
59	\| `@tanstack/react-router`? \| Use `tanstackRouterBrowserTracingIntegration()` \|
60	\| Redux in use? \| Recommend `createReduxEnhancer()` \|
61	\| Vite detected? \| Source maps via `sentryVitePlugin` \|
62	\| CRA (`react-scripts`)? \| Source maps via `@sentry/webpack-plugin` in CRACO \|
63	\| Backend directory found? \| Trigger Phase 4 cross-link suggestion \|
64
65	---
66
67	## Phase 2: Recommend
68
69	Present a concrete recommendation based on what you found. Don't ask open-ended questions — lead with a proposal:
70
71	Recommended (core coverage):
72	- ✅ Error Monitoring — always; captures unhandled errors, React error boundaries, React 19 hooks
73	- ✅ Tracing — React SPAs benefit from page load, navigation, and API call tracing
74	- ✅ Session Replay — recommended for user-facing apps; records sessions around errors
75
76	Optional (enhanced observability):
77	- ⚡ Logging — structured logs via `Sentry.logger.*`; recommend when structured log search is needed
78	- ⚡ Profiling — JS Self-Profiling API (⚠️ experimental; requires cross-origin isolation headers)
79
80	Recommendation logic:
81
82	\| Feature \| Recommend when... \|
83	\|---------\|------------------\|
84	\| Error Monitoring \| Always — non-negotiable baseline \|
85	\| Tracing \| Always for React SPAs — page load + navigation spans are high-value \|
86	\| Session Replay \| User-facing app, login flows, or checkout pages \|
87	\| Logging \| App needs structured log search or log-to-trace correlation \|
88	\| Profiling \| Performance-critical app; server sends `Document-Policy: js-profiling` header \|
89
90	React-specific extras:
91	- React 19 detected → set up `reactErrorHandler()` on `createRoot`
92	- React Router v5/v6/v7 non-framework detected → configure matching router integration (see Phase 3)
93	- React Router Framework mode detected → switch to `sentry-react-router-framework-sdk`
94	- Redux detected → add `createReduxEnhancer()` to Redux store
95	- Vite detected → configure `sentryVitePlugin` for source maps (essential for readable stack traces)
96
97	Propose: "I recommend setting up Error Monitoring + Tracing + Session Replay. Want me to also add Logging or Profiling?"
98
99	---
100
101	## Phase 3: Guide
102
103	### Install
104
105	```bash
106	npm install @sentry/react --save
107	```
108
109	###

People who liked this also viewed

6 picks

Type

sentry-react-sdk

242stars30forks

View on GitHub

How to install sentry-react-sdk?

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

$npx -y skills add getsentry/sentry-for-ai --skill sentry-react-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 SDK
2
3	# Sentry React SDK
4
5	Opinionated wizard that scans your React project and guides you through complete Sentry setup.
6
7	## Invoke This Skill When
8
9	- User asks to "add Sentry to React" or "set up Sentry" in a React app
10	- User wants error monitoring, tracing, session replay, profiling, or logging in React
11	- User mentions `@sentry/react`, React Sentry SDK, or Sentry error boundaries
12	- User wants to monitor React Router v5/v6/v7 non-framework navigation, Redux state, or component performance
13
14	If project is React Router Framework mode using `@sentry/react-router`, use `sentry-react-router-framework-sdk` instead of this skill.
15
16	> Note: SDK versions and APIs below reflect current Sentry docs at time of writing (`@sentry/react` ≥8.0.0).
17	> Always verify against [docs.sentry.io/platforms/javascript/guides/react/](https://docs.sentry.io/platforms/javascript/guides/react/) before implementing.
18
19	---
20
21	## Phase 1: Detect
22
23	Run these commands to understand the project before making any recommendations:
24
25	```bash
26	# Detect React version
27	cat package.json \| grep -E '"react"\|"react-dom"'
28
29	# Check for existing Sentry
30	cat package.json \| grep '"@sentry/'
31
32	# Detect router and framework mode hints
33	cat package.json \| grep -E '"react-router-dom"\|"react-router"\|"@react-router/"\|"@tanstack/react-router"\|"@sentry/react-router"'
34
35	# Detect state management
36	cat package.json \| grep -E '"redux"\|"@reduxjs/toolkit"'
37
38	# Detect build tool
39	ls vite.config.ts vite.config.js webpack.config.js craco.config.js 2>/dev/null
40	cat package.json \| grep -E '"vite"\|"react-scripts"\|"webpack"'
41
42	# Detect logging libraries
43	cat package.json \| grep -E '"pino"\|"winston"\|"loglevel"'
44
45	# Check for companion backend in adjacent directories
46	ls ../backend ../server ../api 2>/dev/null
47	cat ../go.mod ../requirements.txt ../Gemfile ../pom.xml 2>/dev/null \| head -3
48	```
49
50	What to determine:
51
52	\| Question \| Impact \|
53	\|----------\|--------\|
54	\| React 19+? \| Use `reactErrorHandler()` hook pattern \|
55	\| React <19? \| Use `Sentry.ErrorBoundary` \|
56	\| `@sentry/react` already present? \| Skip install, go straight to feature config \|
57	\| React Router Framework mode indicators (`@sentry/react-router`, `@react-router/*`)? \| Use `sentry-react-router-framework-sdk` \|
58	\| `react-router-dom` v5 / v6 / v7? \| Determines which router integration to use \|
59	\| `@tanstack/react-router`? \| Use `tanstackRouterBrowserTracingIntegration()` \|
60	\| Redux in use? \| Recommend `createReduxEnhancer()` \|
61	\| Vite detected? \| Source maps via `sentryVitePlugin` \|
62	\| CRA (`react-scripts`)? \| Source maps via `@sentry/webpack-plugin` in CRACO \|
63	\| Backend directory found? \| Trigger Phase 4 cross-link suggestion \|
64
65	---
66
67	## Phase 2: Recommend
68
69	Present a concrete recommendation based on what you found. Don't ask open-ended questions — lead with a proposal:
70
71	Recommended (core coverage):
72	- ✅ Error Monitoring — always; captures unhandled errors, React error boundaries, React 19 hooks
73	- ✅ Tracing — React SPAs benefit from page load, navigation, and API call tracing
74	- ✅ Session Replay — recommended for user-facing apps; records sessions around errors
75
76	Optional (enhanced observability):
77	- ⚡ Logging — structured logs via `Sentry.logger.*`; recommend when structured log search is needed
78	- ⚡ Profiling — JS Self-Profiling API (⚠️ experimental; requires cross-origin isolation headers)
79
80	Recommendation logic:
81
82	\| Feature \| Recommend when... \|
83	\|---------\|------------------\|
84	\| Error Monitoring \| Always — non-negotiable baseline \|
85	\| Tracing \| Always for React SPAs — page load + navigation spans are high-value \|
86	\| Session Replay \| User-facing app, login flows, or checkout pages \|
87	\| Logging \| App needs structured log search or log-to-trace correlation \|
88	\| Profiling \| Performance-critical app; server sends `Document-Policy: js-profiling` header \|
89
90	React-specific extras:
91	- React 19 detected → set up `reactErrorHandler()` on `createRoot`
92	- React Router v5/v6/v7 non-framework detected → configure matching router integration (see Phase 3)
93	- React Router Framework mode detected → switch to `sentry-react-router-framework-sdk`
94	- Redux detected → add `createReduxEnhancer()` to Redux store
95	- Vite detected → configure `sentryVitePlugin` for source maps (essential for readable stack traces)
96
97	Propose: "I recommend setting up Error Monitoring + Tracing + Session Replay. Want me to also add Logging or Profiling?"
98
99	---
100
101	## Phase 3: Guide
102
103	### Install
104
105	```bash
106	npm install @sentry/react --save
107	```
108
109	###

People who liked this also viewed

6 picks

Type