@sentry/wizard 3.5.0 → 3.7.0

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/sdk-setup.ts

@@ -13,6 +13,7 @@ import { builders, generateCode, loadFile, parseModule } from 'magicast';
 // @ts-ignore - magicast is ESM and TS complains about that. It works though
 import { addVitePlugin } from 'magicast/helpers';
 import { getClientHooksTemplate, getServerHooksTemplate } from './templates';
+import { isUsingTypeScript } from '../utils/clack-utils';
 
 const SVELTE_CONFIG_FILE = 'svelte.config.js';
 
@@ -40,13 +41,15 @@ export async function createOrMergeSvelteKitFiles(
 
   const viteConfig = findHooksFile(path.resolve(process.cwd(), 'vite.config'));
 
+  const fileEnding = isUsingTypeScript() ? 'ts' : 'js';
+
   if (!originalClientHooksFile) {
     clack.log.info('No client hooks file found, creating a new one.');
-    await createNewHooksFile(`${clientHooksPath}.js`, 'client', dsn);
+    await createNewHooksFile(`${clientHooksPath}.${fileEnding}`, 'client', dsn);
   }
   if (!originalServerHooksFile) {
     clack.log.info('No server hooks file found, creating a new one.');
-    await createNewHooksFile(`${serverHooksPath}.js`, 'server', dsn);
+    await createNewHooksFile(`${serverHooksPath}.${fileEnding}`, 'server', dsn);
   }
 
   if (originalClientHooksFile) {

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

package/src/sveltekit/templates.ts

@@ -72,7 +72,7 @@ Feel free to delete this file and the entire sentry route.
     });
 
     try {
-      const res = await fetch('/test-sentry');
+      const res = await fetch('/sentry-example');
       if (!res.ok) {
         throw new Error('Sentry Example Frontend Error');
       }

package/src/telemetry.ts

@@ -6,6 +6,7 @@ import {
   makeNodeTransport,
   NodeClient,
   runWithAsyncContext,
+  trace,
 } from '@sentry/node';
 import packageJson from '../package.json';
 
@@ -26,6 +27,7 @@ export async function withTelemetry<F>(
   const transaction = sentryHub.startTransaction({
     name: 'sentry-wizard-execution',
     status: 'ok',
+    op: 'wizard.flow',
   });
   sentryHub.getScope().setSpan(transaction);
   const sentrySession = sentryHub.startSession();
@@ -74,6 +76,8 @@ function createSentryInstance(enabled: boolean, integration: string) {
     },
 
     transport: makeNodeTransport,
+
+    debug: true,
   });
 
   const hub = new Hub(client);
@@ -84,3 +88,7 @@ function createSentryInstance(enabled: boolean, integration: string) {
 
   return { sentryHub: hub, sentryClient: client };
 }
+
+export function traceStep<T>(step: string, callback: () => T): T {
+  return trace({ name: step, op: 'wizard.step' }, () => callback());
+}

package/src/utils/bash.ts

@@ -0,0 +1,44 @@
+import * as child_process from 'child_process';
+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;
+    }
+}
+
+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);
+            });
+
+            file.on('error', (err) => {
+                fs.unlinkSync('installcli.sh');
+                reject(err);
+            });
+        });
+    });
+
+    await httpAsync;
+}
+
+export function execute(command: string): string {
+    const output = child_process.execSync(command);
+    return output.toString();
+}

package/src/utils/clack-utils.ts

@@ -10,11 +10,15 @@ import { URL } from 'url';
 import { promisify } from 'util';
 import * as Sentry from '@sentry/node';
 import { windowedSelect } from './vendor/clack-custom-select';
+import { hasPackageInstalled, PackageDotJson } from './package-json';
 
 const opn = require('opn') as (
   url: string,
 ) => Promise<childProcess.ChildProcess>;
 
