@sentry/wizard 3.34.4 → 3.35.0

package/src/run.ts

@@ -8,6 +8,7 @@ import type { PreselectedProject, WizardOptions } from './utils/types';
 import { runAndroidWizard } from './android/android-wizard';
 import { runAppleWizard } from './apple/apple-wizard';
 import { runNextjsWizard } from './nextjs/nextjs-wizard';
+import { runNuxtWizard } from './nuxt/nuxt-wizard';
 import { runRemixWizard } from './remix/remix-wizard';
 import { runSvelteKitWizard } from './sveltekit/sveltekit-wizard';
 import { runSourcemapsWizard } from './sourcemaps/sourcemaps-wizard';
@@ -22,6 +23,7 @@ type WizardIntegration =
   | 'cordova'
   | 'electron'
   | 'nextjs'
+  | 'nuxt'
   | 'remix'
   | 'sveltekit'
   | 'sourcemaps';
@@ -103,6 +105,7 @@ export async function run(argv: Args) {
           { value: 'cordova', label: 'Cordova' },
           { value: 'electron', label: 'Electron' },
           { value: 'nextjs', label: 'Next.js' },
+          { value: 'nuxt', label: 'Nuxt' },
           { value: 'remix', label: 'Remix' },
           { value: 'sveltekit', label: 'SvelteKit' },
           { value: 'sourcemaps', label: 'Configure Source Maps Upload' },
@@ -148,6 +151,10 @@ export async function run(argv: Args) {
       await runNextjsWizard(wizardOptions);
       break;
 
+    case 'nuxt':
+      await runNuxtWizard(wizardOptions);
+      break;
+
     case 'remix':
       await runRemixWizard(wizardOptions);
       break;

package/src/sourcemaps/tools/rollup.ts

@@ -51,7 +51,7 @@ export const configureRollupPlugin: SourceMapUploadToolConfigurationFunction =
 
     clack.log.step(`Add the following code to your rollup config:`);
 
-    // Intentially logging directly to console here so that the code can be copied/pasted directly
+    // Intentionally logging directly to console here so that the code can be copied/pasted directly
     // eslint-disable-next-line no-console
     console.log(getCodeSnippet(options));
 

package/src/sveltekit/sveltekit-wizard.ts

@@ -95,7 +95,8 @@ export async function runSvelteKitWizardWithTelemetry(
   Sentry.setTag('sdk-already-installed', sdkAlreadyInstalled);
 
   await installPackage({
-    packageName: '@sentry/sveltekit',
+    packageName: '@sentry/sveltekit@^8',
+    packageNameDisplayLabel: '@sentry/sveltekit',
     alreadyInstalled: sdkAlreadyInstalled,
   });
 

package/src/utils/clack-utils.ts

@@ -354,17 +354,21 @@ export async function installPackage({
   packageName,
   alreadyInstalled,
   askBeforeUpdating = true,
+  packageNameDisplayLabel,
 }: {
+  /** The string that is passed to the package manager CLI as identifier to install (e.g. `@sentry/nextjs`, or `@sentry/nextjs@^8`) */
   packageName: string;
   alreadyInstalled: boolean;
   askBeforeUpdating?: boolean;
+  /** Overrides what is shown in the installation logs in place of the `packageName` option. Useful if the `packageName` is ugly (e.g. `@sentry/nextjs@^8`) */
+  packageNameDisplayLabel?: string;
 }): Promise<{ packageManager?: PackageManager }> {
   return traceStep('install-package', async () => {
     if (alreadyInstalled && askBeforeUpdating) {
       const shouldUpdatePackage = await abortIfCancelled(
         clack.confirm({
           message: `The ${chalk.bold.cyan(
-            packageName,
+            packageNameDisplayLabel ?? packageName,
           )} package is already installed. Do you want to update it to the latest version?`,
         }),
       );
@@ -380,7 +384,7 @@ export async function installPackage({
 
     sdkInstallSpinner.start(
       `${alreadyInstalled ? 'Updating' : 'Installing'} ${chalk.bold.cyan(
-        packageName,
+        packageNameDisplayLabel ?? packageName,
       )} with ${chalk.bold(packageManager.label)}.`,
     );
 
@@ -425,7 +429,7 @@ export async function installPackage({
 
     sdkInstallSpinner.stop(
       `${alreadyInstalled ? 'Updated' : 'Installed'} ${chalk.bold.cyan(
-        packageName,
+        packageNameDisplayLabel ?? packageName,
       )} with ${chalk.bold(packageManager.label)}.`,
     );
 
@@ -593,7 +597,7 @@ SENTRY_AUTH_TOKEN=${authToken}
 
     if (hasAuthToken) {
       clack.log.warn(
-        `${chalk.bold(
+        `${chalk.bold.cyan(
           SENTRY_DOT_ENV_FILE,
         )} already has auth token. Will not add one.`,
       );
@@ -608,11 +612,11 @@ SENTRY_AUTH_TOKEN=${authToken}
           },
         );
         clack.log.success(
-          `Added auth token to ${chalk.bold(SENTRY_DOT_ENV_FILE)}`,
+          `Added auth token to ${chalk.bold.cyan(SENTRY_DOT_ENV_FILE)}`,
         );
       } catch {
         clack.log.warning(
-          `Failed to add auth token to ${chalk.bold(
+          `Failed to add auth token to ${chalk.bold.cyan(
             SENTRY_DOT_ENV_FILE,
           )}. Uploading source maps during build will likely not work locally.`,
         );
@@ -625,13 +629,13 @@ SENTRY_AUTH_TOKEN=${authToken}
         flag: 'w',
       });
       clack.log.success(
-        `Created ${chalk.bold(
+        `Created ${chalk.bold.cyan(
           SENTRY_DOT_ENV_FILE,
         )} with auth token for you to test source map uploading locally.`,
       );
     } catch {
       clack.log.warning(
-        `Failed to create ${chalk.bold(
+        `Failed to create ${chalk.bold.cyan(
           SENTRY_DOT_ENV_FILE,
         )} with auth token. Uploading source maps during build will likely not work locally.`,
       );
@@ -850,6 +854,7 @@ export async function getOrAskForProjectData(
   options: WizardOptions,
   platform?:
     | 'javascript-nextjs'
+    | 'javascript-nuxt'
     | 'javascript-remix'
     | 'javascript-sveltekit'
     | 'apple-ios'
@@ -1011,6 +1016,7 @@ async function askForWizardLogin(options: {
   promoCode?: string;
   platform?:
     | 'javascript-nextjs'
+    | 'javascript-nuxt'
     | 'javascript-remix'
     | 'javascript-sveltekit'
     | 'apple-ios'
@@ -1413,6 +1419,24 @@ export async function askShouldCreateExamplePage(
   );
 }
 
+export async function askShouldCreateExampleComponent(): Promise<boolean> {
+  return traceStep('ask-create-example-component', () =>
+    abortIfCancelled(
+      clack.select({
+        message: `Do you want to create an example component to test your Sentry setup?`,
+        options: [
+          {
+            value: true,
+            label: 'Yes',
+            hint: 'Recommended - Check your git status before committing!',
+          },
+          { value: false, label: 'No' },
+        ],
+      }),
+    ),
+  );
+}
+
 export async function featureSelectionPrompt<F extends ReadonlyArray<Feature>>(
   features: F,
 ): Promise<{ [key in F[number]['id']]: boolean }> {

package/test/nuxt/templates.test.ts

@@ -0,0 +1,228 @@
+import {
+  getDefaultNuxtConfig,
+  getNuxtModuleFallbackTemplate,
+  getSentryConfigContents,
+} from '../../src/nuxt/templates';
+
+describe('Nuxt code templates', () => {
+  describe('getDefaultNuxtConfig', () => {
+    it('returns a default nuxt config', () => {
+      expect(getDefaultNuxtConfig()).toMatchInlineSnapshot(`
+      "// https://nuxt.com/docs/api/configuration/nuxt-config
+      export default defineNuxtConfig({
+        compatibilityDate: '2024-04-03',
+        devtools: { enabled: true }
+      })
+      "
+`);
+    });
+  });
+
+  describe('getSentryConfigContents', () => {
+    describe('client config', () => {
+      it('generates Sentry config with all features enabled', () => {
+        const template = getSentryConfigContents(
+          'https://sentry.io/123',
+          'client',
+          {
+            performance: true,
+            replay: true,
+          },
+        );
+
+        expect(template).toMatchInlineSnapshot(`
+          "import * as Sentry from "@sentry/nuxt";
+
+          Sentry.init({
+            // If set up, you can use your runtime config here
+            // dsn: useRuntimeConfig().public.sentry.dsn,
+            dsn: "https://sentry.io/123",
+
+            // We recommend adjusting this value in production, or using tracesSampler
+            // for finer control
+            tracesSampleRate: 1.0,
+
+            // This sets the sample rate to be 10%. You may want this to be 100% while
+            // in development and sample at a lower rate in production
+            replaysSessionSampleRate: 0.1,
+            
+            // If the entire session is not sampled, use the below sample rate to sample
+            // sessions when an error occurs.
+            replaysOnErrorSampleRate: 1.0,
+            
+            // If you don't want to use Session Replay, just remove the line below:
+            integrations: [Sentry.replayIntegration()],
+            
+            // Setting this option to true will print useful information to the console while you're setting up Sentry.
+            debug: false,
+          });
+          "
+      `);
+      });
+
+      it('generates Sentry config with performance monitoring disabled', () => {
+        const template = getSentryConfigContents(
+          'https://sentry.io/123',
+          'client',
+          {
+            performance: false,
+            replay: true,
+          },
+        );
+
+        expect(template).toMatchInlineSnapshot(`
+          "import * as Sentry from "@sentry/nuxt";
+
+          Sentry.init({
+            // If set up, you can use your runtime config here
+            // dsn: useRuntimeConfig().public.sentry.dsn,
+            dsn: "https://sentry.io/123",
+
+            // This sets the sample rate to be 10%. You may want this to be 100% while
+            // in development and sample at a lower rate in production
+            replaysSessionSampleRate: 0.1,
+            
+            // If the entire session is not sampled, use the below sample rate to sample
+            // sessions when an error occurs.
+            replaysOnErrorSampleRate: 1.0,
+            
+            // If you don't want to use Session Replay, just remove the line below:
+            integrations: [Sentry.replayIntegration()],
+            
+            // Setting this option to true will print useful information to the console while you're setting up Sentry.
+            debug: false,
+          });
+          "
+      `);
+      });
+
+      it('generates Sentry config with session replay disabled', () => {
+        const template = getSentryConfigContents(
+          'https://sentry.io/123',
+          'client',
+          {
+            performance: true,
+            replay: false,
+          },
+        );
+
+        expect(template).toMatchInlineSnapshot(`
+          "import * as Sentry from "@sentry/nuxt";
+
+          Sentry.init({
+            // If set up, you can use your runtime config here
+            // dsn: useRuntimeConfig().public.sentry.dsn,
+            dsn: "https://sentry.io/123",
+
+            // We recommend adjusting this value in production, or using tracesSampler
+            // for finer control
+            tracesSampleRate: 1.0,
+            
+            // Setting this option to true will print useful information to the console while you're setting up Sentry.
+            debug: false,
+          });
+          "
+        `);
+      });
+
+      it('generates Sentry config with performance monitoring and session replay disabled', () => {
+        const template = getSentryConfigContents(
+          'https://sentry.io/123',
+          'client',
+          {
+            performance: false,
+            replay: false,
+          },
+        );
+
+        expect(template).toMatchInlineSnapshot(`
+          "import * as Sentry from "@sentry/nuxt";
+
+          Sentry.init({
+            // If set up, you can use your runtime config here
+            // dsn: useRuntimeConfig().public.sentry.dsn,
+            dsn: "https://sentry.io/123",
+            
+            // Setting this option to true will print useful information to the console while you're setting up Sentry.
+            debug: false,
+          });
+          "
+        `);
+      });
+    });
+
+    describe('server config', () => {
+      it('generates Sentry config with all features enabled', () => {
+        const template = getSentryConfigContents(
+          'https://sentry.io/123',
+          'server',
+          {
+            performance: true,
+            replay: true,
+          },
+        );
+
+        expect(template).toMatchInlineSnapshot(`
+          "import * as Sentry from "@sentry/nuxt";
+           
+          Sentry.init({
+            dsn: "https://sentry.io/123",
+
+            // We recommend adjusting this value in production, or using tracesSampler
+            // for finer control
+            tracesSampleRate: 1.0,
+            
+            // Setting this option to true will print useful information to the console while you're setting up Sentry.
+            debug: false,
+          });
+          "
+      `);
+      });
+
+      it('generates Sentry config with performance monitoring disabled', () => {
+        const template = getSentryConfigContents(
+          'https://sentry.io/123',
+          'server',
+          {
+            performance: false,
+            replay: true,
+          },
+        );
+
+        expect(template).toMatchInlineSnapshot(`
+          "import * as Sentry from "@sentry/nuxt";
+           
+          Sentry.init({
+            dsn: "https://sentry.io/123",
+            
+            // Setting this option to true will print useful information to the console while you're setting up Sentry.
+            debug: false,
+          });
+          "
+      `);
+      });
+    });
+  });
+
+  describe('getNuxtModuleFallbackTemplate', () => {
+    it('generates configuration options for the nuxt config', () => {
+      const template = getNuxtModuleFallbackTemplate({
+        org: 'my-org',
+        project: 'my-project',
+        url: 'https://sentry.io',
+        selfHosted: false,
+      });
+
+      expect(template).toMatchInlineSnapshot(`
+        "  modules: ["@sentry/nuxt/module"],
+          sentry: {
+            sourceMapsUploadOptions: {
+              org: "my-org",
+              project: "my-project",
+            },
+          },
+          sourcemap: { client: "hidden" },"
+      `);
+    });
+  });
+});