@sentry/wizard 3.5.0 → 3.7.0

package/src/sourcemaps/sourcemaps-wizard.ts

@@ -9,12 +9,15 @@ import {
   askForSelfHosted,
   askForWizardLogin,
   confirmContinueEvenThoughNoGitRepo,
+  detectPackageManager,
+  SENTRY_DOT_ENV_FILE,
   printWelcome,
+  SENTRY_CLI_RC_FILE,
 } from '../utils/clack-utils';
 import { isUnicodeSupported } from '../utils/vendor/is-unicorn-supported';
 import { SourceMapUploadToolConfigurationOptions } from './tools/types';
 import { configureVitePlugin } from './tools/vite';
-import { configureSentryCLI } from './tools/sentry-cli';
+import { setupNpmScriptInCI, configureSentryCLI } from './tools/sentry-cli';
 import { configureWebPackPlugin } from './tools/webpack';
 import { configureTscSourcemapGenerationFlow } from './tools/tsc';
 import { configureRollupPlugin } from './tools/rollup';
@@ -22,18 +25,26 @@ import { configureEsbuildPlugin } from './tools/esbuild';
 import { WizardOptions } from '../utils/types';
 import { configureCRASourcemapGenerationFlow } from './tools/create-react-app';
 import { ensureMinimumSdkVersionIsInstalled } from './utils/sdk-version';
-
-type SupportedTools =
-  | 'webpack'
-  | 'vite'
-  | 'rollup'
-  | 'esbuild'
-  | 'tsc'
-  | 'sentry-cli'
-  | 'create-react-app';
+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';
 
 export async function runSourcemapsWizard(
   options: WizardOptions,
+): Promise<void> {
+  return withTelemetry(
+    {
+      enabled: options.telemetryEnabled,
+      integration: 'sourcemaps',
+    },
+    () => runSourcemapsWizardWithTelemetry(options),
+  );
+}
+
+async function runSourcemapsWizardWithTelemetry(
+  options: WizardOptions,
 ): Promise<void> {
   printWelcome({
     wizardName: 'Sentry Source Maps Upload Configuration Wizard',
@@ -42,102 +53,75 @@ export async function runSourcemapsWizard(
     promoCode: options.promoCode,
   });
 
-  await confirmContinueEvenThoughNoGitRepo();
-
-  await ensureMinimumSdkVersionIsInstalled();
-
-  const { url: sentryUrl, selfHosted } = await askForSelfHosted(options.url);
-
-  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);
+  const selectedProject = await traceStep('select-project', () =>
+    askForProjectSelection(projects),
+  );
 
-  if (!addedEnvVarToCI) {
-    clack.log.info("Don't forget! :)");
-  }
+  const selectedTool = await traceStep('select-tool', askForUsedBundlerTool);
 
-  const arrow = isUnicodeSupported() ? '→' : '->';
-
-  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', () => configureCI(selectedTool, 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',
@@ -163,17 +147,13 @@ async function askForUsedBundlerTool(): Promise<SupportedTools> {
           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',
           hint: 'This will configure source maps upload for you using sentry-cli',
         },
       ],
+      initialValue: await detectUsedTool(),
     }),
   );
 
@@ -203,8 +183,147 @@ async function startToolSetupFlow(
     case 'create-react-app':
       await configureSentryCLI(options, configureCRASourcemapGenerationFlow);
       break;
+    case 'angular':
+      await configureSentryCLI(
+        options,
+        configureAngularSourcemapGenerationFlow,
+      );
+      break;
     default:
       await configureSentryCLI(options);
       break;
   }
 }
