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

This PR updates `@sentry/vite-plugin` used in the SvelteKit SDK from
version 0.6.x to the latest 2.x version. In line with this change, we
now also decoupled the public API of the vite plugin from the SvelteKit
SDK public API, meaning we can bump to a higher plugin major version
while we stay in the same SDK major version.

Concrete changes:
- We now use DebugId-based sourcemap upload 🎉 
- Due to architecture changes in `@sentry/vite-plugin`, our
`sentrySvelteKit` plugin factory function returns 6 (5x sourcemap, 1x
auto instrumentation) plugins instead of previously two. This is because
the Vite plugin now consists of several individual plugins.
- We still have to modify source maps a bit before uploading them and
all of this should still happen as late as possible. So we still create
a customized version of the uploading plugin and return that instead of
the original one.
- Also added direct usage of `MagicString` to inject global values
needed during runtime. Previously, I just handed my modified code to the
original plugin's `transform` hook which might have even messed up
source maps.
- The new API is a subset of all Sentry Vite plugin options.
- I'm happy to add more options before merging this PR. I just don't
think we need all of them right from the start. As an alternative, we
could allow users to pass in arbitrary options and we type them as
`unknown` or something along these lines 🤔

Example usage (showing all available options; all are optional)

```js
sentrySvelteKit({
  autoUploadSourceMaps: true,
  sourceMapsUploadOptions: {
    org: process.env.SENTRY_ORG,
    project: process.env.SENTRY_PROJECT,
    authToken: process.env.SENTRY_AUTH_TOKEN,
    release: {
	    name: '1.0.1',
	    inject: true
    },
    sourcemaps: {
	    assets: ['./build/*/**/*'],
	    ignore: ['**/build/client/**/*'],
	    filesToDeleteAfterUpload: ['./build/**/*.map']
    }
  },
  autoInstrument: true,
  debug: true
}),
```

closes #9835 
closes #8283

---------

Co-authored-by: Francesco Novy <[email protected]>

Author: Lms24

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[] {