@sentry/wizard 3.35.0 → 3.37.0

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,12 +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, PNPM } from '../utils/package-manager';
+import { hasPackageInstalled, PackageDotJson } from '../utils/package-json';
+import { deploymentPlatforms, DeploymentPlatform } from './types';
 
 const possibleNuxtConfig = [
   'nuxt.config.js',
@@ -54,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);
 
@@ -67,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',
@@ -80,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`,
+    );
   }
 }
 
@@ -207,3 +245,101 @@ export async function createConfigFiles(dsn: string) {
     });
   }
 }
+
+export async function addNuxtOverrides(
+  packageJson: PackageDotJson,
+  packageManager: PackageManager,
+  nuxtMinVer: SemVer | null,
+) {
+  const isPNPM = PNPM.detect();
+
+  const overrides = [
+    {
+      pkgName: '@vercel/nft',
+      pkgVersion: '^0.27.4',
+    },
+    ...(nuxtMinVer && lt(nuxtMinVer, '3.14.0')
+      ? [{ pkgName: 'ofetch', pkgVersion: '^1.4.0' }]
+      : []),
+  ];
+
+  clack.log.warn(
+    `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) {
+    const shouldAddOverride = await askShouldAddPackageOverride(
+      pkgName,
+      pkgVersion,
+    );
+
+    if (shouldAddOverride) {
+      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;
@@ -355,6 +355,7 @@ export async function installPackage({
   alreadyInstalled,
   askBeforeUpdating = true,
   packageNameDisplayLabel,
+  packageManager,
 }: {
   /** The string that is passed to the package manager CLI as identifier to install (e.g. `@sentry/nextjs`, or `@sentry/nextjs@^8`) */
   packageName: string;
@@ -362,6 +363,7 @@ export async function installPackage({
   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;
+  packageManager?: PackageManager;
 }): Promise<{ packageManager?: PackageManager }> {
   return traceStep('install-package', async () => {
     if (alreadyInstalled && askBeforeUpdating) {
@@ -380,18 +382,18 @@ export async function installPackage({
 
     const sdkInstallSpinner = clack.spinner();
 
-    const packageManager = await getPackageManager();
+    const pkgManager = packageManager || (await getPackageManager());
 
     sdkInstallSpinner.start(
       `${alreadyInstalled ? 'Updating' : 'Installing'} ${chalk.bold.cyan(
         packageNameDisplayLabel ?? packageName,
-      )} with ${chalk.bold(packageManager.label)}.`,
+      )} with ${chalk.bold(pkgManager.label)}.`,
     );
 
     try {
       await new Promise<void>((resolve, reject) => {
         childProcess.exec(
-          `${packageManager.installCommand} ${packageName} ${packageManager.flags}`,
+          `${pkgManager.installCommand} ${packageName} ${pkgManager.flags}`,
           (err, stdout, stderr) => {
             if (err) {
               // Write a log file so we can better troubleshoot issues
@@ -430,10 +432,10 @@ export async function installPackage({
     sdkInstallSpinner.stop(
       `${alreadyInstalled ? 'Updated' : 'Installed'} ${chalk.bold.cyan(
         packageNameDisplayLabel ?? packageName,
-      )} with ${chalk.bold(packageManager.label)}.`,
+      )} with ${chalk.bold(pkgManager.label)}.`,
     );
 
-    return { packageManager };
+    return { packageManager: pkgManager };
   });
 }
 
@@ -808,6 +810,26 @@ export async function getPackageDotJson(): Promise<PackageDotJson> {
   return packageJson || {};
 }
 
+export async function updatePackageDotJson(
+  packageDotJson: PackageDotJson,
+): Promise<void> {
+  try {
+    await fs.promises.writeFile(
+      path.join(process.cwd(), 'package.json'),
+      // TODO: maybe figure out the original indentation
+      JSON.stringify(packageDotJson, null, 2),
+      {
+        encoding: 'utf8',
+        flag: 'w',
+      },
+    );
+  } catch {
+    clack.log.error(`Unable to update your ${chalk.cyan('package.json')}.`);
+
+    await abort();
+  }
+}
+
 export async function getPackageManager(): Promise<PackageManager> {
   const detectedPackageManager = detectPackageManger();
 
@@ -1469,3 +1491,30 @@ export async function featureSelectionPrompt<F extends ReadonlyArray<Feature>>(
     return selectedFeatures as { [key in F[number]['id']]: boolean };
   });
 }
+
+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,
+): Promise<boolean> {
+  return traceStep(`ask-add-package-override`, () =>
+    abortIfCancelled(
+      clack.confirm({
+        message: `Do you want to add an override for ${chalk.cyan(
+          pkgName,
+        )} version ${chalk.cyan(pkgVersion)}?`,
+      }),
+    ),
+  );
+}

package/src/utils/package-json.ts

@@ -3,6 +3,11 @@ export type PackageDotJson = {
   scripts?: Record<string, string | undefined>;
   dependencies?: Record<string, string>;
   devDependencies?: Record<string, string>;
+  resolutions?: Record<string, string>;
+  overrides?: Record<string, string>;
+  pnpm?: {
+    overrides?: Record<string, string>;
+  };
 };
 
 type NpmPackage = {

package/src/utils/package-manager.ts

@@ -4,6 +4,7 @@ import * as path from 'path';
 
 import * as Sentry from '@sentry/node';
 import { traceStep } from '../telemetry';
+import { getPackageDotJson, updatePackageDotJson } from './clack-utils';
 
 export interface PackageManager {
   name: string;
@@ -15,6 +16,7 @@ export interface PackageManager {
   runScriptCommand: string;
   flags: string;
   detect: () => boolean;
+  addOverride: (pkgName: string, pkgVersion: string) => Promise<void>;
 }
 
 export const BUN: PackageManager = {
@@ -26,6 +28,18 @@ export const BUN: PackageManager = {
   runScriptCommand: 'bun run',
   flags: '',
   detect: () => fs.existsSync(path.join(process.cwd(), BUN.lockFile)),
+  addOverride: async (pkgName, pkgVersion): Promise<void> => {
+    const packageDotJson = await getPackageDotJson();
+    const overrides = packageDotJson.overrides || {};
+
+    await updatePackageDotJson({
+      ...packageDotJson,
+      overrides: {
+        ...overrides,
+        [pkgName]: pkgVersion,
+      },
+    });
+  },
 };
 export const YARN_V1: PackageManager = {
   name: 'yarn',
@@ -45,6 +59,18 @@ export const YARN_V1: PackageManager = {
       return false;
     }
   },
+  addOverride: async (pkgName, pkgVersion): Promise<void> => {
+    const packageDotJson = await getPackageDotJson();
+    const resolutions = packageDotJson.resolutions || {};
+
+    await updatePackageDotJson({
+      ...packageDotJson,
+      resolutions: {
+        ...resolutions,
+        [pkgName]: pkgVersion,
+      },
+    });
+  },
 };
 /** YARN V2/3/4 */
 export const YARN_V2: PackageManager = {
@@ -65,6 +91,18 @@ export const YARN_V2: PackageManager = {
       return false;
     }
   },
+  addOverride: async (pkgName, pkgVersion): Promise<void> => {
+    const packageDotJson = await getPackageDotJson();
+    const resolutions = packageDotJson.resolutions || {};
+
+    await updatePackageDotJson({
+      ...packageDotJson,
+      resolutions: {
+        ...resolutions,
+        [pkgName]: pkgVersion,
+      },
+    });
+  },
 };
 export const PNPM: PackageManager = {
   name: 'pnpm',
@@ -75,6 +113,22 @@ export const PNPM: PackageManager = {
   runScriptCommand: 'pnpm',
   flags: '--ignore-workspace-root-check',
   detect: () => fs.existsSync(path.join(process.cwd(), PNPM.lockFile)),
+  addOverride: async (pkgName, pkgVersion): Promise<void> => {
+    const packageDotJson = await getPackageDotJson();
+    const pnpm = packageDotJson.pnpm || {};
+    const overrides = pnpm.overrides || {};
+
+    await updatePackageDotJson({
+      ...packageDotJson,
+      pnpm: {
+        ...pnpm,
+        overrides: {
+          ...overrides,
+          [pkgName]: pkgVersion,
+        },
+      },
+    });
+  },
 };
 export const NPM: PackageManager = {
   name: 'npm',
@@ -85,6 +139,18 @@ export const NPM: PackageManager = {
   runScriptCommand: 'npm run',
   flags: '',
   detect: () => fs.existsSync(path.join(process.cwd(), NPM.lockFile)),
+  addOverride: async (pkgName, pkgVersion): Promise<void> => {
+    const packageDotJson = await getPackageDotJson();
+    const overrides = packageDotJson.overrides || {};
+
+    await updatePackageDotJson({
+      ...packageDotJson,
+      overrides: {
+        ...overrides,
+        [pkgName]: pkgVersion,
+      },
+    });
+  },
 };
 
 export const packageManagers = [BUN, YARN_V1, YARN_V2, PNPM, NPM];

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" },"
       `);