feat(nextjs): Ask for confirmation before creating example page (#515)

CHANGELOG.md

@@ -2,9 +2,10 @@
 
 ## Unreleased
 
-- feat(remix): Add instrumentation step for Express server adapters (#504)s
-- ref(sveltekit): Improve Outro Message (#514)
+- feat(remix): Add instrumentation step for Express server adapters (#504)
+- feat(nextjs): Ask for confirmation before creating example page (#515)
 - fix(nextjs): Instruct users to restart dev server after setup (#513)
+- ref(sveltekit): Improve Outro Message (#514)
 
 ## 3.19.0
 

src/nextjs/nextjs-wizard.ts

@@ -13,6 +13,7 @@ import {
   abort,
   abortIfCancelled,
   addSentryCliConfig,
+  askShouldCreateExamplePage,
   confirmContinueIfNoOrDirtyGitRepo,
   ensurePackageIsInstalled,
   getOrAskForProjectData,
@@ -270,9 +271,12 @@ export async function runNextjsWizardWithTelemetry(
     }
   });
 
-  await traceStep('create-example-page', async () =>
-    createExamplePage(selfHosted, selectedProject, sentryUrl),
-  );
+  const shouldCreateExamplePage = await askShouldCreateExamplePage();
+  if (shouldCreateExamplePage) {
+    await traceStep('create-example-page', async () =>
+      createExamplePage(selfHosted, selectedProject, sentryUrl),
+    );
+  }
 
   await addSentryCliConfig({ authToken });
 
@@ -288,17 +292,18 @@ export async function runNextjsWizardWithTelemetry(
     await traceStep('configure-ci', () => configureCI('nextjs', authToken));
   }
 
-  clack.outro(
-    `${chalk.green('Everything is set up!')}
-
-     You can validate your setup by restarting your dev environment (${chalk.cyan(
-       `next dev`,
-     )}) and visiting ${chalk.cyan('"/sentry-example-page"')}
+  clack.outro(`
+${chalk.green('Successfully installed the Sentry Next.js SDK!')} ${
+    shouldCreateExamplePage
+      ? `\n\nYou can validate your setup by restarting your dev environment (${chalk.cyan(
+          `next dev`,
+        )}) and visiting ${chalk.cyan('"/sentry-example-page"')}`
+      : ''
+  }
 
-   ${chalk.dim(
-     'If you encounter any issues, let us know here: https://github.com/getsentry/sentry-javascript/issues',
-   )}`,
-  );
+${chalk.dim(
+  'If you encounter any issues, let us know here: https://github.com/getsentry/sentry-javascript/issues',
+)}`);
 }
 
 async function createOrMergeNextJsFiles(
@@ -415,14 +420,14 @@ async function createOrMergeNextJsFiles(
     if (nextConfigJsExists) {
       Sentry.setTag('next-config-strategy', 'modify');
 
-      const nextConfgiJsContent = fs.readFileSync(
+      const nextConfigJsContent = fs.readFileSync(
         path.join(process.cwd(), nextConfigJs),
         'utf8',
       );
 
       const probablyIncludesSdk =
-        nextConfgiJsContent.includes('@sentry/nextjs') &&
-        nextConfgiJsContent.includes('withSentryConfig');
+        nextConfigJsContent.includes('@sentry/nextjs') &&
+        nextConfigJsContent.includes('withSentryConfig');
 
       let shouldInject = true;
 
@@ -459,14 +464,14 @@ async function createOrMergeNextJsFiles(
     }
 
     if (nextConfigMjsExists) {
-      const nextConfgiMjsContent = fs.readFileSync(
+      const nextConfigMjsContent = fs.readFileSync(
         path.join(process.cwd(), nextConfigMjs),
         'utf8',
       );
 
       const probablyIncludesSdk =
-        nextConfgiMjsContent.includes('@sentry/nextjs') &&
-        nextConfgiMjsContent.includes('withSentryConfig');
+        nextConfigMjsContent.includes('@sentry/nextjs') &&
+        nextConfigMjsContent.includes('withSentryConfig');
 
       let shouldInject = true;
 
@@ -484,7 +489,7 @@ async function createOrMergeNextJsFiles(
 
       try {
         if (shouldInject) {
-          const mod = parseModule(nextConfgiMjsContent);
+          const mod = parseModule(nextConfigMjsContent);
           mod.imports.$add({
             from: '@sentry/nextjs',
             imported: 'withSentryConfig',

src/utils/clack-utils.ts

@@ -1126,7 +1126,7 @@ type CodeSnippetFormatter = (
  * This is useful for printing the snippet to the console as part of copy/paste instructions.
  *
  * @param callback the callback that returns the formatted code snippet.
- * It exposes takes the helper functions for marking code as unchaned, new or removed.
+ * It exposes takes the helper functions for marking code as unchanged, new or removed.
  * These functions no-op if no special formatting should be applied
  * and otherwise apply the appropriate formatting/coloring.
  * (@see {@link CodeSnippetFormatter})
@@ -1161,7 +1161,7 @@ export function makeCodeSnippet(
  * @param moreInformation (optional) the message to be printed after the file was created
  * For example, this can be a link to more information about configuring the tool.
  *
- * @returns true on sucess, false otherwise
+ * @returns true on success, false otherwise
  */
 export async function createNewConfigFile(
   filepath: string,
@@ -1194,3 +1194,24 @@ export async function createNewConfigFile(
 
   return false;
 }
+
+export async function askShouldCreateExamplePage(
+  customRoute?: string,
+): Promise<boolean> {
+  const route = chalk.cyan(customRoute ?? '/sentry-example-page');
+  return traceStep('ask-create-example-page', () =>
+    abortIfCancelled(
+      clack.select({
+        message: `Do you want to create an example page ("${route}") to test your Sentry setup?`,
+        options: [
+          {
+            value: true,
+            label: 'Yes',
+            hint: 'Recommended - Check your git status before committing!',
+          },
+          { value: false, label: 'No' },
+        ],
+      }),
+    ),
+  );
+}