@sentry/wizard 3.36.0 → 3.38.0

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

@@ -44,32 +44,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/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.38.0",
   "homepage": "https://github.com/getsentry/sentry-wizard",
   "repository": "https://github.com/getsentry/sentry-wizard",
   "description": "Sentry wizard helping you to configure your project",
@@ -29,7 +29,7 @@
     "@sentry/node": "^7.119.2",
     "axios": "1.7.4",
     "chalk": "^2.4.1",
-    "glob": "^8.1.0",
+    "glob": "9.3.5",
     "inquirer": "^6.2.0",
     "lodash": "^4.17.15",
     "magicast": "^0.2.10",

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,11 @@ export async function runNuxtWizardWithTelemetry(
     selfHosted,
   };
 
+  const deploymentPlatform = await askDeploymentPlatform();
+  Sentry.setTag('deployment-platform', deploymentPlatform);
+
   await traceStep('configure-sdk', async () => {
-    await addSDKModule(nuxtConfig, projectData);
+    await addSDKModule(nuxtConfig, projectData, deploymentPlatform);
     await createConfigFiles(selectedProject.keys[0].dsn.public);
   });
 
@@ -148,6 +153,8 @@ export async function runNuxtWizardWithTelemetry(
 
   await runPrettierIfInstalled();
 
+  await confirmReadImportDocs(deploymentPlatform);
+
   clack.outro(
     buildOutroMessage(shouldCreateExamplePage, shouldCreateExampleButton),
   );
@@ -170,8 +177,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,61 @@ 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?' }),
+  );
+
+  Sentry.setTag('init-with-import-docs-opened', shouldOpenDocs);
+
+  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/react-native/javascript.ts

