feat(sveltekit): Add source maps support for Vercel (lambda)

Author: Lms24

packages/sveltekit/.eslintrc.js

@@ -17,6 +17,10 @@ module.exports = {
         project: ['tsconfig.test.json'],
       },
     },
+    {
+      files: ['./src/vite/**', './src/server/**'],
+      '@sentry-internal/sdk/no-optional-chaining': 'off',
+    },
   ],
   extends: ['../../.eslintrc.js'],
 };

packages/sveltekit/src/server/utils.ts

@@ -1,9 +1,23 @@
 import type { DynamicSamplingContext, StackFrame, TraceparentData } from '@sentry/types';
-import { baggageHeaderToDynamicSamplingContext, basename, extractTraceparentData } from '@sentry/utils';
+import {
+  baggageHeaderToDynamicSamplingContext,
+  basename,
+  escapeStringForRegex,
+  extractTraceparentData,
+} from '@sentry/utils';
 import type { RequestEvent } from '@sveltejs/kit';
 
 import { WRAPPED_MODULE_SUFFIX } from '../vite/autoInstrument';
 
+/**
+ * Extend the `global` type with custom properties that are
+ * injected by the SvelteKit SDK at build time.
+ * @see packages/sveltekit/src/vite/sourcemaps.ts
+ */
+export type GlobalWithSentryValues = typeof globalThis & {
+  __sentry_sveltekit_output_dir?: string;
+};
+
 /**
  * Takes a request event and extracts traceparent and DSC data
  * from the `sentry-trace` and `baggage` DSC headers.
@@ -35,7 +49,8 @@ export function rewriteFramesIteratee(frame: StackFrame): StackFrame {
   if (!frame.filename) {
     return frame;
   }
-
+  const globalWithSentryValues: GlobalWithSentryValues = globalThis;
+  const svelteKitBuildOutDir = globalWithSentryValues.__sentry_sveltekit_output_dir;
   const prefix = 'app:///';
 
   // Check if the frame filename begins with `/` or a Windows-style prefix such as `C:\`
@@ -48,8 +63,13 @@ export function rewriteFramesIteratee(frame: StackFrame): StackFrame {
           .replace(/\\/g, '/') // replace all `\\` instances with `/`
       : frame.filename;
 
-    const base = basename(filename);
-    frame.filename = `${prefix}${base}`;
+    let strippedFilename;
+    if (svelteKitBuildOutDir) {
+      strippedFilename = filename.replace(new RegExp(`^.*${escapeStringForRegex(svelteKitBuildOutDir)}\/server\/`), '');
+    } else {
+      strippedFilename = basename(filename);
+    }
+    frame.filename = `${prefix}${strippedFilename}`;
   }
 
   delete frame.module;

packages/sveltekit/src/vite/sentryVitePlugins.ts

@@ -103,6 +103,7 @@ export async function sentrySvelteKit(options: SentrySvelteKitPluginOptions = {}
     const pluginOptions = {
       ...mergedOptions.sourceMapsUploadOptions,
       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));
   }

packages/sveltekit/src/vite/sourceMaps.ts

@@ -11,7 +11,8 @@ import * as sorcery from 'sorcery';
 import type { Plugin } from 'vite';
 
 import { WRAPPED_MODULE_SUFFIX } from './autoInstrument';
-import { getAdapterOutputDir, loadSvelteConfig } from './svelteConfig';
+import type { SupportedSvelteKitAdapters } from './detectAdapter';
+import { getAdapterOutputDir, getHooksFileName, loadSvelteConfig } from './svelteConfig';
 
 // sorcery has no types, so these are some basic type definitions:
 type Chain = {
@@ -26,6 +27,10 @@ type SentryVitePluginOptionsOptionalInclude = Omit<SentryVitePluginOptions, 'inc
   include?: SentryVitePluginOptions['include'];
 };
 
+type CustomSentryVitePluginOptions = SentryVitePluginOptionsOptionalInclude & {
+  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();
@@ -46,18 +51,15 @@ const release = detectSentryRelease();
  *
  * @returns the custom Sentry Vite plugin
  */
