@sentry/wizard 3.5.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';
@@ -22,18 +23,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 +51,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);
-
-  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',
@@ -163,17 +145,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 +181,95 @@ 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 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/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,

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

package/src/sourcemaps/utils/sdk-version.ts

@@ -5,11 +5,11 @@ import { minVersion, satisfies } from 'semver';
 import {
   abortIfCancelled,
   getPackageDotJson,
-  getPackageVersion,
   installPackage,
 } from '../../utils/clack-utils';
 
 import * as Sentry from '@sentry/node';
+import { findInstalledPackageFromList } from '../../utils/package-json';
 
 const MINIMUM_DEBUG_ID_SDK_VERSION = '7.47.0';
 
@@ -36,12 +36,7 @@ const SENTRY_SDK_PACKAGE_NAMES = [
   // Base SDKs
   '@sentry/browser',
   '@sentry/node',
-] as const;
-
-type SdkPackage = {
-  name: (typeof SENTRY_SDK_PACKAGE_NAMES)[number];
-  version: string;
-};
+];
 
 /**
  * Check for a minimum SDK version and prompt the user to upgrade if necessary.
@@ -57,15 +52,10 @@ type SdkPackage = {
  *    -> We tell users to manually upgrade (migrate between majors)
  */
 export async function ensureMinimumSdkVersionIsInstalled(): Promise<void> {
-  const packageJson = await getPackageDotJson();
-
-  const installedSdkPackages = SENTRY_SDK_PACKAGE_NAMES.map((packageName) => ({
-    name: packageName,
-    version: getPackageVersion(packageName, packageJson),
-  })).filter((sdkPackage): sdkPackage is SdkPackage => !!sdkPackage.version);
-
-  const installedSdkPackage =
-    installedSdkPackages.length > 0 && installedSdkPackages[0];
+  const installedSdkPackage = findInstalledPackageFromList(
+    SENTRY_SDK_PACKAGE_NAMES,
+    await getPackageDotJson(),
+  );
 
   // Case 1:
   if (!installedSdkPackage) {
@@ -75,6 +65,8 @@ export async function ensureMinimumSdkVersionIsInstalled(): Promise<void> {
   const { name: installedSdkName, version: installedSdkVersionOrRange } =
     installedSdkPackage;
 
+  Sentry.setTag('installed-sdk', installedSdkName);
+
   const minInstalledVersion = getMinInstalledVersion(
     installedSdkVersionOrRange,
     installedSdkName,
@@ -198,6 +190,7 @@ async function handleAutoUpdateSdk(packageName: string) {
 
 async function handleNoSdkInstalled(): Promise<void> {
   Sentry.setTag('initial-sdk-version', 'none');
+  Sentry.setTag('installed-sdk', 'none');
 
   clack.log.warn(
     `${chalk.yellowBright(

package/src/sveltekit/sveltekit-wizard.ts

@@ -9,10 +9,10 @@ import {
   confirmContinueEvenThoughNoGitRepo,
   ensurePackageIsInstalled,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
   printWelcome,
 } from '../utils/clack-utils';
+import { hasPackageInstalled } from '../utils/package-json';
 import { WizardOptions } from '../utils/types';
 import { createExamplePage } from './sdk-example';
 import { createOrMergeSvelteKitFiles, loadSvelteConfig } from './sdk-setup';