@sentry/wizard 3.12.0 → 3.14.0

package/src/nextjs/nextjs-wizard.ts

@@ -7,11 +7,13 @@ import * as fs from 'fs';
 import { builders, generateCode, parseModule } from 'magicast';
 import * as path from 'path';
 
+import * as Sentry from '@sentry/node';
+
 import {
   abort,
   abortIfCancelled,
   addSentryCliConfig,
-  confirmContinueEvenThoughNoGitRepo,
+  confirmContinueIfNoOrDirtyGitRepo,
   ensurePackageIsInstalled,
   getOrAskForProjectData,
   getPackageDotJson,
@@ -19,7 +21,7 @@ import {
   isUsingTypeScript,
   printWelcome,
 } from '../utils/clack-utils';
-import { WizardOptions } from '../utils/types';
+import { SentryProjectData, WizardOptions } from '../utils/types';
 import {
   getNextjsConfigCjsAppendix,
   getNextjsConfigCjsTemplate,
@@ -31,255 +33,344 @@ import {
   getSentryExampleAppDirApiRoute,
   getSentryExamplePageContents,
 } from './templates';
+import { traceStep, withTelemetry } from '../telemetry';
+import { getPackageVersion, hasPackageInstalled } from '../utils/package-json';
+import { getNextJsVersionBucket } from './utils';
+
+export function runNextjsWizard(options: WizardOptions) {
+  return withTelemetry(
+    {
+      enabled: options.telemetryEnabled,
+      integration: 'nextjs',
+    },
+    () => runNextjsWizardWithTelemetry(options),
+  );
+}
 
-// eslint-disable-next-line complexity
-export async function runNextjsWizard(options: WizardOptions): Promise<void> {
+export async function runNextjsWizardWithTelemetry(
+  options: WizardOptions,
+): Promise<void> {
   printWelcome({
     wizardName: 'Sentry Next.js Wizard',
     promoCode: options.promoCode,
+    telemetryEnabled: options.telemetryEnabled,
   });
 
-  await confirmContinueEvenThoughNoGitRepo();
+  await confirmContinueIfNoOrDirtyGitRepo();
 
   const packageJson = await getPackageDotJson();
+
   await ensurePackageIsInstalled(packageJson, 'next', 'Next.js');
 
+  const nextVersion = getPackageVersion('next', packageJson);
+  Sentry.setTag('nextjs-version', getNextJsVersionBucket(nextVersion));
+
   const { selectedProject, authToken, selfHosted, sentryUrl } =
     await getOrAskForProjectData(options, 'javascript-nextjs');
 
+  const sdkAlreadyInstalled = hasPackageInstalled(
+    '@sentry/nextjs',
+    packageJson,
+  );
+  Sentry.setTag('sdk-already-installed', sdkAlreadyInstalled);
+
   await installPackage({
     packageName: '@sentry/nextjs',
     alreadyInstalled: !!packageJson?.dependencies?.['@sentry/nextjs'],
   });
 
-  const typeScriptDetected = isUsingTypeScript();
+  await traceStep('configure-sdk', async () =>
+    createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl),
+  );
 
-  const configVariants = ['server', 'client', 'edge'] as const;
+  await traceStep('create-example-page', async () =>
+    createExamplePage(selfHosted, selectedProject, sentryUrl),
+  );
 
-  for (const configVariant of configVariants) {
-    const jsConfig = `sentry.${configVariant}.config.js`;
-    const tsConfig = `sentry.${configVariant}.config.ts`;
+  await addSentryCliConfig(authToken);
+
+  const mightBeUsingVercel = fs.existsSync(
+    path.join(process.cwd(), 'vercel.json'),
+  );
 
-    const jsConfigExists = fs.existsSync(path.join(process.cwd(), jsConfig));
-    const tsConfigExists = fs.existsSync(path.join(process.cwd(), tsConfig));
+  clack.outro(
+    `${chalk.green('Everything is set up!')}
+
+   ${chalk.cyan(
+     'You can validate your setup by starting your dev environment (`next dev`) and visiting "/sentry-example-page".',
+   )}
+${
+  mightBeUsingVercel
+    ? `
+   ▲ It seems like you're using Vercel. We recommend using the Sentry Vercel integration: https://vercel.com/integrations/sentry
+`
+    : ''
+}
+   ${chalk.dim(
+     'If you encounter any issues, let us know here: https://github.com/getsentry/sentry-javascript/issues',
+   )}`,
+  );
+}
 
-    let shouldWriteFile = true;
+async function createOrMergeNextJsFiles(
+  selectedProject: SentryProjectData,
+  selfHosted: boolean,
+  sentryUrl: string,
+) {
+  const typeScriptDetected = isUsingTypeScript();
 
-    if (jsConfigExists || tsConfigExists) {
-      const existingConfigs = [];
+  const configVariants = ['server', 'client', 'edge'] as const;
 
-      if (jsConfigExists) {
-        existingConfigs.push(jsConfig);
-      }
+  for (const configVariant of configVariants) {
+    await traceStep(`create-sentry-${configVariant}-config`, async () => {
+      const jsConfig = `sentry.${configVariant}.config.js`;
+      const tsConfig = `sentry.${configVariant}.config.ts`;
 
-      if (tsConfigExists) {
-        existingConfigs.push(tsConfig);
-      }
+      const jsConfigExists = fs.existsSync(path.join(process.cwd(), jsConfig));
+      const tsConfigExists = fs.existsSync(path.join(process.cwd(), tsConfig));
 
-      const overwriteExistingConfigs = await abortIfCancelled(
-        clack.confirm({
-          message: `Found existing Sentry ${configVariant} config (${existingConfigs.join(
-            ', ',
-          )}). Overwrite ${existingConfigs.length > 1 ? 'them' : 'it'}?`,
-        }),
-      );
+      let shouldWriteFile = true;
 
-      shouldWriteFile = overwriteExistingConfigs;
+      if (jsConfigExists || tsConfigExists) {
+        const existingConfigs = [];
 
-      if (overwriteExistingConfigs) {
         if (jsConfigExists) {
-          fs.unlinkSync(path.join(process.cwd(), jsConfig));
-          clack.log.warn(`Removed existing ${chalk.bold(jsConfig)}.`);
+          existingConfigs.push(jsConfig);
         }
+
         if (tsConfigExists) {
-          fs.unlinkSync(path.join(process.cwd(), tsConfig));
-          clack.log.warn(`Removed existing ${chalk.bold(tsConfig)}.`);
+          existingConfigs.push(tsConfig);
+        }
+
+        const overwriteExistingConfigs = await abortIfCancelled(
+          clack.confirm({
+            message: `Found existing Sentry ${configVariant} config (${existingConfigs.join(
+              ', ',
+            )}). Overwrite ${existingConfigs.length > 1 ? 'them' : 'it'}?`,
+          }),
+        );
+        Sentry.setTag(
+          `overwrite-${configVariant}-config`,
+          overwriteExistingConfigs,
+        );
+
+        shouldWriteFile = overwriteExistingConfigs;
+
+        if (overwriteExistingConfigs) {
+          if (jsConfigExists) {
+            fs.unlinkSync(path.join(process.cwd(), jsConfig));
+            clack.log.warn(`Removed existing ${chalk.bold(jsConfig)}.`);
+          }
+          if (tsConfigExists) {
+            fs.unlinkSync(path.join(process.cwd(), tsConfig));
+            clack.log.warn(`Removed existing ${chalk.bold(tsConfig)}.`);
+          }
         }
       }
-    }
 
-    if (shouldWriteFile) {
-      await fs.promises.writeFile(
-        path.join(process.cwd(), typeScriptDetected ? tsConfig : jsConfig),
-        getSentryConfigContents(
-          selectedProject.keys[0].dsn.public,
-          configVariant,
-        ),
-        { encoding: 'utf8', flag: 'w' },
-      );
-      clack.log.success(
-        `Created fresh ${chalk.bold(
-          typeScriptDetected ? tsConfig : jsConfig,
-        )}.`,
-      );
-    }
+      if (shouldWriteFile) {
+        await fs.promises.writeFile(
+          path.join(process.cwd(), typeScriptDetected ? tsConfig : jsConfig),
+          getSentryConfigContents(
+            selectedProject.keys[0].dsn.public,
+            configVariant,
+          ),
+          { encoding: 'utf8', flag: 'w' },
+        );
+        clack.log.success(
+          `Created fresh ${chalk.bold(
+            typeScriptDetected ? tsConfig : jsConfig,
+          )}.`,
+        );
+        Sentry.setTag(`created-${configVariant}-config`, true);
+      }
+    });
   }
 
   const sentryWebpackOptionsTemplate = getNextjsWebpackPluginOptionsTemplate(
     selectedProject.organization.slug,
     selectedProject.slug,
+    selfHosted,
+    sentryUrl,
   );
   const sentryBuildOptionsTemplate = getNextjsSentryBuildOptionsTemplate();
 
   const nextConfigJs = 'next.config.js';
   const nextConfigMjs = 'next.config.mjs';
 
-  const nextConfigJsExists = fs.existsSync(
-    path.join(process.cwd(), nextConfigJs),
-  );
-  const nextConfigMjsExists = fs.existsSync(
-    path.join(process.cwd(), nextConfigMjs),
-  );
-
-  if (!nextConfigJsExists && !nextConfigMjsExists) {
-    await fs.promises.writeFile(
+  await traceStep('setup-next-config', async () => {
+    const nextConfigJsExists = fs.existsSync(
       path.join(process.cwd(), nextConfigJs),
-      getNextjsConfigCjsTemplate(
-        sentryWebpackOptionsTemplate,
-        sentryBuildOptionsTemplate,
-      ),
-      { encoding: 'utf8', flag: 'w' },
-    );
-
-    clack.log.success(
-      `Created ${chalk.bold('next.config.js')} with Sentry configuration.`,
     );
-  }
-
-  if (nextConfigJsExists) {
-    const nextConfgiJsContent = fs.readFileSync(
-      path.join(process.cwd(), nextConfigJs),
-      'utf8',
+    const nextConfigMjsExists = fs.existsSync(
+      path.join(process.cwd(), nextConfigMjs),
     );
 
-    const probablyIncludesSdk =
-      nextConfgiJsContent.includes('@sentry/nextjs') &&
-      nextConfgiJsContent.includes('withSentryConfig');
-
-    let shouldInject = true;
-
-    if (probablyIncludesSdk) {
-      const injectAnyhow = await abortIfCancelled(
-        clack.confirm({
-          message: `${chalk.bold(
-            nextConfigJs,
-          )} already contains Sentry SDK configuration. Should the wizard modify it anyways?`,
-        }),
-      );
-
-      shouldInject = injectAnyhow;
-    }
+    if (!nextConfigJsExists && !nextConfigMjsExists) {
+      Sentry.setTag('next-config-strategy', 'create');
 
-    if (shouldInject) {
-      await fs.promises.appendFile(
+      await fs.promises.writeFile(
         path.join(process.cwd(), nextConfigJs),
-        getNextjsConfigCjsAppendix(
+        getNextjsConfigCjsTemplate(
           sentryWebpackOptionsTemplate,
           sentryBuildOptionsTemplate,
         ),
-        'utf8',
+        { encoding: 'utf8', flag: 'w' },
       );
 
       clack.log.success(
-        `Added Sentry configuration to ${chalk.bold(nextConfigJs)}. ${chalk.dim(
-          '(you probably want to clean this up a bit!)',
-        )}`,
+        `Created ${chalk.bold('next.config.js')} with Sentry configuration.`,
       );
     }
-  }
 
-  if (nextConfigMjsExists) {
-    const nextConfgiMjsContent = fs.readFileSync(
-      path.join(process.cwd(), nextConfigMjs),
-      'utf8',
-    );
+    if (nextConfigJsExists) {
+      Sentry.setTag('next-config-strategy', 'modify');
 
-    const probablyIncludesSdk =
-      nextConfgiMjsContent.includes('@sentry/nextjs') &&
-      nextConfgiMjsContent.includes('withSentryConfig');
+      const nextConfgiJsContent = fs.readFileSync(
+        path.join(process.cwd(), nextConfigJs),
+        'utf8',
+      );
 
-    let shouldInject = true;
+      const probablyIncludesSdk =
+        nextConfgiJsContent.includes('@sentry/nextjs') &&
+        nextConfgiJsContent.includes('withSentryConfig');
 
-    if (probablyIncludesSdk) {
-      const injectAnyhow = await abortIfCancelled(
-        clack.confirm({
-          message: `${chalk.bold(
-            nextConfigMjs,
-          )} already contains Sentry SDK configuration. Should the wizard modify it anyways?`,
-        }),
-      );
+      let shouldInject = true;
 
-      shouldInject = injectAnyhow;
-    }
+      if (probablyIncludesSdk) {
+        const injectAnyhow = await abortIfCancelled(
+          clack.confirm({
+            message: `${chalk.bold(
+              nextConfigJs,
+            )} already contains Sentry SDK configuration. Should the wizard modify it anyways?`,
+          }),
+        );
 
-    try {
-      if (shouldInject) {
-        const mod = parseModule(nextConfgiMjsContent);
-        mod.imports.$add({
-          from: '@sentry/nextjs',
-          imported: 'withSentryConfig',
-          local: 'withSentryConfig',
-        });
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-        const expressionToWrap = generateCode(mod.exports.default.$ast).code;
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        mod.exports.default = builders.raw(`withSentryConfig(
-      ${expressionToWrap},
-      ${sentryWebpackOptionsTemplate},
-      ${sentryBuildOptionsTemplate}
-)`);
-        const newCode = mod.generate().code;
+        shouldInject = injectAnyhow;
+      }
 
-        await fs.promises.writeFile(
-          path.join(process.cwd(), nextConfigMjs),
-          newCode,
-          {
-            encoding: 'utf8',
-            flag: 'w',
-          },
+      if (shouldInject) {
+        await fs.promises.appendFile(
+          path.join(process.cwd(), nextConfigJs),
+          getNextjsConfigCjsAppendix(
+            sentryWebpackOptionsTemplate,
+            sentryBuildOptionsTemplate,
+          ),
+          'utf8',
         );
+
         clack.log.success(
           `Added Sentry configuration to ${chalk.bold(
-            nextConfigMjs,
+            nextConfigJs,
           )}. ${chalk.dim('(you probably want to clean this up a bit!)')}`,
         );
       }
-    } catch {
-      clack.log.warn(
-        chalk.yellow(
-          `Something went wrong writing to ${chalk.bold(nextConfigMjs)}`,
-        ),
-      );
-      clack.log.info(
-        `Please put the following code snippet into ${chalk.bold(
-          nextConfigMjs,
-        )}: ${chalk.dim('You probably have to clean it up a bit.')}\n`,
-      );
 
-      // eslint-disable-next-line no-console
-      console.log(
-        getNextjsConfigEsmCopyPasteSnippet(
-          sentryWebpackOptionsTemplate,
-          sentryBuildOptionsTemplate,
-        ),
+      Sentry.setTag('next-config-mod-result', 'success');
+    }
+
+    if (nextConfigMjsExists) {
+      const nextConfgiMjsContent = fs.readFileSync(
+        path.join(process.cwd(), nextConfigMjs),
+        'utf8',
       );
 
-      const shouldContinue = await abortIfCancelled(
-        clack.confirm({
-          message: `Are you done putting the snippet above into ${chalk.bold(
+      const probablyIncludesSdk =
+        nextConfgiMjsContent.includes('@sentry/nextjs') &&
+        nextConfgiMjsContent.includes('withSentryConfig');
+
+      let shouldInject = true;
+
+      if (probablyIncludesSdk) {
+        const injectAnyhow = await abortIfCancelled(
+          clack.confirm({
+            message: `${chalk.bold(
+              nextConfigMjs,
+            )} already contains Sentry SDK configuration. Should the wizard modify it anyways?`,
+          }),
+        );
+
+        shouldInject = injectAnyhow;
+      }
+
+      try {
+        if (shouldInject) {
+          const mod = parseModule(nextConfgiMjsContent);
+          mod.imports.$add({
+            from: '@sentry/nextjs',
+            imported: 'withSentryConfig',
+            local: 'withSentryConfig',
+          });
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+          const expressionToWrap = generateCode(mod.exports.default.$ast).code;
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          mod.exports.default = builders.raw(`withSentryConfig(
+      ${expressionToWrap},
+      ${sentryWebpackOptionsTemplate},
+      ${sentryBuildOptionsTemplate}
+)`);
+          const newCode = mod.generate().code;
+
+          await fs.promises.writeFile(
+            path.join(process.cwd(), nextConfigMjs),
+            newCode,
+            {
+              encoding: 'utf8',
+              flag: 'w',
+            },
+          );
+          clack.log.success(
+            `Added Sentry configuration to ${chalk.bold(
+              nextConfigMjs,
+            )}. ${chalk.dim('(you probably want to clean this up a bit!)')}`,
+          );
+
+          Sentry.setTag('next-config-mod-result', 'success');
+        }
+      } catch {
+        Sentry.setTag('next-config-mod-result', 'fail');
+        clack.log.warn(
+          chalk.yellow(
+            `Something went wrong writing to ${chalk.bold(nextConfigMjs)}`,
+          ),
+        );
+        clack.log.info(
+          `Please put the following code snippet into ${chalk.bold(
             nextConfigMjs,
-          )}?`,
-          active: 'Yes',
-          inactive: 'No, get me out of here',
-        }),
-      );
+          )}: ${chalk.dim('You probably have to clean it up a bit.')}\n`,
+        );
 
-      if (!shouldContinue) {
-        await abort();
+        // eslint-disable-next-line no-console
+        console.log(
+          getNextjsConfigEsmCopyPasteSnippet(
+            sentryWebpackOptionsTemplate,
+            sentryBuildOptionsTemplate,
+          ),
+        );
+
+        const shouldContinue = await abortIfCancelled(
+          clack.confirm({
+            message: `Are you done putting the snippet above into ${chalk.bold(
+              nextConfigMjs,
+            )}?`,
+            active: 'Yes',
+            inactive: 'No, get me out of here',
+          }),
+        );
+
+        if (!shouldContinue) {
+          await abort();
+        }
       }
     }
-  }
+  });
+}
 
+async function createExamplePage(
+  selfHosted: boolean,
+  selectedProject: SentryProjectData,
+  sentryUrl: string,
+): Promise<void> {
   const srcDir = path.join(process.cwd(), 'src');
   const maybePagesDirPath = path.join(process.cwd(), 'pages');
   const maybeSrcPagesDirPath = path.join(srcDir, 'pages');
@@ -314,6 +405,8 @@ export async function runNextjsWizard(options: WizardOptions): Promise<void> {
     });
   }
 
+  Sentry.setTag('nextjs-app-dir', !!appLocation);
+
   if (appLocation) {
     const examplePageContents = getSentryExamplePageContents({
       selfHosted,
@@ -323,6 +416,13 @@ export async function runNextjsWizard(options: WizardOptions): Promise<void> {
       useClient: true,
     });
 
+    fs.mkdirSync(
+      path.join(process.cwd(), ...appLocation, 'sentry-example-page'),
+      {
+        recursive: true,
+      },
+    );
+
     await fs.promises.writeFile(
       path.join(
         process.cwd(),
@@ -340,9 +440,12 @@ export async function runNextjsWizard(options: WizardOptions): Promise<void> {
       )}.`,
     );
 
-    fs.mkdirSync(path.join(process.cwd(), ...appLocation, 'api'), {
-      recursive: true,
-    });
+    fs.mkdirSync(
+      path.join(process.cwd(), ...appLocation, 'api', 'sentry-example-api'),
+      {
+        recursive: true,
+      },
+    );
 
     await fs.promises.writeFile(
       path.join(
@@ -403,28 +506,4 @@ export async function runNextjsWizard(options: WizardOptions): Promise<void> {
       )}.`,
     );
   }
-
-  await addSentryCliConfig(authToken);
-
-  const mightBeUsingVercel = fs.existsSync(
-    path.join(process.cwd(), 'vercel.json'),
-  );
-
-  clack.outro(
-    `${chalk.green('Everything is set up!')}
-
-   ${chalk.cyan(
-     'You can validate your setup by starting your dev environment (`next dev`) and visiting "/sentry-example-page".',
-   )}
-${
-  mightBeUsingVercel
-    ? `
-   ▲ It seems like you're using Vercel. We recommend using the Sentry Vercel integration: https://vercel.com/integrations/sentry
-`
-    : ''
-}
-   ${chalk.dim(
-     'If you encounter any issues, let us know here: https://github.com/getsentry/sentry-javascript/issues',
-   )}`,
-  );
 }

package/src/nextjs/templates.ts

@@ -1,6 +1,8 @@
 export function getNextjsWebpackPluginOptionsTemplate(
   orgSlug: string,
   projectSlug: string,
+  selfHosted: boolean,
+  url: string,
 ): string {
   return `{
     // For all available options, see:
@@ -8,9 +10,8 @@ export function getNextjsWebpackPluginOptionsTemplate(
 
     // Suppresses source map uploading logs during build
     silent: true,
-
     org: "${orgSlug}",
-    project: "${projectSlug}",
+    project: "${projectSlug}",${selfHosted ? `\n    url: "${url}"` : ''}
   }`;
 }
 

package/src/nextjs/utils.ts

@@ -0,0 +1,21 @@
+import { major, minVersion } from 'semver';
+
+export function getNextJsVersionBucket(version: string | undefined) {
+  if (!version) {
+    return 'none';
+  }
+
+  try {
+    const minVer = minVersion(version);
+    if (!minVer) {
+      return 'invalid';
+    }
+    const majorVersion = major(minVer);
+    if (majorVersion >= 11) {
+      return `${majorVersion}.x`;
+    }
+    return '<11.0.0';
+  } catch {
+    return 'unknown';
+  }
+}