feat(nextjs): Ask if example page should be created

getsentry · Dec 12, 2023 · 8589e23 · 8589e23
1 parent ba8c851
commit 8589e23
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 21 deletions.
diff --git a/src/nextjs/nextjs-wizard.ts b/src/nextjs/nextjs-wizard.ts
@@ -13,6 +13,7 @@ import {
   abort,
   abortIfCancelled,
   addSentryCliConfig,
+  askShouldCreateExamplePage,
   confirmContinueIfNoOrDirtyGitRepo,
   ensurePackageIsInstalled,
   getOrAskForProjectData,
@@ -270,10 +271,17 @@ export async function runNextjsWizardWithTelemetry(
     }
   });
 
-  await traceStep('create-example-page', async () =>
-    createExamplePage(selfHosted, selectedProject, sentryUrl),
+  const shouldCreateExamplePage = await traceStep(
+    'ask-create-example-page',
+    askShouldCreateExamplePage,
   );
 
+  if (shouldCreateExamplePage) {
+    await traceStep('create-example-page', async () =>
+      createExamplePage(selfHosted, selectedProject, sentryUrl),
+    );
+  }
+
   await addSentryCliConfig({ authToken });
 
   const mightBeUsingVercel = fs.existsSync(
@@ -288,17 +296,18 @@ export async function runNextjsWizardWithTelemetry(
     await traceStep('configure-ci', () => configureCI('nextjs', authToken));
   }
 
-  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".',
-   )}
+  clack.outro(`
+${chalk.green('Successfully installed the Sentry Next.js SDK!')} ${
+    shouldCreateExamplePage
+      ? chalk.cyan(
+          '\n\nYou can validate your setup by starting your dev environment (`next dev`) and visiting "/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 +424,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 +468,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 +493,7 @@ async function createOrMergeNextJsFiles(
 
       try {
         if (shouldInject) {
-          const mod = parseModule(nextConfgiMjsContent);
+          const mod = parseModule(nextConfigMjsContent);
           mod.imports.$add({
             from: '@sentry/nextjs',
             imported: 'withSentryConfig',

diff --git a/src/utils/clack-utils.ts b/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,22 @@ export async function createNewConfigFile(
 
   return false;
 }
+
+export async function askShouldCreateExamplePage(
+  customRoute?: string,
+): Promise<boolean> {
+  const route = chalk.cyan(customRoute ?? '/sentry-example-page');
+  return abortIfCancelled(
+    clack.select({
+      message: `Do you want us to create an example page ("${route}") to test your setup?`,
+      options: [
+        {
+          value: true,
+          label: 'Yes',
+          hint: 'Recommended - Check your git status before committing!',
+        },
+        { value: false, label: 'No' },
+      ],
+    }),
+  );
+}