@sentry/wizard 3.25.2 → 3.27.0

package/src/nextjs/nextjs-wizard.ts

@@ -17,6 +17,7 @@ import {
   confirmContinueIfNoOrDirtyGitRepo,
   createNewConfigFile,
   ensurePackageIsInstalled,
+  featureSelectionPrompt,
   getOrAskForProjectData,
   getPackageDotJson,
   installPackage,
@@ -24,7 +25,7 @@ import {
   printWelcome,
   showCopyPasteInstructions,
 } from '../utils/clack-utils';
-import { SentryProjectData, WizardOptions } from '../utils/types';
+import type { SentryProjectData, WizardOptions } from '../utils/types';
 import {
   getFullUnderscoreErrorCopyPasteSnippet,
   getGlobalErrorCopyPasteSnippet,
@@ -36,7 +37,7 @@ import {
   getSentryConfigContents,
   getSentryDefaultGlobalErrorPage,
   getSentryDefaultUnderscoreErrorPage,
-  getSentryExampleApiRoute,
+  getSentryExamplePagesDirApiRoute,
   getSentryExampleAppDirApiRoute,
   getSentryExamplePageContents,
   getSimpleUnderscoreErrorCopyPasteSnippet,
@@ -93,9 +94,12 @@ export async function runNextjsWizardWithTelemetry(
 
   await traceStep('configure-sdk', async () => {
     const tunnelRoute = await askShouldSetTunnelRoute();
+    const reactComponentAnnotation =
+      await askShouldEnableReactComponentAnnotation();
 
     await createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, {
       tunnelRoute,
+      reactComponentAnnotation,
     });
   });
 
@@ -321,6 +325,7 @@ ${chalk.dim(
 
 type SDKConfigOptions = {
   tunnelRoute: boolean;
+  reactComponentAnnotation: boolean;
 };
 
 async function createOrMergeNextJsFiles(
@@ -329,6 +334,23 @@ async function createOrMergeNextJsFiles(
   sentryUrl: string,
   sdkConfigOptions: SDKConfigOptions,
 ) {
+  const selectedFeatures = await featureSelectionPrompt([
+    {
+      id: 'performance',
+      prompt: `Do you want to enable ${chalk.bold(
+        'Tracing',
+      )} to track the performance of your application?`,
+      enabledHint: 'recommended',
+    },
+    {
+      id: 'replay',
+      prompt: `Do you want to enable ${chalk.bold(
+        'Sentry Session Replay',
+      )} to get reproduction of frontend errors via user sessions?`,
+      enabledHint: 'recommended, but increases bundle size',
+    },
+  ] as const);
+
   const typeScriptDetected = isUsingTypeScript();
 
   const configVariants = ['server', 'client', 'edge'] as const;
@@ -386,6 +408,7 @@ async function createOrMergeNextJsFiles(
           getSentryConfigContents(
             selectedProject.keys[0].dsn.public,
             configVariant,
+            selectedFeatures,
           ),
           { encoding: 'utf8', flag: 'w' },
         );
@@ -400,60 +423,85 @@ async function createOrMergeNextJsFiles(
   }
 
   await traceStep('setup-instrumentation-hook', async () => {
-    const srcInstrumentationTsExists = fs.existsSync(
-      path.join(process.cwd(), 'src', 'instrumentation.ts'),
-    );
-    const srcInstrumentationJsExists = fs.existsSync(
-      path.join(process.cwd(), 'src', 'instrumentation.js'),
-    );
+    const hasRootAppDirectory = hasDirectoryPathFromRoot('app');
+    const hasRootPagesDirectory = hasDirectoryPathFromRoot('pages');
+    const hasSrcDirectory = hasDirectoryPathFromRoot('src');
+
+    let instrumentationHookLocation: 'src' | 'root' | 'does-not-exist';
+
     const instrumentationTsExists = fs.existsSync(
       path.join(process.cwd(), 'instrumentation.ts'),
     );
     const instrumentationJsExists = fs.existsSync(
       path.join(process.cwd(), 'instrumentation.js'),
     );
+    const srcInstrumentationTsExists = fs.existsSync(
+      path.join(process.cwd(), 'src', 'instrumentation.ts'),
+    );
+    const srcInstrumentationJsExists = fs.existsSync(
+      path.join(process.cwd(), 'src', 'instrumentation.js'),
+    );
 
-    let instrumentationHookLocation: 'src' | 'root' | 'does-not-exist';
-    if (srcInstrumentationTsExists || srcInstrumentationJsExists) {
-      instrumentationHookLocation = 'src';
-    } else if (instrumentationTsExists || instrumentationJsExists) {
-      instrumentationHookLocation = 'root';
+    // https://nextjs.org/docs/app/building-your-application/configuring/src-directory
+    // https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation
+    // The logic for where Next.js picks up the instrumentation file is as follows:
+    // - If there is either an `app` folder or a `pages` folder in the root directory of your Next.js app, Next.js looks
+    // for an `instrumentation.ts` file in the root of the Next.js app.
+    // - Otherwise, if there is neither an `app` folder or a `pages` folder in the rood directory of your Next.js app,
+    // AND if there is an `src` folder, Next.js will look for the `instrumentation.ts` file in the `src` folder.
+    if (hasRootPagesDirectory || hasRootAppDirectory) {
+      if (instrumentationJsExists || instrumentationTsExists) {
+        instrumentationHookLocation = 'root';
+      } else {
+        instrumentationHookLocation = 'does-not-exist';
+      }
     } else {
-      instrumentationHookLocation = 'does-not-exist';
+      if (srcInstrumentationTsExists || srcInstrumentationJsExists) {
+        instrumentationHookLocation = 'src';
+      } else {
+        instrumentationHookLocation = 'does-not-exist';
+      }
     }
 
+    const newInstrumentationFileName = `instrumentation.${
+      typeScriptDetected ? 'ts' : 'js'
+    }`;
+
     if (instrumentationHookLocation === 'does-not-exist') {
-      const newInstrumentationFileName = `instrumentation.${
-        typeScriptDetected ? 'ts' : 'js'
-      }`;
-      const srcFolderExists = fs.existsSync(path.join(process.cwd(), 'src'));
+      let newInstrumentationHookLocation: 'root' | 'src';
+      if (hasRootPagesDirectory || hasRootAppDirectory) {
+        newInstrumentationHookLocation = 'root';
+      } else if (hasSrcDirectory) {
+        newInstrumentationHookLocation = 'src';
+      } else {
+        newInstrumentationHookLocation = 'root';
+      }
 
-      const instrumentationHookPath = srcFolderExists
-        ? path.join(process.cwd(), 'src', newInstrumentationFileName)
-        : path.join(process.cwd(), newInstrumentationFileName);
+      const newInstrumentationHookPath =
+        newInstrumentationHookLocation === 'root'
+          ? path.join(process.cwd(), newInstrumentationFileName)
+          : path.join(process.cwd(), 'src', newInstrumentationFileName);
 
       const successfullyCreated = await createNewConfigFile(
-        instrumentationHookPath,
-        getInstrumentationHookContent(srcFolderExists ? 'src' : 'root'),
+        newInstrumentationHookPath,
+        getInstrumentationHookContent(newInstrumentationHookLocation),
       );
 
       if (!successfullyCreated) {
         await showCopyPasteInstructions(
           newInstrumentationFileName,
           getInstrumentationHookCopyPasteSnippet(
-            srcFolderExists ? 'src' : 'root',
+            newInstrumentationHookLocation,
           ),
         );
       }
     } else {
       await showCopyPasteInstructions(
-        srcInstrumentationTsExists
+        srcInstrumentationTsExists || instrumentationTsExists
           ? 'instrumentation.ts'
-          : srcInstrumentationJsExists
+          : srcInstrumentationJsExists || instrumentationJsExists
           ? 'instrumentation.js'
-          : instrumentationTsExists
-          ? 'instrumentation.ts'
-          : 'instrumentation.js',
+          : newInstrumentationFileName,
         getInstrumentationHookCopyPasteSnippet(instrumentationHookLocation),
       );
     }
@@ -466,23 +514,28 @@ async function createOrMergeNextJsFiles(
       selfHosted,
       sentryUrl,
       tunnelRoute: sdkConfigOptions.tunnelRoute,
+      reactComponentAnnotation: sdkConfigOptions.reactComponentAnnotation,
     });
 
-    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),
+    const nextConfigPossibleFilesMap = {
+      js: 'next.config.js',
+      mjs: 'next.config.mjs',
+      cjs: 'next.config.cjs',
+      ts: 'next.config.ts',
+      mts: 'next.config.mts',
+      cts: 'next.config.cts',
+    };
+
+    const foundNextConfigFile = Object.entries(nextConfigPossibleFilesMap).find(
+      ([, fileName]) => fs.existsSync(path.join(process.cwd(), fileName)),
     );
 
-    if (!nextConfigJsExists && !nextConfigMjsExists) {
+    if (!foundNextConfigFile) {
       Sentry.setTag('next-config-strategy', 'create');
 
       await fs.promises.writeFile(
-        path.join(process.cwd(), nextConfigJs),
+        // We are creating a `next.config.js` file by default as it is supported by the most Next.js versions
+        path.join(process.cwd(), nextConfigPossibleFilesMap.js),
         getNextjsConfigCjsTemplate(withSentryConfigOptionsTemplate),
         { encoding: 'utf8', flag: 'w' },
       );
@@ -490,19 +543,24 @@ async function createOrMergeNextJsFiles(
       clack.log.success(
         `Created ${chalk.cyan('next.config.js')} with Sentry configuration.`,
       );
+
+      return;
     }
 
-    if (nextConfigJsExists) {
+    const [foundNextConfigFileType, foundNextConfigFileFilename] =
+      foundNextConfigFile;
+
+    if (foundNextConfigFileType === 'js' || foundNextConfigFileType === 'cjs') {
       Sentry.setTag('next-config-strategy', 'modify');
 
-      const nextConfigJsContent = fs.readFileSync(
-        path.join(process.cwd(), nextConfigJs),
+      const nextConfigCjsContent = fs.readFileSync(
+        path.join(process.cwd(), foundNextConfigFileFilename),
         'utf8',
       );
 
       const probablyIncludesSdk =
-        nextConfigJsContent.includes('@sentry/nextjs') &&
-        nextConfigJsContent.includes('withSentryConfig');
+        nextConfigCjsContent.includes('@sentry/nextjs') &&
+        nextConfigCjsContent.includes('withSentryConfig');
 
       let shouldInject = true;
 
@@ -510,7 +568,7 @@ async function createOrMergeNextJsFiles(
         const injectAnyhow = await abortIfCancelled(
           clack.confirm({
             message: `${chalk.cyan(
-              nextConfigJs,
+              foundNextConfigFileFilename,
             )} already contains Sentry SDK configuration. Should the wizard modify it anyways?`,
           }),
         );
@@ -520,14 +578,14 @@ async function createOrMergeNextJsFiles(
 
       if (shouldInject) {
         await fs.promises.appendFile(
-          path.join(process.cwd(), nextConfigJs),
+          path.join(process.cwd(), foundNextConfigFileFilename),
           getNextjsConfigCjsAppendix(withSentryConfigOptionsTemplate),
           'utf8',
         );
 
         clack.log.success(
           `Added Sentry configuration to ${chalk.cyan(
-            nextConfigJs,
+            foundNextConfigFileFilename,
           )}. ${chalk.dim('(you probably want to clean this up a bit!)')}`,
         );
       }
@@ -535,9 +593,14 @@ async function createOrMergeNextJsFiles(
       Sentry.setTag('next-config-mod-result', 'success');
     }
 
-    if (nextConfigMjsExists) {
+    if (
+      foundNextConfigFileType === 'mjs' ||
+      foundNextConfigFileType === 'mts' ||
+      foundNextConfigFileType === 'cts' ||
+      foundNextConfigFileType === 'ts'
+    ) {
       const nextConfigMjsContent = fs.readFileSync(
-        path.join(process.cwd(), nextConfigMjs),
+        path.join(process.cwd(), foundNextConfigFileFilename),
         'utf8',
       );
 
@@ -551,7 +614,7 @@ async function createOrMergeNextJsFiles(
         const injectAnyhow = await abortIfCancelled(
           clack.confirm({
             message: `${chalk.cyan(
-              nextConfigMjs,
+              foundNextConfigFileFilename,
             )} already contains Sentry SDK configuration. Should the wizard modify it anyways?`,
           }),
         );
@@ -577,7 +640,7 @@ async function createOrMergeNextJsFiles(
           const newCode = mod.generate().code;
 
           await fs.promises.writeFile(
-            path.join(process.cwd(), nextConfigMjs),
+            path.join(process.cwd(), foundNextConfigFileFilename),
             newCode,
             {
               encoding: 'utf8',
@@ -586,7 +649,7 @@ async function createOrMergeNextJsFiles(
           );
           clack.log.success(
             `Added Sentry configuration to ${chalk.cyan(
-              nextConfigMjs,
+              foundNextConfigFileFilename,
             )}. ${chalk.dim('(you probably want to clean this up a bit!)')}`,
           );
 
@@ -596,12 +659,14 @@ async function createOrMergeNextJsFiles(
         Sentry.setTag('next-config-mod-result', 'fail');
         clack.log.warn(
           chalk.yellow(
-            `Something went wrong writing to ${chalk.cyan(nextConfigMjs)}`,
+            `Something went wrong writing to ${chalk.cyan(
+              foundNextConfigFileFilename,
+            )}.`,
           ),
         );
         clack.log.info(
           `Please put the following code snippet into ${chalk.cyan(
-            nextConfigMjs,
+            foundNextConfigFileFilename,
           )}: ${chalk.dim('You probably have to clean it up a bit.')}\n`,
         );
 
@@ -613,7 +678,7 @@ async function createOrMergeNextJsFiles(
         const shouldContinue = await abortIfCancelled(
           clack.confirm({
             message: `Are you done putting the snippet above into ${chalk.cyan(
-              nextConfigMjs,
+              foundNextConfigFileFilename,
             )}?`,
             active: 'Yes',
             inactive: 'No, get me out of here',
@@ -628,50 +693,58 @@ async function createOrMergeNextJsFiles(
   });
 }
 
+function hasDirectoryPathFromRoot(dirnameOrDirs: string | string[]): boolean {
+  const dirPath = Array.isArray(dirnameOrDirs)
+    ? path.join(process.cwd(), ...dirnameOrDirs)
+    : path.join(process.cwd(), dirnameOrDirs);
+
+  return fs.existsSync(dirPath) && fs.lstatSync(dirPath).isDirectory();
+}
+
 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');
-  const maybeAppDirPath = path.join(process.cwd(), 'app');
-  const maybeSrcAppDirPath = path.join(srcDir, 'app');
+  const hasSrcDirectory = hasDirectoryPathFromRoot('src');
+  const hasRootAppDirectory = hasDirectoryPathFromRoot('app');
+  const hasRootPagesDirectory = hasDirectoryPathFromRoot('pages');
+  const hasSrcAppDirectory = hasDirectoryPathFromRoot(['src', 'app']);
+  const hasSrcPagesDirectory = hasDirectoryPathFromRoot(['src', 'pages']);
+
+  Sentry.setTag('nextjs-app-dir', hasRootAppDirectory || hasSrcAppDirectory);
 
   const typeScriptDetected = isUsingTypeScript();
 
-  let pagesLocation =
-    fs.existsSync(maybePagesDirPath) &&
-    fs.lstatSync(maybePagesDirPath).isDirectory()
-      ? ['pages']
-      : fs.existsSync(maybeSrcPagesDirPath) &&
-        fs.lstatSync(maybeSrcPagesDirPath).isDirectory()
+  // If `pages` or an `app` directory exists in the root, we'll put the example page there.
+  // `app` directory takes priority over `pages` directory when they coexist, so we prioritize that.
+  // https://nextjs.org/docs/app/building-your-application/routing#the-app-router
+
+  const appFolderLocation = hasRootAppDirectory
+    ? ['app']
+    : hasSrcAppDirectory
+    ? ['src', 'app']
+    : undefined;
+
+  let pagesFolderLocation = hasRootPagesDirectory
+    ? ['pages']
+    : hasSrcPagesDirectory
+    ? ['src', 'pages']
+    : undefined;
+
+  // If the user has neither pages nor app directory we create a pages folder for them
+  if (!appFolderLocation && !pagesFolderLocation) {
+    const newPagesFolderLocation = hasSrcDirectory
       ? ['src', 'pages']
-      : undefined;
-
-  const appLocation =
-    fs.existsSync(maybeAppDirPath) &&
-    fs.lstatSync(maybeAppDirPath).isDirectory()
-      ? ['app']
-      : fs.existsSync(maybeSrcAppDirPath) &&
-        fs.lstatSync(maybeSrcAppDirPath).isDirectory()
-      ? ['src', 'app']
-      : undefined;
-
-  if (!pagesLocation && !appLocation) {
-    pagesLocation =
-      fs.existsSync(srcDir) && fs.lstatSync(srcDir).isDirectory()
-        ? ['src', 'pages']
-        : ['pages'];
-    fs.mkdirSync(path.join(process.cwd(), ...pagesLocation), {
+      : ['pages'];
+    fs.mkdirSync(path.join(process.cwd(), ...newPagesFolderLocation), {
       recursive: true,
     });
-  }
 
-  Sentry.setTag('nextjs-app-dir', !!appLocation);
+    pagesFolderLocation = newPagesFolderLocation;
+  }
 
-  if (appLocation) {
+  if (appFolderLocation) {
     const examplePageContents = getSentryExamplePageContents({
       selfHosted,
       orgSlug: selectedProject.organization.slug,
@@ -681,7 +754,7 @@ async function createExamplePage(
     });
 
     fs.mkdirSync(
-      path.join(process.cwd(), ...appLocation, 'sentry-example-page'),
+      path.join(process.cwd(), ...appFolderLocation, 'sentry-example-page'),
       {
         recursive: true,
       },
@@ -692,7 +765,7 @@ async function createExamplePage(
     await fs.promises.writeFile(
       path.join(
         process.cwd(),
-        ...appLocation,
+        ...appFolderLocation,
         'sentry-example-page',
         newPageFileName,
       ),
@@ -702,12 +775,17 @@ async function createExamplePage(
 
     clack.log.success(
       `Created ${chalk.cyan(
-        path.join(...appLocation, 'sentry-example-page', newPageFileName),
+        path.join(...appFolderLocation, 'sentry-example-page', newPageFileName),
       )}.`,
     );
 
     fs.mkdirSync(
-      path.join(process.cwd(), ...appLocation, 'api', 'sentry-example-api'),
+      path.join(
+        process.cwd(),
+        ...appFolderLocation,
+        'api',
+        'sentry-example-api',
+      ),
       {
         recursive: true,
       },
@@ -718,7 +796,7 @@ async function createExamplePage(
     await fs.promises.writeFile(
       path.join(
         process.cwd(),
-        ...appLocation,
+        ...appFolderLocation,
         'api',
         'sentry-example-api',
         newRouteFileName,
@@ -730,14 +808,14 @@ async function createExamplePage(
     clack.log.success(
       `Created ${chalk.cyan(
         path.join(
-          ...appLocation,
+          ...appFolderLocation,
           'api',
           'sentry-example-api',
           newRouteFileName,
         ),
       )}.`,
     );
-  } else if (pagesLocation) {
+  } else if (pagesFolderLocation) {
     const examplePageContents = getSentryExamplePageContents({
       selfHosted,
       orgSlug: selectedProject.organization.slug,
@@ -747,35 +825,39 @@ async function createExamplePage(
     });
 
     await fs.promises.writeFile(
-      path.join(process.cwd(), ...pagesLocation, 'sentry-example-page.jsx'),
+      path.join(
+        process.cwd(),
+        ...pagesFolderLocation,
+        'sentry-example-page.jsx',
+      ),
       examplePageContents,
       { encoding: 'utf8', flag: 'w' },
     );
 
     clack.log.success(
       `Created ${chalk.cyan(
-        path.join(...pagesLocation, 'sentry-example-page.js'),
+        path.join(...pagesFolderLocation, 'sentry-example-page.js'),
       )}.`,
     );
 
-    fs.mkdirSync(path.join(process.cwd(), ...pagesLocation, 'api'), {
+    fs.mkdirSync(path.join(process.cwd(), ...pagesFolderLocation, 'api'), {
       recursive: true,
     });
 
     await fs.promises.writeFile(
       path.join(
         process.cwd(),
-        ...pagesLocation,
+        ...pagesFolderLocation,
         'api',
         'sentry-example-api.js',
       ),
-      getSentryExampleApiRoute(),
+      getSentryExamplePagesDirApiRoute(),
       { encoding: 'utf8', flag: 'w' },
     );
 
     clack.log.success(
       `Created ${chalk.cyan(
-        path.join(...pagesLocation, 'api', 'sentry-example-api.js'),
+        path.join(...pagesFolderLocation, 'api', 'sentry-example-api.js'),
       )}.`,
     );
   }
@@ -791,7 +873,7 @@ async function askShouldSetTunnelRoute() {
     const shouldSetTunnelRoute = await abortIfCancelled(
       clack.select({
         message:
-          'Do you want to route Sentry requests in the browser through your NextJS server to avoid ad blockers?',
+          'Do you want to route Sentry requests in the browser through your Next.js server to avoid ad blockers?',
         options: [
           {
             label: 'Yes',
@@ -804,7 +886,7 @@ async function askShouldSetTunnelRoute() {
             hint: 'Browser errors and events might be blocked by ad blockers before being sent to Sentry',
           },
         ],
-        initialValue: false,
+        initialValue: true,
       }),
     );
 
@@ -817,3 +899,29 @@ async function askShouldSetTunnelRoute() {
     return shouldSetTunnelRoute;
   });
 }
+
+async function askShouldEnableReactComponentAnnotation() {
+  return await traceStep('ask-react-component-annotation-option', async () => {
+    const shouldEnableReactComponentAnnotation = await abortIfCancelled(
+      clack.select({
+        message:
+          'Do you want to enable React component annotations to make breadcrumbs and session replays more readable?',
+        options: [
+          {
+            label: 'Yes',
+            value: true,
+            hint: 'Annotates React component names - increases bundle size',
+          },
+          {
+            label: 'No',
+            value: false,
+            hint: 'Continue without React component annotations',
+          },
+        ],
+        initialValue: true,
+      }),
+    );
+
+    return shouldEnableReactComponentAnnotation;
+  });
+}