sentry-react-router-framework-sdk

Q: How do I install sentry-react-router-framework-sdk?

Run npx skills add https://github.com/getsentry/sentry-for-ai --skill sentry-react-router-framework-sdk in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sentry-react-router-framework-sdk/ (personal) or .claude/skills/sentry-react-router-framework-sdk/ (project).

by getsentry OfficialDevOps & Cloud

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.

Installs: 1.8K
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/getsentry/sentry-for-ai --skill sentry-react-router-framework-sdk

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads sentry-react-router-framework-sdk automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

All Skills > SDK Setup > React Router Framework SDK

Sentry React Router Framework SDK

Opinionated wizard that scans your React Router Framework project and guides you through complete Sentry setup across client and server entry points.

Invoke This Skill When

User asks to "add Sentry to React Router Framework" or "set up Sentry in React Router v7 framework mode"
User wants to install or configure @sentry/react-router
User uses React Router framework entry files (entry.client.tsx, entry.server.tsx) and wants tracing/error capture
User asks about reactRouterTracingIntegration, sentryOnError, createSentryHandleRequest, or React Router wizard setup

Important: This SDK is currently beta. For React Router non-framework/data/declarative mode (v5/v6/v7), use sentry-react-sdk with @sentry/react integrations instead.

Phase 1: Detect

Run these commands to understand the project before making any recommendations:

# Detect React Router Framework indicators and versions
cat package.json | grep -E '"react-router"|"@react-router/"|"react-router-dev"|"react-router-serve"'

# Detect Sentry package choice
cat package.json | grep -E '"@sentry/react-router"|"@sentry/react"|"@sentry/profiling-node"'

# Check entry point visibility and server instrumentation files
ls entry.client.tsx entry.server.tsx instrument.server.mjs react-router.config.ts vite.config.ts 2>/dev/null

# Check if React Router files are still hidden (framework mode helper command available)
cat package.json | grep -E '"reveal"|react-router'

# Detect runtime startup scripts and import strategy
cat package.json | grep -E '"dev"|"start"|NODE_OPTIONS|--import'

# Detect optional logging/profile-related dependencies
cat package.json | grep -E '"pino"|"winston"|"@sentry/profiling-node"'

# Detect companion backend directories
ls ../backend ../server ../api 2>/dev/null
cat ../go.mod ../requirements.txt ../Gemfile ../pom.xml 2>/dev/null | head -3

What to determine:

Question	Impact
`@sentry/react-router` already installed?	Skip install and move to feature setup
Framework entry files exposed?	Need `npx react-router reveal` before manual config
Using `@sentry/react` instead?	This is likely non-framework routing; redirect to `sentry-react-sdk`
`react-router.config.ts` + Vite config present?	Source map upload and build-end hook setup path
`NODE_OPTIONS --import` available?	Preferred server instrumentation startup path
`@sentry/profiling-node` desired/available?	Enable server profiling integration
Backend directory found?	Trigger Phase 4 cross-link suggestion

Phase 2: Recommend

Present a concrete recommendation based on what you found. Do not ask open-ended questions — lead with a proposal:

Recommended (core coverage):

✅ Error Monitoring — always; captures client and server errors with framework hooks
✅ Tracing — recommended baseline in framework apps with client/server request flow
✅ Session Replay — recommended for user-facing applications

Optional (enhanced observability):

⚡ Profiling — server-side profiling with @sentry/profiling-node
⚡ Logs — structured Sentry.logger.* ingestion and correlation
⚡ User Feedback — in-app feedback widget/reporting flows

Recommendation logic:

Feature	Recommend when...
Error Monitoring	Always — non-negotiable baseline
Tracing	Usually yes in framework apps; route and request timing is high-value
Session Replay	User-facing product or difficult UX debugging
Profiling	Server performance investigations needed; Node runtime compatibility verified
Logs	Team wants log-search and trace correlation in Sentry
User Feedback	Product/support teams need direct in-app issue reports

