@sentry/wizard 6.6.1 → 6.8.0

package/dist/src/react-router/react-router-wizard.js

@@ -0,0 +1,254 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runReactRouterWizard = void 0;
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+const prompts_1 = __importDefault(require("@clack/prompts"));
+const chalk_1 = __importDefault(require("chalk"));
+const telemetry_1 = require("../telemetry");
+const clack_1 = require("../utils/clack");
+const mcp_config_1 = require("../utils/clack/mcp-config");
+const package_json_1 = require("../utils/package-json");
+const debug_1 = require("../utils/debug");
+const sdk_example_1 = require("./sdk-example");
+const sdk_setup_1 = require("./sdk-setup");
+const templates_1 = require("./templates");
+async function runReactRouterWizard(options) {
+    return (0, telemetry_1.withTelemetry)({
+        enabled: options.telemetryEnabled,
+        integration: 'reactRouter',
+        wizardOptions: options,
+    }, () => runReactRouterWizardWithTelemetry(options));
+}
+exports.runReactRouterWizard = runReactRouterWizard;
+async function runReactRouterWizardWithTelemetry(options) {
+    (0, clack_1.printWelcome)({
+        wizardName: 'Sentry React Router Wizard',
+        promoCode: options.promoCode,
+    });
+    const packageJson = await (0, clack_1.getPackageDotJson)();
+    if (!packageJson) {
+        prompts_1.default.log.error('Could not find a package.json file in the current directory');
+        return;
+    }
+    const typeScriptDetected = (0, clack_1.isUsingTypeScript)();
+    if (!(0, sdk_setup_1.isReactRouterV7)(packageJson)) {
+        prompts_1.default.log.error('This wizard requires React Router v7. Please upgrade your React Router version to v7.0.0 or higher.\n\nFor upgrade instructions, visit: https://react-router.dev/upgrade/v7');
+        return;
+    }
+    await (0, clack_1.confirmContinueIfNoOrDirtyGitRepo)({
+        ignoreGitChanges: options.ignoreGitChanges,
+        cwd: undefined,
+    });
+    const sentryAlreadyInstalled = (0, package_json_1.hasPackageInstalled)('@sentry/react-router', packageJson);
+    const projectData = await (0, clack_1.getOrAskForProjectData)(options, 'javascript-react-router');
+    if (projectData.spotlight) {
+        prompts_1.default.log.warn('Spotlight mode is not yet supported for React Router.');
+        prompts_1.default.log.info('Spotlight is currently only available for Next.js.');
+        await (0, clack_1.abort)('Exiting wizard', 0);
+        return;
+    }
+    const { selectedProject, authToken, selfHosted, sentryUrl } = projectData;
+    await (0, clack_1.installPackage)({
+        packageName: '@sentry/react-router',
+        alreadyInstalled: sentryAlreadyInstalled,
+    });
+    const featureSelection = await (0, clack_1.featureSelectionPrompt)([
+        {
+            id: 'performance',
+            prompt: `Do you want to enable ${chalk_1.default.bold('Tracing')} to track the performance of your application?`,
+            enabledHint: 'recommended',
+        },
+        {
+            id: 'replay',
+            prompt: `Do you want to enable ${chalk_1.default.bold('Session Replay')} to get a video-like reproduction of errors during a user session?`,
+            enabledHint: 'recommended, but increases bundle size',
+        },
+        {
+            id: 'logs',
+            prompt: `Do you want to enable ${chalk_1.default.bold('Logs')} to send your application logs to Sentry?`,
+            enabledHint: 'recommended',
+        },
+        {
+            id: 'profiling',
+            prompt: `Do you want to enable ${chalk_1.default.bold('Profiling')} to track application performance in detail?`,
+            enabledHint: 'recommended for production debugging',
+        },
+    ]);
+    if (featureSelection.profiling) {
+        const profilingAlreadyInstalled = (0, package_json_1.hasPackageInstalled)('@sentry/profiling-node', packageJson);
+        await (0, clack_1.installPackage)({
+            packageName: '@sentry/profiling-node',
+            alreadyInstalled: profilingAlreadyInstalled,
+        });
+    }
+    const createExamplePageSelection = await (0, clack_1.askShouldCreateExamplePage)();
+    (0, telemetry_1.traceStep)('Reveal missing entry files', () => {
+        try {
+            (0, sdk_setup_1.runReactRouterReveal)(typeScriptDetected);
+            prompts_1.default.log.success('Entry files are ready for instrumentation');
+        }
+        catch (e) {
+            prompts_1.default.log.warn(`Could not run 'npx react-router reveal'.
+Please create your entry files manually using React Router v7 commands.`);
+            (0, debug_1.debug)(e);
+        }
+    });
+    await (0, telemetry_1.traceStep)('Initialize Sentry on client entry', async () => {
+        try {
+            await (0, sdk_setup_1.initializeSentryOnEntryClient)(selectedProject.keys[0].dsn.public, featureSelection.performance, featureSelection.replay, featureSelection.logs, typeScriptDetected);
+        }
+        catch (e) {
+            prompts_1.default.log.warn(`Could not initialize Sentry on client entry automatically.`);
+            const clientEntryFilename = `entry.client.${typeScriptDetected ? 'tsx' : 'jsx'}`;
+            const manualClientContent = (0, templates_1.getManualClientEntryContent)(selectedProject.keys[0].dsn.public, featureSelection.performance, featureSelection.replay, featureSelection.logs);
+            await (0, clack_1.showCopyPasteInstructions)({
+                filename: clientEntryFilename,
+                codeSnippet: manualClientContent,
+                hint: 'This enables error tracking and performance monitoring for your React Router app',
+            });
+            (0, debug_1.debug)(e);
+        }
+    });
+    await (0, telemetry_1.traceStep)('Instrument root route', async () => {
+        try {
+            await (0, sdk_setup_1.instrumentRootRoute)(typeScriptDetected);
+        }
+        catch (e) {
+            prompts_1.default.log.warn(`Could not instrument root route automatically.`);
+            const rootFilename = `app/root.${typeScriptDetected ? 'tsx' : 'jsx'}`;
+            const manualRootContent = (0, templates_1.getManualRootContent)(typeScriptDetected);
+            await (0, clack_1.showCopyPasteInstructions)({
+                filename: rootFilename,
+                codeSnippet: manualRootContent,
+                hint: 'This adds error boundary integration to capture exceptions in your React Router app',
+            });
+            (0, debug_1.debug)(e);
+        }
+    });
+    await (0, telemetry_1.traceStep)('Instrument server entry', async () => {
+        try {
+            await (0, sdk_setup_1.instrumentSentryOnEntryServer)(typeScriptDetected);
+        }
+        catch (e) {
+            prompts_1.default.log.warn(`Could not initialize Sentry on server entry automatically.`);
+            const serverEntryFilename = `entry.server.${typeScriptDetected ? 'tsx' : 'jsx'}`;
+            const manualServerContent = (0, templates_1.getManualServerEntryContent)();
+            await (0, clack_1.showCopyPasteInstructions)({
+                filename: serverEntryFilename,
+                codeSnippet: manualServerContent,
+                hint: 'This configures server-side request handling and error tracking',
+            });
+            (0, debug_1.debug)(e);
+        }
+    });
+    await (0, telemetry_1.traceStep)('Create server instrumentation file', async () => {
+        try {
+            (0, sdk_setup_1.createServerInstrumentationFile)(selectedProject.keys[0].dsn.public, {
+                performance: featureSelection.performance,
+                replay: featureSelection.replay,
+                logs: featureSelection.logs,
+                profiling: featureSelection.profiling,
+            });
+        }
+        catch (e) {
+            prompts_1.default.log.warn('Could not create a server instrumentation file automatically.');
+            const manualServerInstrumentContent = (0, templates_1.getManualServerInstrumentContent)(selectedProject.keys[0].dsn.public, featureSelection.performance, featureSelection.profiling, featureSelection.logs);
+            await (0, clack_1.showCopyPasteInstructions)({
+                filename: 'instrument.server.mjs',
+                codeSnippet: manualServerInstrumentContent,
+                hint: 'Create the file if it does not exist - this initializes Sentry before your application starts',
+            });
+            (0, debug_1.debug)(e);
+        }
+    });
+    await (0, telemetry_1.traceStep)('Update package.json scripts', async () => {
+        try {
+            await (0, sdk_setup_1.updatePackageJsonScripts)();
+        }
+        catch (e) {
+            prompts_1.default.log.warn('Could not update start script automatically.');
+            await (0, clack_1.showCopyPasteInstructions)({
+                filename: 'package.json',
+                codeSnippet: (0, clack_1.makeCodeSnippet)(true, (unchanged, plus, minus) => {
+                    return unchanged(`{
+            scripts: {
+              ${minus('"start": "react-router dev"')}
+              ${plus('"start": "NODE_OPTIONS=\'--import ./instrument.server.mjs\' react-router-serve ./build/server/index.js"')}
+              ${minus('"dev": "react-router dev"')}
+              ${plus('"dev": "NODE_OPTIONS=\'--import ./instrument.server.mjs\' react-router dev"')}
+            },
+            // ... rest of your package.json
+          }`);
+                }),
+            });
+            (0, debug_1.debug)(e);
+        }
+    });
+    await (0, telemetry_1.traceStep)('Create build plugin env file', async () => {
+        try {
+            await (0, clack_1.addDotEnvSentryBuildPluginFile)(authToken);
+        }
+        catch (e) {
+            prompts_1.default.log.warn('Could not create .env.sentry-build-plugin file. Please create it manually.');
+            (0, debug_1.debug)(e);
+        }
+    });
+    // Validate auth token before configuring sourcemap uploads
+    if (!authToken) {
+        prompts_1.default.log.warn(`${chalk_1.default.yellow('Warning:')} No auth token found. Sourcemap uploads will not work without ${chalk_1.default.cyan('SENTRY_AUTH_TOKEN')}.\n` +
+            `Please set ${chalk_1.default.cyan('SENTRY_AUTH_TOKEN')} in your ${chalk_1.default.cyan('.env.sentry-build-plugin')} file or environment variables.`);
+    }
+    // Configure Vite plugin for sourcemap uploads
+    await (0, telemetry_1.traceStep)('Configure Vite plugin for sourcemap uploads', async () => {
+        try {
+            await (0, sdk_setup_1.configureReactRouterVitePlugin)(selectedProject.organization.slug, selectedProject.slug);
+        }
+        catch (e) {
+            prompts_1.default.log.warn(`Could not configure Vite plugin for sourcemap uploads automatically.`);
+            await (0, clack_1.showCopyPasteInstructions)({
+                filename: `vite.config.${typeScriptDetected ? 'ts' : 'js'}`,
+                codeSnippet: (0, templates_1.getManualViteConfigContent)(selectedProject.organization.slug, selectedProject.slug),
+                hint: 'This enables automatic sourcemap uploads during build for better error tracking',
+            });
+            (0, debug_1.debug)(e);
+        }
+    });
+    // Configure React Router config for build hook
+    await (0, telemetry_1.traceStep)('Configure React Router build hook', async () => {
+        try {
+            await (0, sdk_setup_1.configureReactRouterConfig)(typeScriptDetected);
+        }
+        catch (e) {
+            prompts_1.default.log.warn(`Could not configure React Router build hook automatically.`);
+            await (0, clack_1.showCopyPasteInstructions)({
+                filename: `react-router.config.${typeScriptDetected ? 'ts' : 'js'}`,
+                codeSnippet: (0, templates_1.getManualReactRouterConfigContent)(typeScriptDetected),
+                hint: 'This enables automatic sourcemap uploads at the end of the build process',
+            });
+            (0, debug_1.debug)(e);
+        }
+    });
+    // Create example page if requested
+    if (createExamplePageSelection) {
+        await (0, telemetry_1.traceStep)('Create example page', async () => {
+            await (0, sdk_example_1.createExamplePage)({
+                selfHosted,
+                orgSlug: selectedProject.organization.slug,
+                projectId: selectedProject.id,
+                url: sentryUrl,
+                isTS: typeScriptDetected,
+                projectDir: process.cwd(),
+            });
+        });
+    }
+    await (0, clack_1.runPrettierIfInstalled)({ cwd: undefined });
+    // Offer optional project-scoped MCP config for Sentry with org and project scope
+    await (0, mcp_config_1.offerProjectScopedMcpConfig)(selectedProject.organization.slug, selectedProject.slug);
+    prompts_1.default.outro(`${chalk_1.default.green('Successfully installed the Sentry React Router SDK!')}${createExamplePageSelection
+        ? `\n\nYou can validate your setup by visiting ${chalk_1.default.cyan('"/sentry-example-page"')} in your application.`
+        : ''}`);
+}
+//# sourceMappingURL=react-router-wizard.js.map

