feat(sveltekit): Update @sentry/vite-plugin to 2.x and adjust options API

dev-packages/node-integration-tests/suites/public-api/startSpan/with-nested-spans/scenario.ts

@@ -1,5 +1,3 @@
-import '@sentry/tracing';
-
 import * as Sentry from '@sentry/node';
 
 Sentry.init({

packages/astro/package.json

@@ -54,7 +54,7 @@
     "@sentry/node-experimental": "7.100.0",
     "@sentry/types": "7.100.0",
     "@sentry/utils": "7.100.0",
-    "@sentry/vite-plugin": "^2.8.0"
+    "@sentry/vite-plugin": "^2.14.2"
   },
   "devDependencies": {
     "astro": "^3.5.0",

packages/sveltekit/package.json

@@ -43,8 +43,9 @@
     "@sentry/svelte": "7.100.0",
     "@sentry/types": "7.100.0",
     "@sentry/utils": "7.100.0",
-    "@sentry/vite-plugin": "^0.6.1",
+    "@sentry/vite-plugin": "^2.14.2",
     "magicast": "0.2.8",
+    "magic-string": "0.30.7",
     "sorcery": "0.11.0"
   },
   "devDependencies": {

packages/sveltekit/src/vite/sentryVitePlugins.ts

@@ -1,12 +1,14 @@
-import type { SentryVitePluginOptions } from '@sentry/vite-plugin';
 import type { Plugin } from 'vite';
 
 import type { AutoInstrumentSelection } from './autoInstrument';
 import { makeAutoInstrumentationPlugin } from './autoInstrument';
 import type { SupportedSvelteKitAdapters } from './detectAdapter';
 import { detectAdapter } from './detectAdapter';
-import { makeCustomSentryVitePlugin } from './sourceMaps';
+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.
@@ -18,7 +20,101 @@ type SourceMapsUploadOptions = {
    * 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?: Partial<SentryVitePluginOptions>;
+  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;
+    };
+  };
 };
 
 type AutoInstrumentOptions = {
@@ -79,7 +175,7 @@ export async function sentrySvelteKit(options: SentrySvelteKitPluginOptions = {}
   const mergedOptions = {
     ...DEFAULT_PLUGIN_OPTIONS,
     ...options,
-    adapter: options.adapter || (await detectAdapter(options.debug || false)),
+    adapter: options.adapter || (await detectAdapter(options.debug)),
   };
 
   const sentryPlugins: Plugin[] = [];
@@ -100,12 +196,16 @@ export async function sentrySvelteKit(options: SentrySvelteKitPluginOptions = {}
   }
 
   if (mergedOptions.autoUploadSourceMaps && process.env.NODE_ENV !== 'development') {
-    const pluginOptions = {
-      ...mergedOptions.sourceMapsUploadOptions,
-      debug: mergedOptions.debug, // override the plugin's debug flag with the one from the top-level options
+    const sourceMapsUploadOptions = mergedOptions.sourceMapsUploadOptions;
+
+    const sentryVitePlugins = await makeCustomSentryVitePlugins({
+      ...sourceMapsUploadOptions,
+
       adapter: mergedOptions.adapter,
-    };
-    sentryPlugins.push(await makeCustomSentryVitePlugin(pluginOptions));
+      // override the plugin's debug flag with the one from the top-level options
+      debug: mergedOptions.debug,
+    });
+    sentryPlugins.push(...sentryVitePlugins);
   }
 
   return sentryPlugins;

packages/sveltekit/src/vite/sourceMaps.ts

@@ -9,6 +9,7 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
 import * as sorcery from 'sorcery';
 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';
@@ -24,17 +25,13 @@ type Sorcery = {
   load(filepath: string): Promise<Chain>;
 };
 
-type SentryVitePluginOptionsOptionalInclude = Omit<SentryVitePluginOptions, 'include'> & {
-  include?: SentryVitePluginOptions['include'];
-};
-
-type CustomSentryVitePluginOptions = SentryVitePluginOptionsOptionalInclude & {
+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 release = detectSentryRelease();
+const releaseName = detectSentryRelease();
 
 /**
  * Creates a new Vite plugin that uses the unplugin-based Sentry Vite plugin to create
@@ -52,28 +49,44 @@ const release = detectSentryRelease();
  *
  * @returns the custom Sentry Vite plugin
  */
-export async function makeCustomSentryVitePlugin(options?: CustomSentryVitePluginOptions): Promise<Plugin> {
+export async function makeCustomSentryVitePlugins(options?: CustomSentryVitePluginOptions): Promise<Plugin[]> {
   const svelteConfig = await loadSvelteConfig();
 
   const usedAdapter = options?.adapter || 'other';
   const outputDir = await getAdapterOutputDir(svelteConfig, usedAdapter);
-  const hasSentryProperties = fs.existsSync(path.resolve(process.cwd(), 'sentry.properties'));
 
   const defaultPluginOptions: SentryVitePluginOptions = {
-    include: [`${outputDir}/client`, `${outputDir}/server`],
-    configFile: hasSentryProperties ? 'sentry.properties' : undefined,
-    release,
+    release: {
+      name: releaseName,
+    },
   };
 
   const mergedOptions = {
     ...defaultPluginOptions,
     ...options,
+    release: {
+      ...defaultPluginOptions.release,
+      ...options?.release,
+    },
   };
+  const { debug } = mergedOptions;
 
-  const sentryPlugin: Plugin = sentryVitePlugin(mergedOptions);
+  const sentryPlugins: Plugin[] = await sentryVitePlugin(mergedOptions);
 
-  const { debug } = mergedOptions;
-  const { buildStart, renderChunk } = sentryPlugin;
+  const sentryViteDebugIdUploadPlugin = sentryPlugins.find(
+    plugin => plugin.name === 'sentry-vite-debug-id-upload-plugin',
+  );
+
+  if (!sentryViteDebugIdUploadPlugin) {
+    debug &&
+      // eslint-disable-next-line no-console
+      console.warn(
+        'sentry-vite-debug-id-upload-plugin not found in sentryPlugins! Cannot modify plugin - returning default Sentry Vite plugins',
+      );
+    return sentryPlugins;
+  }
+
+  const restOfSentryVitePlugins = sentryPlugins.filter(plugin => plugin.name !== 'sentry-vite-debug-id-upload-plugin');
 
   let isSSRBuild = true;
 
@@ -84,15 +97,10 @@ export async function makeCustomSentryVitePlugin(options?: CustomSentryVitePlugi
   };
 
   const customPlugin: Plugin = {
-    name: 'sentry-upload-source-maps',
+    name: 'sentry-upload-sveltekit-source-maps',
     apply: 'build', // only apply this plugin at build time
     enforce: 'post', // this needs to be set to post, otherwise we don't pick up the output from the SvelteKit adapter
 
-    // These hooks are copied from the original Sentry Vite plugin.
-    // They're mostly responsible for options parsing and release injection.
-    buildStart,
-    renderChunk,
-
     // Modify the config to generate source maps
     config: config => {
       // eslint-disable-next-line no-console
@@ -114,8 +122,7 @@ export async function makeCustomSentryVitePlugin(options?: CustomSentryVitePlugi
           moduleSideEffects: true,
         };
       }
-      // @ts-expect-error - this hook exists on the plugin!
-      return sentryPlugin.resolveId(id, _importer, _ref);
+      return null;
     },
 
     load: id => {
@@ -138,16 +145,19 @@ export async function makeCustomSentryVitePlugin(options?: CustomSentryVitePlugi
     },
 
     transform: async (code, id) => {
-      let modifiedCode = code;
       // eslint-disable-next-line @sentry-internal/sdk/no-regexp-constructor -- not end user input + escaped anyway
       const isServerHooksFile = new RegExp(`/${escapeStringForRegex(serverHooksFile)}(.(js|ts|mjs|mts))?`).test(id);
 
       if (isServerHooksFile) {
-        const globalValuesImport = `; import "${VIRTUAL_GLOBAL_VALUES_FILE}";`;
-        modifiedCode = `${code}\n${globalValuesImport}\n`;
+        const ms = new MagicString(code);
+        ms.append(`\n; import "${VIRTUAL_GLOBAL_VALUES_FILE}";\n`);
+        return {
+          code: ms.toString(),
+          map: ms.generateMap({ hires: true }),
+        };
       }
-      // @ts-expect-error - this hook exists on the plugin!
-      return sentryPlugin.transform(modifiedCode, id);
+
+      return null;
     },
 
     // We need to start uploading source maps later than in the original plugin
@@ -205,8 +215,12 @@ export async function makeCustomSentryVitePlugin(options?: CustomSentryVitePlugi
       }
 
       try {
+        // So here, we're just calling the original plugin's `writeBundle` method to upload the source maps.
+        // Our plugin hook expects output options to glob for source maps. We don't have this option in `closeBundle`.
+        // So we just pass in the `outDir` we determined earlier.
+        // Not pretty but my testing shows that it works.
         // @ts-expect-error - this hook exists on the plugin!
-        await sentryPlugin.writeBundle();
+        await sentryViteDebugIdUploadPlugin.writeBundle({ dir: outDir });
       } catch (_) {
         // eslint-disable-next-line no-console
         console.warn('[Source Maps Plugin] Failed to upload source maps!');
@@ -222,7 +236,7 @@ export async function makeCustomSentryVitePlugin(options?: CustomSentryVitePlugi
     },
   };
 
-  return customPlugin;
+  return [...restOfSentryVitePlugins, customPlugin];
 }
 
 function getFiles(dir: string): string[] {