@sentry/wizard 3.36.0 → 3.37.0

package/e2e-tests/tests/nuxt-4.test.ts

@@ -43,32 +43,29 @@ async function runWizardOnNuxtProject(projectDir: string): Promise<void> {
     'Please select your package manager.',
   );
 
-  const nitropackOverridePrompted =
+  const nftOverridePrompted =
     packageManagerPrompted &&
     (await wizardInstance.sendStdinAndWaitForOutput(
       // Selecting `yarn` as the package manager
       [KEYS.DOWN, KEYS.ENTER],
-      // Do you want to install version 2.9.7 of nitropack and add an override to package.json?
-      'Do you want to add an override for nitropack version ~2.9.7?',
+      'Do you want to add an override for @vercel/nft version ^0.27.4?',
       {
         timeout: 240_000,
       },
     ));
 
-  const nftOverridePrompted =
-    nitropackOverridePrompted &&
+  const deploymentPlatformPrompted =
+    nftOverridePrompted &&
     (await wizardInstance.sendStdinAndWaitForOutput(
-      // Selecting `yes` to downgrade nitropack
       KEYS.ENTER,
-      'Do you want to add an override for @vercel/nft version ^0.27.4?',
-      // 'Do you want to install version',
+      'Please select your deployment platform.',
       {
         timeout: 240_000,
       },
     ));
 
   const tracingOptionPrompted =