+
+async function configureCI(
+  selectedTool: SupportedTools,
+  authToken: string,
+): Promise<void> {
+  const isUsingCI = await abortIfCancelled(
+    clack.select({
+      message: `Are you using a CI/CD tool to build and deploy your application?`,
+      options: [
+        {
+          label: 'Yes',
+          hint: 'I use a tool like Github Actions, Gitlab, CircleCI, TravisCI, Jenkins, ...',
+          value: true,
+        },
+        {
+          label: 'No',
+          hint: 'I build and deploy my application manually',
+          value: false,
+        },
+      ],
+      initialValue: true,
+    }),
+  );
+
+  Sentry.setTag('using-ci', isUsingCI);
+
+  const isCliBasedFlowTool = [
+    'sentry-cli',
+    'tsc',
+    'angular',
+    'create-react-app',
+  ].includes(selectedTool);
+
+  const authTokenFile = isCliBasedFlowTool
+    ? SENTRY_CLI_RC_FILE
+    : SENTRY_DOT_ENV_FILE;
+
+  if (!isUsingCI) {
+    clack.log.info(
+      `No Problem! Just make sure that the Sentry auth token from ${chalk.cyan(
+        authTokenFile,
+      )} is available whenever you build and deploy your app.`,
+    );
+    return;
+  }
+
+  if (isCliBasedFlowTool) {
+    await traceStep('ci-npm-script-setup', setupNpmScriptInCI);
+  }
+
+  await traceStep('ci-auth-token-setup', () => setupAuthTokenInCI(authToken));
+}
+
+async function setupAuthTokenInCI(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/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,13 @@ import {
   abortIfCancelled,
   addSentryCliRc,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
 
 import { SourceMapUploadToolConfigurationOptions } from './types';
+import { hasPackageInstalled, PackageDotJson } from '../../utils/package-json';
+
+const NPM_SCRIPT_NAME = 'sentry:sourcemaps';
 
 export async function configureSentryCLI(
   options: SourceMapUploadToolConfigurationOptions,
@@ -72,37 +74,23 @@ export async function configureSentryCLI(
 
   await configureSourcemapGenerationFlow();
 
-  packageDotJson.scripts = packageDotJson.scripts || {};
-  packageDotJson.scripts['sentry:ci'] = `sentry-cli sourcemaps inject --org ${
-    options.orgSlug
-  } --project ${
-    options.projectSlug
-  } ${relativePosixArtifactPath} && sentry-cli${
-    options.selfHosted ? ` --url ${options.url}` : ''
-  } sourcemaps upload --org ${options.orgSlug} --project ${
-    options.projectSlug
-  } ${relativePosixArtifactPath}`;
-
-  await fs.promises.writeFile(
-    path.join(process.cwd(), 'package.json'),
-    JSON.stringify(packageDotJson, null, 2),
+  await createAndAddNpmScript(
+    packageDotJson,
+    options,
+    relativePosixArtifactPath,
   );
 
-  clack.log.info(
-    `Added a ${chalk.cyan('sentry:ci')} script to your ${chalk.cyan(
-      'package.json',
-    )}. Make sure to run this script ${chalk.bold(
-      'after',
-    )} building your application but ${chalk.bold('before')} deploying!`,
-  );
+  await addSentryCliRc(options.authToken);
+}
 
+export async function setupNpmScriptInCI(): Promise<void> {
   const addedToCI = await abortIfCancelled(
     clack.select({
-      message: `Did you add a step to your CI pipeline that runs the ${chalk.cyan(
-        'sentry:ci',
-      )} script ${chalk.bold('right after')} building your application?`,
+      message: `Add a step to your CI pipeline that runs the ${chalk.cyan(
+        NPM_SCRIPT_NAME,
+      )} script ${chalk.bold('right after')} building your application.`,
       options: [
-        { label: 'Yes, continue!', value: true },
+        { label: 'I did, continue!', value: true },
         {
           label: "I'll do it later...",
           value: false,
@@ -120,8 +108,38 @@ export async function configureSentryCLI(
   if (!addedToCI) {
     clack.log.info("Don't forget! :)");
   }
+}
 
-  await addSentryCliRc(options.authToken);
+async function createAndAddNpmScript(
+  packageDotJson: PackageDotJson,
+  options: SourceMapUploadToolConfigurationOptions,
+  relativePosixArtifactPath: string,
+): Promise<void> {
+  const sentryCliNpmScript = `sentry-cli sourcemaps inject --org ${
+    options.orgSlug
+  } --project ${
+    options.projectSlug
+  } ${relativePosixArtifactPath} && sentry-cli${
+    options.selfHosted ? ` --url ${options.url}` : ''
+  } sourcemaps upload --org ${options.orgSlug} --project ${
+    options.projectSlug
+  } ${relativePosixArtifactPath}`;
+
+  packageDotJson.scripts = packageDotJson.scripts || {};
+  packageDotJson.scripts[NPM_SCRIPT_NAME] = sentryCliNpmScript;
+
+  await fs.promises.writeFile(
+    path.join(process.cwd(), 'package.json'),
+    JSON.stringify(packageDotJson, null, 2),
+  );
+
+  clack.log.info(
+    `Added a ${chalk.cyan(NPM_SCRIPT_NAME)} script to your ${chalk.cyan(
+      'package.json',
+    )}. Make sure to run this script ${chalk.bold(
+      'after',
+    )} building your application but ${chalk.bold('before')} deploying!`,
+  );
 }
 
 async function defaultConfigureSourcemapGenerationFlow(): Promise<void> {

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';
+}