Add sentrySolidStartVite plugin when using withSentry

Author: andreiborza

packages/solidstart/src/config/index.ts

@@ -1 +1,2 @@
 export * from './withSentry';
+export type { Nitro, SentrySolidStartConfigOptions } from './types';

packages/solidstart/src/config/withSentry.ts

@@ -1,41 +1,43 @@
+import { addSentryPluginToVite } from '../vite';
+import type { SentrySolidStartPluginOptions } from '../vite/types';
 import {
   addInstrumentationFileToBuild,
   experimental_addInstrumentationFileTopLevelImportToServerEntry,
 } from './addInstrumentation';
-import type {
-  Nitro,
-  SentrySolidStartConfigOptions,
-  SolidStartInlineConfig,
-  SolidStartInlineServerConfig,
-} from './types';
+import type { Nitro, SolidStartInlineConfig, SolidStartInlineServerConfig } from './types';
 
 /**
  * Modifies the passed in Solid Start configuration with build-time enhancements such as
  * building the `instrument.server.ts` file into the appropriate build folder based on
  * build preset.
  *
  * @param solidStartConfig A Solid Start configuration object, as usually passed to `defineConfig` in `app.config.ts|js`
- * @param sentrySolidStartConfigOptions Options to configure the plugin
+ * @param sentrySolidStartPluginOptions Options to configure the plugin
  * @returns The modified config to be exported and passed back into `defineConfig`
  */
 export const withSentry = (
   solidStartConfig: SolidStartInlineConfig = {},
-  sentrySolidStartConfigOptions: SentrySolidStartConfigOptions = {},
+  sentrySolidStartPluginOptions: SentrySolidStartPluginOptions = {},
 ): SolidStartInlineConfig => {
   const server = (solidStartConfig.server || {}) as SolidStartInlineServerConfig;
   const hooks = server.hooks || {};
+  const vite =
+    typeof solidStartConfig.vite === 'function'
+      ? (...args: unknown[]) => addSentryPluginToVite(solidStartConfig.vite(...args), sentrySolidStartPluginOptions)
+      : addSentryPluginToVite(solidStartConfig.vite, sentrySolidStartPluginOptions);
 
   let serverDir: string;
   let buildPreset: string;
 
   return {
     ...solidStartConfig,
+    vite,
     server: {
       ...server,
       hooks: {
         ...hooks,
         async close() {
-          if (sentrySolidStartConfigOptions.experimental_basicServerTracing) {
+          if (sentrySolidStartPluginOptions.experimental_basicServerTracing) {
             await experimental_addInstrumentationFileTopLevelImportToServerEntry(serverDir, buildPreset);
           }
 

packages/solidstart/src/vite/sentrySolidStartVite.ts

@@ -1,4 +1,4 @@
-import type { Plugin } from 'vite';
+import type { Plugin, UserConfig } from 'vite';
 import { makeBuildInstrumentationFilePlugin } from './buildInstrumentationFile';
 import { makeSourceMapsVitePlugin } from './sourceMaps';
 import type { SentrySolidStartPluginOptions } from './types';
@@ -25,3 +25,16 @@ export const sentrySolidStartVite = (options: SentrySolidStartPluginOptions = {}
 
   return sentryPlugins;
 };
+
+/**
+ * Helper to add the Sentry SolidStart vite plugin to a vite config.
+ */
+export const addSentryPluginToVite = (config: UserConfig = {}, options: SentrySolidStartPluginOptions): UserConfig => {
+  const plugins = Array.isArray(config.plugins) ? [...config.plugins] : [];
+  plugins.unshift(sentrySolidStartVite(options));
+
+  return {
+    ...config,
+    plugins,
+  };
+};

packages/solidstart/src/vite/types.ts

@@ -85,7 +85,7 @@ type BundleSizeOptimizationOptions = {
 };
 
 /**
- *  Build options for the Sentry module. These options are used during build-time by the Sentry SDK.
+ *  Build options for the Sentry plugin. These options are used during build-time by the Sentry SDK.
  */
 export type SentrySolidStartPluginOptions = {
   /**
@@ -133,4 +133,16 @@ export type SentrySolidStartPluginOptions = {
    * Defaults to: `./src/instrument.server.ts`
    */
   instrumentation?: string;
+
+  /**
+   * Enabling basic server tracing can be used for environments where modifying the node option `--import` is not possible.
+   * However, enabling this option only supports limited tracing instrumentation. Only http traces will be collected (but no database-specific traces etc.).
+   *
+   * If this option is `true`, the Sentry SDK will import the instrumentation.server.ts|js file at the top of the server entry file to load the SDK on the server.
+   *
+   * **DO NOT** enable this option if you've already added the node option `--import` in your node start script. This would initialize Sentry twice on the server-side and leads to unexpected issues.
+   *
+   * @default false
+   */
+  experimental_basicServerTracing?: boolean;
 };

packages/solidstart/test/config/withSentry.test.ts

@@ -1,5 +1,6 @@
-import { beforeEach, describe, it, vi } from 'vitest';
-import type { Nitro } from '../../build/types/config/types';
+import type { Plugin } from 'vite';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Nitro } from '../../src/config';
 import { withSentry } from '../../src/config';
 
 const userDefinedNitroRollupBeforeHookMock = vi.fn();
@@ -62,4 +63,84 @@ describe('withSentry()', () => {
     expect(experimental_addInstrumentationFileTopLevelImportToServerEntryMock).not.toHaveBeenCalled();
     expect(userDefinedNitroCloseHookMock).toHaveBeenCalled();
   });
+
+  it('adds the sentry solidstart vite plugin', () => {
+    const config = withSentry(solidStartConfig, {
+      project: 'project',
+      org: 'org',
+      authToken: 'token',
+    });
+    const names = config?.vite.plugins.flat().map((plugin: Plugin) => plugin.name);
+    expect(names).toEqual([
+      'sentry-solidstart-source-maps',
+      'sentry-telemetry-plugin',
+      'sentry-vite-release-injection-plugin',
+      'sentry-debug-id-upload-plugin',
+      'sentry-vite-debug-id-injection-plugin',
+      'sentry-vite-debug-id-upload-plugin',
+      'sentry-file-deletion-plugin',
+      'sentry-solidstart-build-instrumentation-file',
+    ]);
+  });
+
+  it('extends the passed in vite config object', () => {
+    const config = withSentry(
+      {
+        ...solidStartConfig,
+        vite: {
+          plugins: [{ name: 'my-test-plugin' }],
+        },
+      },
+      {
+        project: 'project',
+        org: 'org',
+        authToken: 'token',
+      },
+    );
+
+    const names = config?.vite.plugins.flat().map((plugin: Plugin) => plugin.name);
+    expect(names).toEqual([
+      'sentry-solidstart-source-maps',
+      'sentry-telemetry-plugin',
+      'sentry-vite-release-injection-plugin',
+      'sentry-debug-id-upload-plugin',
+      'sentry-vite-debug-id-injection-plugin',
+      'sentry-vite-debug-id-upload-plugin',
+      'sentry-file-deletion-plugin',
+      'sentry-solidstart-build-instrumentation-file',
+      'my-test-plugin',
+    ]);
+  });
+
+  it('extends the passed in vite function config', () => {
+    const config = withSentry(
+      {
+        ...solidStartConfig,
+        vite() {
+          return { plugins: [{ name: 'my-test-plugin' }] };
+        },
+      },
+      {
+        project: 'project',
+        org: 'org',
+        authToken: 'token',
+      },
+    );
+
+    const names = config
+      ?.vite()
+      .plugins.flat()
+      .map((plugin: Plugin) => plugin.name);
+    expect(names).toEqual([
+      'sentry-solidstart-source-maps',
+      'sentry-telemetry-plugin',
+      'sentry-vite-release-injection-plugin',
+      'sentry-debug-id-upload-plugin',
+      'sentry-vite-debug-id-injection-plugin',
+      'sentry-vite-debug-id-upload-plugin',
+      'sentry-file-deletion-plugin',
+      'sentry-solidstart-build-instrumentation-file',
+      'my-test-plugin',
+    ]);
+  });
 });