feat(sourcmaps): Add create-react-app option (#335)

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - feat: Open browser when logging in (sourcemaps, sveltekit, nextjs) (#328)
+- feat(sourcmaps): Add create-react-app option (#335)
 - fix: Support `--url` arg in NextJs, SvelteKit and Sourcemaps wizards (#331)
 - fix: Update minimum Node version to Node 14 (#332)
 

src/sourcemaps/sourcemaps-wizard.ts

@@ -20,14 +20,16 @@ import { configureTscSourcemapGenerationFlow } from './tools/tsc';
 import { configureRollupPlugin } from './tools/rollup';
 import { configureEsbuildPlugin } from './tools/esbuild';
 import { WizardOptions } from '../utils/types';
+import { configureCRASourcemapGenerationFlow } from './tools/create-react-app';
 
 type SupportedTools =
   | 'webpack'
   | 'vite'
   | 'rollup'
   | 'esbuild'
   | 'tsc'
-  | 'sentry-cli';
+  | 'sentry-cli'
+  | 'create-react-app';
 
 export async function runSourcemapsWizard(
   options: WizardOptions,
@@ -136,28 +138,33 @@ async function askForUsedBundlerTool(): Promise<SupportedTools> {
         {
           label: 'Webpack',
           value: 'webpack',
-          hint: 'Configure source maps upload using Webpack',
+          hint: 'Select this if you are using Webpack and you have access to your Webpack config.',
         },
         {
           label: 'Vite',
           value: 'vite',
-          hint: 'Configure source maps upload using Vite',
+          hint: 'Select this if you are using Vite and you have access to your Vite config.',
         },
         {
           label: 'esbuild',
           value: 'esbuild',
-          hint: 'Configure source maps upload using esbuild',
+          hint: 'Select this if you are using esbuild and you have access to your esbuild config.',
         },
         {
           label: 'Rollup',
           value: 'rollup',
-          hint: 'Configure source maps upload using Rollup',
+          hint: 'Select this if you are using Rollup and you have access to your Rollup config.',
         },
         {
           label: 'tsc',
           value: 'tsc',
           hint: 'Configure source maps when using tsc as build tool',
         },
+        {
+          label: 'Create React App',
+          value: 'create-react-app',
+          hint: 'Select this option if you set up your app with Create React App.',
+        },
         {
           label: 'None of the above',
           value: 'sentry-cli',
@@ -190,6 +197,9 @@ async function startToolSetupFlow(
     case 'tsc':
       await configureSentryCLI(options, configureTscSourcemapGenerationFlow);
       break;
+    case 'create-react-app':
+      await configureSentryCLI(options, configureCRASourcemapGenerationFlow);
+      break;
     default:
       await configureSentryCLI(options);
       break;

src/sourcemaps/tools/create-react-app.ts

@@ -0,0 +1,19 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import { abortIfCancelled } from '../../utils/clack-utils';
+
+export async function configureCRASourcemapGenerationFlow(): Promise<void> {
+  await abortIfCancelled(
+    clack.select({
+      message: `Verify that you are generating source maps when building your React app.\nGenerally this should already happen unless you set the GENERATE_SOURCEMAPS environment variable to false.`,
+      options: [
+        {
+          label: 'I checked!',
+          hint: 'My build output folder contains .js.map files after a build.',
+          value: true,
+        },
+      ],
+      initialValue: true,
+    }),
+  );
+}

src/sourcemaps/tools/sentry-cli.ts

@@ -32,6 +32,11 @@ export async function configureSentryCLI(
       clack.text({
         message: 'Where are your build artifacts located?',
         placeholder: `.${path.sep}out`,
+        validate(value) {
+          if (!value) {
+            return 'Please enter a path.';
+          }
+        },
       }),
     );