sentry-react-sdk

Configure Sentry React SDK error monitoring, tracing, and session replay.

Updated May 17, 2026
One-click install
npx skills add https://github.com/cenjie/skills --skill sentry-react-sdk-cenjie
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sentry-react-sdk
Source: https://github.com/cenjie/skills/tree/main/skills/sentry-react-sdk
Command: npx skills add https://github.com/cenjie/skills --skill sentry-react-sdk-cenjie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a complete, opinionated setup to add Sentry observability to React applications so teams can capture unhandled exceptions, user session context, navigation and API tracing, session replays, profiling, and structured logs without manual, piecemeal instrumentation.

Core Features & Use Cases

  • Error monitoring with React error boundaries and React 19+ createRoot hooks for global error capture.
  • Tracing for pageloads, navigations and HTTP requests with router-aware integrations for React Router (v5–v7) and TanStack Router.
  • Session Replay, logging, and optional browser profiling plus Redux integration to attach state and breadcrumbs to error reports.
  • Source map upload and bundler plugin guidance for Vite, webpack, and CRA to ensure readable stack traces in production.
  • Use case: set up Sentry in a Vite React SPA with Redux and react-router, enable tracesSampleRate and source map uploads, and verify events and replays appear in the Sentry dashboard.

Quick Start

Add a top-level instrument file that calls the Sentry init flow with your DSN, tracing and replay integrations, import it as the very first line of your app entry point, and configure the bundler plugin or sentry-cli to upload source maps.

Frequently Asked Questions about sentry-react-sdk

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Sentry error monitoring in a React application?

Configure Sentry error monitoring by creating a top-level instrument file that calls Sentry.init with your DSN, tracing, and replay integrations, then importing it as the first line in your app entry point to capture unhandled exceptions globally.

Does the Sentry React SDK support tracing with React Router and TanStack Router?

Yes, the Sentry React SDK supports tracing for pageloads, navigations, and HTTP requests with router-aware integrations for React Router v5 through v7 and TanStack Router to provide end-to-end frontend observability.

How do I upload source maps to Sentry for a Vite or webpack React app?

Upload source maps to Sentry by configuring the bundler plugin or sentry-cli in your Vite, webpack, or Create React App build process, ensuring readable stack traces for production errors.

Can I attach Redux state to Sentry error reports in a React SPA?

Yes, you can attach Redux state and breadcrumbs to Sentry error reports using the Redux integration, which connects your state management layer to the error monitoring setup for enhanced debugging context.

What is the best way to capture errors in React 19 using Sentry?

The best way to capture errors in React 19 is using Sentry's React error boundaries and createRoot hooks, which automatically capture unhandled exceptions and user session context without manual instrumentation.

Do I need a specific React version to use Sentry session replay and profiling?

You need React 16 or higher to use Sentry session replay, logging, and optional browser profiling, as the SDK applies to single-page apps and multi-page React setups across these versions.