Sentry React SDK
Skill Verified ActiveFull 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, Redux, Vite, and webpack.
To provide developers with a guided and automated way to integrate Sentry error tracking and performance monitoring into their React applications.
Features
- Automated Sentry SDK setup for React
- Project environment detection (React version, router, build tool)
- Guidance on error monitoring, tracing, session replay, logging, and profiling
- Integration with React Router (v5-v7) and TanStack Router
- Source map configuration guidance for readable stack traces
- Redux integration for enhanced context and breadcrumbs
Use Cases
- When asked to add Sentry to a React application.
- When setting up error monitoring, tracing, session replay, or profiling for React apps.
- When configuring Sentry for React Router (v5-v7) or TanStack Router.
- When needing to integrate Redux state with Sentry for better debugging context.
Non-Goals
- Setting up Sentry for React Native applications.
- Providing Sentry setup for React Router framework mode (directs to a different skill).
- Manual Sentry SDK configuration outside of the guided process.
Workflow
- Detect project setup (React version, router, state management, build tool).
- Recommend Sentry features based on detection results.
- Guide through SDK installation.
- Instruct on creating and configuring `instrument.ts` or equivalent.
- Guide on entry point setup and React version-specific error handling.
- Provide router integration steps.
- Guide on Redux integration and source map setup.
- Instruct on verifying setup via test events in Sentry.
- Suggest cross-linking to backend Sentry setup if applicable.
Prerequisites
- Node.js environment for installation and build tooling
- A React project to configure
- A Sentry DSN and potentially auth token for Sentry services
Installation
First, add the marketplace
/plugin marketplace add getsentry/sentry-for-ai/plugin install sentry-for-ai@sentry-plugin-marketplaceQuality Score
VerifiedTrust Signals
Similar Extensions
Sentry React Router Framework Sdk
100Full 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.
Sentry Next.js SDK Setup
99Full 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.
Sentry Tanstack Start Sdk
100Full 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.
Sentry Svelte Sdk
99Full Sentry SDK setup for Svelte and SvelteKit. Use when asked to "add Sentry to Svelte", "add Sentry to SvelteKit", "install @sentry/sveltekit", or configure error monitoring, tracing, session replay, or logging for Svelte or SvelteKit applications.
Sentry .NET SDK
99Full Sentry SDK setup for .NET. Use when asked to "add Sentry to .NET", "install Sentry for C#", or configure error monitoring, tracing, profiling, logging, or crons for ASP.NET Core, MAUI, WPF, WinForms, Blazor, Azure Functions, or any other .NET application.
Sentry Browser SDK Setup
99Full Sentry SDK setup for browser JavaScript. Use when asked to "add Sentry to a website", "install @sentry/browser", or configure error monitoring, tracing, session replay, or logging for vanilla JavaScript, jQuery, static sites, or WordPress.