@sentry/wizard 3.4.0 → 3.6.0

package/src/sourcemaps/sourcemaps-wizard.ts

@@ -9,6 +9,7 @@ import {
   askForSelfHosted,
   askForWizardLogin,
   confirmContinueEvenThoughNoGitRepo,
+  detectPackageManager,
   printWelcome,
 } from '../utils/clack-utils';
 import { isUnicodeSupported } from '../utils/vendor/is-unicorn-supported';
@@ -19,21 +20,29 @@ import { configureWebPackPlugin } from './tools/webpack';
 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';
+import { ensureMinimumSdkVersionIsInstalled } from './utils/sdk-version';
+import { traceStep, withTelemetry } from '../telemetry';
+import { URL } from 'url';
+import { checkIfMoreSuitableWizardExistsAndAskForRedirect } from './utils/other-wizards';
+import { configureAngularSourcemapGenerationFlow } from './tools/angular';
+import { detectUsedTool, SupportedTools } from './utils/detect-tool';
 
-interface SourceMapsWizardOptions {
-  promoCode?: string;
+export async function runSourcemapsWizard(
+  options: WizardOptions,
+): Promise<void> {
+  return withTelemetry(
+    {
+      enabled: options.telemetryEnabled,
+      integration: 'sourcemaps',
+    },
+    () => runSourcemapsWizardWithTelemetry(options),
+  );
 }
 
-type SupportedTools =
-  | 'webpack'
-  | 'vite'
-  | 'rollup'
-  | 'esbuild'
-  | 'tsc'
-  | 'sentry-cli';
-
-export async function runSourcemapsWizard(
-  options: SourceMapsWizardOptions,
+async function runSourcemapsWizardWithTelemetry(
+  options: WizardOptions,
 ): Promise<void> {
   printWelcome({
     wizardName: 'Sentry Source Maps Upload Configuration Wizard',
@@ -42,119 +51,94 @@ export async function runSourcemapsWizard(
     promoCode: options.promoCode,
   });
 
-  await confirmContinueEvenThoughNoGitRepo();
-
-  const { url: sentryUrl, selfHosted } = await askForSelfHosted();
-
-  const { projects, apiKeys } = await askForWizardLogin({
-    promoCode: options.promoCode,
-    url: sentryUrl,
-  });
-
-  const selectedProject = await askForProjectSelection(projects);
-
-  const selectedTool = await askForUsedBundlerTool();
-
-  Sentry.setTag('selected-tool', selectedTool);
-
-  await startToolSetupFlow(selectedTool, {
-    selfHosted,
-    orgSlug: selectedProject.organization.slug,
-    projectSlug: selectedProject.slug,
-    url: sentryUrl,
-    authToken: apiKeys.token,
-  });
-
-  clack.log.step(
-    'Add the Sentry authentication token as an environment variable to your CI setup:',
+  const moreSuitableWizard = await traceStep(
+    'check-framework-wizard',
+    checkIfMoreSuitableWizardExistsAndAskForRedirect,
   );
+  if (moreSuitableWizard) {
+    await traceStep('run-framework-wizard', () => moreSuitableWizard(options));
+    return;
+  }
 
-  // Intentially logging directly to console here so that the code can be copied/pasted directly
-  // eslint-disable-next-line no-console
-  console.log(
-    chalk.greenBright(`
-SENTRY_AUTH_TOKEN=${apiKeys.token}
-`),
-  );
+  await traceStep('detect-git', confirmContinueEvenThoughNoGitRepo);
 
-  clack.log.warn(
-    chalk.yellow('DO NOT commit this auth token to your repository!'),
+  await traceStep('check-sdk-version', ensureMinimumSdkVersionIsInstalled);
+
+  const { url: sentryUrl, selfHosted } = await traceStep(
+    'ask-self-hosted',
+    () => askForSelfHosted(options.url),
   );
 
-  const addedEnvVarToCI = await abortIfCancelled(
-    clack.select({
-      message: 'Did you configure CI as shown above?',
-      options: [
-        { label: 'Yes, continue!', value: true },
-        {
-          label: "I'll do it later...",
-          value: false,
-          hint: chalk.yellow(
-            'You need to set the auth token to upload source maps in CI',
-          ),
-        },
-      ],
-      initialValue: true,
+  const { projects, apiKeys } = await traceStep('login', () =>
+    askForWizardLogin({
+      promoCode: options.promoCode,
+      url: sentryUrl,
     }),
   );
 
-  Sentry.setTag('added-env-var-to-ci', addedEnvVarToCI);
-
-  if (!addedEnvVarToCI) {
-    clack.log.info("Don't forget! :)");
-  }
+  const selectedProject = await traceStep('select-project', () =>
+    askForProjectSelection(projects),
+  );
 
-  const arrow = isUnicodeSupported() ? '→' : '->';
+  const selectedTool = await traceStep('select-tool', askForUsedBundlerTool);
 
-  clack.outro(`${chalk.green("That's it - everything is set up!")}
+  Sentry.setTag('selected-tool', selectedTool);
 
-   ${chalk.cyan(`Validate your setup with the following Steps:
+  await traceStep('tool-setup', () =>
+    startToolSetupFlow(selectedTool, {
+      selfHosted,
+      orgSlug: selectedProject.organization.slug,
+      projectSlug: selectedProject.slug,
+      url: sentryUrl,
+      authToken: apiKeys.token,
+    }),
+  );
 
-   1. Build your application in ${chalk.bold('production mode')}.
-      ${chalk.gray(
-        `${arrow} You should see source map upload logs in your console.`,
-      )}
-   2. Run your application and throw a test error.
-      ${chalk.gray(`${arrow} The error should be visible in Sentry.`)}
-   3. Open the error in Sentry and verify that it's source-mapped.
-      ${chalk.gray(
-        `${arrow} The stack trace should show your original source code.`,
-      )}
-   `)}
-   ${chalk.dim(
-     `If you encounter any issues, please refer to the Troubleshooting Guide:
-   https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js
+  await traceStep('ci-setup', () => setupCi(apiKeys.token));
 
-   If the guide doesn't help or you encounter a bug, please let us know:
-   https://github.com/getsentry/sentry-javascript/issues`,
-   )}
-`);
+  traceStep('outro', () =>
+    printOutro(
+      sentryUrl,
+      selectedProject.organization.slug,
+      selectedProject.id,
+    ),
+  );
 }
 
 async function askForUsedBundlerTool(): Promise<SupportedTools> {
   const selectedTool: SupportedTools | symbol = await abortIfCancelled(
     clack.select({
-      message: 'Which bundler or build tool are you using?',
+      message: 'Which framework, bundler or build tool are you using?',
       options: [
+        {
+          label: 'Angular',
+          value: 'angular',
+          hint: 'Select this option if you are using Angular.',
+        },
+        {
+          label: 'Create React App',
+          value: 'create-react-app',
+          hint: 'Select this option if you set up your app with Create React App.',
+        },
         {
           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',
@@ -167,6 +151,7 @@ async function askForUsedBundlerTool(): Promise<SupportedTools> {
           hint: 'This will configure source maps upload for you using sentry-cli',
         },
       ],
+      initialValue: await detectUsedTool(),
     }),
   );
 
@@ -193,8 +178,98 @@ async function startToolSetupFlow(
     case 'tsc':
       await configureSentryCLI(options, configureTscSourcemapGenerationFlow);
       break;
+    case 'create-react-app':
+      await configureSentryCLI(options, configureCRASourcemapGenerationFlow);
+      break;
+    case 'angular':
+      await configureSentryCLI(
+        options,
+        configureAngularSourcemapGenerationFlow,
+      );
+      break;
     default:
       await configureSentryCLI(options);
       break;
   }
 }
+
+async function setupCi(authToken: string) {
+  clack.log.step(
+    'Add the Sentry authentication token as an environment variable to your CI setup:',
+  );
+
+  // Intentially logging directly to console here so that the code can be copied/pasted directly
+  // eslint-disable-next-line no-console
+  console.log(
+    chalk.greenBright(`
+SENTRY_AUTH_TOKEN=${authToken}
+`),
+  );
+
+  clack.log.warn(
+    chalk.yellow('DO NOT commit this auth token to your repository!'),
+  );
+
+  const addedEnvVarToCI = await abortIfCancelled(
+    clack.select({
+      message: 'Did you configure CI as shown above?',
+      options: [
+        { label: 'Yes, continue!', value: true },
+        {
+          label: "I'll do it later...",
+          value: false,
+          hint: chalk.yellow(
+            'You need to set the auth token to upload source maps in CI',
+          ),
+        },
+      ],
+      initialValue: true,
+    }),
+  );
+
+  Sentry.setTag('added-env-var-to-ci', addedEnvVarToCI);
+
+  if (!addedEnvVarToCI) {
+    clack.log.info("Don't forget! :)");
+  }
+}
+
+function printOutro(url: string, orgSlug: string, projectId: string) {
+  const pacMan = detectPackageManager() || 'npm';
+  const buildCommand = `'${pacMan}${pacMan === 'npm' ? ' run' : ''} build'`;
+
+  const urlObject = new URL(url);
+  urlObject.host = `${orgSlug}.${urlObject.host}`;
+  urlObject.pathname = '/issues/';
+  urlObject.searchParams.set('project', projectId);
+
+  const issueStreamUrl = urlObject.toString();
+
+  const arrow = isUnicodeSupported() ? '→' : '->';
+
+  clack.outro(`${chalk.green("That's it - everything is set up!")}
+
+   ${chalk.cyan(`Test and validate your setup locally with the following Steps:
+
+   1. Build your application in ${chalk.bold('production mode')}.
+      ${chalk.gray(`${arrow} For example, run ${chalk.bold(buildCommand)}.`)}
+      ${chalk.gray(
+        `${arrow} You should see source map upload logs in your console.`,
+      )}
+   2. Run your application and throw a test error.
+      ${chalk.gray(`${arrow} The error should appear in Sentry:`)}
+      ${chalk.gray(`${arrow} ${issueStreamUrl}`)}
+   3. Open the error in Sentry and verify that it's source-mapped.
+      ${chalk.gray(
+        `${arrow} The stack trace should show your original source code.`,
+      )}
+   `)}
+   ${chalk.dim(
+     `If you encounter any issues, please refer to the Troubleshooting Guide:
+   https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js
+
+   If the guide doesn't help or you encounter a bug, please let us know:
+   https://github.com/getsentry/sentry-javascript/issues`,
+   )}
+`);
+}

package/src/sourcemaps/tools/angular.ts

@@ -0,0 +1,42 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+import { abortIfCancelled } from '../../utils/clack-utils';
+
+const angularJsonTemplate = chalk.gray(`{
+  "projects": {
+    "your-project": {
+      "architect": {
+        "build": {
+          "options": {
+            ${chalk.greenBright(`"sourceMap": true`)}
+          },
+        },
+      }
+    }
+  }
+}`);
+
+export async function configureAngularSourcemapGenerationFlow(): Promise<void> {
+  clack.log.info(
+    `Enable generating source maps in your ${chalk.bold('angular.json')} file:`,
+  );
+
+  // Intentially logging directly to console here so that the code can be copied/pasted directly
+  // eslint-disable-next-line no-console
+  console.log(angularJsonTemplate);
+
+  await abortIfCancelled(
+    clack.select({
+      message: `Verify that you are generating source maps when building your Angular app.`,
+      options: [
+        {
+          label: 'I checked!',
+          hint: 'My build output folder contains .js.map files after a build.',
+          value: true,
+        },
+      ],
+      initialValue: true,
+    }),
+  );
+}

package/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,
+    }),
+  );
+}

package/src/sourcemaps/tools/esbuild.ts

@@ -5,9 +5,9 @@ import {
   abortIfCancelled,
   addDotEnvSentryBuildPluginFile,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
+import { hasPackageInstalled } from '../../utils/package-json';
 
 import {
   SourceMapUploadToolConfigurationFunction,

package/src/sourcemaps/tools/rollup.ts

@@ -5,9 +5,9 @@ import {
   abortIfCancelled,
   addDotEnvSentryBuildPluginFile,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
+import { hasPackageInstalled } from '../../utils/package-json';
 
 import {
   SourceMapUploadToolConfigurationFunction,
@@ -49,9 +49,7 @@ export const configureRollupPlugin: SourceMapUploadToolConfigurationFunction =
       ),
     });
 
-    clack.log.step(
-      `Add the following code to your rollup config:`,
-    );
+    clack.log.step(`Add the following code to your rollup config:`);
 
     // Intentially logging directly to console here so that the code can be copied/pasted directly
     // eslint-disable-next-line no-console

package/src/sourcemaps/tools/sentry-cli.ts

@@ -8,11 +8,11 @@ import {
   abortIfCancelled,
   addSentryCliRc,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
 
 import { SourceMapUploadToolConfigurationOptions } from './types';
+import { hasPackageInstalled } from '../../utils/package-json';
 
 export async function configureSentryCLI(
   options: SourceMapUploadToolConfigurationOptions,
@@ -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.';
+          }
+        },
       }),
     );
 

package/src/sourcemaps/tools/vite.ts

@@ -5,9 +5,9 @@ import {
   abortIfCancelled,
   addDotEnvSentryBuildPluginFile,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
+import { hasPackageInstalled } from '../../utils/package-json';
 
 import {
   SourceMapUploadToolConfigurationFunction,

package/src/sourcemaps/tools/webpack.ts

@@ -5,9 +5,9 @@ import {
   abortIfCancelled,
   addDotEnvSentryBuildPluginFile,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
+import { hasPackageInstalled } from '../../utils/package-json';
 
 import {
   SourceMapUploadToolConfigurationFunction,

package/src/sourcemaps/utils/detect-tool.ts

@@ -0,0 +1,41 @@
+import { getPackageDotJson } from '../../utils/clack-utils';
+import { findInstalledPackageFromList } from '../../utils/package-json';
+
+export type SupportedTools =
+  | 'webpack'
+  | 'vite'
+  | 'rollup'
+  | 'esbuild'
+  | 'tsc'
+  | 'sentry-cli'
+  | 'create-react-app'
+  | 'angular';
+
+// A map of package names pointing to the tool slug.
+// The order is important, because we want to detect the most specific tool first.
+// For instance, webpack needs to come before tsc because typescript c
+// Similarly
+export const TOOL_PACKAGE_MAP: Record<string, SupportedTools> = {
+  '@angular/core': 'angular',
+  'create-react-app': 'create-react-app',
+  webpack: 'webpack',
+  vite: 'vite',
+  esbuild: 'esbuild',
+  rollup: 'rollup',
+  typescript: 'tsc',
+};
+
+export async function detectUsedTool(): Promise<SupportedTools> {
+  const packageJson = await getPackageDotJson();
+
+  const foundToolPackage = findInstalledPackageFromList(
+    Object.keys(TOOL_PACKAGE_MAP),
+    packageJson,
+  );
+
+  if (foundToolPackage) {
+    return TOOL_PACKAGE_MAP[foundToolPackage.name];
+  }
+
+  return 'sentry-cli';
+}

package/src/sourcemaps/utils/other-wizards.ts

@@ -0,0 +1,148 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+import { runNextjsWizard } from '../../nextjs/nextjs-wizard';
+import { runSvelteKitWizard } from '../../sveltekit/sveltekit-wizard';
+
+import {
+  abort,
+  abortIfCancelled,
+  getPackageDotJson,
+} from '../../utils/clack-utils';
+import {
+  findInstalledPackageFromList,
+  hasPackageInstalled,
+} from '../../utils/package-json';
+
+import * as Sentry from '@sentry/node';
+import { WizardOptions } from '../../utils/types';
+
+type WizardFunction = (options: WizardOptions) => Promise<void>;
+
+type FrameworkInfo = {
+  frameworkName: string;
+  frameworkSlug: string;
+  frameworkPackage: string;
+  sourcemapsDocsLink: string;
+  wizard: WizardFunction;
+};
+
+const sdkMap: Record<string, FrameworkInfo> = {
+  '@sentry/nextjs': {
+    frameworkName: 'Next.js',
+    frameworkSlug: 'nextjs',
+    frameworkPackage: 'next',
+    sourcemapsDocsLink:
+      'https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-source-maps',
+    wizard: runNextjsWizard,
+  },
+  '@sentry/sveltekit': {
+    frameworkName: 'SvelteKit',
+    frameworkSlug: 'sveltekit',
+    frameworkPackage: '@sveltejs/kit',
+    sourcemapsDocsLink:
+      'https://docs.sentry.io/platforms/javascript/guides/sveltekit/manual-setup/#configure-source-maps-upload',
+    wizard: runSvelteKitWizard,
+  },
+};
+
+export async function checkIfMoreSuitableWizardExistsAndAskForRedirect(): Promise<
+  WizardFunction | undefined
+> {
+  const sdkName = await checkIfMoreSuitableWizardExists();
+
+  if (!sdkName) {
+    return undefined;
+  }
+
+  return await askForRedirect(sdkName);
+}
+
+async function checkIfMoreSuitableWizardExists(): Promise<string | undefined> {
+  Sentry.setTag('using-wrong-wizard', false);
+
+  const packageJson = await getPackageDotJson();
+
+  const installedSdkPackage = findInstalledPackageFromList(
+    Object.keys(sdkMap),
+    packageJson,
+  );
+
+  if (!installedSdkPackage) {
+    return undefined;
+  }
+
+  const sdkPackageName = installedSdkPackage.name;
+
+  const { frameworkPackage } = sdkMap[sdkPackageName];
+
+  if (!hasPackageInstalled(frameworkPackage, packageJson)) {
+    // The user has installed the SDK but not the framework.
+    // Maybe it's a false positive and the user is using a different framework.
+    // Let's not redirect them to the framework wizard in that case.
+    return undefined;
+  }
+
+  Sentry.setTag('using-wrong-wizard', true);
+
+  return sdkPackageName;
+}
+
+async function askForRedirect(
+  sdkName: string,
+): Promise<WizardFunction | undefined> {
+  const { frameworkName, sourcemapsDocsLink, frameworkSlug, wizard } =
+    sdkMap[sdkName];
+
+  clack.log.warn(
+    `${chalk.yellow(
+      `It seems like you're using this wizard in a ${frameworkName} project.`,
+    )}
+
+We recommend using our dedicated ${frameworkName} wizard instead of this wizard.
+The ${frameworkName} wizard will set up our ${sdkName} SDK and also configure uploading source maps for you.
+
+If you already tried the ${frameworkName} wizard and it didn't work for you, check out the following guides:
+
+Manual source maps configuration for ${frameworkName}:
+${sourcemapsDocsLink}
+
+Troubleshooting Source Maps:
+https://docs.sentry.io/platforms/javascript/guides/${frameworkSlug}/sourcemaps/troubleshooting_js/
+`,
+  );
+
+  const nextStep: 'redirect' | 'continue' | 'stop' = await abortIfCancelled(
+    clack.select({
+      message: `Do you want to run the ${frameworkName} wizard now?`,
+      options: [
+        {
+          label: 'Yes',
+          value: 'redirect',
+          hint: `${chalk.green('Recommended')}`,
+        },
+        {
+          label: 'No, continue with this wizard',
+          value: 'continue',
+        },
+        {
+          label: "No, I'll check out the guides ",
+          value: 'stop',
+          hint: 'Exit this wizard',
+        },
+      ],
+    }),
+  );
+
+  Sentry.setTag('wrong-wizard-decision', nextStep);
+
+  switch (nextStep) {
+    case 'redirect':
+      return wizard;
+    case 'stop':
+      await abort('Exiting Wizard', 0);
+      break;
+    default:
+      return undefined;
+  }
+}