Propose: "I recommend Error Monitoring + Tracing + Session Replay first. Want me to also enable Profiling, Logs, and User Feedback?"

Phase 3: Guide

Option 1: Wizard (Recommended)

You need to run this yourself — the wizard is interactive and may require browser login:
npx @sentry/wizard@latest -i reactRouter
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.

Once it finishes, continue at Verification.

If the user skips wizard setup, continue with manual setup below.

Option 2: Manual Setup

Install packages

npm install @sentry/react-router --save

If profiling is needed:

npm install @sentry/profiling-node --save

Expose framework entry files

npx react-router reveal

Configure client in `entry.client.tsx`

import * as Sentry from "@sentry/react-router";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  dataCollection: {
    // To disable sending user data and HTTP bodies, uncomment the lines below. For more info visit:
    // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#dataCollection
    // userInfo: false,
    // httpBodies: [],
  },
  integrations: [
    Sentry.reactRouterTracingIntegration(),
    Sentry.replayIntegration(),
    Sentry.feedbackIntegration({ colorScheme: "system" }),
  ],
  enableLogs: true,
  tracesSampleRate: 1.0,
  tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/],
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <HydratedRouter onError={Sentry.sentryOnError} />
    </StrictMode>,
  );
});

Configure server in `instrument.server.mjs`

import * as Sentry from "@sentry/react-router";
import { nodeProfilingIntegration } from "@sentry/profiling-node";

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  dataCollection: {
    // To disable sending user data and HTTP bodies, uncomment the lines below. For more info visit:
    // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#dataCollection
    // userInfo: false,
    // httpBodies: [],
  },
  enableLogs: true,
  integrations: [nodeProfilingIntegration()],
  tracesSampleRate: 1.0,
  profileSessionSampleRate: 1.0,
});

Wrap server handlers in `entry.server.tsx`

import * as Sentry from "@sentry/react-router";
import { createReadableStreamFromReadable } from "@react-router/node";
import { renderToPipeableStream } from "react-dom/server";
import { ServerRouter } from "react-router";

const handleRequest = Sentry.createSentryHandleRequest({
  ServerRouter,
  renderToPipeableStream,
  createReadableStreamFromReadable,
});

export default handleRequest;

export const handleError = Sentry.createSentryHandleError({
  logErrors: false,
});

For custom server logic, use wrapSentryHandleRequest, getMetaTagTransformer, and manual Sentry.captureException in your custom handleError.

Load server instrumentation on startup

Prefer NODE_OPTIONS --import:

{
  "scripts": {
    "dev": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev",
    "start": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router-serve ./build/server/index.js"
  }
}

Fallback for platforms where runtime flags are restricted:

import "./instrument.server.mjs";

This direct-import method can result in incomplete auto-instrumentation compared to --import.

Configure source maps

vite.config.ts:

import { reactRouter } from "@react-router/dev/vite";
import {
  sentryReactRouter,
  type SentryReactRouterBuildOptions,
} from "@sentry/react-router";
import { defineConfig } from "vite";

const sentryConfig: SentryReactRouterBuildOptions = {
  org: "___ORG_SLUG___",
  project: "___PROJECT_SLUG___",
  authToken: process.env.SENTRY_AUTH_TOKEN,
};

export default defineConfig((config) => {
  return {
    plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
  };
});

react-router.config.ts:

import type { Config } from "@react-router/dev/config";
import { sentryOnBuildEnd } from "@sentry/react-router";

export default {
  ssr: true,
  buildEnd: async ({ viteConfig, reactRouterConfig, buildManifest }) => {
    await sentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });
  },
} satisfies Config;

For Each Agreed Feature

Walk through features one at a time. Load the reference file, follow steps exactly, and verify before moving on:

