getsentry · onurtemizkan · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -147,6 +147,7 @@ jobs:
           - NextJS-14
           - NextJS-15
           - Remix
+          - React-Router
           - React-Native
           - Sveltekit-Hooks
           - Sveltekit-Tracing

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 - feat(sveltekit): Add support for SDK setup with `instrumentation.server.ts` ([#1077](https://github.com/getsentry/sentry-wizard/pull/1077))
+- feat: Add wizard for react-router framework mode ([#1076](https://github.com/getsentry/sentry-wizard/pull/1076))
 
   This release adds support for setting up the SvelteKit SDK in SvelteKit versions 2.31.0 or higher.
 

diff --git a/e2e-tests/test-applications/react-router-test-app/.gitignore b/e2e-tests/test-applications/react-router-test-app/.gitignore
@@ -0,0 +1,106 @@
+# Dependencies
+node_modules/
+/.pnp
+.pnp.*
+
+# Build outputs
+/build
+/dist
+/.react-router
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# Temporary folders
+tmp/
+temp/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
diff --git a/e2e-tests/test-applications/react-router-test-app/app/root.tsx b/e2e-tests/test-applications/react-router-test-app/app/root.tsx
@@ -0,0 +1,43 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <div className="App">
+          <nav>
+            <ul>
+              <li>
+                <a href="/">Home</a>
+              </li>
+              <li>
+                <a href="/about">About</a>
+              </li>
+              <li>
+                <a href="/contact">Contact</a>
+              </li>
+            </ul>
+          </nav>
+
+          <main>
+            <Outlet />
+          </main>
+        </div>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
diff --git a/e2e-tests/test-applications/react-router-test-app/app/routes.ts b/e2e-tests/test-applications/react-router-test-app/app/routes.ts
@@ -0,0 +1,8 @@
+import type { RouteConfig } from "@react-router/dev/routes";
+import { index, route } from "@react-router/dev/routes";
+
+export default [
+  index("routes/home.tsx"),
+  route("/about", "routes/about.tsx"),
+  route("/contact", "routes/contact.tsx"),
+] satisfies RouteConfig;
diff --git a/e2e-tests/test-applications/react-router-test-app/app/routes/about.tsx b/e2e-tests/test-applications/react-router-test-app/app/routes/about.tsx
@@ -0,0 +1,8 @@
+export default function About() {
+  return (
+    <div>
+      <h1>About</h1>
+      <p>This is a test application for React Router.</p>
+    </div>
+  );
+}
diff --git a/e2e-tests/test-applications/react-router-test-app/app/routes/contact.tsx b/e2e-tests/test-applications/react-router-test-app/app/routes/contact.tsx
@@ -0,0 +1,8 @@
+export default function Contact() {
+  return (
+    <div>
+      <h1>Contact</h1>
+      <p>Contact us for more information.</p>
+    </div>
+  );
+}
diff --git a/e2e-tests/test-applications/react-router-test-app/app/routes/home.tsx b/e2e-tests/test-applications/react-router-test-app/app/routes/home.tsx
@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <p>Welcome to the React Router test app!</p>
+    </div>
+  );
+}
diff --git a/e2e-tests/test-applications/react-router-test-app/package.json b/e2e-tests/test-applications/react-router-test-app/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "react-router-test-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "dependencies": {
+    "@react-router/dev": "^7.8.2",
+    "@react-router/node": "^7.8.2",
+    "@react-router/serve": "^7.8.2",
+    "isbot": "^4.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^7.8.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.2",
+    "vite": "^6.0.1"
+  }
+}
diff --git a/e2e-tests/test-applications/react-router-test-app/react-router.config.ts b/e2e-tests/test-applications/react-router-test-app/react-router.config.ts
@@ -0,0 +1,5 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  // Config options
+} satisfies Config;
diff --git a/e2e-tests/test-applications/react-router-test-app/tsconfig.json b/e2e-tests/test-applications/react-router-test-app/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES6"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // React Router v7 specific options
+    "types": ["@react-router/dev"]
+  }
+}
diff --git a/e2e-tests/test-applications/react-router-test-app/vite.config.ts b/e2e-tests/test-applications/react-router-test-app/vite.config.ts
@@ -0,0 +1,6 @@
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [reactRouter()],
+});
diff --git a/e2e-tests/tests/help-message.test.ts b/e2e-tests/tests/help-message.test.ts
@@ -30,7 +30,8 @@ describe('--help command', () => {
         -i, --integration         Choose the integration to setup
                                   env: SENTRY_WIZARD_INTEGRATION
            [choices: "reactNative", "flutter", "ios", "android", "cordova", "angular",
-                     "electron", "nextjs", "nuxt", "remix", "sveltekit", "sourcemaps"]
+                    "electron", "nextjs", "nuxt", "remix", "reactRouter", "sveltekit",
+                                                                         "sourcemaps"]
         -p, --platform            Choose platform(s)
                                   env: SENTRY_WIZARD_PLATFORM
                                                    [array] [choices: "ios", "android"]