feat(solidstart): Add sentrySolidStart plugin

Author: andreiborza

packages/solidstart/.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
       files: ['src/vite/**', 'src/server/**'],
       rules: {
         '@sentry-internal/sdk/no-optional-chaining': 'off',
+        '@sentry-internal/sdk/no-nullish-coalescing': 'off',
       },
     },
   ],

packages/solidstart/README.md

@@ -157,58 +157,36 @@ render(
 );
 ```
 
-# Sourcemaps and Releases
+## Uploading Source Maps
 
-To generate and upload source maps of your Solid Start app use our Vite bundler plugin.
-
-1. Install the Sentry Vite plugin
-
-```bash
-# Using npm
-npm install @sentry/vite-plugin --save-dev
-
-# Using yarn
-yarn add @sentry/vite-plugin --dev
-```
-
-2. Configure the vite plugin
-
-To upload source maps you have to configure an auth token. Auth tokens can be passed to the plugin explicitly with the
-`authToken` option, with a `SENTRY_AUTH_TOKEN` environment variable, or with an `.env.sentry-build-plugin` file in the
-working directory when building your project. We recommend you add the auth token to your CI/CD environment as an
-environment variable.
+To upload source maps, add the `sentrySolidStart` plugin from `@sentry/solidstart` to your `app.config.ts` and configure
+an auth token. Auth tokens can be passed to the plugin explicitly with the `authToken` option, with a
+`SENTRY_AUTH_TOKEN` environment variable, or with an `.env.sentry-build-plugin` file in the working directory when
+building your project. We recommend you add the auth token to your CI/CD environment as an environment variable.
 
 Learn more about configuring the plugin in our
 [Sentry Vite Plugin documentation](https://www.npmjs.com/package/@sentry/vite-plugin).
 
-```bash
-// .env.sentry-build-plugin
-SENTRY_AUTH_TOKEN=<your auth token>
-SENTRY_ORG=<your org>
-SENTRY_PROJECT=<your project name>
-```
-
-3. Finally, add the plugin to your `app.config.ts` file.
-
-```javascript
+```typescript
+// app.config.ts
 import { defineConfig } from '@solidjs/start/config';
-import { sentryVitePlugin } from '@sentry/vite-plugin';
+import { sentrySolidStart } from '@sentry/solidstart';
 
 export default defineConfig({
-  // rest of your config
   // ...
 
   vite: {
-    build: {
-      sourcemap: true,
-    },
     plugins: [
-      sentryVitePlugin({
-        org: process.env.SENTRY_ORG,
-        project: process.env.SENTRY_PROJECT,
-        authToken: process.env.SENTRY_AUTH_TOKEN,
+      sentrySolidStart({
+        sourceMapsUploadOptions: {
+          org: process.env.SENTRY_ORG,
+          project: process.env.SENTRY_PROJECT,
+          authToken: process.env.SENTRY_AUTH_TOKEN,
+        },
+        debug: true,
       }),
     ],
   },
+  // ...
 });
 ```

packages/solidstart/package.json

@@ -84,7 +84,7 @@
     "@sentry/solid": "8.26.0",
     "@sentry/types": "8.26.0",
     "@sentry/utils": "8.26.0",
-    "@sentry/vite-plugin": "2.19.0"
+    "@sentry/vite-plugin": "2.22.2"
   },
   "devDependencies": {
     "@solidjs/router": "^0.13.4",

packages/solidstart/src/index.server.ts

@@ -1 +1,2 @@
 export * from './server';
+export * from './vite';

packages/solidstart/src/index.types.ts

@@ -3,6 +3,7 @@
 // exports in this file - which we do below.
 export * from './client';
 export * from './server';
+export * from './vite';
 
 import type { Integration, Options, StackParser } from '@sentry/types';
 

packages/solidstart/src/vite/index.ts

@@ -0,0 +1,43 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin';
+import type { Plugin } from 'vite';
+import type { SentrySolidStartPluginOptions } from './types';
+
+export const sentrySolidStart = (options: SentrySolidStartPluginOptions): Plugin[] => {
+  const sourceMapsUploadOptions = options.sourceMapsUploadOptions || {};
+
+  const sentryPlugins: Plugin[] = [];
+
+  if (process.env.NODE_ENV !== 'development') {
+    sentryPlugins.push(
+      {
+        name: 'sentry-solidstart-plugin-config',
+        config() {
+          return {
+            build: {
+              sourcemap: true,
+            },
+          };
+        },
+      },
+      sentryVitePlugin({
+        org: sourceMapsUploadOptions.org ?? process.env.SENTRY_ORG,
+        project: sourceMapsUploadOptions.project ?? process.env.SENTRY_PROJECT,
+        authToken: sourceMapsUploadOptions.authToken ?? process.env.SENTRY_AUTH_TOKEN,
+        telemetry: sourceMapsUploadOptions.telemetry ?? true,
+        sourcemaps: {
+          assets: sourceMapsUploadOptions.sourcemaps?.assets ?? undefined,
+          ignore: sourceMapsUploadOptions.sourcemaps?.ignore ?? undefined,
+          filesToDeleteAfterUpload: sourceMapsUploadOptions.sourcemaps?.filesToDeleteAfterUpload ?? undefined,
+        },
+        _metaOptions: {
+          telemetry: {
+            metaFramework: 'solidstart',
+          },
+        },
+        debug: options.debug ?? false,
+      }),
+    );
+  }
+
+  return sentryPlugins;
+};

packages/solidstart/src/vite/types.ts

@@ -0,0 +1,88 @@
+type SourceMapsOptions = {
+  /**
+   * If this flag is `true`, and an auth token is detected, the Sentry SDK will
+   * automatically generate and upload source maps to Sentry during a production build.
+   *
+   * @default true
+   */
+  enabled?: boolean;
+
+  /**
+   * 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.
+     *
+     * 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>;
+  };
+};
+
+/**
+ *  Build options for the Sentry module. These options are used during build-time by the Sentry SDK.
+ */
+export type SentrySolidStartPluginOptions = {
+  /**
+   * Options for the Sentry Vite plugin to customize the source maps upload process.
+   */
+  sourceMapsUploadOptions?: SourceMapsOptions;
+
+  /**
+   * Enable debug functionality of the SDK during build-time.
+   * Enabling this will give you, for example, logs about source maps.
+   */
+  debug?: boolean;
+};

packages/solidstart/test/server/withServerActionInstrumentation.test.ts

@@ -10,9 +10,9 @@ import {
   spanToJSON,
 } from '@sentry/node';
 import { NodeClient } from '@sentry/node';
-import { solidRouterBrowserTracingIntegration } from '@sentry/solidstart/solidrouter';
 import { redirect } from '@solidjs/router';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { solidRouterBrowserTracingIntegration } from '../../src/client/solidrouter';
 
 const mockCaptureException = vi.spyOn(SentryNode, 'captureException').mockImplementation(() => '');
 const mockFlush = vi.spyOn(SentryNode, 'flush').mockImplementation(async () => true);