add magicstring, adapt for plugin array, mock writebundle

Author: Lms24

packages/sveltekit/package.json

@@ -46,6 +46,7 @@
     "@sentry/utils": "7.100.0",
     "@sentry/vite-plugin": "^2.14.2",
     "magicast": "0.2.8",
+    "magic-string": "0.30.7",
     "sorcery": "0.11.0"
   },
   "devDependencies": {

packages/sveltekit/src/index.types.ts

@@ -41,6 +41,7 @@ export declare function wrapLoadWithSentry<T extends (...args: any) => any>(orig
 export declare const Integrations: typeof clientSdk.Integrations & typeof serverSdk.Integrations;
 
 export declare const linkedErrorsIntegration: typeof clientSdk.linkedErrorsIntegration;
+export declare const contextLinesIntegration: typeof clientSdk.contextLinesIntegration;
 
 export declare const getDefaultIntegrations: (options: Options) => Integration[];
 export declare const defaultStackParser: StackParser;

packages/sveltekit/src/vite/sentryVitePlugins.ts

@@ -4,8 +4,11 @@ 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.
@@ -59,6 +62,33 @@ type SourceMapsUploadOptions = {
      * @default true
      */
     telemetry?: boolean;
+
+    /**
+     * 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;
+    };
   };
 };
 
@@ -120,7 +150,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[] = [];
@@ -146,7 +176,8 @@ export async function sentrySvelteKit(options: SentrySvelteKitPluginOptions = {}
       debug: mergedOptions.debug, // override the plugin's debug flag with the one from the top-level options
       adapter: mergedOptions.adapter,
     };
-    sentryPlugins.push(await makeCustomSentryVitePlugin(pluginOptions));
+    const sentryVitePlugins = await makeCustomSentryVitePlugins(pluginOptions);
+    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;
 
@@ -88,11 +101,6 @@ export async function makeCustomSentryVitePlugin(options?: CustomSentryVitePlugi
     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}";`);
+        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[] {