@sentry/wizard 3.7.0 → 3.8.0

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

@@ -7,14 +7,18 @@ import * as fs from 'fs';
 import {
   abortIfCancelled,
   addSentryCliRc,
+  detectPackageManager,
   getPackageDotJson,
   installPackage,
 } from '../../utils/clack-utils';
 
 import { SourceMapUploadToolConfigurationOptions } from './types';
 import { hasPackageInstalled, PackageDotJson } from '../../utils/package-json';
+import { traceStep } from '../../telemetry';
 
-const NPM_SCRIPT_NAME = 'sentry:sourcemaps';
+const SENTRY_NPM_SCRIPT_NAME = 'sentry:sourcemaps';
+
+let addedToBuildCommand = false;
 
 export async function configureSentryCLI(
   options: SourceMapUploadToolConfigurationOptions,
@@ -80,14 +84,32 @@ export async function configureSentryCLI(
     relativePosixArtifactPath,
   );
 
+  if (await askShouldAddToBuildCommand()) {
+    await traceStep('sentry-cli-add-to-build-cmd', () =>
+      addSentryCommandToBuildCommand(packageDotJson),
+    );
+  } else {
+    clack.log.info(
+      `No problem, just 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> {
+  if (addedToBuildCommand) {
+    // No need to tell users to add it manually to their CI
+    // if the script is already added to the build command
+    return;
+  }
+
   const addedToCI = await abortIfCancelled(
     clack.select({
       message: `Add a step to your CI pipeline that runs the ${chalk.cyan(
-        NPM_SCRIPT_NAME,
+        SENTRY_NPM_SCRIPT_NAME,
       )} script ${chalk.bold('right after')} building your application.`,
       options: [
         { label: 'I did, continue!', value: true },
@@ -95,7 +117,9 @@ export async function setupNpmScriptInCI(): Promise<void> {
           label: "I'll do it later...",
           value: false,
           hint: chalk.yellow(
-            'You need to run the command after each build for source maps to work properly.',
+            `You need to run ${chalk.cyan(
+              SENTRY_NPM_SCRIPT_NAME,
+            )} after each build for source maps to work properly.`,
           ),
         },
       ],
@@ -126,7 +150,7 @@ async function createAndAddNpmScript(
   } ${relativePosixArtifactPath}`;
 
   packageDotJson.scripts = packageDotJson.scripts || {};
-  packageDotJson.scripts[NPM_SCRIPT_NAME] = sentryCliNpmScript;
+  packageDotJson.scripts[SENTRY_NPM_SCRIPT_NAME] = sentryCliNpmScript;
 
   await fs.promises.writeFile(
     path.join(process.cwd(), 'package.json'),
@@ -134,11 +158,113 @@ async function createAndAddNpmScript(
   );
 
   clack.log.info(
-    `Added a ${chalk.cyan(NPM_SCRIPT_NAME)} script to your ${chalk.cyan(
+    `Added a ${chalk.cyan(SENTRY_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 askShouldAddToBuildCommand(): Promise<boolean> {
+  const shouldAddToBuildCommand = await abortIfCancelled(
+    clack.select({
+      message: `Do you want to automatically run the ${chalk.cyan(
+        SENTRY_NPM_SCRIPT_NAME,
+      )} script after each production build?`,
+      options: [
+        {
+          label: 'Yes',
+          value: true,
+          hint: 'This will modify your prod build comamnd',
+        },
+        { label: 'No', value: false },
+      ],
+      initialValue: true,
+    }),
+  );
+
+  Sentry.setTag('modify-build-command', shouldAddToBuildCommand);
+
+  return shouldAddToBuildCommand;
+}
+
+/**
+ * Add the sentry:sourcemaps command to the prod build command in the package.json
+ * - Detect the user's build command
+ * - Append the sentry:sourcemaps command to it
+ *
+ * @param packageDotJson The package.json which will be modified.
+ */
+async function addSentryCommandToBuildCommand(
+  packageDotJson: PackageDotJson,
+): Promise<void> {
+  // This usually shouldn't happen because earlier we added the
+  // SENTRY_NPM_SCRIPT_NAME script but just to be sure
+  packageDotJson.scripts = packageDotJson.scripts || {};
+
+  const allNpmScripts = Object.keys(packageDotJson.scripts).filter(
+    (s) => s !== SENTRY_NPM_SCRIPT_NAME,
+  );
+
+  const pacMan = detectPackageManager() || 'npm';
+
+  // Heuristic to pre-select the build command:
+  // Often, 'build' is the prod build command, so we favour it.
+  // If it's not there, commands that include 'build' might be the prod build command.
+  let buildCommand =
+    packageDotJson.scripts.build ||
+    allNpmScripts.find((s) => s.toLocaleLowerCase().includes('build'));
+
+  const isProdBuildCommand =
+    !!buildCommand &&
+    (await abortIfCancelled(
+      clack.confirm({
+        message: `Is ${chalk.cyan(
+          `${pacMan} run ${buildCommand}`,
+        )} your production build command?`,
+      }),
+    ));
+
+  if (allNpmScripts.length && (!buildCommand || !isProdBuildCommand)) {
+    buildCommand = await abortIfCancelled(
+      clack.select({
+        message: `Which ${pacMan} command in your ${chalk.cyan(
+          'package.json',
+        )} builds your application for production?`,
+        options: allNpmScripts
+          .map((script) => ({
+            label: script,
+            value: script,
+          }))
+          .concat({ label: 'None of the above', value: 'none' }),
+      }),
+    );
+  }
+
+  if (!buildCommand || buildCommand === 'none') {
+    clack.log.warn(
+      `We can only add the ${chalk.cyan(
+        SENTRY_NPM_SCRIPT_NAME,
+      )} script to another \`script\` in your ${chalk.cyan('package.json')}.
+Please add it manually to your prod build command.`,
+    );
+    return;
+  }
+
+  packageDotJson.scripts[
+    buildCommand
+  ] = `${buildCommand} && ${pacMan} run ${SENTRY_NPM_SCRIPT_NAME}`;
+
+  await fs.promises.writeFile(
+    path.join(process.cwd(), 'package.json'),
+    JSON.stringify(packageDotJson, null, 2),
+  );
+
+  addedToBuildCommand = true;
+
+  clack.log.info(
+    `Added ${chalk.cyan(SENTRY_NPM_SCRIPT_NAME)} script to your ${chalk.cyan(
+      buildCommand,
+    )} command.`,
   );
 }
 

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

@@ -9,7 +9,8 @@ export type SupportedTools =
   | 'tsc'
   | 'sentry-cli'
   | 'create-react-app'
-  | 'angular';
+  | 'angular'
+  | 'nextjs';
 
 // A map of package names pointing to the tool slug.
 // The order is important, because we want to detect the most specific tool first.
@@ -18,6 +19,7 @@ export type SupportedTools =
 export const TOOL_PACKAGE_MAP: Record<string, SupportedTools> = {
   '@angular/core': 'angular',
   'create-react-app': 'create-react-app',
+  next: 'nextjs',
   webpack: 'webpack',
   vite: 'vite',
   esbuild: 'esbuild',

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

@@ -1,7 +1,6 @@
 // @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 {
@@ -17,33 +16,37 @@ import {
 import * as Sentry from '@sentry/node';
 import { WizardOptions } from '../../utils/types';
 
+import * as childProcess from 'child_process';
+
 type WizardFunction = (options: WizardOptions) => Promise<void>;
 
 type FrameworkInfo = {
   frameworkName: string;
-  frameworkSlug: string;
   frameworkPackage: string;
+  troubleshootingDocsLink: 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',
+    troubleshootingDocsLink:
+      'https://docs.sentry.io/platforms/javascript/guides/sveltekit/sourcemaps/troubleshooting_js/',
     wizard: runSvelteKitWizard,
   },
+  '@sentry/react-native': {
+    frameworkName: 'React Native',
+    frameworkPackage: 'react-native',
+    sourcemapsDocsLink:
+      'https://docs.sentry.io/platforms/react-native/sourcemaps/',
+    troubleshootingDocsLink:
+      'https://docs.sentry.io/platforms/react-native/troubleshooting/#source-maps',
+    wizard: runReactNativeWizard,
+  },
 };
 
 export async function checkIfMoreSuitableWizardExistsAndAskForRedirect(): Promise<
@@ -91,7 +94,7 @@ async function checkIfMoreSuitableWizardExists(): Promise<string | undefined> {
 async function askForRedirect(
   sdkName: string,
 ): Promise<WizardFunction | undefined> {
-  const { frameworkName, sourcemapsDocsLink, frameworkSlug, wizard } =
+  const { frameworkName, sourcemapsDocsLink, troubleshootingDocsLink, wizard } =
     sdkMap[sdkName];
 
   clack.log.warn(
@@ -108,7 +111,7 @@ Manual source maps configuration for ${frameworkName}:
 ${sourcemapsDocsLink}
 
 Troubleshooting Source Maps:
-https://docs.sentry.io/platforms/javascript/guides/${frameworkSlug}/sourcemaps/troubleshooting_js/
+${troubleshootingDocsLink}
 `,
   );
 
@@ -146,3 +149,19 @@ https://docs.sentry.io/platforms/javascript/guides/${frameworkSlug}/sourcemaps/t
       return undefined;
   }
 }
+
+function runReactNativeWizard(): Promise<void> {
+  const [runner, ...wizardArgs] = [...process.argv];
+  wizardArgs.push('--integration', 'reactNative');
+
+  try {
+    childProcess.spawnSync(runner, wizardArgs, {
+      cwd: process.cwd(),
+      stdio: 'inherit',
+    });
+  } catch {
+    return Promise.reject();
+  }
+
+  return Promise.resolve();
+}

package/src/sveltekit/sentry-cli-setup.ts

@@ -1,6 +1,6 @@
 import { Args } from '../../lib/Constants';
 import { SentryCli } from '../../lib/Helper/SentryCli';
-import { SentryProjectData } from '../utils/clack-utils';
+import { SentryProjectData } from '../utils/types';
 
 export async function setupCLIConfig(
   authToken: string,

package/src/sveltekit/sveltekit-wizard.ts

@@ -3,6 +3,7 @@ import clack from '@clack/prompts';
 import chalk from 'chalk';
 
 import {
+  abort,
   askForProjectSelection,
   askForSelfHosted,
   askForWizardLogin,
@@ -66,6 +67,7 @@ export async function runSvelteKitWizard(
           : 'Unknown error',
       ),
     );
+    await abort('Exiting Wizard');
     return;
   }
 
@@ -87,6 +89,7 @@ export async function runSvelteKitWizard(
           : 'Unknown error',
       ),
     );
+    await abort('Exiting Wizard');
     return;
   }
 

package/src/utils/bash.ts

@@ -3,42 +3,55 @@ import * as https from 'https';
 import * as fs from 'fs';
 
 export function hasSentryCLI(): boolean {
-    try {
-        child_process.execSync('sentry-cli --version');
-        return true;
-    } catch (e) {
-        return false;
-    }
+  try {
+    child_process.execSync('sentry-cli --version');
+    return true;
+  } catch (e) {
+    return false;
+  }
 }
 
 export async function installSentryCLI(): Promise<void> {
-    const httpAsync = new Promise((resolve, reject) => {
-        const file = fs.createWriteStream('installcli.sh');
-        https.get('https://sentry.io/get-cli/', (response) => {
-            response.pipe(file);
-            file.on('finish', () => {
-                file.close();
-                try {
-                    child_process.execSync('bash ./installcli.sh');
-                } catch (e) {
-                    reject(e);
-                    return
-                }
-                fs.unlinkSync('installcli.sh');
-                resolve(null);
-            });
+  const httpAsync = new Promise((resolve, reject) => {
+    const file = fs.createWriteStream('installcli.sh');
+    https.get('https://sentry.io/get-cli/', (response) => {
+      response.pipe(file);
+      file.on('finish', () => {
+        file.close();
+        try {
+          child_process.execSync('bash ./installcli.sh');
+        } catch (e) {
+          reject(e);
+          return;
+        }
+        fs.unlinkSync('installcli.sh');
+        resolve(null);
+      });
 
-            file.on('error', (err) => {
-                fs.unlinkSync('installcli.sh');
-                reject(err);
-            });
-        });
+      file.on('error', (err) => {
+        fs.unlinkSync('installcli.sh');
+        reject(err);
+      });
     });
+  });
 
-    await httpAsync;
+  await httpAsync;
 }
 
-export function execute(command: string): string {
-    const output = child_process.execSync(command);
-    return output.toString();
+export function executeSync(command: string): string {
+  const output = child_process.execSync(command);
+  return output.toString();
+}
+
+export function execute(command: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    child_process.exec(command, (error, stdout, _) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+
+      resolve(stdout);
+    });
+  });
 }

package/src/utils/clack-utils.ts

@@ -11,6 +11,8 @@ import { promisify } from 'util';
 import * as Sentry from '@sentry/node';
 import { windowedSelect } from './vendor/clack-custom-select';
 import { hasPackageInstalled, PackageDotJson } from './package-json';
+import { SentryProjectData, WizardOptions } from './types';
+import { traceStep } from '../telemetry';
 
 const opn = require('opn') as (
   url: string,
@@ -28,17 +30,6 @@ interface WizardProjectData {
   projects: SentryProjectData[];
 }
 
-export interface SentryProjectData {
-  id: string;
-  slug: string;
-  name: string;
-  platform: string;
-  organization: {
-    slug: string;
-  };
-  keys: [{ dsn: { public: string } }];
-}
-
 export async function abort(message?: string, status?: number): Promise<never> {
   clack.outro(message ?? 'Wizard setup cancelled.');
   const sentryHub = Sentry.getCurrentHub();
@@ -206,9 +197,7 @@ export async function askForWizardLogin(options: {
 
   const loginSpinner = clack.spinner();
 
-  loginSpinner.start(
-    "Waiting for you to log in using the link above. Once you're logged in, return to this wizard.",
-  );
+  loginSpinner.start('Waiting for you to log in using the link above');
 
   const data = await new Promise<WizardProjectData>((resolve) => {
     const pollingInterval = setInterval(() => {
@@ -661,3 +650,42 @@ export function isUsingTypeScript() {
     return false;
   }
 }
+
+export async function getOrAskForProjectData(options: WizardOptions): Promise<{
+  sentryUrl: string;
+  selfHosted: boolean;
+  selectedProject: SentryProjectData;
+  authToken: string;
+}> {
+  if (options.preSelectedProject) {
+    return {
+      selfHosted: options.preSelectedProject.selfHosted,
+      sentryUrl: options.url ?? SAAS_URL,
+      authToken: options.preSelectedProject.authToken,
+      selectedProject: options.preSelectedProject.project,
+    };
+  }
+  const { url: sentryUrl, selfHosted } = await traceStep(
+    'ask-self-hosted',
+    () => askForSelfHosted(options.url),
+  );
+
+  const { projects, apiKeys } = await traceStep('login', () =>
+    askForWizardLogin({
+      promoCode: options.promoCode,
+      url: sentryUrl,
+      platform: 'javascript-nextjs',
+    }),
+  );
+
+  const selectedProject = await traceStep('select-project', () =>
+    askForProjectSelection(projects),
+  );
+
+  return {
+    sentryUrl,
+    selfHosted,
+    authToken: apiKeys.token,
+    selectedProject,
+  };
+}

package/src/utils/package-json.ts

@@ -1,5 +1,5 @@
 export type PackageDotJson = {
-  scripts?: Record<string, string>;
+  scripts?: Record<string, string | undefined>;
   dependencies?: Record<string, string>;
   devDependencies?: Record<string, string>;
 };

package/src/utils/types.ts

@@ -1,3 +1,14 @@
+export interface SentryProjectData {
+  id: string;
+  slug: string;
+  name: string;
+  platform: string;
+  organization: {
+    slug: string;
+  };
+  keys: [{ dsn: { public: string } }];
+}
+
 export type WizardOptions = {
   /**
    * Controls whether the wizard should send telemetry data to Sentry.
@@ -15,4 +26,15 @@ export type WizardOptions = {
    * This can be passed via the `-u` or `--url` arg.
    */
   url?: string;
+
+  /**
+   * If this is set, the wizard will skip the login and project selection step.
+   * (This can not yet be set externally but for example when redirecting from
+   * one wizard to another when the project was already selected)
+   */
+  preSelectedProject?: {
+    project: SentryProjectData;
+    authToken: string;
+    selfHosted: boolean;
+  };
 };