feat(sveltekit): Inject Sentry.init calls into server and client bundles (#7391)

Add an initial version of `Sentry.init` call injection to our new SvelteKit SDK:
Specifically, we add a `withSentryViteConfig` wrapper function, which users will need to wrap around their Vite config. This will:

* Inject a Vite plugin which takes care of injecting `Sentry.init` calls from `sentry.(client|server).config.(ts|js)` files, providing a DX identical to the NextJS SDK.
  * The server-side init is injected into the server `index.js` file
  * The client-side init is injected into the `app.js` file 
  * The injection works both for production builds (with the Node adapter for now) as well as for a local dev server
* Add the root directory of the project to the allowed directories for the Vite dev server. We need this so that the client config is correctly picked up by the Vite dev server.

Author: Lms24

packages/sveltekit/package.json

@@ -24,11 +24,13 @@
     "@sentry/node": "7.42.0",
     "@sentry/svelte": "7.42.0",
     "@sentry/types": "7.42.0",
-    "@sentry/utils": "7.42.0"
+    "@sentry/utils": "7.42.0",
+    "magic-string": "^0.30.0"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^1.10.0",
-    "vite": "^4.0.0"
+    "@sveltejs/kit": "^1.5.0",
+    "vite": "4.0.0",
+    "typescript": "^4.9.3"
   },
   "scripts": {
     "build": "run-p build:transpile build:types",

packages/sveltekit/src/config/index.ts

@@ -0,0 +1 @@
+export { withSentryViteConfig } from './withSentryViteConfig';

packages/sveltekit/src/config/vitePlugins.ts

@@ -0,0 +1,73 @@
+import { logger } from '@sentry/utils';
+import * as fs from 'fs';
+import MagicString from 'magic-string';
+import * as path from 'path';
+import type { Plugin, TransformResult } from 'vite';
+
+const serverIndexFilePath = path.join('@sveltejs', 'kit', 'src', 'runtime', 'server', 'index.js');
+const devClientAppFilePath = path.join('generated', 'client', 'app.js');
+const prodClientAppFilePath = path.join('generated', 'client-optimized', 'app.js');
+
+/**
+ * This plugin injects the `Sentry.init` calls from `sentry.(client|server).config.(ts|js)`
+ * into SvelteKit runtime files.
+ */
+export const injectSentryInitPlugin: Plugin = {
+  name: 'sentry-init-injection-plugin',
+
+  // In this hook, we inject the `Sentry.init` calls from `sentry.(client|server).config.(ts|js)`
+  // into SvelteKit runtime files: For the server, we inject it into the server's `index.js`
+  // file. For the client, we use the `_app.js` file.
+  transform(code, id) {
+    if (id.endsWith(serverIndexFilePath)) {
+      logger.debug('Injecting Server Sentry.init into', id);
+      return addSentryConfigFileImport('server', code, id) || code;
+    }
+
+    if (id.endsWith(devClientAppFilePath) || id.endsWith(prodClientAppFilePath)) {
+      logger.debug('Injecting Client Sentry.init into', id);
+      return addSentryConfigFileImport('client', code, id) || code;
+    }
+
+    return code;
+  },
+
+  // This plugin should run as early as possible,
+  // setting `enforce: 'pre'` ensures that it runs before the built-in vite plugins.
+  // see: https://vitejs.dev/guide/api-plugin.html#plugin-ordering
+  enforce: 'pre',
+};
+
+function addSentryConfigFileImport(
+  platform: 'server' | 'client',
+  originalCode: string,
+  entryFileId: string,
+): TransformResult | undefined {
+  const projectRoot = process.cwd();
+  const sentryConfigFilename = getUserConfigFile(projectRoot, platform);
+
+  if (!sentryConfigFilename) {
+    logger.error(`Could not find sentry.${platform}.config.(ts|js) file.`);
+    return undefined;
+  }
+
+  const filePath = path.join(path.relative(path.dirname(entryFileId), projectRoot), sentryConfigFilename);
+  const importStmt = `\nimport "${filePath}";`;
+
+  const ms = new MagicString(originalCode);
+  ms.append(importStmt);
+
+  return { code: ms.toString(), map: ms.generateMap() };
+}
+
+function getUserConfigFile(projectDir: string, platform: 'server' | 'client'): string | undefined {
+  const possibilities = [`sentry.${platform}.config.ts`, `sentry.${platform}.config.js`];
+
+  for (const filename of possibilities) {
+    if (fs.existsSync(path.resolve(projectDir, filename))) {
+      return filename;
+    }
+  }
+
+  throw new Error(`Cannot find '${possibilities[0]}' or '${possibilities[1]}' in '${projectDir}'.`);
+}

packages/sveltekit/src/config/withSentryViteConfig.ts

@@ -0,0 +1,52 @@
+import type { UserConfig, UserConfigExport } from 'vite';
+
+import { injectSentryInitPlugin } from './vitePlugins';
+
+/**
+ * This function adds Sentry-specific configuration to your Vite config.
+ * Pass your config to this function and make sure the return value is exported
+ * from your `vite.config.js` file.
+ *
+ * Note: If you're already wrapping your config with another wrapper,
+ * for instance with `defineConfig` from vitest, make sure
+ * that the Sentry wrapper is the outermost one.
+ *
+ * @param originalConfig your original vite config
+ *
+ * @returns a vite config with Sentry-specific configuration added to it.
+ */
+export function withSentryViteConfig(originalConfig: UserConfigExport): UserConfigExport {
+  if (typeof originalConfig === 'function') {
+    return function (this: unknown, ...viteConfigFunctionArgs: unknown[]): UserConfig | Promise<UserConfig> {
+      const userViteConfigObject = originalConfig.apply(this, viteConfigFunctionArgs);
+      if (userViteConfigObject instanceof Promise) {
+        return userViteConfigObject.then(userConfig => addSentryConfig(userConfig));
+      }
+      return addSentryConfig(userViteConfigObject);
+    };
+  } else if (originalConfig instanceof Promise) {
+    return originalConfig.then(userConfig => addSentryConfig(userConfig));
+  }
+  return addSentryConfig(originalConfig);
+}
+
+function addSentryConfig(originalConfig: UserConfig): UserConfig {
+  const config = {
+    ...originalConfig,
+    plugins: originalConfig.plugins ? [injectSentryInitPlugin, ...originalConfig.plugins] : [injectSentryInitPlugin],
+  };
+
+  const mergedDevServerFileSystemConfig: UserConfig['server'] = {
+    fs: {
+      ...(config.server && config.server.fs),
+      allow: [...((config.server && config.server.fs && config.server.fs.allow) || []), '.'],
+    },
+  };
+
+  config.server = {
+    ...config.server,
+    ...mergedDevServerFileSystemConfig,
+  };
+
+  return config;
+}

packages/sveltekit/src/index.server.ts

@@ -1,4 +1,5 @@
 export * from './server';
+export * from './config';
 
 // This file is the main entrypoint on the server and/or when the package is `require`d
 

packages/sveltekit/src/index.types.ts

@@ -4,6 +4,7 @@
 // Some of the exports collide, which is not allowed, unless we redifine the colliding
 // exports in this file - which we do below.
 export * from './client';
+export * from './config';
 export * from './server';
 
 import type { Integration, Options, StackParser } from '@sentry/types';

packages/sveltekit/test/config/vitePlugins.test.ts

@@ -0,0 +1,58 @@
+import * as fs from 'fs';
+
+import { injectSentryInitPlugin } from '../../src/config/vitePlugins';
+
+describe('injectSentryInitPlugin', () => {
+  it('has its basic properties set', () => {
+    expect(injectSentryInitPlugin.name).toBe('sentry-init-injection-plugin');
+    expect(injectSentryInitPlugin.enforce).toBe('pre');
+    expect(typeof injectSentryInitPlugin.transform).toBe('function');
+  });
+
+  describe('tansform', () => {
+    jest.spyOn(fs, 'existsSync').mockReturnValue(true);
+
+    it('transforms the server index file', () => {
+      const code = 'foo();';
+      const id = '/node_modules/@sveltejs/kit/src/runtime/server/index.js';
+
+      // @ts-ignore -- transform is definitely defined and callable. Seems like TS doesn't know that.
+      const result = injectSentryInitPlugin.transform(code, id);
+
+      expect(result.code).toMatch(/foo\(\);\n.*import ".*sentry\.server\.config\.ts";/gm);
+      expect(result.map).toBeDefined();
+    });
+
+    it('transforms the client index file (dev server)', () => {
+      const code = 'foo();';
+      const id = '.svelte-kit/generated/client/app.js';
+
+      // @ts-ignore -- transform is definitely defined and callable. Seems like TS doesn't know that.
+      const result = injectSentryInitPlugin.transform(code, id);
+
+      expect(result.code).toMatch(/foo\(\);\n.*import ".*sentry\.client\.config\.ts";/gm);
+      expect(result.map).toBeDefined();
+    });
+
+    it('transforms the client index file (prod build)', () => {
+      const code = 'foo();';
+      const id = '.svelte-kit/generated/client-optimized/app.js';
+
+      // @ts-ignore -- transform is definitely defined and callable. Seems like TS doesn't know that.
+      const result = injectSentryInitPlugin.transform(code, id);
+
+      expect(result.code).toMatch(/foo\(\);\n.*import ".*sentry\.client\.config\.ts";/gm);
+      expect(result.map).toBeDefined();
+    });
+
+    it("doesn't transform other files", () => {
+      const code = 'foo();';
+      const id = './src/routes/+page.ts';
+
+      // @ts-ignore -- transform is definitely defined and callable. Seems like TS doesn't know that.
+      const result = injectSentryInitPlugin.transform(code, id);
+
+      expect(result).toBe(code);
+    });
+  });
+});

packages/sveltekit/test/config/withSentryViteConfig.test.ts

@@ -0,0 +1,118 @@
+import type { Plugin, UserConfig } from 'vite';
+
+import { withSentryViteConfig } from '../../src/config/withSentryViteConfig';
+
+describe('withSentryViteConfig', () => {
+  const originalConfig = {
+    plugins: [{ name: 'foo' }],
+    server: {
+      fs: {
+        allow: ['./bar'],
+      },
+    },
+    test: {
+      include: ['src/**/*.{test,spec}.{js,ts}'],
+    },
+  };
+
+  it('takes a POJO Vite config and returns the sentrified version', () => {
+    const sentrifiedConfig = withSentryViteConfig(originalConfig);
+
+    expect(typeof sentrifiedConfig).toBe('object');
+
+    const plugins = (sentrifiedConfig as UserConfig).plugins as Plugin[];
+
+    expect(plugins).toHaveLength(2);
+    expect(plugins[0].name).toBe('sentry-init-injection-plugin');
+    expect(plugins[1].name).toBe('foo');
+
+    expect((sentrifiedConfig as UserConfig).server?.fs?.allow).toStrictEqual(['./bar', '.']);
+
+    expect((sentrifiedConfig as any).test).toEqual(originalConfig.test);
+  });
+
+  it('takes a Vite config Promise and returns the sentrified version', async () => {
+    const sentrifiedConfig = await withSentryViteConfig(Promise.resolve(originalConfig));
+
+    expect(typeof sentrifiedConfig).toBe('object');
+
+    const plugins = (sentrifiedConfig as UserConfig).plugins as Plugin[];
+
+    expect(plugins).toHaveLength(2);
+    expect(plugins[0].name).toBe('sentry-init-injection-plugin');
+    expect(plugins[1].name).toBe('foo');
+
+    expect((sentrifiedConfig as UserConfig).server?.fs?.allow).toStrictEqual(['./bar', '.']);
+
+    expect((sentrifiedConfig as any).test).toEqual(originalConfig.test);
+  });
+
+  it('takes a function returning a Vite config and returns the sentrified version', () => {
+    const sentrifiedConfigFunction = withSentryViteConfig(_env => {
+      return originalConfig;
+    });
+    const sentrifiedConfig =
+      typeof sentrifiedConfigFunction === 'function' && sentrifiedConfigFunction({ command: 'build', mode: 'test' });
+
+    expect(typeof sentrifiedConfig).toBe('object');
+
+    const plugins = (sentrifiedConfig as UserConfig).plugins as Plugin[];
+
+    expect(plugins).toHaveLength(2);
+    expect(plugins[0].name).toBe('sentry-init-injection-plugin');
+    expect(plugins[1].name).toBe('foo');
+
+    expect((sentrifiedConfig as UserConfig).server?.fs?.allow).toStrictEqual(['./bar', '.']);
+
+    expect((sentrifiedConfig as any).test).toEqual(originalConfig.test);
+  });
+
+  it('takes a function returning a Vite config promise and returns the sentrified version', async () => {
+    const sentrifiedConfigFunction = withSentryViteConfig(_env => {
+      return Promise.resolve(originalConfig);
+    });
+    const sentrifiedConfig =
+      typeof sentrifiedConfigFunction === 'function' &&
+      (await sentrifiedConfigFunction({ command: 'build', mode: 'test' }));
+
+    expect(typeof sentrifiedConfig).toBe('object');
+
+    const plugins = (sentrifiedConfig as UserConfig).plugins as Plugin[];
+
+    expect(plugins).toHaveLength(2);
+    expect(plugins[0].name).toBe('sentry-init-injection-plugin');
+    expect(plugins[1].name).toBe('foo');
+
+    expect((sentrifiedConfig as UserConfig).server?.fs?.allow).toStrictEqual(['./bar', '.']);
+
+    expect((sentrifiedConfig as any).test).toEqual(originalConfig.test);
+  });
+
+  it('adds the vite plugin if no plugins are present', () => {
+    const sentrifiedConfig = withSentryViteConfig({
+      test: {
+        include: ['src/**/*.{test,spec}.{js,ts}'],
+      },
+    } as UserConfig);
+
+    expect(typeof sentrifiedConfig).toBe('object');
+
+    const plugins = (sentrifiedConfig as UserConfig).plugins as Plugin[];
+
+    expect(plugins).toHaveLength(1);
+    expect(plugins[0].name).toBe('sentry-init-injection-plugin');
+  });
+
+  it('adds the vite plugin and server config to an empty vite config', () => {
+    const sentrifiedConfig = withSentryViteConfig({});
+
+    expect(typeof sentrifiedConfig).toBe('object');
+
+    const plugins = (sentrifiedConfig as UserConfig).plugins as Plugin[];
+
+    expect(plugins).toHaveLength(1);
+    expect(plugins[0].name).toBe('sentry-init-injection-plugin');
+
+    expect((sentrifiedConfig as UserConfig).server?.fs?.allow).toStrictEqual(['.']);
+  });
+});