Feature	Reference	Load when...
Error Monitoring	`${SKILL_ROOT}/references/error-monitoring.md`	Always
Tracing	`${SKILL_ROOT}/references/tracing.md`	Route/request performance visibility needed
Profiling	`${SKILL_ROOT}/references/profiling.md`	Server performance analysis needed
Session Replay	`${SKILL_ROOT}/references/session-replay.md`	User-facing app
Logs	`${SKILL_ROOT}/references/logging.md`	Structured logs/correlation needed
User Feedback	`${SKILL_ROOT}/references/user-feedback.md`	In-app feedback flows needed
Framework Features	`${SKILL_ROOT}/references/react-router-framework-features.md`	Entry files, wrappers, source maps, startup import strategy

For each feature: Read ${SKILL_ROOT}/references/<feature>.md, follow steps exactly, verify it works.

Configuration Reference

Key `Sentry.init()` options

Option	Type	Default	Notes
`dsn`	`string`	—	Required; SDK disabled when empty
`dataCollection`	`object`	—	Controls what data is collected (userInfo, cookies, httpHeaders, etc.)
`dataCollection.userInfo`	`boolean`	`true`	Includes IP-derived user context
`dataCollection.cookies`	`CollectBehavior`	`true`	Controls cookie collection and filtering
`dataCollection.httpHeaders`	`object`	`{ request: true, response: true }`	Controls HTTP header collection
`sendDefaultPii`	`boolean`	`false`	Deprecated: Use `dataCollection` instead; removed in v11
`integrations`	`Integration[]`	SDK defaults	Add tracing/replay/feedback/profiling integrations
`enableLogs`	`boolean`	`false`	Enables `Sentry.logger.*` ingestion
`tracesSampleRate`	`number`	—	Usually `1.0` in testing, lower in production
`tracePropagationTargets`	`(string	RegExp)[]`	SDK defaults
`replaysSessionSampleRate`	`number`	—	Fraction of all sessions recorded
`replaysOnErrorSampleRate`	`number`	—	Fraction of error sessions recorded
`profileSessionSampleRate`	`number`	—	Fraction of transactions profiled (server profiling)
`tunnel`	`string`	—	Optional ad-blocker bypass endpoint
`debug`	`boolean`	`false`	Verbose SDK diagnostics

Framework-specific APIs

API	Purpose
`reactRouterTracingIntegration()`	Client-side tracing integration for framework mode
`sentryOnError`	Hooks into React Router `HydratedRouter` error reporting
`createSentryHandleRequest(...)`	Server request wrapper for framework entry server
`createSentryHandleError(...)`	Server error handler wrapper
`wrapServerLoader(...)` / `wrapServerAction(...)`	Manual wrapping for server loaders/actions
`sentryReactRouter(...)`	Vite plugin for source maps/build integration
`sentryOnBuildEnd(...)`	React Router build-end hook for source map processing

Verification

Wizard-generated path

If wizard examples were generated, open /sentry-example-page and trigger test actions.

Manual error test

export async function loader() {
  throw new Error("My first Sentry error!");
}

Manual tracing test

import * as Sentry from "@sentry/react-router";

export async function loader() {
  return Sentry.startSpan(
    { op: "test", name: "My First Test Transaction" },
    () => {
      throw new Error("My first Sentry error!");
    },
  );
}

Logs test

Sentry.logger.info("User example action completed");
Sentry.logger.warn("Slow operation detected", { operation: "data_fetch", duration: 3500 });
Sentry.logger.error("Validation failed", { field: "email", reason: "Invalid email" });

Confirm in Sentry:

Issues: errors appear
Traces: transaction/span data appears
Profiles: profiles appear when profiling enabled
Replays: replay entries appear when enabled
Logs: log events appear when enableLogs: true
User Feedback: submissions appear when feedback enabled

Phase 4: Cross-Link

After completing React Router Framework setup:

Check whether the app is actually non-framework routing (v5/v6/v7 data/declarative with @sentry/react).
If yes, redirect to sentry-react-sdk for non-framework routing integrations.

Then check companion backend coverage:

ls ../backend ../server ../api ../go ../python 2>/dev/null
cat ../go.mod ../requirements.txt ../pyproject.toml ../Gemfile ../pom.xml 2>/dev/null | head -5