+export const SENTRY_DOT_ENV_FILE = '.env.sentry-build-plugin';
+export const SENTRY_CLI_RC_FILE = '.sentryclirc';
+
 const SAAS_URL = 'https://sentry.io/';
 
 interface WizardProjectData {
@@ -24,16 +28,11 @@ interface WizardProjectData {
   projects: SentryProjectData[];
 }
 
-export type PackageDotJson = {
-  scripts?: Record<string, string>;
-  dependencies?: Record<string, string>;
-  devDependencies?: Record<string, string>;
-};
-
 export interface SentryProjectData {
   id: string;
   slug: string;
   name: string;
+  platform: string;
   organization: {
     slug: string;
   };
@@ -130,10 +129,19 @@ export async function confirmContinueEvenThoughNoGitRepo(): Promise<void> {
   }
 }
 
+export async function askToInstallSentryCLI(): Promise<boolean> {
+  return await abortIfCancelled(
+    clack.confirm({
+      message:
+        "You don't have Sentry CLI installed. Do you want to install it?",
+    }),
+  );
+}
+
 export async function askForWizardLogin(options: {
   url: string;
   promoCode?: string;
-  platform?: 'javascript-nextjs' | 'javascript-sveltekit';
+  platform?: 'javascript-nextjs' | 'javascript-sveltekit' | 'apple-ios';
 }): Promise<WizardProjectData> {
   Sentry.setTag('has-promo-code', !!options.promoCode);
 
@@ -234,6 +242,27 @@ export async function askForWizardLogin(options: {
   return data;
 }
 
+export async function askForItemSelection(
+  items: string[],
+  message: string,
+): Promise<{ value: string; index: number }> {
+  const selection: { value: string; index: number } | symbol =
+    await abortIfCancelled(
+      windowedSelect({
+        maxItems: 12,
+        message: message,
+        options: items.map((item, index) => {
+          return {
+            value: { value: item, index: index },
+            label: item,
+          };
+        }),
+      }),
+    );
+
+  return selection;
+}
+
 export async function askForProjectSelection(
   projects: SentryProjectData[],
 ): Promise<SentryProjectData> {
@@ -251,6 +280,7 @@ export async function askForProjectSelection(
   );
 
   Sentry.setTag('project', selection.slug);
+  Sentry.setTag('project-platform', selection.platform);
   Sentry.setUser({ id: selection.organization.slug });
 
   return selection;
@@ -390,10 +420,12 @@ export async function askForSelfHosted(urlFromArgs?: string): Promise<{
 }
 
 export async function addSentryCliRc(authToken: string): Promise<void> {
-  const clircExists = fs.existsSync(path.join(process.cwd(), '.sentryclirc'));
+  const clircExists = fs.existsSync(
+    path.join(process.cwd(), SENTRY_CLI_RC_FILE),
+  );
   if (clircExists) {
     const clircContents = fs.readFileSync(
-      path.join(process.cwd(), '.sentryclirc'),
+      path.join(process.cwd(), SENTRY_CLI_RC_FILE),
       'utf8',
     );
 
@@ -404,25 +436,25 @@ export async function addSentryCliRc(authToken: string): Promise<void> {
     if (likelyAlreadyHasAuthToken) {
       clack.log.warn(
         `${chalk.bold(
-          '.sentryclirc',
+          SENTRY_CLI_RC_FILE,
         )} already has auth token. Will not add one.`,
       );
     } else {
       try {
         await fs.promises.writeFile(
-          path.join(process.cwd(), '.sentryclirc'),
+          path.join(process.cwd(), SENTRY_CLI_RC_FILE),
           `${clircContents}\n[auth]\ntoken=${authToken}\n`,
           { encoding: 'utf8', flag: 'w' },
         );
         clack.log.success(
           `Added auth token to ${chalk.bold(
-            '.sentryclirc',
+            SENTRY_CLI_RC_FILE,
           )} for you to test uploading source maps locally.`,
         );
       } catch {
         clack.log.warning(
           `Failed to add auth token to ${chalk.bold(
-            '.sentryclirc',
+            SENTRY_CLI_RC_FILE,
           )}. Uploading source maps during build will likely not work locally.`,
         );
       }
@@ -430,32 +462,30 @@ export async function addSentryCliRc(authToken: string): Promise<void> {
   } else {
     try {
       await fs.promises.writeFile(
-        path.join(process.cwd(), '.sentryclirc'),
+        path.join(process.cwd(), SENTRY_CLI_RC_FILE),
         `[auth]\ntoken=${authToken}\n`,
         { encoding: 'utf8', flag: 'w' },
       );
       clack.log.success(
         `Created ${chalk.bold(
-          '.sentryclirc',
+          SENTRY_CLI_RC_FILE,
         )} with auth token for you to test uploading source maps locally.`,
       );
     } catch {
       clack.log.warning(
         `Failed to create ${chalk.bold(
-          '.sentryclirc',
+          SENTRY_CLI_RC_FILE,
         )} with auth token. Uploading source maps during build will likely not work locally.`,
       );
     }
   }
 
-  await addAuthTokenFileToGitIgnore('.sentryclirc');
+  await addAuthTokenFileToGitIgnore(SENTRY_CLI_RC_FILE);
 }
 
 export async function addDotEnvSentryBuildPluginFile(
   authToken: string,
 ): Promise<void> {
-  const DOT_ENV_FILE = '.env.sentry-build-plugin';
-
   const envVarContent = `# DO NOT commit this file to your repository!
 # The SENTRY_AUTH_TOKEN variable is picked up by the Sentry Build Plugin.
 # It's used for authentication when uploading source maps.
@@ -463,7 +493,7 @@ export async function addDotEnvSentryBuildPluginFile(
 SENTRY_AUTH_TOKEN="${authToken}"
 `;
 
-  const dotEnvFilePath = path.join(process.cwd(), DOT_ENV_FILE);
+  const dotEnvFilePath = path.join(process.cwd(), SENTRY_DOT_ENV_FILE);
   const dotEnvFileExists = fs.existsSync(dotEnvFilePath);
 
   if (dotEnvFileExists) {
@@ -475,7 +505,9 @@ SENTRY_AUTH_TOKEN="${authToken}"
 
     if (hasAuthToken) {
       clack.log.warn(
-        `${chalk.bold(DOT_ENV_FILE)} already has auth token. Will not add one.`,
+        `${chalk.bold(
+          SENTRY_DOT_ENV_FILE,
+        )} already has auth token. Will not add one.`,
       );
     } else {
       try {
@@ -487,11 +519,13 @@ SENTRY_AUTH_TOKEN="${authToken}"
             flag: 'w',
           },
         );
-        clack.log.success(`Added auth token to ${chalk.bold(DOT_ENV_FILE)}`);
+        clack.log.success(
+          `Added auth token to ${chalk.bold(SENTRY_DOT_ENV_FILE)}`,
+        );
       } catch {
         clack.log.warning(
           `Failed to add auth token to ${chalk.bold(
-            DOT_ENV_FILE,
+            SENTRY_DOT_ENV_FILE,
           )}. Uploading source maps during build will likely not work locally.`,
         );
       }
@@ -504,19 +538,19 @@ SENTRY_AUTH_TOKEN="${authToken}"
       });
       clack.log.success(
         `Created ${chalk.bold(
-          DOT_ENV_FILE,
+          SENTRY_DOT_ENV_FILE,
         )} with auth token for you to test source map uploading locally.`,
       );
     } catch {
       clack.log.warning(
         `Failed to create ${chalk.bold(
-          DOT_ENV_FILE,
+          SENTRY_DOT_ENV_FILE,
         )} with auth token. Uploading source maps during build will likely not work locally.`,
       );
     }
   }
 
-  await addAuthTokenFileToGitIgnore(DOT_ENV_FILE);
+  await addAuthTokenFileToGitIgnore(SENTRY_DOT_ENV_FILE);
 }
 
 async function addAuthTokenFileToGitIgnore(filename: string): Promise<void> {
@@ -584,32 +618,8 @@ export async function getPackageDotJson(): Promise<PackageDotJson> {
   return packageJson || {};
 }
 
-export function hasPackageInstalled(
-  packageName: string,
-  packageJson: PackageDotJson,
-): boolean {
-  return getPackageVersion(packageName, packageJson) !== undefined;
-}
-
-export function getPackageVersion(
-  packageName: string,
-  packageJson: PackageDotJson,
-): string | undefined {
-  return (
-    packageJson?.dependencies?.[packageName] ||
-    packageJson?.devDependencies?.[packageName]
-  );
-}
-
 async function getPackageManager(): Promise<string> {
-  let detectedPackageManager;
-  if (fs.existsSync(path.join(process.cwd(), 'yarn.lock'))) {
-    detectedPackageManager = 'yarn';
-  } else if (fs.existsSync(path.join(process.cwd(), 'package-lock.json'))) {
-    detectedPackageManager = 'npm';
-  } else if (fs.existsSync(path.join(process.cwd(), 'pnpm-lock.yaml'))) {
-    detectedPackageManager = 'pnpm';
-  }
+  const detectedPackageManager = detectPackageManager();
 
   if (detectedPackageManager) {
     return detectedPackageManager;
@@ -630,3 +640,24 @@ async function getPackageManager(): Promise<string> {
 
   return selectedPackageManager;
 }
+
+export function detectPackageManager(): 'yarn' | 'npm' | 'pnpm' | undefined {
+  if (fs.existsSync(path.join(process.cwd(), 'yarn.lock'))) {
+    return 'yarn';
+  }
+  if (fs.existsSync(path.join(process.cwd(), 'package-lock.json'))) {
+    return 'npm';
+  }
+  if (fs.existsSync(path.join(process.cwd(), 'pnpm-lock.yaml'))) {
+    return 'pnpm';
+  }
+  return undefined;
+}
+
+export function isUsingTypeScript() {
+  try {
+    return fs.existsSync(path.join(process.cwd(), 'tsconfig.json'));
+  } catch {
+    return false;
+  }
+}

package/src/utils/package-json.ts

@@ -0,0 +1,45 @@
+export type PackageDotJson = {
+  scripts?: Record<string, string>;
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+};
+
+type NpmPackage = {
+  name: string;
+  version: string;
+};
+
+/**
+ * Checks if @param packageJson has any of the @param packageNamesList package names
+ * listed as a dependency or devDependency.
+ * If so, it returns the first package name that is found, including the
+ * version (range) specified in the package.json.
+ */
+export function findInstalledPackageFromList(
+  packageNamesList: string[],
+  packageJson: PackageDotJson,
+): NpmPackage | undefined {
+  return packageNamesList
+    .map((packageName) => ({
+      name: packageName,
+      version: getPackageVersion(packageName, packageJson),
+    }))
+    .find((sdkPackage): sdkPackage is NpmPackage => !!sdkPackage.version);
+}
+
+export function hasPackageInstalled(
+  packageName: string,
+  packageJson: PackageDotJson,
+): boolean {
+  return getPackageVersion(packageName, packageJson) !== undefined;
+}
+
+export function getPackageVersion(
+  packageName: string,
+  packageJson: PackageDotJson,
+): string | undefined {
+  return (
+    packageJson?.dependencies?.[packageName] ||
+    packageJson?.devDependencies?.[packageName]
+  );
+}

package/src/utils/types.ts

@@ -1,4 +1,9 @@
 export type WizardOptions = {
+  /**
+   * Controls whether the wizard should send telemetry data to Sentry.
+   */
+  telemetryEnabled: boolean;
+
   /**
    * The promo code to use while signing up for Sentry.
    * This can be passed via the --promo-code arg.