@@ -98,6 +98,6 @@ Sentry.init({
   dsn: '${dsn}',
 
   // uncomment the line below to enable Spotlight (https://spotlightjs.com)
-  // enableSpotlight: __DEV__,
+  // spotlight: __DEV__,
 });`;
 }

package/src/react-native/react-native-wizard.ts

@@ -17,6 +17,7 @@ import {
   printWelcome,
   propertiesCliSetupConfig,
   runPrettierIfInstalled,
+  abort,
 } from '../utils/clack-utils';
 import { getPackageVersion, hasPackageInstalled } from '../utils/package-json';
 import { podInstall } from '../apple/cocoapod';
@@ -57,6 +58,7 @@ import { addExpoEnvLocal } from './expo-env-file';
 const xcode = require('xcode');
 
 export const RN_SDK_PACKAGE = '@sentry/react-native';
+export const RN_SDK_SUPPORTED_RANGE = '>=5.0.0';
 
 export const RN_PACKAGE = 'react-native';
 export const RN_HUMAN_NAME = 'React Native';
@@ -68,21 +70,20 @@ export const SUPPORTED_EXPO_RANGE = '>=50.0.0';
  * The following SDK version ship with bundled Xcode scripts
  * which simplifies the Xcode Build Phases setup.
  */
-export const SDK_XCODE_SCRIPTS_SUPPORTED_SDK_RANGE = '>=5.11.0';
+export const XCODE_SCRIPTS_SUPPORTED_SDK_RANGE = '>=5.11.0';
 
 /**
  * The following SDK version ship with Sentry Metro plugin
  */
-export const SDK_SENTRY_METRO_PLUGIN_SUPPORTED_SDK_RANGE = '>=5.11.0';
+export const SENTRY_METRO_PLUGIN_SUPPORTED_SDK_RANGE = '>=5.11.0';
 
 /**
  * The following SDK version ship with bundled Expo plugin
  */
-export const SDK_EXPO_SUPPORTED_SDK_RANGE = `>=5.16.0`;
+export const EXPO_SUPPORTED_SDK_RANGE = `>=5.16.0`;
 
 // The following SDK version shipped `withSentryConfig`
-export const SDK_SENTRY_METRO_WITH_SENTRY_CONFIG_SUPPORTED_SDK_RANGE =
-  '>=5.17.0';
+export const METRO_WITH_SENTRY_CONFIG_SUPPORTED_SDK_RANGE = '>=5.17.0';
 
 export type RNCliSetupConfigContent = Pick<
   Required<CliSetupConfigContent>,
@@ -151,6 +152,26 @@ Or setup using ${chalk.cyan(
     RN_SDK_PACKAGE,
     await getPackageDotJson(),
   );
+  if (sdkVersion) {
+    await confirmContinueIfPackageVersionNotSupported({
+      packageName: 'Sentry React Native SDK',
+      packageVersion: sdkVersion,
+      packageId: RN_SDK_PACKAGE,
+      acceptableVersions: RN_SDK_SUPPORTED_RANGE,
+      note: `Please upgrade to ${RN_SDK_SUPPORTED_RANGE} to continue with the wizard in this project.`,
+    });
+  } else {
+    const continueWithoutSdk = await abortIfCancelled(
+      clack.confirm({
+        message:
+          'Could not detect Sentry React Native SDK version. Do you want to continue anyway?',
+      }),
+    );
+    if (!continueWithoutSdk) {
+      await abort(undefined, 0);
+    }
+  }
+  Sentry.setTag(`detected-sentry-react-native-sdk-version`, sdkVersion);
 
   const expoVersion = getPackageVersion('expo', packageJson);
   const isExpo = !!expoVersion;
@@ -159,8 +180,8 @@ Or setup using ${chalk.cyan(
       packageName: 'Sentry React Native SDK',
       packageVersion: sdkVersion,
       packageId: RN_SDK_PACKAGE,
-      acceptableVersions: SDK_EXPO_SUPPORTED_SDK_RANGE,
-      note: `Please upgrade to ${SDK_EXPO_SUPPORTED_SDK_RANGE} to continue with the wizard in this Expo project.`,
+      acceptableVersions: EXPO_SUPPORTED_SDK_RANGE,
+      note: `Please upgrade to ${EXPO_SUPPORTED_SDK_RANGE} to continue with the wizard in this Expo project.`,
     });
     await confirmContinueIfPackageVersionNotSupported({
       packageName: 'Expo SDK',
@@ -250,8 +271,7 @@ function addSentryToMetroConfig({
     sdkVersion &&
     fulfillsVersionRange({
       version: sdkVersion,
-      acceptableVersions:
-        SDK_SENTRY_METRO_WITH_SENTRY_CONFIG_SUPPORTED_SDK_RANGE,
+      acceptableVersions: METRO_WITH_SENTRY_CONFIG_SUPPORTED_SDK_RANGE,
       canBeLatest: true,
     })
   ) {
@@ -262,7 +282,7 @@ function addSentryToMetroConfig({
     sdkVersion &&
     fulfillsVersionRange({
       version: sdkVersion,
-      acceptableVersions: SDK_SENTRY_METRO_PLUGIN_SUPPORTED_SDK_RANGE,
+      acceptableVersions: SENTRY_METRO_PLUGIN_SUPPORTED_SDK_RANGE,
       canBeLatest: true,
     })
   ) {
@@ -356,7 +376,7 @@ async function patchXcodeFiles(
       context.sdkVersion &&
       fulfillsVersionRange({
         version: context.sdkVersion,
-        acceptableVersions: SDK_XCODE_SCRIPTS_SUPPORTED_SDK_RANGE,
+        acceptableVersions: XCODE_SCRIPTS_SUPPORTED_SDK_RANGE,
         canBeLatest: true,
       })
     ) {
@@ -381,7 +401,7 @@ async function patchXcodeFiles(
       context.sdkVersion &&
       fulfillsVersionRange({
         version: context.sdkVersion,
-        acceptableVersions: SDK_XCODE_SCRIPTS_SUPPORTED_SDK_RANGE,
+        acceptableVersions: XCODE_SCRIPTS_SUPPORTED_SDK_RANGE,
         canBeLatest: true,
       })
     ) {

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,