package/dist/src/react-router/react-router-wizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-router-wizard.js","sourceRoot":"","sources":["../../../src/react-router/react-router-wizard.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-expect-error - clack is ESM and TS complains about that. It works though\nimport clack from '@clack/prompts';\nimport chalk from 'chalk';\n\nimport type { WizardOptions } from '../utils/types';\nimport { withTelemetry, traceStep } from '../telemetry';\nimport {\n  abort,\n  askShouldCreateExamplePage,\n  confirmContinueIfNoOrDirtyGitRepo,\n  featureSelectionPrompt,\n  getOrAskForProjectData,\n  getPackageDotJson,\n  isUsingTypeScript,\n  printWelcome,\n  installPackage,\n  addDotEnvSentryBuildPluginFile,\n  showCopyPasteInstructions,\n  makeCodeSnippet,\n  runPrettierIfInstalled,\n} from '../utils/clack';\nimport { offerProjectScopedMcpConfig } from '../utils/clack/mcp-config';\nimport { hasPackageInstalled } from '../utils/package-json';\nimport { debug } from '../utils/debug';\nimport { createExamplePage } from './sdk-example';\nimport {\n  isReactRouterV7,\n  runReactRouterReveal,\n  initializeSentryOnEntryClient,\n  instrumentRootRoute,\n  createServerInstrumentationFile,\n  updatePackageJsonScripts,\n  instrumentSentryOnEntryServer,\n  configureReactRouterConfig,\n  configureReactRouterVitePlugin,\n} from './sdk-setup';\nimport {\n  getManualClientEntryContent,\n  getManualServerEntryContent,\n  getManualRootContent,\n  getManualServerInstrumentContent,\n  getManualReactRouterConfigContent,\n  getManualViteConfigContent,\n} from './templates';\n\nexport async function runReactRouterWizard(\n  options: WizardOptions,\n): Promise<void> {\n  return withTelemetry(\n    {\n      enabled: options.telemetryEnabled,\n      integration: 'reactRouter',\n      wizardOptions: options,\n    },\n    () => runReactRouterWizardWithTelemetry(options),\n  );\n}\n\nasync function runReactRouterWizardWithTelemetry(\n  options: WizardOptions,\n): Promise<void> {\n  printWelcome({\n    wizardName: 'Sentry React Router Wizard',\n    promoCode: options.promoCode,\n  });\n\n  const packageJson = await getPackageDotJson();\n\n  if (!packageJson) {\n    clack.log.error(\n      'Could not find a package.json file in the current directory',\n    );\n    return;\n  }\n\n  const typeScriptDetected = isUsingTypeScript();\n\n  if (!isReactRouterV7(packageJson)) {\n    clack.log.error(\n      'This wizard requires React Router v7. Please upgrade your React Router version to v7.0.0 or higher.\\n\\nFor upgrade instructions, visit: https://react-router.dev/upgrade/v7',\n    );\n    return;\n  }\n\n  await confirmContinueIfNoOrDirtyGitRepo({\n    ignoreGitChanges: options.ignoreGitChanges,\n    cwd: undefined,\n  });\n\n  const sentryAlreadyInstalled = hasPackageInstalled(\n    '@sentry/react-router',\n    packageJson,\n  );\n\n  const projectData = await getOrAskForProjectData(\n    options,\n    'javascript-react-router',\n  );\n\n  if (projectData.spotlight) {\n    clack.log.warn('Spotlight mode is not yet supported for React Router.');\n    clack.log.info('Spotlight is currently only available for Next.js.');\n    await abort('Exiting wizard', 0);\n    return;\n  }\n\n  const { selectedProject, authToken, selfHosted, sentryUrl } = projectData;\n\n  await installPackage({\n    packageName: '@sentry/react-router',\n    alreadyInstalled: sentryAlreadyInstalled,\n  });\n\n  const featureSelection = await featureSelectionPrompt([\n    {\n      id: 'performance',\n      prompt: `Do you want to enable ${chalk.bold(\n        'Tracing',\n      )} to track the performance of your application?`,\n      enabledHint: 'recommended',\n    },\n    {\n      id: 'replay',\n      prompt: `Do you want to enable ${chalk.bold(\n        'Session Replay',\n      )} to get a video-like reproduction of errors during a user session?`,\n      enabledHint: 'recommended, but increases bundle size',\n    },\n    {\n      id: 'logs',\n      prompt: `Do you want to enable ${chalk.bold(\n        'Logs',\n      )} to send your application logs to Sentry?`,\n      enabledHint: 'recommended',\n    },\n    {\n      id: 'profiling',\n      prompt: `Do you want to enable ${chalk.bold(\n        'Profiling',\n      )} to track application performance in detail?`,\n      enabledHint: 'recommended for production debugging',\n    },\n  ]);\n\n  if (featureSelection.profiling) {\n    const profilingAlreadyInstalled = hasPackageInstalled(\n      '@sentry/profiling-node',\n      packageJson,\n    );\n\n    await installPackage({\n      packageName: '@sentry/profiling-node',\n      alreadyInstalled: profilingAlreadyInstalled,\n    });\n  }\n\n  const createExamplePageSelection = await askShouldCreateExamplePage();\n\n  traceStep('Reveal missing entry files', () => {\n    try {\n      runReactRouterReveal(typeScriptDetected);\n      clack.log.success('Entry files are ready for instrumentation');\n    } catch (e) {\n      clack.log.warn(`Could not run 'npx react-router reveal'.\nPlease create your entry files manually using React Router v7 commands.`);\n      debug(e);\n    }\n  });\n\n  await traceStep('Initialize Sentry on client entry', async () => {\n    try {\n      await initializeSentryOnEntryClient(\n        selectedProject.keys[0].dsn.public,\n        featureSelection.performance,\n        featureSelection.replay,\n        featureSelection.logs,\n        typeScriptDetected,\n      );\n    } catch (e) {\n      clack.log.warn(\n        `Could not initialize Sentry on client entry automatically.`,\n      );\n\n      const clientEntryFilename = `entry.client.${\n        typeScriptDetected ? 'tsx' : 'jsx'\n      }`;\n\n      const manualClientContent = getManualClientEntryContent(\n        selectedProject.keys[0].dsn.public,\n        featureSelection.performance,\n        featureSelection.replay,\n        featureSelection.logs,\n      );\n\n      await showCopyPasteInstructions({\n        filename: clientEntryFilename,\n        codeSnippet: manualClientContent,\n        hint: 'This enables error tracking and performance monitoring for your React Router app',\n      });\n\n      debug(e);\n    }\n  });\n\n  await traceStep('Instrument root route', async () => {\n    try {\n      await instrumentRootRoute(typeScriptDetected);\n    } catch (e) {\n      clack.log.warn(`Could not instrument root route automatically.`);\n\n      const rootFilename = `app/root.${typeScriptDetected ? 'tsx' : 'jsx'}`;\n      const manualRootContent = getManualRootContent(typeScriptDetected);\n\n      await showCopyPasteInstructions({\n        filename: rootFilename,\n        codeSnippet: manualRootContent,\n        hint: 'This adds error boundary integration to capture exceptions in your React Router app',\n      });\n\n      debug(e);\n    }\n  });\n\n  await traceStep('Instrument server entry', async () => {\n    try {\n      await instrumentSentryOnEntryServer(typeScriptDetected);\n    } catch (e) {\n      clack.log.warn(\n        `Could not initialize Sentry on server entry automatically.`,\n      );\n\n      const serverEntryFilename = `entry.server.${\n        typeScriptDetected ? 'tsx' : 'jsx'\n      }`;\n      const manualServerContent = getManualServerEntryContent();\n\n      await showCopyPasteInstructions({\n        filename: serverEntryFilename,\n        codeSnippet: manualServerContent,\n        hint: 'This configures server-side request handling and error tracking',\n      });\n\n      debug(e);\n    }\n  });\n\n  await traceStep('Create server instrumentation file', async () => {\n    try {\n      createServerInstrumentationFile(selectedProject.keys[0].dsn.public, {\n        performance: featureSelection.performance,\n        replay: featureSelection.replay,\n        logs: featureSelection.logs,\n        profiling: featureSelection.profiling,\n      });\n    } catch (e) {\n      clack.log.warn(\n        'Could not create a server instrumentation file automatically.',\n      );\n\n      const manualServerInstrumentContent = getManualServerInstrumentContent(\n        selectedProject.keys[0].dsn.public,\n        featureSelection.performance,\n        featureSelection.profiling,\n        featureSelection.logs,\n      );\n\n      await showCopyPasteInstructions({\n        filename: 'instrument.server.mjs',\n        codeSnippet: manualServerInstrumentContent,\n        hint: 'Create the file if it does not exist - this initializes Sentry before your application starts',\n      });\n\n      debug(e);\n    }\n  });\n\n  await traceStep('Update package.json scripts', async () => {\n    try {\n      await updatePackageJsonScripts();\n    } catch (e) {\n      clack.log.warn('Could not update start script automatically.');\n\n      await showCopyPasteInstructions({\n        filename: 'package.json',\n        codeSnippet: makeCodeSnippet(true, (unchanged, plus, minus) => {\n          return unchanged(`{\n            scripts: {\n              ${minus('\"start\": \"react-router dev\"')}\n              ${plus(\n                '\"start\": \"NODE_OPTIONS=\\'--import ./instrument.server.mjs\\' react-router-serve ./build/server/index.js\"',\n              )}\n              ${minus('\"dev\": \"react-router dev\"')}\n              ${plus(\n                '\"dev\": \"NODE_OPTIONS=\\'--import ./instrument.server.mjs\\' react-router dev\"',\n              )}\n            },\n            // ... rest of your package.json\n          }`);\n        }),\n      });\n\n      debug(e);\n    }\n  });\n\n  await traceStep('Create build plugin env file', async () => {\n    try {\n      await addDotEnvSentryBuildPluginFile(authToken);\n    } catch (e) {\n      clack.log.warn(\n        'Could not create .env.sentry-build-plugin file. Please create it manually.',\n      );\n      debug(e);\n    }\n  });\n\n  // Validate auth token before configuring sourcemap uploads\n  if (!authToken) {\n    clack.log.warn(\n      `${chalk.yellow(\n        'Warning:',\n      )} No auth token found. Sourcemap uploads will not work without ${chalk.cyan(\n        'SENTRY_AUTH_TOKEN',\n      )}.\\n` +\n        `Please set ${chalk.cyan('SENTRY_AUTH_TOKEN')} in your ${chalk.cyan(\n          '.env.sentry-build-plugin',\n        )} file or environment variables.`,\n    );\n  }\n\n  // Configure Vite plugin for sourcemap uploads\n  await traceStep('Configure Vite plugin for sourcemap uploads', async () => {\n    try {\n      await configureReactRouterVitePlugin(\n        selectedProject.organization.slug,\n        selectedProject.slug,\n      );\n    } catch (e) {\n      clack.log.warn(\n        `Could not configure Vite plugin for sourcemap uploads automatically.`,\n      );\n\n      await showCopyPasteInstructions({\n        filename: `vite.config.${typeScriptDetected ? 'ts' : 'js'}`,\n        codeSnippet: getManualViteConfigContent(\n          selectedProject.organization.slug,\n          selectedProject.slug,\n        ),\n        hint: 'This enables automatic sourcemap uploads during build for better error tracking',\n      });\n\n      debug(e);\n    }\n  });\n\n  // Configure React Router config for build hook\n  await traceStep('Configure React Router build hook', async () => {\n    try {\n      await configureReactRouterConfig(typeScriptDetected);\n    } catch (e) {\n      clack.log.warn(\n        `Could not configure React Router build hook automatically.`,\n      );\n\n      await showCopyPasteInstructions({\n        filename: `react-router.config.${typeScriptDetected ? 'ts' : 'js'}`,\n        codeSnippet: getManualReactRouterConfigContent(typeScriptDetected),\n        hint: 'This enables automatic sourcemap uploads at the end of the build process',\n      });\n\n      debug(e);\n    }\n  });\n\n  // Create example page if requested\n  if (createExamplePageSelection) {\n    await traceStep('Create example page', async () => {\n      await createExamplePage({\n        selfHosted,\n        orgSlug: selectedProject.organization.slug,\n        projectId: selectedProject.id,\n        url: sentryUrl,\n        isTS: typeScriptDetected,\n        projectDir: process.cwd(),\n      });\n    });\n  }\n\n  await runPrettierIfInstalled({ cwd: undefined });\n\n  // Offer optional project-scoped MCP config for Sentry with org and project scope\n  await offerProjectScopedMcpConfig(\n    selectedProject.organization.slug,\n    selectedProject.slug,\n  );\n\n  clack.outro(\n    `${chalk.green('Successfully installed the Sentry React Router SDK!')}${\n      createExamplePageSelection\n        ? `\\n\\nYou can validate your setup by visiting ${chalk.cyan(\n            '\"/sentry-example-page\"',\n          )} in your application.`\n        : ''\n    }`,\n  );\n}\n"]}

package/dist/src/react-router/sdk-example.d.ts

@@ -0,0 +1,18 @@
+export declare function createExamplePage(options: {
+    selfHosted: boolean;
+    orgSlug: string;
+    projectId: string;
+    url: string;
+    isTS: boolean;
+    projectDir: string;
+}): Promise<void>;
+export declare function getSentryExamplePageContents(options: {
+    selfHosted: boolean;
+    orgSlug: string;
+    projectId: string;
+    url: string;
+    isTS?: boolean;
+}): string;
+export declare function getSentryExampleApiContents(options: {
+    isTS?: boolean;
+}): string;

package/dist/src/react-router/sdk-example.js

@@ -0,0 +1,306 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSentryExampleApiContents = exports.getSentryExamplePageContents = exports.createExamplePage = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+const prompts_1 = __importDefault(require("@clack/prompts"));
+const routes_config_1 = require("./codemods/routes-config");
+const sdk_setup_1 = require("./sdk-setup");
+async function createExamplePage(options) {
+    const routesPath = path.join(options.projectDir, 'app', 'routes');
+    if (!fs.existsSync(routesPath)) {
+        fs.mkdirSync(routesPath, { recursive: true });
+    }
+    const exampleRoutePath = (0, sdk_setup_1.getRouteFilePath)('sentry-example-page', options.isTS);
+    if (fs.existsSync(exampleRoutePath)) {
+        prompts_1.default.log.warn(`It seems like a sentry example page already exists (${path.basename(exampleRoutePath)}). Skipping creation of example route.`);
+        return;
+    }
+    await fs.promises.writeFile(exampleRoutePath, getSentryExamplePageContents(options));
+    // Create the API route for backend error testing
+    const apiRoutePath = path.join(routesPath, `api.sentry-example-api.${options.isTS ? 'ts' : 'js'}`);
+    if (!fs.existsSync(apiRoutePath)) {
+        await fs.promises.writeFile(apiRoutePath, getSentryExampleApiContents(options));
+        prompts_1.default.log.info(`Created sentry example API route at ${apiRoutePath}.`);
+    }
+    // Check if there's a routes.ts configuration file and add the route using codemod
+    const routesConfigPath = path.join(options.projectDir, 'app', 'routes.ts');
+    if (fs.existsSync(routesConfigPath)) {
+        try {
+            await (0, routes_config_1.addRoutesToConfig)(routesConfigPath, options.isTS);
+        }
+        catch (e) {
+            prompts_1.default.log.warn(`Could not update routes.ts configuration: ${e instanceof Error ? e.message : String(e)}`);
+            prompts_1.default.log.info('Please manually add these routes to your routes.ts file: route("/sentry-example-page", "routes/sentry-example-page.tsx") and route("/api/sentry-example-api", "routes/api.sentry-example-api.ts")');
+        }
+    }
+    prompts_1.default.log.info(`Created sentry example page at ${exampleRoutePath}.`);
+}
+exports.createExamplePage = createExamplePage;
+function getSentryExamplePageContents(options) {
+    const issuesPageLink = options.selfHosted
+        ? `${options.url}organizations/${options.orgSlug}/issues/?project=${options.projectId}`
+        : `https://${options.orgSlug}.sentry.io/issues/?project=${options.projectId}`;
+    return `import * as Sentry from '@sentry/react-router';
+import { useState, useEffect } from 'react';
+
+class SentryExampleFrontendError extends Error {
+  constructor(message${options.isTS ? ': string | undefined' : ''}) {
+    super(message);
+    this.name = "SentryExampleFrontendError";
+  }
+}
+
+export const meta = () => {
+  return [
+    { title: "sentry-example-page" },
+  ];
+}
+
+export default function SentryExamplePage() {
+  const [hasSentError, setHasSentError] = useState(false);
+  const [isConnected, setIsConnected] = useState(true);
+
+  useEffect(() => {
+    async function checkConnectivity() {
+      const result = await Sentry.diagnoseSdkConnectivity();
+      setIsConnected(result !== 'sentry-unreachable');
+    }
+    checkConnectivity();
+  }, [setIsConnected]);
+
+  return (
+    <div>
+      <main>
+        <div className="flex-spacer" />
+        <svg height="40" width="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z" fill="currentcolor"/>
+        </svg>
+        <h1>
+          sentry-example-page
+        </h1>
+
+        <p className="description">
+          Click the button below, and view the sample error on the Sentry <a target="_blank" rel="noreferrer" href="${issuesPageLink}">Issues Page</a>.
+          For more details about setting up Sentry, <a target="_blank" rel="noreferrer" href="https://docs.sentry.io/platforms/javascript/guides/react-router/">read our docs</a>.
+        </p>
+
+        <button
+          type="button"
+          onClick={async () => {
+            await Sentry.startSpan({
+              name: 'Example Frontend Span',
+              op: 'test'
+            }, async () => {
+              const res = await fetch("/api/sentry-example-api");
+              if (!res.ok) {
+                setHasSentError(true);
+              }
+            });
+            throw new SentryExampleFrontendError("This error is raised on the frontend of the example page.");
+          }}
+          disabled={!isConnected}
+        >
+          <span>
+            Throw Sample Error
+          </span>
+        </button>
+
+        {hasSentError ? (
+          <p className="success">
+            Sample error was sent to Sentry.
+          </p>
+        ) : !isConnected ? (
+          <div className="connectivity-error">
+            <p>It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.</p>
+          </div>
+        ) : (
+          <div className="success_placeholder" />
+        )}
+
+        <div className="flex-spacer" />
+      </main>
+
+      {/* Not for production use! We're just saving you from having to delete an extra CSS file ;) */}
+      <style dangerouslySetInnerHTML={{ __html: styles }}></style>
+    </div>
+  );
+}
+
+const styles = \`
+  main {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  }
+
+  h1 {
+    padding: 0px 4px;
+    border-radius: 4px;
+    background-color: rgba(24, 20, 35, 0.03);
+    font-family: monospace;
+    font-size: 20px;
+    line-height: 1.2;
+  }
+
+  p {
+    margin: 0;
+    font-size: 20px;
+  }
+
+  a {
+    color: #6341F0;
+    text-decoration: underline;
+    cursor: pointer;
+
+    @media (prefers-color-scheme: dark) {
+      color: #B3A1FF;
+    }
+  }
+
+  button {
+    border-radius: 8px;
+    color: white;
+    cursor: pointer;
+    background-color: #553DB8;
+    border: none;
+    padding: 0;
+    margin-top: 4px;
+
+    & > span {
+      display: inline-block;
+      padding: 12px 16px;
+      border-radius: inherit;
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 1;
+      background-color: #7553FF;
+      border: 1px solid #553DB8;
+      transform: translateY(-4px);
+    }
+
+    &:hover > span {
+      transform: translateY(-8px);
+    }
+
+    &:active > span {
+      transform: translateY(0);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+
+      & > span {
+        transform: translateY(0);
+        border: none;
+      }
+    }
+  }
+
+  .description {
+    text-align: center;
+    color: #6E6C75;
+    max-width: 500px;
+    line-height: 1.5;
+    font-size: 20px;
+
+    @media (prefers-color-scheme: dark) {
+      color: #A49FB5;
+    }
+  }
+
+  .flex-spacer {
+    flex: 1;
+  }
+
+  .success {
+    padding: 12px 16px;
+    border-radius: 8px;
+    font-size: 20px;
+    line-height: 1;
+    background-color: #00F261;
+    border: 1px solid #00BF4D;
+    color: #181423;
+  }
+
+  .success_placeholder {
+    height: 46px;
+  }
+
+  .connectivity-error {
+    padding: 12px 16px;
+    background-color: #E50045;
+    border-radius: 8px;
+    width: 500px;
+    color: #FFFFFF;
+    border: 1px solid #A80033;
+    text-align: center;
+    margin: 0;
+  }
+
+  .connectivity-error a {
+    color: #FFFFFF;
+    text-decoration: underline;
+  }
+\`;
+`;
+}
+exports.getSentryExamplePageContents = getSentryExamplePageContents;
+function getSentryExampleApiContents(options) {
+    return `import * as Sentry from '@sentry/react-router';
+
+class SentryExampleBackendError extends Error {
+  constructor(message${options.isTS ? ': string | undefined' : ''}) {
+    super(message);
+    this.name = "SentryExampleBackendError";
+  }
+}
+
+export async function loader() {
+  await Sentry.startSpan({
+    name: 'Example Backend Span',
+    op: 'test'
+  }, async () => {
+    // Simulate some backend work
+    await new Promise(resolve => setTimeout(resolve, 100));
+  });
+
+  throw new SentryExampleBackendError("This error is raised on the backend API route.");
+}
+`;
+}
+exports.getSentryExampleApiContents = getSentryExampleApiContents;
+//# sourceMappingURL=sdk-example.js.map

package/dist/src/react-router/sdk-example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdk-example.js","sourceRoot":"","sources":["../../../src/react-router/sdk-example.ts"],"names":[],"mappings":"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","sourcesContent":["import * as fs from 'fs';\nimport * as path from 'path';\n\n// @ts-expect-error - clack is ESM and TS complains about that. It works though\nimport clack from '@clack/prompts';\nimport { addRoutesToConfig } from './codemods/routes-config';\nimport { getRouteFilePath } from './sdk-setup';\n\nexport async function createExamplePage(options: {\n  selfHosted: boolean;\n  orgSlug: string;\n  projectId: string;\n  url: string;\n  isTS: boolean;\n  projectDir: string;\n}) {\n  const routesPath = path.join(options.projectDir, 'app', 'routes');\n\n  if (!fs.existsSync(routesPath)) {\n    fs.mkdirSync(routesPath, { recursive: true });\n  }\n\n  const exampleRoutePath = getRouteFilePath(\n    'sentry-example-page',\n    options.isTS,\n  );\n\n  if (fs.existsSync(exampleRoutePath)) {\n    clack.log.warn(\n      `It seems like a sentry example page already exists (${path.basename(\n        exampleRoutePath,\n      )}). Skipping creation of example route.`,\n    );\n    return;\n  }\n\n  await fs.promises.writeFile(\n    exampleRoutePath,\n    getSentryExamplePageContents(options),\n  );\n\n  // Create the API route for backend error testing\n  const apiRoutePath = path.join(\n    routesPath,\n    `api.sentry-example-api.${options.isTS ? 'ts' : 'js'}`,\n  );\n\n  if (!fs.existsSync(apiRoutePath)) {\n    await fs.promises.writeFile(\n      apiRoutePath,\n      getSentryExampleApiContents(options),\n    );\n    clack.log.info(`Created sentry example API route at ${apiRoutePath}.`);\n  }\n\n  // Check if there's a routes.ts configuration file and add the route using codemod\n  const routesConfigPath = path.join(options.projectDir, 'app', 'routes.ts');\n  if (fs.existsSync(routesConfigPath)) {\n    try {\n      await addRoutesToConfig(routesConfigPath, options.isTS);\n    } catch (e) {\n      clack.log.warn(\n        `Could not update routes.ts configuration: ${\n          e instanceof Error ? e.message : String(e)\n        }`,\n      );\n      clack.log.info(\n        'Please manually add these routes to your routes.ts file: route(\"/sentry-example-page\", \"routes/sentry-example-page.tsx\") and route(\"/api/sentry-example-api\", \"routes/api.sentry-example-api.ts\")',\n      );\n    }\n  }\n\n  clack.log.info(`Created sentry example page at ${exampleRoutePath}.`);\n}\n\nexport function getSentryExamplePageContents(options: {\n  selfHosted: boolean;\n  orgSlug: string;\n  projectId: string;\n  url: string;\n  isTS?: boolean;\n}) {\n  const issuesPageLink = options.selfHosted\n    ? `${options.url}organizations/${options.orgSlug}/issues/?project=${options.projectId}`\n    : `https://${options.orgSlug}.sentry.io/issues/?project=${options.projectId}`;\n\n  return `import * as Sentry from '@sentry/react-router';\nimport { useState, useEffect } from 'react';\n\nclass SentryExampleFrontendError extends Error {\n  constructor(message${options.isTS ? ': string | undefined' : ''}) {\n    super(message);\n    this.name = \"SentryExampleFrontendError\";\n  }\n}\n\nexport const meta = () => {\n  return [\n    { title: \"sentry-example-page\" },\n  ];\n}\n\nexport default function SentryExamplePage() {\n  const [hasSentError, setHasSentError] = useState(false);\n  const [isConnected, setIsConnected] = useState(true);\n\n  useEffect(() => {\n    async function checkConnectivity() {\n      const result = await Sentry.diagnoseSdkConnectivity();\n      setIsConnected(result !== 'sentry-unreachable');\n    }\n    checkConnectivity();\n  }, [setIsConnected]);\n\n  return (\n    <div>\n      <main>\n        <div className=\"flex-spacer\" />\n        <svg height=\"40\" width=\"40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z\" fill=\"currentcolor\"/>\n        </svg>\n        <h1>\n          sentry-example-page\n        </h1>\n\n        <p className=\"description\">\n          Click the button below, and view the sample error on the Sentry <a target=\"_blank\" rel=\"noreferrer\" href=\"${issuesPageLink}\">Issues Page</a>.\n          For more details about setting up Sentry, <a target=\"_blank\" rel=\"noreferrer\" href=\"https://docs.sentry.io/platforms/javascript/guides/react-router/\">read our docs</a>.\n        </p>\n\n        <button\n          type=\"button\"\n          onClick={async () => {\n            await Sentry.startSpan({\n              name: 'Example Frontend Span',\n              op: 'test'\n            }, async () => {\n              const res = await fetch(\"/api/sentry-example-api\");\n              if (!res.ok) {\n                setHasSentError(true);\n              }\n            });\n            throw new SentryExampleFrontendError(\"This error is raised on the frontend of the example page.\");\n          }}\n          disabled={!isConnected}\n        >\n          <span>\n            Throw Sample Error\n          </span>\n        </button>\n\n        {hasSentError ? (\n          <p className=\"success\">\n            Sample error was sent to Sentry.\n          </p>\n        ) : !isConnected ? (\n          <div className=\"connectivity-error\">\n            <p>It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.</p>\n          </div>\n        ) : (\n          <div className=\"success_placeholder\" />\n        )}\n\n        <div className=\"flex-spacer\" />\n      </main>\n\n      {/* Not for production use! We're just saving you from having to delete an extra CSS file ;) */}\n      <style dangerouslySetInnerHTML={{ __html: styles }}></style>\n    </div>\n  );\n}\n\nconst styles = \\`\n  main {\n    display: flex;\n    min-height: 100vh;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n\n  h1 {\n    padding: 0px 4px;\n    border-radius: 4px;\n    background-color: rgba(24, 20, 35, 0.03);\n    font-family: monospace;\n    font-size: 20px;\n    line-height: 1.2;\n  }\n\n  p {\n    margin: 0;\n    font-size: 20px;\n  }\n\n  a {\n    color: #6341F0;\n    text-decoration: underline;\n    cursor: pointer;\n\n    @media (prefers-color-scheme: dark) {\n      color: #B3A1FF;\n    }\n  }\n\n  button {\n    border-radius: 8px;\n    color: white;\n    cursor: pointer;\n    background-color: #553DB8;\n    border: none;\n    padding: 0;\n    margin-top: 4px;\n\n    & > span {\n      display: inline-block;\n      padding: 12px 16px;\n      border-radius: inherit;\n      font-size: 20px;\n      font-weight: bold;\n      line-height: 1;\n      background-color: #7553FF;\n      border: 1px solid #553DB8;\n      transform: translateY(-4px);\n    }\n\n    &:hover > span {\n      transform: translateY(-8px);\n    }\n\n    &:active > span {\n      transform: translateY(0);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.6;\n\n      & > span {\n        transform: translateY(0);\n        border: none;\n      }\n    }\n  }\n\n  .description {\n    text-align: center;\n    color: #6E6C75;\n    max-width: 500px;\n    line-height: 1.5;\n    font-size: 20px;\n\n    @media (prefers-color-scheme: dark) {\n      color: #A49FB5;\n    }\n  }\n\n  .flex-spacer {\n    flex: 1;\n  }\n\n  .success {\n    padding: 12px 16px;\n    border-radius: 8px;\n    font-size: 20px;\n    line-height: 1;\n    background-color: #00F261;\n    border: 1px solid #00BF4D;\n    color: #181423;\n  }\n\n  .success_placeholder {\n    height: 46px;\n  }\n\n  .connectivity-error {\n    padding: 12px 16px;\n    background-color: #E50045;\n    border-radius: 8px;\n    width: 500px;\n    color: #FFFFFF;\n    border: 1px solid #A80033;\n    text-align: center;\n    margin: 0;\n  }\n\n  .connectivity-error a {\n    color: #FFFFFF;\n    text-decoration: underline;\n  }\n\\`;\n`;\n}\n\nexport function getSentryExampleApiContents(options: { isTS?: boolean }) {\n  return `import * as Sentry from '@sentry/react-router';\n\nclass SentryExampleBackendError extends Error {\n  constructor(message${options.isTS ? ': string | undefined' : ''}) {\n    super(message);\n    this.name = \"SentryExampleBackendError\";\n  }\n}\n\nexport async function loader() {\n  await Sentry.startSpan({\n    name: 'Example Backend Span',\n    op: 'test'\n  }, async () => {\n    // Simulate some backend work\n    await new Promise(resolve => setTimeout(resolve, 100));\n  });\n\n  throw new SentryExampleBackendError(\"This error is raised on the backend API route.\");\n}\n`;\n}\n"]}