-    nftOverridePrompted &&
+    deploymentPlatformPrompted &&
     (await wizardInstance.sendStdinAndWaitForOutput(
       KEYS.ENTER,
       // "Do you want to enable Tracing", sometimes doesn't work as `Tracing` can be printed in bold.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/wizard",
-  "version": "3.36.0",
+  "version": "3.37.0",
   "homepage": "https://github.com/getsentry/sentry-wizard",
   "repository": "https://github.com/getsentry/sentry-wizard",
   "description": "Sentry wizard helping you to configure your project",

package/src/nuxt/nuxt-wizard.ts

@@ -26,6 +26,8 @@ import {
   getNuxtConfig,
   createConfigFiles,
   addNuxtOverrides,
+  askDeploymentPlatform,
+  confirmReadImportDocs,
 } from './sdk-setup';
 import {
   createExampleComponent,
@@ -93,7 +95,7 @@ export async function runNuxtWizardWithTelemetry(
 
   const packageManager = await getPackageManager();
 
-  await addNuxtOverrides(packageManager, minVer);
+  await addNuxtOverrides(packageJson, packageManager, minVer);
 
   const sdkAlreadyInstalled = hasPackageInstalled('@sentry/nuxt', packageJson);
   Sentry.setTag('sdk-already-installed', sdkAlreadyInstalled);
@@ -116,8 +118,10 @@ export async function runNuxtWizardWithTelemetry(
     selfHosted,
   };
 
+  const deploymentPlatform = await askDeploymentPlatform();
+
   await traceStep('configure-sdk', async () => {
-    await addSDKModule(nuxtConfig, projectData);
+    await addSDKModule(nuxtConfig, projectData, deploymentPlatform);
     await createConfigFiles(selectedProject.keys[0].dsn.public);
   });
 
@@ -148,6 +152,8 @@ export async function runNuxtWizardWithTelemetry(
 
   await runPrettierIfInstalled();
 
+  await confirmReadImportDocs(deploymentPlatform);
+
   clack.outro(
     buildOutroMessage(shouldCreateExamplePage, shouldCreateExampleButton),
   );
@@ -170,8 +176,9 @@ function buildOutroMessage(
     )} component to a page and triggering it.`;
   }
 
-  msg += `\n\nCheck out the SDK documentation for further configuration:
-https://docs.sentry.io/platforms/javascript/guides/nuxt/`;
+  msg += `\n\nCheck out the SDK documentation for further configuration: ${chalk.underline(
+    'https://docs.sentry.io/platforms/javascript/guides/nuxt/',
+  )}`;
 
   return msg;
 }

package/src/nuxt/sdk-setup.ts

@@ -1,10 +1,10 @@
 // @ts-expect-error - clack is ESM and TS complains about that. It works though
-import clack from '@clack/prompts';
+import * as clack from '@clack/prompts';
 import * as Sentry from '@sentry/node';
 import chalk from 'chalk';
 import fs from 'fs';
 // @ts-expect-error - magicast is ESM and TS complains about that. It works though
-import { loadFile, generateCode, MagicastError } from 'magicast';
+import { loadFile, generateCode } from 'magicast';
 // @ts-expect-error - magicast is ESM and TS complains about that. It works though
 import { addNuxtModule } from 'magicast/helpers';
 import path from 'path';
@@ -15,15 +15,19 @@ import {
   getSentryConfigContents,
 } from './templates';
 import {
-  abort,
   abortIfCancelled,
   askShouldAddPackageOverride,
+  askShouldInstallPackage,
   featureSelectionPrompt,
+  installPackage,
   isUsingTypeScript,
+  opn,
 } from '../utils/clack-utils';
 import { traceStep } from '../telemetry';
 import { lt, SemVer } from 'semver';
-import { PackageManager } from '../utils/package-manager';
+import { PackageManager, PNPM } from '../utils/package-manager';
+import { hasPackageInstalled, PackageDotJson } from '../utils/package-json';
+import { deploymentPlatforms, DeploymentPlatform } from './types';
 
 const possibleNuxtConfig = [
   'nuxt.config.js',
@@ -57,10 +61,40 @@ export async function getNuxtConfig(): Promise<string> {
   return path.join(process.cwd(), configFile);
 }
 
+export async function askDeploymentPlatform(): Promise<
+  DeploymentPlatform | symbol
+> {
+  return await abortIfCancelled(
+    clack.select({
+      message: 'Please select your deployment platform.',
+      options: deploymentPlatforms.map((platform) => ({
+        value: platform,
+        label: `${platform.charAt(0).toUpperCase()}${platform.slice(1)}`,
+      })),
+    }),
+  );
+}
+
 export async function addSDKModule(
   config: string,
   options: { org: string; project: string; url: string; selfHosted: boolean },
+  deploymentPlatform: DeploymentPlatform | symbol,
 ): Promise<void> {
+  const shouldTopLevelImport =
+    deploymentPlatform === 'vercel' || deploymentPlatform === 'netlify';
+
+  if (shouldTopLevelImport) {
+    clack.log.warn(
+      `Sentry needs to be initialized before the application starts. ${chalk.cyan(
+        `${deploymentPlatform
+          .charAt(0)
+          .toUpperCase()}${deploymentPlatform.slice(1)}`,
+      )} does not support this yet.\n\nWe will inject the Sentry server-side config at the top of your Nuxt server entry file instead.\n\nThis comes with some restrictions, for more info see:\n\n${chalk.underline(
+        'https://docs.sentry.io/platforms/javascript/guides/nuxt/install/top-level-import/',
+      )} `,
+    );
+  }
+
   try {
     const mod = await loadFile(config);
 
@@ -70,6 +104,9 @@ export async function addSDKModule(
         project: options.project,
         ...(options.selfHosted && { url: options.url }),
       },
+      ...(shouldTopLevelImport && {
+        autoInjectServerSentry: 'top-level-import',
+      }),
     });
     addNuxtModule(mod, '@sentry/nuxt/module', 'sourcemap', {
       client: 'hidden',
@@ -83,33 +120,31 @@ export async function addSDKModule(
       `Added Sentry Nuxt Module to ${chalk.cyan(path.basename(config))}.`,
     );
   } catch (e: unknown) {
-    // Cases where users spread options are not covered by magicast,
-    // so we fall back to showing how to configure the nuxt config
-    // manually.
-    if (e instanceof MagicastError) {
-      clack.log.warn(
-        `Automatic configuration of ${chalk.cyan(
-          path.basename(config),
-        )} failed, please add the following settings:`,
-      );
-      // eslint-disable-next-line no-console
-      console.log(`\n\n${getNuxtModuleFallbackTemplate(options)}\n\n`);
-    } else {
-      clack.log.error(
-        'Error while adding the Sentry Nuxt Module to the Nuxt config.',
-      );
-      clack.log.info(
-        chalk.dim(
-          typeof e === 'object' && e != null && 'toString' in e
-            ? e.toString()
-            : typeof e === 'string'
-            ? e
-            : 'Unknown error',
-        ),
-      );
-      Sentry.captureException('Error while setting up the Nuxt SDK');
-      await abort('Exiting Wizard');
-    }
+    clack.log.error(
+      'Error while adding the Sentry Nuxt Module to the Nuxt config.',
+    );
+    clack.log.info(
+      chalk.dim(
+        typeof e === 'object' && e != null && 'toString' in e
+          ? e.toString()
+          : typeof e === 'string'
+          ? e
+          : 'Unknown error',
+      ),
+    );
+    Sentry.captureException(
+      'Error while setting up the Nuxt Module in nuxt config',
+    );
+
+    clack.log.warn(
+      `Please add the following settings to ${chalk.cyan(
+        path.basename(config),
+      )}:`,
+    );
+    // eslint-disable-next-line no-console
+    console.log(
+      `\n\n${getNuxtModuleFallbackTemplate(options, shouldTopLevelImport)}\n\n`,
+    );
   }
 }
 
@@ -212,14 +247,13 @@ export async function createConfigFiles(dsn: string) {
 }
 
 export async function addNuxtOverrides(
+  packageJson: PackageDotJson,
   packageManager: PackageManager,
   nuxtMinVer: SemVer | null,
 ) {
+  const isPNPM = PNPM.detect();
+
   const overrides = [
-    {
-      pkgName: 'nitropack',
-      pkgVersion: '~2.9.7',
-    },
     {
       pkgName: '@vercel/nft',
       pkgVersion: '^0.27.4',
@@ -230,9 +264,17 @@ export async function addNuxtOverrides(
   ];
 
   clack.log.warn(
-    `To ensure Sentry can properly instrument your code it needs to add version overrides for some Nuxt dependencies.\n\nFor more info see: ${chalk.cyan(
+    `To ensure Sentry can properly instrument your code it needs to add version overrides for some Nuxt dependencies${
+      isPNPM ? ` and install ${chalk.cyan('import-in-the-middle')}.` : '.'
+    }\n\nFor more info see: ${chalk.underline(
       'https://github.com/getsentry/sentry-javascript/issues/14514',
-    )}`,
+    )}${
+      isPNPM
+        ? `\n\nand ${chalk.underline(
+            'https://docs.sentry.io/platforms/javascript/guides/nuxt/troubleshooting/#pnpm-dev-cannot-find-package-import-in-the-middle',
+          )}`
+        : ''
+    }`,
   );
 
   for (const { pkgName, pkgVersion } of overrides) {
@@ -245,4 +287,59 @@ export async function addNuxtOverrides(
       await packageManager.addOverride(pkgName, pkgVersion);
     }
   }
+
+  if (PNPM.detect()) {
+    // For pnpm, we want to install iitm
+    // See: https://docs.sentry.io/platforms/javascript/guides/nuxt/troubleshooting/#pnpm-dev-cannot-find-package-import-in-the-middle
+    const iitmAlreadyInstalled = hasPackageInstalled(
+      'import-in-the-middle',
+      packageJson,
+    );
+    Sentry.setTag('iitm-already-installed', iitmAlreadyInstalled);
+
+    const shouldInstallIitm = await askShouldInstallPackage(
+      'import-in-the-middle',
+    );
+
+    if (shouldInstallIitm) {
+      await installPackage({
+        packageName: 'import-in-the-middle',
+        alreadyInstalled: iitmAlreadyInstalled,
+        packageManager,
+      });
+    }
+  }
+}
+
+export async function confirmReadImportDocs(
+  deploymentPlatform: DeploymentPlatform | symbol,
+) {
+  const canImportSentryServerConfigFile =
+    deploymentPlatform !== 'vercel' && deploymentPlatform !== 'netlify';
+
+  if (!canImportSentryServerConfigFile) {
+    // Nothing to do, users have been set up with automatic top-level-import instead
+    return;
+  }
+
+  const docsUrl =
+    'https://docs.sentry.io/platforms/javascript/guides/nuxt/install/cli-import/#initializing-sentry-with---import';
+
+  clack.log.info(
+    `After building your Nuxt app, you need to ${chalk.bold(
+      '--import',
+    )} the Sentry server config file when running your app.\n\nFor more info, see:\n\n${chalk.underline(
+      docsUrl,
+    )}`,
+  );
+
+  const shouldOpenDocs = await abortIfCancelled(
+    clack.confirm({ message: 'Do you want to open the docs?' }),
+  );
+
+  if (shouldOpenDocs) {
+    opn(docsUrl, { wait: false }).catch(() => {
+      // opn throws in environments that don't have a browser (e.g. remote shells) so we just noop here
+    });
+  }
 }

package/src/nuxt/templates.ts

@@ -14,12 +14,15 @@ export default defineNuxtConfig({
 `;
 }
 
-export function getNuxtModuleFallbackTemplate(options: {
-  org: string;
-  project: string;
-  url: string;
-  selfHosted: boolean;
-}): string {
+export function getNuxtModuleFallbackTemplate(
+  options: {
+    org: string;
+    project: string;
+    url: string;
+    selfHosted: boolean;
+  },
+  shouldTopLevelImport: boolean,
+): string {
   return `  modules: ["@sentry/nuxt/module"],
   sentry: {
     sourceMapsUploadOptions: {
@@ -27,7 +30,11 @@ export function getNuxtModuleFallbackTemplate(options: {
       project: "${options.project}",${
     options.selfHosted ? `\n      url: "${options.url}",` : ''
   }
-    },
+    },${
+      shouldTopLevelImport
+        ? `\n    autoInjectServerSentry: "top-level-import",`
+        : ''
+    }
   },
   sourcemap: { client: "hidden" },`;
 }
@@ -239,7 +246,7 @@ export function getSentryExampleApiTemplate() {
 // Feel free to delete this file.
 import { defineEventHandler } from '#imports';
 
-export default defineEventHandler(event => {
+export default defineEventHandler(() => {
   throw new Error("Sentry Example API Route Error");
 });
 `;

package/src/nuxt/types.ts

@@ -0,0 +1,8 @@
+export const deploymentPlatforms = [
+  'vercel',
+  'netlify',
+  'other',
+  'none',
+] as const;
+
+export type DeploymentPlatform = (typeof deploymentPlatforms)[number];

package/src/nuxt/utils.ts

@@ -1,6 +1,9 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import * as clack from '@clack/prompts';
 import { gte, minVersion } from 'semver';
 // @ts-expect-error - magicast is ESM and TS complains about that. It works though
 import { loadFile } from 'magicast';
+import { abortIfCancelled } from '../utils/clack-utils';
 
 export async function isNuxtV4(
   nuxtConfig: string,
@@ -18,14 +21,21 @@ export async function isNuxtV4(
   // At the time of writing, nuxt 4 is not on its own
   // major yet. We must read the `compatibilityVersion`
   // from the nuxt config.
-  const mod = await loadFile(nuxtConfig);
-  const config =
-    mod.exports.default.$type === 'function-call'
-      ? mod.exports.default.$args[0]
-      : mod.exports.default;
+  try {
+    const mod = await loadFile(nuxtConfig);
+    const config =
+      mod.exports.default.$type === 'function-call'
+        ? mod.exports.default.$args[0]
+        : mod.exports.default;
 
-  if (config && config.future && config.future.compatibilityVersion === 4) {
-    return true;
+    if (config && config.future && config.future.compatibilityVersion === 4) {
+      return true;
+    }
+  } catch {
+    // If we cannot parse their config, just ask.
+    return await abortIfCancelled(
+      clack.confirm({ message: 'Are you using Nuxt version 4?' }),
+    );
   }
 
   return false;

package/src/utils/clack-utils.ts

@@ -20,7 +20,7 @@ import {
 import { debug } from './debug';
 import { fulfillsVersionRange } from './semver';
 
-const opn = require('opn') as (
+export const opn = require('opn') as (
   url: string,
   options?: {
     wait?: boolean;
@@ -1492,6 +1492,18 @@ export async function featureSelectionPrompt<F extends ReadonlyArray<Feature>>(
   });
 }
 
+export async function askShouldInstallPackage(
+  pkgName: string,
+): Promise<boolean> {
+  return traceStep(`ask-install-package`, () =>
+    abortIfCancelled(
+      clack.confirm({
+        message: `Do you want to install ${chalk.cyan(pkgName)}?`,
+      }),
+    ),
+  );
+}
+
 export async function askShouldAddPackageOverride(
   pkgName: string,
   pkgVersion: string,

package/test/nuxt/templates.test.ts

@@ -206,12 +206,38 @@ describe('Nuxt code templates', () => {
 
   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,
-      });
+      const template = getNuxtModuleFallbackTemplate(
+        {
+          org: 'my-org',
+          project: 'my-project',
+          url: 'https://sentry.io',
+          selfHosted: false,
+        },
+        false,
+      );
+
+      expect(template).toMatchInlineSnapshot(`
+        "  modules: ["@sentry/nuxt/module"],
+          sentry: {
+            sourceMapsUploadOptions: {
+              org: "my-org",
+              project: "my-project",
+            },
+          },
+          sourcemap: { client: "hidden" },"
+      `);
+    });
+
+    it('generates configuration options for the nuxt config with top level import', () => {
+      const template = getNuxtModuleFallbackTemplate(
+        {
+          org: 'my-org',
+          project: 'my-project',
+          url: 'https://sentry.io',
+          selfHosted: false,
+        },
+        true,
+      );
 
       expect(template).toMatchInlineSnapshot(`
         "  modules: ["@sentry/nuxt/module"],
@@ -220,6 +246,7 @@ describe('Nuxt code templates', () => {
               org: "my-org",
               project: "my-project",
             },
+            autoInjectServerSentry: "top-level-import",
           },
           sourcemap: { client: "hidden" },"
       `);