feat(react-router): Align options with shared build time options type

Author: s1gr1d

packages/core/src/build-time-plugins/buildTimeOptionsBase.ts

@@ -330,8 +330,12 @@ interface ReleaseOptions {
 
   /**
    * Configuration for associating the release with its commits in Sentry.
+   *
+   * Set to `false` to disable commit association.
+   *
+   * @default { auto: true }
    */
-  setCommits?: (AutoSetCommitsOptions | ManualSetCommitsOptions) & {
+  setCommits?: false | (AutoSetCommitsOptions | ManualSetCommitsOptions) & {
     /**
      * The commit before the beginning of this release (in other words,
      * the last commit of the previous release).
@@ -362,39 +366,43 @@ interface ReleaseOptions {
 
   /**
    * Configuration for adding deployment information to the release in Sentry.
-   */
-  deploy?: {
-    /**
-     * Environment for this release. Values that make sense here would
-     * be `production` or `staging`.
-     */
-    env: string;
-
-    /**
-     * Deployment start time in Unix timestamp (in seconds) or ISO 8601 format.
-     */
-    started?: number | string;
-
-    /**
-     * Deployment finish time in Unix timestamp (in seconds) or ISO 8601 format.
-     */
-    finished?: number | string;
-
-    /**
-     * Deployment duration (in seconds). Can be used instead of started and finished.
-     */
-    time?: number;
-
-    /**
-     * Human-readable name for the deployment.
-     */
-    name?: string;
-
-    /**
-     * URL that points to the deployment.
-     */
-    url?: string;
-  };
+   *
+   * Set to `false` to disable automatic deployment detection and creation.
+   */
+  deploy?:
+    | false
+    | {
+        /**
+         * Environment for this release. Values that make sense here would
+         * be `production` or `staging`.
+         */
+        env: string;
+
+        /**
+         * Deployment start time in Unix timestamp (in seconds) or ISO 8601 format.
+         */
+        started?: number | string;
+
+        /**
+         * Deployment finish time in Unix timestamp (in seconds) or ISO 8601 format.
+         */
+        finished?: number | string;
+
+        /**
+         * Deployment duration (in seconds). Can be used instead of started and finished.
+         */
+        time?: number;
+
+        /**
+         * Human-readable name for the deployment.
+         */
+        name?: string;
+
+        /**
+         * URL that points to the deployment.
+         */
+        url?: string;
+      };
 }
 
 interface BundleSizeOptimizationsOptions {

packages/react-router/.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
     {
       files: ['vite.config.ts'],
       parserOptions: {
-        project: ['tsconfig.test.json'],
+        project: ['tsconfig.vite.json'],
       },
     },
   ],

packages/react-router/src/vite/buildEnd/handleOnBuildEnd.ts

@@ -1,6 +1,7 @@
 import { rm } from 'node:fs/promises';
 import type { Config } from '@react-router/dev/config';
 import SentryCli from '@sentry/cli';
+import type { SentryVitePluginOptions } from '@sentry/vite-plugin';
 import { glob } from 'glob';
 import type { SentryReactRouterBuildOptions } from '../types';
 
@@ -23,17 +24,31 @@ function getSentryConfig(viteConfig: unknown): SentryReactRouterBuildOptions {
 export const sentryOnBuildEnd: BuildEndHook = async ({ reactRouterConfig, viteConfig }) => {
   const sentryConfig = getSentryConfig(viteConfig);
 
+  // todo(v11): Remove deprecated sourceMapsUploadOptions support (no need for spread/pick anymore)
+  const {
+    sourceMapsUploadOptions, // extract to exclude from rest config
+    ...sentryConfigWithoutDeprecatedSourceMapOption
+  } = sentryConfig;
+
   const {
     authToken,
     org,
     project,
     release,
-    sourceMapsUploadOptions = { enabled: true },
+    sourcemaps = { disable: false },
     debug = false,
-    unstable_sentryVitePluginOptions,
-  }: SentryReactRouterBuildOptions = {
+  }: Omit<SentryReactRouterBuildOptions, 'sourcemaps' | 'sourceMapsUploadOptions'> &
+    // Pick 'sourcemaps' from Vite plugin options as the types allow more (e.g. Promise values for `deleteFilesAfterUpload`)
+    Pick<SentryVitePluginOptions, 'sourcemaps'> = {
     ...sentryConfig.unstable_sentryVitePluginOptions,
-    ...sentryConfig,
+    ...sentryConfigWithoutDeprecatedSourceMapOption, // spread in the config without the deprecated sourceMapsUploadOptions
+    sourcemaps: {
+      ...sentryConfig.unstable_sentryVitePluginOptions?.sourcemaps,
+      ...sentryConfig.sourcemaps,
+      ...sourceMapsUploadOptions,
+      // eslint-disable-next-line deprecation/deprecation
+      disable: sourceMapsUploadOptions?.enabled === false ? true : sentryConfig.sourcemaps?.disable,
+    },
     release: {
       ...sentryConfig.unstable_sentryVitePluginOptions?.release,
       ...sentryConfig.release,
@@ -44,8 +59,9 @@ export const sentryOnBuildEnd: BuildEndHook = async ({ reactRouterConfig, viteCo
     authToken,
     org,
     project,
-    ...unstable_sentryVitePluginOptions,
+    ...sentryConfig.unstable_sentryVitePluginOptions,
   });
+
   // check if release should be created
   if (release?.name) {
     try {
@@ -56,7 +72,7 @@ export const sentryOnBuildEnd: BuildEndHook = async ({ reactRouterConfig, viteCo
     }
   }
 
-  if (sourceMapsUploadOptions?.enabled ?? (true && viteConfig.build.sourcemap !== false)) {
+  if (!sourcemaps?.disable && viteConfig.build.sourcemap !== false) {
     // inject debugIds
     try {
       await cliInstance.execute(
@@ -84,9 +100,10 @@ export const sentryOnBuildEnd: BuildEndHook = async ({ reactRouterConfig, viteCo
     }
   }
   // delete sourcemaps after upload
-  let updatedFilesToDeleteAfterUpload = sourceMapsUploadOptions?.filesToDeleteAfterUpload;
+  let updatedFilesToDeleteAfterUpload = await sourcemaps?.filesToDeleteAfterUpload;
+
   // set a default value no option was set
-  if (typeof sourceMapsUploadOptions?.filesToDeleteAfterUpload === 'undefined') {
+  if (typeof updatedFilesToDeleteAfterUpload === 'undefined') {
     updatedFilesToDeleteAfterUpload = [`${reactRouterConfig.buildDirectory}/**/*.map`];
     debug &&
       // eslint-disable-next-line no-console

packages/react-router/src/vite/plugin.ts

@@ -14,13 +14,13 @@ import type { SentryReactRouterBuildOptions } from './types';
  */
 export async function sentryReactRouter(
   options: SentryReactRouterBuildOptions = {},
-  config: ConfigEnv,
+  viteConfig: ConfigEnv,
 ): Promise<Plugin[]> {
   const plugins: Plugin[] = [];
 
   plugins.push(makeConfigInjectorPlugin(options));
 
-  if (process.env.NODE_ENV !== 'development' && config.command === 'build' && config.mode !== 'development') {
+  if (process.env.NODE_ENV !== 'development' && viteConfig.command === 'build' && viteConfig.mode !== 'development') {
     plugins.push(makeEnableSourceMapsPlugin(options));
     plugins.push(...(await makeCustomSentryVitePlugins(options)));
   }

packages/react-router/src/vite/types.ts

@@ -1,3 +1,4 @@
+import type { BuildTimeOptionsBase, UnstableVitePluginOptions } from '@sentry/core';
 import type { SentryVitePluginOptions } from '@sentry/vite-plugin';
 
 type SourceMapsOptions = {
@@ -6,6 +7,7 @@ type SourceMapsOptions = {
    * automatically generate and upload source maps to Sentry during a production build.
    *
    * @default true
+   * @deprecated Use `sourcemaps.disable` option instead of `sourceMapsUploadOptions.enabled`.
    */
   enabled?: boolean;
 
@@ -16,14 +18,19 @@ type SourceMapsOptions = {
    * @default [] - By default no files are deleted.
    *
    * The globbing patterns follow the implementation of the glob package. (https://www.npmjs.com/package/glob)
+   *
+   * @deprecated Use `sourcemaps.filesToDeleteAfterUpload` option instead of `sourceMapsUploadOptions.filesToDeleteAfterUpload`.
    */
   filesToDeleteAfterUpload?: string | Array<string>;
 
   /**
    * Options related to managing the Sentry releases for a build.
    *
    * More info: https://docs.sentry.io/product/releases/
+   *
+   * @deprecated Use the `release` option at the root of `SentryVitePluginOptions` instead.
    */
+  // todo(v11): Remove this option (currently it's not in use either, but it's kept to not cause a breaking change)
   release?: {
     /**
      * Unique identifier for the release you want to create.
@@ -40,136 +47,31 @@ type SourceMapsOptions = {
   };
 };
 
-type BundleSizeOptimizationOptions = {
-  /**
-   * If set to `true`, the plugin will attempt to tree-shake (remove) any debugging code within the Sentry SDK.
-   * Note that the success of this depends on tree shaking being enabled in your build tooling.
-   *
-   * Setting this option to `true` will disable features like the SDK's `debug` option.
-   */
-  excludeDebugStatements?: boolean;
-
-  /**
-   * If set to true, the plugin will try to tree-shake tracing statements out.
-   * Note that the success of this depends on tree shaking generally being enabled in your build.
-   * Attention: DO NOT enable this when you're using any performance monitoring-related SDK features (e.g. Sentry.startSpan()).
-   */
-  excludeTracing?: boolean;
-
-  /**
-   * If set to `true`, the plugin will attempt to tree-shake (remove) code related to the Sentry SDK's Session Replay Shadow DOM recording functionality.
-   * Note that the success of this depends on tree shaking being enabled in your build tooling.
-   *
-   * This option is safe to be used when you do not want to capture any Shadow DOM activity via Sentry Session Replay.
-   */
-  excludeReplayShadowDom?: boolean;
-
-  /**
-   * If set to `true`, the plugin will attempt to tree-shake (remove) code related to the Sentry SDK's Session Replay `iframe` recording functionality.
-   * Note that the success of this depends on tree shaking being enabled in your build tooling.
-   *
-   * You can safely do this when you do not want to capture any `iframe` activity via Sentry Session Replay.
-   */
-  excludeReplayIframe?: boolean;
-
-  /**
-   * If set to `true`, the plugin will attempt to tree-shake (remove) code related to the Sentry SDK's Session Replay's Compression Web Worker.
-   * Note that the success of this depends on tree shaking being enabled in your build tooling.
-   *
-   * **Notice:** You should only do use this option if you manually host a compression worker and configure it in your Sentry Session Replay integration config via the `workerUrl` option.
-   */
-  excludeReplayWorker?: boolean;
-};
-
-export type SentryReactRouterBuildOptions = {
-  /**
-   * Options for configuring the Sentry release.
-   */
-  release?: {
-    /**
-     * The name of the release to create in Sentry
-     */
-    name?: string;
-  };
-
-  /**
-   * The auth token to use when uploading source maps to Sentry.
-   *
-   * Instead of specifying this option, you can also set the `SENTRY_AUTH_TOKEN` environment variable.
-   *
-   * To create an auth token, follow this guide:
-   * @see https://docs.sentry.io/product/accounts/auth-tokens/#organization-auth-tokens
-   */
-  authToken?: string;
-
-  /**
-   * The organization slug of your Sentry organization.
-   * Instead of specifying this option, you can also set the `SENTRY_ORG` environment variable.
-   */
-  org?: string;
-
-  /**
-   * The project slug of your Sentry project.
-   * Instead of specifying this option, you can also set the `SENTRY_PROJECT` environment variable.
-   */
-  project?: string;
-
-  /**
-   * Options for the Sentry Vite plugin to customize bundle size optimizations.
-   */
-  bundleSizeOptimizations?: BundleSizeOptimizationOptions;
-
-  /**
-   * If this flag is `true`, Sentry will log debug information during build time.
-   * @default false.
-   */
-  debug?: boolean;
-
-  /**
-   * Options related to react component name annotations.
-   * Disabled by default, unless a value is set for this option.
-   * When enabled, your app's DOM will automatically be annotated during build-time with their respective component names.
-   * This will unlock the capability to search for Replays in Sentry by component name, as well as see component names in breadcrumbs and performance monitoring.
-   * Please note that this feature is not currently supported by the esbuild bundler plugins, and will only annotate React components
-   */
-  reactComponentAnnotation?: {
+export type SentryReactRouterBuildOptions = BuildTimeOptionsBase &
+  UnstableVitePluginOptions<Partial<SentryVitePluginOptions>> & {
     /**
-     * Whether the component name annotate plugin should be enabled or not.
+     * Options related to react component name annotations.
+     * Disabled by default, unless a value is set for this option.
+     * When enabled, your app's DOM will automatically be annotated during build-time with their respective component names.
+     * This will unlock the capability to search for Replays in Sentry by component name, as well as see component names in breadcrumbs and performance monitoring.
+     * Please note that this feature is not currently supported by the esbuild bundler plugins, and will only annotate React components
      */
-    enabled?: boolean;
+    reactComponentAnnotation?: {
+      /**
+       * Whether the component name annotate plugin should be enabled or not.
+       */
+      enabled?: boolean;
+
+      /**
+       * A list of strings representing the names of components to ignore. The plugin will not apply `data-sentry` annotations on the DOM element for these components.
+       */
+      ignoredComponents?: string[];
+    };
 
     /**
-     * A list of strings representing the names of components to ignore. The plugin will not apply `data-sentry` annotations on the DOM element for these components.
+     * Options for the Sentry Vite plugin to customize the source maps upload process.
+     *
      */
-    ignoredComponents?: string[];
+    sourceMapsUploadOptions?: SourceMapsOptions;
+    // todo(v11): Remove this option (all options already exist in BuildTimeOptionsBase)
   };
-
-  /**
-   * Options for the Sentry Vite plugin to customize the source maps upload process.
-   *
-   */
-  sourceMapsUploadOptions?: SourceMapsOptions;
-
-  /**
-   * If this flag is `true`, the Sentry plugin will collect some telemetry data and send it to Sentry.
-   * It will not collect any sensitive or user-specific data.
-   *
-   * @default true
-   */
-  telemetry?: boolean;
-
-  /**
-   * Options to further customize the Sentry Vite Plugin (@sentry/vite-plugin) behavior directly.
-   * Options specified in this object take precedence over the options specified in
-   * the `sourcemaps` and `release` objects.
-   *
-   * @see https://www.npmjs.com/package/@sentry/vite-plugin/v/2.22.2#options which lists all available options.
-   *
-   * Warning: Options within this object are subject to change at any time.
-   * We DO NOT guarantee semantic versioning for these options, meaning breaking
-   * changes can occur at any time within a major SDK version.
-   *
-   * Furthermore, some options are untested with SvelteKit specifically. Use with caution.
-   */
-  unstable_sentryVitePluginOptions?: Partial<SentryVitePluginOptions>;
-};

packages/react-router/test/client/tracingIntegration.test.ts

@@ -17,6 +17,7 @@ describe('reactRouterTracingIntegration', () => {
 
   it('calls instrumentHydratedRouter and browserTracingIntegrationInstance.afterAllSetup in afterAllSetup', () => {
     const browserTracingSpy = vi.spyOn(sentryBrowser, 'browserTracingIntegration').mockImplementation(() => ({
+      setup: vi.fn(),
       afterAllSetup: vi.fn(),
       name: 'BrowserTracing',
     }));