@sentry/wizard 3.7.1 → 3.9.0

package/src/nextjs/nextjs-wizard.ts

@@ -11,11 +11,9 @@ import {
   abort,
   abortIfCancelled,
   addSentryCliRc,
-  askForProjectSelection,
-  askForSelfHosted,
-  askForWizardLogin,
   confirmContinueEvenThoughNoGitRepo,
   ensurePackageIsInstalled,
+  getOrAskForProjectData,
   getPackageDotJson,
   installPackage,
   isUsingTypeScript,
@@ -45,15 +43,8 @@ export async function runNextjsWizard(options: WizardOptions): Promise<void> {
   const packageJson = await getPackageDotJson();
   await ensurePackageIsInstalled(packageJson, 'next', 'Next.js');
 
-  const { url: sentryUrl, selfHosted } = await askForSelfHosted(options.url);
-
-  const { projects, apiKeys } = await askForWizardLogin({
-    promoCode: options.promoCode,
-    url: sentryUrl,
-    platform: 'javascript-nextjs',
-  });
-
-  const selectedProject = await askForProjectSelection(projects);
+  const { selectedProject, authToken, selfHosted, sentryUrl } =
+    await getOrAskForProjectData(options);
 
   await installPackage({
     packageName: '@sentry/nextjs',
@@ -349,7 +340,7 @@ export async function runNextjsWizard(options: WizardOptions): Promise<void> {
     );
   }
 
-  await addSentryCliRc(apiKeys.token);
+  await addSentryCliRc(authToken);
 
   const mightBeUsingVercel = fs.existsSync(
     path.join(process.cwd(), 'vercel.json'),

package/src/sourcemaps/sourcemaps-wizard.ts

@@ -5,14 +5,12 @@ import * as Sentry from '@sentry/node';
 
 import {
   abortIfCancelled,
-  askForProjectSelection,
-  askForSelfHosted,
-  askForWizardLogin,
   confirmContinueEvenThoughNoGitRepo,
   detectPackageManager,
   SENTRY_DOT_ENV_FILE,
   printWelcome,
   SENTRY_CLI_RC_FILE,
+  getOrAskForProjectData,
 } from '../utils/clack-utils';
 import { isUnicodeSupported } from '../utils/vendor/is-unicorn-supported';
 import { SourceMapUploadToolConfigurationOptions } from './tools/types';
@@ -30,6 +28,7 @@ import { URL } from 'url';
 import { checkIfMoreSuitableWizardExistsAndAskForRedirect } from './utils/other-wizards';
 import { configureAngularSourcemapGenerationFlow } from './tools/angular';
 import { detectUsedTool, SupportedTools } from './utils/detect-tool';
+import { configureNextJsSourceMapsUpload } from './tools/nextjs';
 
 export async function runSourcemapsWizard(
   options: WizardOptions,
@@ -73,37 +72,37 @@ You can turn this off by running the wizard with the '--disable-telemetry' flag.
 
   await traceStep('check-sdk-version', ensureMinimumSdkVersionIsInstalled);
 
-  const { url: sentryUrl, selfHosted } = await traceStep(
-    'ask-self-hosted',
-    () => askForSelfHosted(options.url),
-  );
-
-  const { projects, apiKeys } = await traceStep('login', () =>
-    askForWizardLogin({
-      promoCode: options.promoCode,
-      url: sentryUrl,
-    }),
-  );
+  const { selfHosted, selectedProject, sentryUrl, authToken } =
+    await getOrAskForProjectData(options);
 
-  const selectedProject = await traceStep('select-project', () =>
-    askForProjectSelection(projects),
-  );
+  const wizardOptionsWithPreSelectedProject = {
+    ...options,
+    preSelectedProject: {
+      project: selectedProject,
+      authToken,
+      selfHosted,
+    },
+  };
 
   const selectedTool = await traceStep('select-tool', askForUsedBundlerTool);
 
   Sentry.setTag('selected-tool', selectedTool);
 
   await traceStep('tool-setup', () =>
-    startToolSetupFlow(selectedTool, {
-      selfHosted,
-      orgSlug: selectedProject.organization.slug,
-      projectSlug: selectedProject.slug,
-      url: sentryUrl,
-      authToken: apiKeys.token,
-    }),
+    startToolSetupFlow(
+      selectedTool,
+      {
+        orgSlug: selectedProject.organization.slug,
+        projectSlug: selectedProject.slug,
+        selfHosted,
+        url: sentryUrl,
+        authToken,
+      },
+      wizardOptionsWithPreSelectedProject,
+    ),
   );
 
-  await traceStep('ci-setup', () => configureCI(selectedTool, apiKeys.token));
+  await traceStep('ci-setup', () => configureCI(selectedTool, authToken));
 
   traceStep('outro', () =>
     printOutro(
@@ -129,6 +128,11 @@ async function askForUsedBundlerTool(): Promise<SupportedTools> {
           value: 'create-react-app',
           hint: 'Select this option if you set up your app with Create React App.',
         },
+        {
+          label: 'Next.js',
+          value: 'nextjs',
+          hint: 'Select this option if you want to set up source maps in a NextJS project.',
+        },
         {
           label: 'Webpack',
           value: 'webpack',
@@ -170,6 +174,7 @@ async function askForUsedBundlerTool(): Promise<SupportedTools> {
 async function startToolSetupFlow(
   selctedTool: SupportedTools,
   options: SourceMapUploadToolConfigurationOptions,
+  wizardOptions: WizardOptions,
 ): Promise<void> {
   switch (selctedTool) {
     case 'webpack':
@@ -196,6 +201,9 @@ async function startToolSetupFlow(
         configureAngularSourcemapGenerationFlow,
       );
       break;
+    case 'nextjs':
+      await configureNextJsSourceMapsUpload(options, wizardOptions);
+      break;
     default:
       await configureSentryCLI(options);
       break;
@@ -234,9 +242,13 @@ async function configureCI(
     'create-react-app',
   ].includes(selectedTool);
 
-  const authTokenFile = isCliBasedFlowTool
-    ? SENTRY_CLI_RC_FILE
-    : SENTRY_DOT_ENV_FILE;
+  // some non-cli-based flows also use the .sentryclirc file
+  const usesSentryCliRc = selectedTool === 'nextjs';
+
+  const authTokenFile =
+    isCliBasedFlowTool || usesSentryCliRc
+      ? SENTRY_CLI_RC_FILE
+      : SENTRY_DOT_ENV_FILE;
 
   if (!isUsingCI) {
     clack.log.info(

package/src/sourcemaps/tools/nextjs.ts

@@ -0,0 +1,114 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import * as clack from '@clack/prompts';
+import chalk from 'chalk';
+import { runNextjsWizard } from '../../nextjs/nextjs-wizard';
+import { traceStep } from '../../telemetry';
+import { abortIfCancelled, addSentryCliRc } from '../../utils/clack-utils';
+import { WizardOptions } from '../../utils/types';
+
+import { SourceMapUploadToolConfigurationOptions } from './types';
+
+import * as Sentry from '@sentry/node';
+
+const getCodeSnippet = (options: SourceMapUploadToolConfigurationOptions) =>
+  chalk.grey(`
+  ${chalk.greenBright(
+    'const { withSentryConfig } = require("@sentry/nextjs");',
+  )}
+
+  const nextConfig = {
+    // your existing next config
+  };
+  
+  ${chalk.greenBright(`const sentryWebpackPluginOptions = {
+    org: "${options.orgSlug}",
+    project: "${options.projectSlug}",${
+    options.selfHosted ? `\n    url: "${options.url}",` : ''
+  }
+  };`)}
+  
+  ${chalk.greenBright(`const sentryOptions = {
+    // Upload additional client files (increases upload size)
+    widenClientFileUpload: true,
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+  };`)}
+  
+  ${chalk.greenBright(`module.exports = withSentryConfig(
+    nextConfig,
+    sentryWebpackPluginOptions,
+    sentryOptions
+  );`)}  
+`);
+
+export const configureNextJsSourceMapsUpload = async (
+  options: SourceMapUploadToolConfigurationOptions,
+  wizardOptions: WizardOptions,
+) => {
+  clack.log
+    .info(`Source Maps upload for Next.js is configured automatically by default if you run the Sentry Wizard for Next.JS.
+But don't worry, we can redirect you to the wizard now!
+
+In case you already tried the wizard, we can also show you how to configure your ${chalk.cyan(
+    'next.config.js',
+  )} file manually instead.`);
+
+  const shouldRedirect: boolean = await abortIfCancelled(
+    clack.select({
+      message: 'Do you want to run the Sentry Wizard for Next.JS now?',
+      options: [
+        {
+          label: 'Yes, run the wizard!',
+          value: true,
+          hint: 'The wizard can also configure your SDK setup',
+        },
+        {
+          label: 'No, show me how to configure it manually',
+          value: false,
+        },
+      ],
+    }),
+  );
+
+  Sentry.setTag('redirect-nextjs-wizard', shouldRedirect);
+
+  if (shouldRedirect) {
+    await traceStep('run-nextjs-wizard', () => runNextjsWizard(wizardOptions));
+    clack.intro('Sentry Source Maps Upload Configuration Wizard');
+    clack.log.info(
+      "Welcome back to the Source Maps wizard - we're almost done ;)",
+    );
+  } else {
+    clack.log.info(
+      `Add the following code to your ${chalk.cyan('next.config.js')}:`,
+    );
+
+    // Intentionally logging directly to console here
+    // eslint-disable-next-line no-console
+    console.log(getCodeSnippet(options));
+
+    await traceStep('nextjs-manual-nextconfigjs', () =>
+      abortIfCancelled(
+        clack.select({
+          message: 'Did you copy the code above?',
+          options: [{ label: 'Yes, continue!', value: true }],
+          initialValue: true,
+        }),
+      ),
+    );
+
+    await traceStep('nextjs-manual-sentryclirc', () =>
+      addSentryCliRc(options.authToken),
+    );
+  }
+
+  clack.log
+    .info(`In case you still run into problems, check out our docs to further debug your setup:
+
+Uploading Source Maps:
+https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-source-maps
+  
+Troubleshooting Source Maps:
+https://docs.sentry.io/platforms/javascript/guides/nextjs/troubleshooting/`);
+};

package/src/sourcemaps/tools/sentry-cli.ts

@@ -7,14 +7,18 @@ import * as fs from 'fs';
 import {
   abortIfCancelled,
   addSentryCliRc,
+  detectPackageManager,
   getPackageDotJson,
   installPackage,
 } from '../../utils/clack-utils';
 
 import { SourceMapUploadToolConfigurationOptions } from './types';
 import { hasPackageInstalled, PackageDotJson } from '../../utils/package-json';
+import { traceStep } from '../../telemetry';
 
-const NPM_SCRIPT_NAME = 'sentry:sourcemaps';
+const SENTRY_NPM_SCRIPT_NAME = 'sentry:sourcemaps';
+
+let addedToBuildCommand = false;
 
 export async function configureSentryCLI(
   options: SourceMapUploadToolConfigurationOptions,
@@ -80,14 +84,32 @@ export async function configureSentryCLI(
     relativePosixArtifactPath,
   );
 
+  if (await askShouldAddToBuildCommand()) {
+    await traceStep('sentry-cli-add-to-build-cmd', () =>
+      addSentryCommandToBuildCommand(packageDotJson),
+    );
+  } else {
+    clack.log.info(
+      `No problem, just make sure to run this script ${chalk.bold(
+        'after',
+      )} building your application but ${chalk.bold('before')} deploying!`,
+    );
+  }
+
   await addSentryCliRc(options.authToken);
 }
 
 export async function setupNpmScriptInCI(): Promise<void> {
+  if (addedToBuildCommand) {
+    // No need to tell users to add it manually to their CI
+    // if the script is already added to the build command
+    return;
+  }
+
   const addedToCI = await abortIfCancelled(
     clack.select({
       message: `Add a step to your CI pipeline that runs the ${chalk.cyan(
-        NPM_SCRIPT_NAME,
+        SENTRY_NPM_SCRIPT_NAME,
       )} script ${chalk.bold('right after')} building your application.`,
       options: [
         { label: 'I did, continue!', value: true },
@@ -95,7 +117,9 @@ export async function setupNpmScriptInCI(): Promise<void> {
           label: "I'll do it later...",
           value: false,
           hint: chalk.yellow(
-            'You need to run the command after each build for source maps to work properly.',
+            `You need to run ${chalk.cyan(
+              SENTRY_NPM_SCRIPT_NAME,
+            )} after each build for source maps to work properly.`,
           ),
         },
       ],
@@ -126,7 +150,7 @@ async function createAndAddNpmScript(
   } ${relativePosixArtifactPath}`;
 
   packageDotJson.scripts = packageDotJson.scripts || {};
-  packageDotJson.scripts[NPM_SCRIPT_NAME] = sentryCliNpmScript;
+  packageDotJson.scripts[SENTRY_NPM_SCRIPT_NAME] = sentryCliNpmScript;
 
   await fs.promises.writeFile(
     path.join(process.cwd(), 'package.json'),
@@ -134,11 +158,113 @@ async function createAndAddNpmScript(
   );
 
   clack.log.info(
-    `Added a ${chalk.cyan(NPM_SCRIPT_NAME)} script to your ${chalk.cyan(
+    `Added a ${chalk.cyan(SENTRY_NPM_SCRIPT_NAME)} script to your ${chalk.cyan(
       'package.json',
-    )}. Make sure to run this script ${chalk.bold(
-      'after',
-    )} building your application but ${chalk.bold('before')} deploying!`,
+    )}.`,
+  );
+}
+
+async function askShouldAddToBuildCommand(): Promise<boolean> {
+  const shouldAddToBuildCommand = await abortIfCancelled(
+    clack.select({
+      message: `Do you want to automatically run the ${chalk.cyan(
+        SENTRY_NPM_SCRIPT_NAME,
+      )} script after each production build?`,
+      options: [
+        {
+          label: 'Yes',
+          value: true,
+          hint: 'This will modify your prod build command',
+        },
+        { label: 'No', value: false },
+      ],
+      initialValue: true,
+    }),
+  );
+
+  Sentry.setTag('modify-build-command', shouldAddToBuildCommand);
+
+  return shouldAddToBuildCommand;
+}
+
+/**
+ * Add the sentry:sourcemaps command to the prod build command in the package.json
+ * - Detect the user's build command
+ * - Append the sentry:sourcemaps command to it
+ *
+ * @param packageDotJson The package.json which will be modified.
+ */
+async function addSentryCommandToBuildCommand(
+  packageDotJson: PackageDotJson,
+): Promise<void> {
+  // This usually shouldn't happen because earlier we added the
+  // SENTRY_NPM_SCRIPT_NAME script but just to be sure
+  packageDotJson.scripts = packageDotJson.scripts || {};
+
+  const allNpmScripts = Object.keys(packageDotJson.scripts).filter(
+    (s) => s !== SENTRY_NPM_SCRIPT_NAME,
+  );
+
+  const pacMan = detectPackageManager() || 'npm';
+
+  // Heuristic to pre-select the build command:
+  // Often, 'build' is the prod build command, so we favour it.
+  // If it's not there, commands that include 'build' might be the prod build command.
+  let buildCommand =
+    packageDotJson.scripts.build ||
+    allNpmScripts.find((s) => s.toLocaleLowerCase().includes('build'));
+
+  const isProdBuildCommand =
+    !!buildCommand &&
+    (await abortIfCancelled(
+      clack.confirm({
+        message: `Is ${chalk.cyan(
+          `${pacMan} run ${buildCommand}`,
+        )} your production build command?`,
+      }),
+    ));
+
+  if (allNpmScripts.length && (!buildCommand || !isProdBuildCommand)) {
+    buildCommand = await abortIfCancelled(
+      clack.select({
+        message: `Which ${pacMan} command in your ${chalk.cyan(
+          'package.json',
+        )} builds your application for production?`,
+        options: allNpmScripts
+          .map((script) => ({
+            label: script,
+            value: script,
+          }))
+          .concat({ label: 'None of the above', value: 'none' }),
+      }),
+    );
+  }
+
+  if (!buildCommand || buildCommand === 'none') {
+    clack.log.warn(
+      `We can only add the ${chalk.cyan(
+        SENTRY_NPM_SCRIPT_NAME,
+      )} script to another \`script\` in your ${chalk.cyan('package.json')}.
+Please add it manually to your prod build command.`,
+    );
+    return;
+  }
+
+  packageDotJson.scripts[
+    buildCommand
+  ] = `${buildCommand} && ${pacMan} run ${SENTRY_NPM_SCRIPT_NAME}`;
+
+  await fs.promises.writeFile(
+    path.join(process.cwd(), 'package.json'),
+    JSON.stringify(packageDotJson, null, 2),
+  );
+
+  addedToBuildCommand = true;
+
+  clack.log.info(
+    `Added ${chalk.cyan(SENTRY_NPM_SCRIPT_NAME)} script to your ${chalk.cyan(
+      buildCommand,
+    )} command.`,
   );
 }
 

package/src/sourcemaps/tools/vite.ts

@@ -1,5 +1,12 @@
 // @ts-ignore - clack is ESM and TS complains about that. It works though
 import clack, { select } from '@clack/prompts';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import { generateCode, parseModule } from 'magicast';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import { addVitePlugin } from 'magicast/helpers';
+
+import * as Sentry from '@sentry/node';
+
 import chalk from 'chalk';
 import {
   abortIfCancelled,
@@ -13,6 +20,11 @@ import {
   SourceMapUploadToolConfigurationFunction,
   SourceMapUploadToolConfigurationOptions,
 } from './types';
+import { findScriptFile, hasSentryContent } from '../../utils/ast-utils';
+
+import * as path from 'path';
+import * as fs from 'fs';
+import { debug } from '../../utils/debug';
 
 const getCodeSnippet = (options: SourceMapUploadToolConfigurationOptions) =>
   chalk.gray(`
@@ -48,21 +60,98 @@ export const configureVitePlugin: SourceMapUploadToolConfigurationFunction =
       ),
     });
 
-    clack.log.step(
-      `Add the following code to your ${chalk.bold('vite.config.js')} file:`,
+    const viteConfigPath = findScriptFile(
+      path.resolve(process.cwd(), 'vite.config'),
     );
 
-    // Intentially logging directly to console here so that the code can be copied/pasted directly
-    // eslint-disable-next-line no-console
-    console.log(getCodeSnippet(options));
+    let successfullyAdded = false;
+    if (viteConfigPath) {
+      successfullyAdded = await addVitePluginToConfig(viteConfigPath, options);
+    } else {
+      Sentry.setTag('ast-mod-fail-reason', 'config-not-found');
+    }
 
-    await abortIfCancelled(
-      select({
-        message: 'Did you copy the snippet above?',
-        options: [{ label: 'Yes, continue!', value: true }],
-        initialValue: true,
-      }),
-    );
+    if (successfullyAdded) {
+      Sentry.setTag('ast-mod', 'success');
+    } else {
+      Sentry.setTag('ast-mod', 'fail');
+      await showCopyPasteInstructions(
+        path.basename(viteConfigPath || 'vite.config.js'),
+        options,
+      );
+    }
 
     await addDotEnvSentryBuildPluginFile(options.authToken);
   };
+
+async function addVitePluginToConfig(
+  viteConfigPath: string,
+  options: SourceMapUploadToolConfigurationOptions,
+): Promise<boolean> {
+  try {
+    const prettyViteConfigFilename = chalk.cyan(path.basename(viteConfigPath));
+
+    const viteConfigContent = (
+      await fs.promises.readFile(viteConfigPath)
+    ).toString();
+
+    const mod = parseModule(viteConfigContent);
+
+    if (hasSentryContent(mod)) {
+      clack.log.warn(
+        `File ${prettyViteConfigFilename} already contains Sentry code. 
+Please follow the instruction below`,
+      );
+      Sentry.setTag('ast-mod-fail-reason', 'has-sentry-content');
+      return false;
+    }
+
+    const { orgSlug: org, projectSlug: project, selfHosted, url } = options;
+
+    addVitePlugin(mod, {
+      imported: 'sentryVitePlugin',
+      from: '@sentry/vite-plugin',
+      constructor: 'sentryVitePlugin',
+      options: {
+        org,
+        project,
+        ...(selfHosted && { url }),
+      },
+    });
+
+    const code = generateCode(mod.$ast).code;
+
+    await fs.promises.writeFile(viteConfigPath, code);
+
+    clack.log.success(
+      `Added the Sentry Vite plugin to ${prettyViteConfigFilename}`,
+    );
+
+    return true;
+  } catch (e) {
+    debug(e);
+    Sentry.setTag('ast-mod-fail-reason', 'insertion-fail');
+    return false;
+  }
+}
+
+async function showCopyPasteInstructions(
+  viteConfigFilename: string,
+  options: SourceMapUploadToolConfigurationOptions,
+) {
+  clack.log.step(
+    `Add the following code to your ${chalk.cyan(viteConfigFilename)} file:`,
+  );
+
+  // 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));
+
+  await abortIfCancelled(
+    select({
+      message: 'Did you copy the snippet above?',
+      options: [{ label: 'Yes, continue!', value: true }],
+      initialValue: true,
+    }),
+  );
+}

package/src/sourcemaps/utils/detect-tool.ts

@@ -9,7 +9,8 @@ export type SupportedTools =
   | 'tsc'
   | 'sentry-cli'
   | 'create-react-app'
-  | 'angular';
+  | 'angular'
+  | 'nextjs';
 
 // A map of package names pointing to the tool slug.
 // The order is important, because we want to detect the most specific tool first.
@@ -18,6 +19,7 @@ export type SupportedTools =
 export const TOOL_PACKAGE_MAP: Record<string, SupportedTools> = {
   '@angular/core': 'angular',
   'create-react-app': 'create-react-app',
+  next: 'nextjs',
   webpack: 'webpack',
   vite: 'vite',
   esbuild: 'esbuild',