Backend detected	Suggest skill
Go	`sentry-go-sdk`
Python	`sentry-python-sdk`
Ruby	`sentry-ruby-sdk`
Node backend services	`sentry-node-sdk`
Java services	Use `@sentry/java` docs

Troubleshooting

Issue	Solution
`entry.client.tsx` / `entry.server.tsx` missing	Run `npx react-router reveal` first
Client errors missing	Ensure `HydratedRouter` includes `onError={Sentry.sentryOnError}`
Server errors missing	Use `createSentryHandleRequest` and `createSentryHandleError` wrappers
Custom server handlers bypass Sentry	Use `wrapSentryHandleRequest` and manual `captureException` in custom `handleError`
Source maps not uploaded	Verify `sentryReactRouter` plugin config and `sentryOnBuildEnd` hook
`SENTRY_AUTH_TOKEN` undefined in Vite config	Load env vars in config or use `.env.sentry-build-plugin`
Incomplete server auto-instrumentation	Prefer `NODE_OPTIONS='--import ./instrument.server.mjs'` startup
Profiling data missing	Confirm `@sentry/profiling-node` installed and `nodeProfilingIntegration` enabled
Running unsupported Node auto-instrumentation version	Use instrumentation API/manual wrappers as documented
Non-framework app configured with `@sentry/react-router`	Switch to `sentry-react-sdk` + `@sentry/react` for v5/v6/v7 non-framework routes

FAQ

What does the sentry-react-router-framework-sdk skill do?

How do I install sentry-react-router-framework-sdk?

Run npx skills add https://github.com/getsentry/sentry-for-ai --skill sentry-react-router-framework-sdk in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sentry-react-router-framework-sdk/ (personal) or .claude/skills/sentry-react-router-framework-sdk/ (project).

Which AI agents can use sentry-react-router-framework-sdk?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is sentry-react-router-framework-sdk safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains sentry-react-router-framework-sdk?

It is published by getsentry in getsentry/sentry-for-ai, and it is an official skill from the maker of the technology it covers. It has 1,845 recorded installs.

More from getsentry/sentry-for-ai

View all →

sentry-fix-issues

getsentry/sentry-for-ai

Find and fix issues from Sentry using MCP. Use when asked to fix Sentry errors, debug production issues, investigate exceptions, or resolve bugs reported in Sentry. Methodically analyzes stack traces, breadcrumbs, traces, and context to identify root causes.

OfficialDevOps & Cloud10K installs

sentry-react-native-sdk

getsentry/sentry-for-ai

Full Sentry SDK setup for React Native and Expo. Use when asked to "add Sentry to React Native", "install @sentry/react-native", "setup Sentry in Expo", or configure error monitoring, tracing, profiling, session replay, or logging for React Native applications. Supports Expo managed, Expo bare, and vanilla React Native.

OfficialDevOps & Cloud4.1K installs

sentry-create-alert

getsentry/sentry-for-ai

Create Sentry alerts using the workflow engine API. Use when asked to create alerts, set up notifications, configure issue priority alerts, or build workflow automations. Supports email, Slack, PagerDuty, Discord, and other notification actions.

OfficialDevOps & Cloud4.1K installs

sentry-nextjs-sdk

getsentry/sentry-for-ai

Full 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.

OfficialDevOps & Cloud3.6K installs

sentry-sdk-setup

getsentry/sentry-for-ai

Set up Sentry in any language or framework. Detects the user's platform and loads the right SDK skill. Use when asked to add Sentry, install an SDK, or set up error monitoring in a project.

OfficialDevOps & Cloud3.6K installs

sentry-workflow

getsentry/sentry-for-ai

Keep Sentry SDKs up to date. Use when asked to upgrade the Sentry SDK across major versions, migrate SDK versions, or fix deprecated APIs.

OfficialDevOps & Cloud3.6K installs

Popular devops & cloud skills

View category →

microsoft-foundry

microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and resources end to end. USE FOR: foundry, azd ai agent, azd provision/deploy, hosted agent scaffold/develop/run/deploy/troubleshoot, prompt agent create, managed harness agent create, GitHub Copilot harness agent, create agent, update agent, add tool to agent, invoke agent, agent insights, evaluate agent, batch eval, continuous eval, continuous monitoring, agent CI/CD, optimize prompt, improve prompt, optimize agent instructions, Agent Optimizer scaffold, dataset curation from traces, deploy model, model fine-tuning (SFT/DPO/RFT), Foundry project, RBAC, role assignment, permissions, quota, capacity, region, deployment failure, AI Services, create Foundry resource, knowledge index, customize deployment, onboard, availability, training-data, grader, distillation, large file upload. DO NOT USE FOR: Azure Functions, App Service, general Azure deploy (use azure-deploy), general Azure prep (use azure

OfficialDevOps & Cloud579.1K installs

azure-diagnostics

microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, container app 503 or target port mismatch, troubleshoot functions, function telemetry missing or stopped after a config/connection-string change, troubleshoot AKS, VM RDP, Linux SSH, VM black screen, can't connect to VM, reset VM password, NSG or firewall blocking, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource health, root cause of errors, troubleshoot event hubs, troubleshoot service bus, messaging SDK error, AMQP connection failure, message lock lost, lock renewal during long-running processing, service bus dead letter.

OfficialDevOps & Cloud569.8K installs

azure-prepare

microsoft/azure-skills

Prepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wants to use azd as the deployment tool, or the project already has an azure.yaml file. DO NOT USE FOR: non-azd deployments, Python App Service code-only deploys (use python-appservice-deploy), or cross-cloud migration (use azure-cloud-migrate). WHEN: prepare app for azd, create azure.yaml, set up azd infrastructure, modernize app for Azure with azd, deploy with azd, function app, timer trigger, service bus trigger, event-driven function, managed identity, generate Bicep, generate Terraform, create and deploy to Azure.

OfficialDevOps & Cloud569K installs

azure-ai

microsoft/azure-skills

Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector search, hybrid search, semantic search, speech-to-text, text-to-speech, transcribe, OCR, convert text to speech.

OfficialDevOps & Cloud568.8K installs

azure-deploy

microsoft/azure-skills

Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "push to production", "push to cloud", "go live", "ship it", "bicep deploy", "terraform apply", "publish to Azure", "launch on Azure". DO NOT USE WHEN: "create and deploy", "build and deploy", "create a new app", "set up infrastructure", "create and deploy to Azure using Terraform" — use azure-prepare for these.

OfficialDevOps & Cloud568.6K installs

azure-validate

microsoft/azure-skills

Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity permissions, and prerequisites before deploying. WHEN: validate my app, check deployment readiness, run preflight checks, verify configuration, check if ready to deploy, validate azure.yaml, validate Bicep, test before deploying, troubleshoot deployment errors, validate Azure Functions, validate function app, validate serverless deployment, verify RBAC roles, check role assignments, review managed identity permissions, what-if analysis, validate Container Apps deployment.

OfficialDevOps & Cloud568K installs

sentry-react-router-framework-sdk

Install

Install

Describe the task

Review the result

SKILL.md

Sentry React Router Framework SDK

Invoke This Skill When

Phase 1: Detect

Phase 2: Recommend

Phase 3: Guide

Option 1: Wizard (Recommended)

Option 2: Manual Setup

Install packages

Expose framework entry files

Configure client in entry.client.tsx

Configure server in instrument.server.mjs

Wrap server handlers in entry.server.tsx

Load server instrumentation on startup

Configure source maps

For Each Agreed Feature

Configuration Reference

Key Sentry.init() options

Framework-specific APIs

Verification

Wizard-generated path

Manual error test

Manual tracing test

Logs test

Phase 4: Cross-Link

Troubleshooting

FAQ

More from getsentry/sentry-for-ai

Popular devops & cloud skills

Configure client in `entry.client.tsx`

Configure server in `instrument.server.mjs`

Wrap server handlers in `entry.server.tsx`

Key `Sentry.init()` options