-export async function makeCustomSentryVitePlugin(options?: SentryVitePluginOptionsOptionalInclude): Promise<Plugin> {
+export async function makeCustomSentryVitePlugin(options?: CustomSentryVitePluginOptions): Promise<Plugin> {
   const svelteConfig = await loadSvelteConfig();
 
-  const outputDir = await getAdapterOutputDir(svelteConfig);
+  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: [
-      { paths: [`${outputDir}/client`] },
-      { paths: [`${outputDir}/server/chunks`] },
-      { paths: [`${outputDir}/server`], ignore: ['chunks/**'] },
-    ],
+    include: [{ paths: [`${outputDir}/client`] }, { paths: [`${outputDir}/server`] }],
     configFile: hasSentryProperties ? 'sentry.properties' : undefined,
     release,
   };
@@ -74,6 +76,8 @@ export async function makeCustomSentryVitePlugin(options?: SentryVitePluginOptio
 
   let isSSRBuild = true;
 
+  const serverHooksFile = getHooksFileName(svelteConfig, 'server');
+
   const customPlugin: Plugin = {
     name: 'sentry-upload-source-maps',
     apply: 'build', // only apply this plugin at build time
@@ -84,7 +88,6 @@ export async function makeCustomSentryVitePlugin(options?: SentryVitePluginOptio
     buildStart,
     resolveId,
     renderChunk,
-    transform,
 
     // Modify the config to generate source maps
     config: config => {
@@ -109,6 +112,18 @@ export async function makeCustomSentryVitePlugin(options?: SentryVitePluginOptio
       }
     },
 
+    transform: async (code, id) => {
+      let modifiedCode = code;
+      const isServerHooksFile = new RegExp(`\/${escapeStringForRegex(serverHooksFile)}(\.(js|ts|mjs|mts))?`).test(id);
+
+      if (isServerHooksFile) {
+        let injectedCode = `global.__sentry_sveltekit_output_dir = "${outputDir || 'undefined'}";\n`;
+        modifiedCode = `${code}\n${injectedCode}`;
+      }
+      // @ts-ignore - this hook exists on the plugin!
+      return sentryPlugin.transform(modifiedCode, id);
+    },
+
     // We need to start uploading source maps later than in the original plugin
     // because SvelteKit is invoking the adapter at closeBundle.
     // This means that we need to wait until the adapter is done before we start uploading.

packages/sveltekit/src/vite/svelteConfig.ts

@@ -4,6 +4,7 @@ import type { Builder, Config } from '@sveltejs/kit';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as url from 'url';
+import { SupportedSvelteKitAdapters } from './detectAdapter';
 
 /**
  * Imports the svelte.config.js file and returns the config object.
@@ -35,28 +36,46 @@ export async function loadSvelteConfig(): Promise<Config> {
   }
 }
 
+/**
+ * Reads a custom hooks directory from the SvelteKit config. In case no custom hooks
+ * directory is specified, the default directory is returned.
+ */
+export function getHooksFileName(svelteConfig: Config, hookType: 'client' | 'server') {
+  return svelteConfig.kit?.files?.hooks?.[hookType] || `src/hooks.${hookType}`;
+}
+
 /**
  * Attempts to read a custom output directory that can be specidied in the options
  * of a SvelteKit adapter. If no custom output directory is specified, the default
  * directory is returned.
- *
- * To get the directory, we have to apply a hack and call the adapter's adapt method
+ */
+export async function getAdapterOutputDir(svelteConfig: Config, adapter: SupportedSvelteKitAdapters): Promise<string> {
+  if (adapter === 'node') {
+    return await getNodeAdapterOutputDir(svelteConfig);
+  }
+
+  // Auto and Vercel adapters simply use config.kit.outDir
+  // Let's also use this directory for the 'other' case
+  return path.join(svelteConfig.kit?.outDir || '.svelte-kit', 'output');
+}
+
+/**
+ * To get the Node adapter output directory, we have to apply a hack and call the adapter's adapt method
  * with a custom adapter `Builder` that only calls the `writeClient` method.
  * This method is the first method that is called with the output directory.
  * Once we obtained the output directory, we throw an error to exit the adapter.
  *
  * see: https://github.com/sveltejs/kit/blob/master/packages/adapter-node/index.js#L17
- *
  */
-export async function getAdapterOutputDir(svelteConfig: Config): Promise<string> {
+async function getNodeAdapterOutputDir(svelteConfig: Config): Promise<string> {
   // 'build' is the default output dir for the node adapter
   let outputDir = 'build';
 
   if (!svelteConfig.kit?.adapter) {
     return outputDir;
   }
 
-  const adapter = svelteConfig.kit.adapter;
+  const nodeAdapter = svelteConfig.kit.adapter;
 
   const adapterBuilder: Builder = {
     writeClient(dest: string) {
@@ -85,7 +104,7 @@ export async function getAdapterOutputDir(svelteConfig: Config): Promise<string>
   };
 
   try {
-    await adapter.adapt(adapterBuilder);
+    await nodeAdapter.adapt(adapterBuilder);
   } catch (_) {
     // We expect the adapter to throw in writeClient!
   }

packages/sveltekit/test/server/utils.test.ts

@@ -1,7 +1,8 @@
 import { RewriteFrames } from '@sentry/integrations';
 import type { StackFrame } from '@sentry/types';
+import { basename } from '@sentry/utils';
 
-import { getTracePropagationData, rewriteFramesIteratee } from '../../src/server/utils';
+import { getTracePropagationData, GlobalWithSentryValues, rewriteFramesIteratee } from '../../src/server/utils';
 
 const MOCK_REQUEST_EVENT: any = {
   request: {
@@ -69,7 +70,7 @@ describe('rewriteFramesIteratee', () => {
     expect(result).not.toHaveProperty('module');
   });
 
-  it('does the same filename modification as the default RewriteFrames iteratee', () => {
+  it('does the same filename modification as the default RewriteFrames iteratee if no output dir is available', () => {
     const frame: StackFrame = {
       filename: '/some/path/to/server/chunks/3-ab34d22f.js',
       lineno: 1,
@@ -94,4 +95,36 @@ describe('rewriteFramesIteratee', () => {
 
     expect(result).toStrictEqual(defaultResult);
   });
+
+  it.each([
+    ['adapter-node', 'build', '/absolute/path/to/build/server/chunks/3-ab34d22f.js', 'app:///chunks/3-ab34d22f.js'],
+    [
+      'adapter-auto',
+      '.svelte-kit/output',
+      '/absolute/path/to/.svelte-kit/output/server/entries/pages/page.ts.js',
+      'app:///entries/pages/page.ts.js',
+    ],
+  ])(
+    'removes the absolut path to the server output dir, if the output dir is available (%s)',
+    (_, outputDir, frameFilename, modifiedFilename) => {
+      (global as GlobalWithSentryValues).__sentry_sveltekit_output_dir = outputDir;
+
+      const frame: StackFrame = {
+        filename: frameFilename,
+        lineno: 1,
+        colno: 1,
+        module: basename(frameFilename),
+      };
+
+      const result = rewriteFramesIteratee({ ...frame });
+
+      expect(result).toStrictEqual({
+        filename: modifiedFilename,
+        lineno: 1,
+        colno: 1,
+      });
+
+      delete (global as GlobalWithSentryValues).__sentry_sveltekit_output_dir;
+    },
+  );
 });

packages/sveltekit/test/vite/sentrySvelteKitPlugins.test.ts

@@ -72,6 +72,7 @@ describe('sentrySvelteKit()', () => {
         ignore: ['bar.js'],
       },
       autoInstrument: false,
+      adapter: 'vercel',
     });
     const plugin = plugins[0];
 
@@ -80,6 +81,7 @@ describe('sentrySvelteKit()', () => {
       debug: true,
       ignore: ['bar.js'],
       include: ['foo.js'],
+      adapter: 'vercel',
     });
   });
 

packages/sveltekit/test/vite/sourceMaps.test.ts

@@ -6,7 +6,7 @@ const mockedSentryVitePlugin = {
   buildStart: vi.fn(),
   resolveId: vi.fn(),
   renderChunk: vi.fn(),
-  transform: vi.fn(),
+  transform: vi.fn().mockImplementation((code: string, _id: string) => code),
   writeBundle: vi.fn(),
 };
 
@@ -54,6 +54,15 @@ describe('makeCustomSentryVitePlugin()', () => {
       });
     });
 
+    it('injects the output dir into the server hooks file', async () => {
+      const plugin = await makeCustomSentryVitePlugin();
+      // @ts-ignore this function exists!
+      const transformedCode = await plugin.transform('foo', '/src/hooks.server.ts');
+      const expectedtransformedCode = 'foo\nglobal.__sentry_sveltekit_output_dir = ".svelte-kit/output";\n';
+      expect(mockedSentryVitePlugin.transform).toHaveBeenCalledWith(expectedtransformedCode, '/src/hooks.server.ts');
+      expect(transformedCode).toEqual(expectedtransformedCode);
+    });
+
     it('uploads source maps during the SSR build', async () => {
       const plugin = await makeCustomSentryVitePlugin();
       // @ts-ignore this function exists!

packages/sveltekit/test/vite/svelteConfig.test.ts

@@ -1,6 +1,7 @@
 import { vi } from 'vitest';
+import { SupportedSvelteKitAdapters } from '../../src/vite/detectAdapter';
 
-import { getAdapterOutputDir, loadSvelteConfig } from '../../src/vite/svelteConfig';
+import { getAdapterOutputDir, getHooksFileName, loadSvelteConfig } from '../../src/vite/svelteConfig';
 
 let existsFile;
 
@@ -62,8 +63,33 @@ describe('getAdapterOutputDir', () => {
     },
   };
 
-  it('returns the output directory of the adapter', async () => {
-    const outputDir = await getAdapterOutputDir({ kit: { adapter: mockedAdapter } });
+  it('returns the output directory of the Node adapter', async () => {
+    const outputDir = await getAdapterOutputDir({ kit: { adapter: mockedAdapter } }, 'node');
     expect(outputDir).toEqual('customBuildDir');
   });
+
+  it.each(['vercel', 'auto', 'other'] as SupportedSvelteKitAdapters[])(
+    'returns the config.kit.outdir directory for adapter-%s',
+    async adapter => {
+      const outputDir = await getAdapterOutputDir({ kit: { outDir: 'customOutDir' } }, adapter);
+      expect(outputDir).toEqual('customOutDir/output');
+    },
+  );
+
+  it('falls back to the default out dir for all other adapters if outdir is not specified in the config', async () => {
+    const outputDir = await getAdapterOutputDir({ kit: {} }, 'vercel');
+    expect(outputDir).toEqual('.svelte-kit/output');
+  });
+});
+
+describe('getHooksFileName', () => {
+  it('returns the default hooks file name if no custom hooks file is specified', () => {
+    const hooksFileName = getHooksFileName({}, 'server');
+    expect(hooksFileName).toEqual('src/hooks.server');
+  });
+
+  it('returns the custom hooks file name if specified in the config', () => {
+    const hooksFileName = getHooksFileName({ kit: { files: { hooks: { server: 'serverhooks' } } } }, 'server');
+    expect(hooksFileName).toEqual('serverhooks');
+  });
 });