feat(sveltekit): Add bundle size optimizations to plugin options (#13318

) Makes it possible to add bundle size optimizations along with source maps options to the SvelteKit plugin options like this: ```js sourceMapsUploadOptions: { authToken: 'token', org: 'org', project: 'project', }, bundleSizeOptimizations: { excludePerformanceMonitoring: true, excludeTracing: true }, ``` A bit of refactoring was done as well in the PR: - exported all types necessary for the plugin from `./types` - create a function `generateVitePluginOptions` which merges all SvelteKit plugin options correctly to create the Vite Plugin options (+ tests for this function) part of #13011
getsentry · Aug 12, 2024 · 4e6c02c · 4e6c02c
1 parent 345dd74
commit 4e6c02c
Show file tree

Hide file tree

Showing 7 changed files with 504 additions and 190 deletions.
diff --git a/packages/astro/src/integration/types.ts b/packages/astro/src/integration/types.ts
@@ -87,7 +87,7 @@ type BundleSizeOptimizationOptions = {
   /**
    * If set to true, the plugin will try to tree-shake performance monitoring 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.startTransaction()).
+   * Attention: DO NOT enable this when you're using any performance monitoring-related SDK features (e.g. Sentry.startSpan()).
    */
   excludeTracing?: boolean;
 

diff --git a/packages/sveltekit/package.json b/packages/sveltekit/package.json
@@ -46,7 +46,7 @@
     "@sentry/svelte": "8.25.0",
     "@sentry/types": "8.25.0",
     "@sentry/utils": "8.25.0",
-    "@sentry/vite-plugin": "2.20.1",
+    "@sentry/vite-plugin": "2.22.0",
     "magic-string": "0.30.7",
     "magicast": "0.2.8",
     "sorcery": "0.11.0"

diff --git a/packages/sveltekit/src/vite/sentryVitePlugins.ts b/packages/sveltekit/src/vite/sentryVitePlugins.ts
@@ -1,178 +1,10 @@
+import { dropUndefinedKeys } from '@sentry/utils';
 import type { Plugin } from 'vite';
-
-import type { SentryVitePluginOptions } from '@sentry/vite-plugin';
 import type { AutoInstrumentSelection } from './autoInstrument';
 import { makeAutoInstrumentationPlugin } from './autoInstrument';
-import type { SupportedSvelteKitAdapters } from './detectAdapter';
 import { detectAdapter } from './detectAdapter';
 import { makeCustomSentryVitePlugins } from './sourceMaps';
-
-/**
- * Options related to source maps upload to Sentry
- */
-type SourceMapsUploadOptions = {
-  /**
-   * If this flag is `true`, the Sentry plugins will automatically upload source maps to Sentry.
-   * @default true`.
-   */
-  autoUploadSourceMaps?: boolean;
-
-  /**
-   * Options for the Sentry Vite plugin to customize and override the release creation and source maps upload process.
-   * See [Sentry Vite Plugin Options](https://github.com/getsentry/sentry-javascript-bundler-plugins/tree/main/packages/vite-plugin#configuration) for a detailed description.
-   */
-  sourceMapsUploadOptions?: {
-    /**
-     * 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;
-
-    /**
-     * 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 related to sourcemaps
-     */
-    sourcemaps?: {
-      /**
-       * A glob or an array of globs that specify the build artifacts and source maps that will be uploaded to Sentry.
-       *
-       * If this option is not specified, sensible defaults based on your adapter and svelte.config.js
-       * setup will be used. Use this option to override these defaults, for instance if you have a
-       * customized build setup that diverges from SvelteKit's defaults.
-       *
-       * The globbing patterns must follow the implementation of the `glob` package.
-       * @see https://www.npmjs.com/package/glob#glob-primer
-       */
-      assets?: string | Array<string>;
-
-      /**
-       * A glob or an array of globs that specifies which build artifacts should not be uploaded to Sentry.
-       *
-       * @default [] - By default no files are ignored. Thus, all files matching the `assets` glob
-       * or the default value for `assets` are uploaded.
-       *
-       * The globbing patterns follow the implementation of the glob package. (https://www.npmjs.com/package/glob)
-       */
-      ignore?: string | Array<string>;
-
-      /**
-       * A glob or an array of globs that specifies the build artifacts that should be deleted after the artifact
-       * upload to Sentry has been completed.
-       *
-       * @default [] - By default no files are deleted.
-       *
-       * The globbing patterns follow the implementation of the glob package. (https://www.npmjs.com/package/glob)
-       */
-      filesToDeleteAfterUpload?: string | Array<string>;
-    };
-
-    /**
-     * Options related to managing the Sentry releases for a build.
-     *
-     * Note: Managing releases is optional and not required for uploading source maps.
-     */
-    release?: {
-      /**
-       * Unique identifier for the release you want to create.
-       * This value can also be specified via the SENTRY_RELEASE environment variable.
-       *
-       * Defaults to automatically detecting a value for your environment. This includes values for Cordova, Heroku,
-       * AWS CodeBuild, CircleCI, Xcode, and Gradle, and otherwise uses the git HEAD's commit SHA (the latter requires
-       * access to git CLI and for the root directory to be a valid repository).
-       *
-       * If you didn't provide a value and the plugin can't automatically detect one, no release will be created.
-       */
-      name?: string;
-
-      /**
-       * Whether the plugin should inject release information into the build for the SDK to pick it up when
-       * sending events.
-       *
-       * Defaults to `true`.
-       */
-      inject?: 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.14.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>;
-  };
-};
-
-type AutoInstrumentOptions = {
-  /**
-   * The Sentry plugin will automatically instrument certain parts of your SvelteKit application at build time.
-   * Set this option to `false` to disable this behavior or what is instrumentated by passing an object.
-   *
-   * Auto instrumentation includes:
-   * - Universal `load` functions in `+page.(js|ts)` files
-   * - Server-only `load` functions in `+page.server.(js|ts)` files
-   *
-   * @default true (meaning, the plugin will instrument all of the above)
-   */
-  autoInstrument?: boolean | AutoInstrumentSelection;
-};
-
-export type SentrySvelteKitPluginOptions = {
-  /**
-   * If this flag is `true`, the Sentry plugins will log some useful debug information.
-   * @default false.
-   */
-  debug?: boolean;
-
-  /**
-   * Specify which SvelteKit adapter you're using.
-   * By default, the SDK will attempt auto-detect the used adapter at build time and apply the
-   * correct config for source maps upload or auto-instrumentation.
-   *
-   * Currently, the SDK supports the following adapters:
-   * - node (@sveltejs/adapter-node)
-   * - auto (@sveltejs/adapter-auto) only Vercel
-   * - vercel (@sveltejs/adapter-auto) only Serverless functions, no edge runtime
-   *
-   * Set this option, if the SDK detects the wrong adapter or you want to use an adapter
-   * that is not in this list. If you specify 'other', you'll most likely need to configure
-   * source maps upload yourself.
-   *
-   * @default {} the SDK attempts to auto-detect the used adapter at build time
-   */
-  adapter?: SupportedSvelteKitAdapters;
-} & SourceMapsUploadOptions &
-  AutoInstrumentOptions;
+import type { CustomSentryVitePluginOptions, SentrySvelteKitPluginOptions } from './types';
 
 const DEFAULT_PLUGIN_OPTIONS: SentrySvelteKitPluginOptions = {
   autoUploadSourceMaps: true,
@@ -211,18 +43,50 @@ export async function sentrySvelteKit(options: SentrySvelteKitPluginOptions = {}
     );
   }
 
-  if (mergedOptions.autoUploadSourceMaps && process.env.NODE_ENV !== 'development') {
+  const sentryVitePluginsOptions = generateVitePluginOptions(mergedOptions);
+
+  if (sentryVitePluginsOptions) {
+    const sentryVitePlugins = await makeCustomSentryVitePlugins(sentryVitePluginsOptions);
+
+    sentryPlugins.push(...sentryVitePlugins);
+  }
+
+  return sentryPlugins;
+}
+
+/**
+ * This function creates the options for the custom Sentry Vite plugin.
+ * The options are derived from the Sentry SvelteKit plugin options, where the `_unstable` options take precedence.
+ *
+ * only exported for testing
+ */
+export function generateVitePluginOptions(
+  svelteKitPluginOptions: SentrySvelteKitPluginOptions,
+): CustomSentryVitePluginOptions | null {
+  let sentryVitePluginsOptions: CustomSentryVitePluginOptions | null = null;
+
+  // Bundle Size Optimizations
+  if (svelteKitPluginOptions.bundleSizeOptimizations) {
+    sentryVitePluginsOptions = {
+      bundleSizeOptimizations: {
+        ...svelteKitPluginOptions.bundleSizeOptimizations,
+      },
+    };
+  }
+
+  // Source Maps
+  if (svelteKitPluginOptions.autoUploadSourceMaps && process.env.NODE_ENV !== 'development') {
     const { unstable_sentryVitePluginOptions, ...sourceMapsUploadOptions } =
-      mergedOptions.sourceMapsUploadOptions || {};
+      svelteKitPluginOptions.sourceMapsUploadOptions || {};
 
-    const sentryVitePluginsOptions = {
-      ...sourceMapsUploadOptions,
+    sentryVitePluginsOptions = {
+      ...(sentryVitePluginsOptions ? sentryVitePluginsOptions : {}),
 
+      ...sourceMapsUploadOptions,
       ...unstable_sentryVitePluginOptions,
-
-      adapter: mergedOptions.adapter,
+      adapter: svelteKitPluginOptions.adapter,
       // override the plugin's debug flag with the one from the top-level options
-      debug: mergedOptions.debug,
+      debug: svelteKitPluginOptions.debug,
     };
 
     if (sentryVitePluginsOptions.sourcemaps) {
@@ -238,11 +102,7 @@ export async function sentrySvelteKit(options: SentrySvelteKitPluginOptions = {}
         ...unstable_sentryVitePluginOptions?.release,
       };
     }
-
-    const sentryVitePlugins = await makeCustomSentryVitePlugins(sentryVitePluginsOptions);
-
-    sentryPlugins.push(...sentryVitePlugins);
   }
 
-  return sentryPlugins;
+  return dropUndefinedKeys(sentryVitePluginsOptions);
 }
diff --git a/packages/sveltekit/src/vite/sourceMaps.ts b/packages/sveltekit/src/vite/sourceMaps.ts
@@ -11,10 +11,10 @@ import type { Plugin } from 'vite';
 
 import MagicString from 'magic-string';
 import { WRAPPED_MODULE_SUFFIX } from './autoInstrument';
-import type { SupportedSvelteKitAdapters } from './detectAdapter';
 import type { GlobalSentryValues } from './injectGlobalValues';
 import { VIRTUAL_GLOBAL_VALUES_FILE, getGlobalValueInjectionCode } from './injectGlobalValues';
 import { getAdapterOutputDir, getHooksFileName, loadSvelteConfig } from './svelteConfig';
+import type { CustomSentryVitePluginOptions } from './types';
 
 // sorcery has no types, so these are some basic type definitions:
 type Chain = {
@@ -25,10 +25,6 @@ type Sorcery = {
   load(filepath: string): Promise<Chain>;
 };
 
-type CustomSentryVitePluginOptions = SentryVitePluginOptions & {
-  adapter: SupportedSvelteKitAdapters;
-};
-
 // storing this in the module scope because `makeCustomSentryVitePlugin` is called multiple times
 // and we only want to generate a uuid once in case we have to fall back to it.
 const releaseName = detectSentryRelease();