@sentry/wizard 3.3.2 → 3.5.0

package/src/sourcemaps/tools/esbuild.ts

@@ -0,0 +1,65 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack, { select } from '@clack/prompts';
+import chalk from 'chalk';
+import {
+  abortIfCancelled,
+  addDotEnvSentryBuildPluginFile,
+  getPackageDotJson,
+  hasPackageInstalled,
+  installPackage,
+} from '../../utils/clack-utils';
+
+import {
+  SourceMapUploadToolConfigurationFunction,
+  SourceMapUploadToolConfigurationOptions,
+} from './types';
+
+const getCodeSnippet = (options: SourceMapUploadToolConfigurationOptions) =>
+  chalk.gray(`
+${chalk.greenBright(
+  'const { sentryEsbuildPlugin } = require("@sentry/esbuild-plugin");',
+)}
+
+require("esbuild").build({
+  ${chalk.greenBright(
+    'sourcemap: true, // Source map generation must be turned on',
+  )}
+  plugins: [
+    // Put the Sentry esbuild plugin after all other plugins
+    ${chalk.greenBright(`sentryEsbuildPlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: "${options.orgSlug}",
+      project: "${options.projectSlug}",${
+      options.selfHosted ? `\n      url: "${options.url}",` : ''
+    }
+    }),`)}
+  ],
+});
+`);
+
+export const configureEsbuildPlugin: SourceMapUploadToolConfigurationFunction =
+  async (options) => {
+    await installPackage({
+      packageName: '@sentry/esbuild-plugin',
+      alreadyInstalled: hasPackageInstalled(
+        '@sentry/esbuild-plugin',
+        await getPackageDotJson(),
+      ),
+    });
+
+    clack.log.step(`Add the following code to your esbuild config:`);
+
+    // Intentially logging directly to console here so that the code can be copied/pasted directly
+    // eslint-disable-next-line no-console
+    console.log(getCodeSnippet(options));
+
+    await abortIfCancelled(
+      select({
+        message: 'Did you copy the snippet above?',
+        options: [{ label: 'Yes, continue!', value: true }],
+        initialValue: true,
+      }),
+    );
+
+    await addDotEnvSentryBuildPluginFile(options.authToken);
+  };

package/src/sourcemaps/tools/rollup.ts

@@ -0,0 +1,69 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack, { select } from '@clack/prompts';
+import chalk from 'chalk';
+import {
+  abortIfCancelled,
+  addDotEnvSentryBuildPluginFile,
+  getPackageDotJson,
+  hasPackageInstalled,
+  installPackage,
+} from '../../utils/clack-utils';
+
+import {
+  SourceMapUploadToolConfigurationFunction,
+  SourceMapUploadToolConfigurationOptions,
+} from './types';
+
+const getCodeSnippet = (options: SourceMapUploadToolConfigurationOptions) =>
+  chalk.gray(`
+${chalk.greenBright(
+  'import { sentryRollupPlugin } from "@sentry/rollup-plugin";',
+)}
+
+export default {
+  output: {
+    ${chalk.greenBright(
+      'sourcemap: true, // Source map generation must be turned on',
+    )}
+  },
+  plugins: [
+    // Put the Sentry rollup plugin after all other plugins
+    ${chalk.greenBright(`sentryRollupPlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: "${options.orgSlug}",
+      project: "${options.projectSlug}",${
+      options.selfHosted ? `\n      url: "${options.url}",` : ''
+    }
+    }),`)}
+  ],
+};
+`);
+
+export const configureRollupPlugin: SourceMapUploadToolConfigurationFunction =
+  async (options) => {
+    await installPackage({
+      packageName: '@sentry/rollup-plugin',
+      alreadyInstalled: hasPackageInstalled(
+        '@sentry/rollup-plugin',
+        await getPackageDotJson(),
+      ),
+    });
+
+    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
+    console.log(getCodeSnippet(options));
+
+    await abortIfCancelled(
+      select({
+        message: 'Did you copy the snippet above?',
+        options: [{ label: 'Yes, continue!', value: true }],
+        initialValue: true,
+      }),
+    );
+
+    await addDotEnvSentryBuildPluginFile(options.authToken);
+  };

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

@@ -12,117 +12,126 @@ import {
   installPackage,
 } from '../../utils/clack-utils';
 
-import { SourceMapUploadToolConfigurationFunction } from './types';
-
-export const configureSentryCLI: SourceMapUploadToolConfigurationFunction =
-  async (options) => {
-    const packageDotJson = await getPackageDotJson();
-
-    await installPackage({
-      packageName: '@sentry/cli',
-      alreadyInstalled: hasPackageInstalled('@sentry/cli', packageDotJson),
-    });
-
-    let validPath = false;
-    let relativeArtifactPath;
-    do {
-      const rawArtifactPath = await abortIfCancelled(
-        clack.text({
-          message: 'Where are your build artifacts located?',
-          placeholder: `.${path.sep}out`,
-        }),
-      );
-
-      if (path.isAbsolute(rawArtifactPath)) {
-        relativeArtifactPath = path.relative(process.cwd(), rawArtifactPath);
-      } else {
-        relativeArtifactPath = rawArtifactPath;
-      }
-
-      try {
-        await fs.promises.access(
-          path.join(process.cwd(), relativeArtifactPath),
-        );
-        validPath = true;
-      } catch {
-        validPath = await abortIfCancelled(
-          clack.select({
-            message: `We couldn't find artifacts at ${relativeArtifactPath}. Are you sure that this is the location that contains your build artifacts?`,
-            options: [
-              {
-                label: 'No, let me verify.',
-                value: false,
-              },
-              { label: 'Yes, I am sure!', value: true },
-            ],
-            initialValue: false,
-          }),
-        );
-      }
-    } while (!validPath);
-
-    const relativePosixArtifactPath = relativeArtifactPath
-      .split(path.sep)
-      .join(path.posix.sep);
-
-    await abortIfCancelled(
-      clack.select({
-        message: `Verify that your build tool is generating source maps. ${chalk.dim(
-          '(Your build output folder should contain .js.map files after a build)',
-        )}`,
-        options: [{ label: 'I checked. Continue!', value: true }],
-        initialValue: true,
-      }),
-    );
+import { SourceMapUploadToolConfigurationOptions } from './types';
 
-    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),
-    );
+export async function configureSentryCLI(
+  options: SourceMapUploadToolConfigurationOptions,
+  configureSourcemapGenerationFlow: () => Promise<void> = defaultConfigureSourcemapGenerationFlow,
+): Promise<void> {
+  const packageDotJson = await getPackageDotJson();
 
-    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 installPackage({
+    packageName: '@sentry/cli',
+    alreadyInstalled: hasPackageInstalled('@sentry/cli', packageDotJson),
+  });
 
-    const addedToCI = await abortIfCancelled(
-      clack.select({
-        message: `Did you add running the ${chalk.cyan(
-          'sentry:ci',
-        )} script to your CI pipeline ${chalk.bold('after the build step')}?`,
-        options: [
-          { label: 'Yes, continue!', value: true },
-          {
-            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.',
-            ),
-          },
-        ],
-        initialValue: true,
+  let validPath = false;
+  let relativeArtifactPath;
+  do {
+    const rawArtifactPath = await abortIfCancelled(
+      clack.text({
+        message: 'Where are your build artifacts located?',
+        placeholder: `.${path.sep}out`,
+        validate(value) {
+          if (!value) {
+            return 'Please enter a path.';
+          }
+        },
       }),
     );
 
-    Sentry.setTag('added-ci-script', addedToCI);
+    if (path.isAbsolute(rawArtifactPath)) {
+      relativeArtifactPath = path.relative(process.cwd(), rawArtifactPath);
+    } else {
+      relativeArtifactPath = rawArtifactPath;
+    }
 
-    if (!addedToCI) {
-      clack.log.info("Don't forget! :)");
+    try {
+      await fs.promises.access(path.join(process.cwd(), relativeArtifactPath));
+      validPath = true;
+    } catch {
+      validPath = await abortIfCancelled(
+        clack.select({
+          message: `We couldn't find artifacts at ${relativeArtifactPath}. Are you sure that this is the location that contains your build artifacts?`,
+          options: [
+            {
+              label: 'No, let me verify.',
+              value: false,
+            },
+            { label: 'Yes, I am sure!', value: true },
+          ],
+          initialValue: false,
+        }),
+      );
     }
+  } while (!validPath);
+
+  const relativePosixArtifactPath = relativeArtifactPath
+    .split(path.sep)
+    .join(path.posix.sep);
+
+  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),
+  );
+
+  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!`,
+  );
+
+  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?`,
+      options: [
+        { label: 'Yes, continue!', value: true },
+        {
+          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.',
+          ),
+        },
+      ],
+      initialValue: true,
+    }),
+  );
+
+  Sentry.setTag('added-ci-script', addedToCI);
+
+  if (!addedToCI) {
+    clack.log.info("Don't forget! :)");
+  }
+
+  await addSentryCliRc(options.authToken);
+}
 
-    await addSentryCliRc(options.authToken);
-  };
+async function defaultConfigureSourcemapGenerationFlow(): Promise<void> {
+  await abortIfCancelled(
+    clack.select({
+      message: `Verify that your build tool is generating source maps. ${chalk.dim(
+        '(Your build output folder should contain .js.map files after a build)',
+      )}`,
+      options: [{ label: 'I checked. Continue!', value: true }],
+      initialValue: true,
+    }),
+  );
+}

package/src/sourcemaps/tools/tsc.ts

@@ -0,0 +1,39 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack, { select } from '@clack/prompts';
+import chalk from 'chalk';
+import { abortIfCancelled } from '../../utils/clack-utils';
+
+export async function configureTscSourcemapGenerationFlow(): Promise<void> {
+  clack.log.step(
+    `Add the following code to your ${chalk.bold(
+      'tsconfig.json',
+    )} file: ${chalk.dim(
+      '(This ensures that source maps are generated correctly)',
+    )}`,
+  );
+
+  // Intentially logging directly to console here so that the code can be copied/pasted directly
+  // eslint-disable-next-line no-console
+  console.log(codeSnippet);
+
+  await abortIfCancelled(
+    select({
+      message: 'Did you update your config as shown in the snippet above?',
+      options: [{ label: 'Yes, continue!', value: true }],
+      initialValue: true,
+    }),
+  );
+}
+
+const codeSnippet = chalk.gray(`
+{
+  "compilerOptions": {
+    ${chalk.greenBright('"sourceMap": true,')}
+    ${chalk.greenBright('"inlineSources": true,')}
+
+    // Set \`sourceRoot\` to  "/" to strip the build path prefix from
+    // generated source code references. This will improve issue grouping in Sentry.
+    ${chalk.greenBright('"sourceRoot": "/"')}
+  }
+}
+`);

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

@@ -0,0 +1,264 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+import { minVersion, satisfies } from 'semver';
+import {
+  abortIfCancelled,
+  getPackageDotJson,
+  getPackageVersion,
+  installPackage,
+} from '../../utils/clack-utils';
+
+import * as Sentry from '@sentry/node';
+
+const MINIMUM_DEBUG_ID_SDK_VERSION = '7.47.0';
+
+// This array is orderd by the SDKs we want to check for first.
+// The reason is that some SDKs depend on others and some users might
+// have added the dependencies to their package.json. We want to make sure
+// that we actually detect the "top-level" SDK first.
+const SENTRY_SDK_PACKAGE_NAMES = [
+  // SDKs using other framework SDKs need to be checked first
+  '@sentry/gatsby',
+  '@sentry/nextjs',
+  '@sentry/remix',
+  '@sentry/sveltekit',
+
+  // Framework SDKs
+  '@sentry/angular',
+  '@sentry/angular-ivy',
+  '@sentry/ember',
+  '@sentry/react',
+  '@sentry/svelte',
+  '@sentry/vue',
+  '@sentry/serverless',
+
+  // 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.
+ * We distinguish between 4 cases here:
+ *
+ * 1. Users didn't install any SDK yet
+ *    -> We tell them to install an SDK and then continue with the wizard
+ * 2. Users installed an SDK in the range >=7.47.0
+ *    -> All good, no need to do anything!
+ * 3. Users installed an SDK in the range >=7.0.0 <= 7.46.0
+ *    -> We ask if they want to auto-update to the latest version
+ * 4. Users installed an SDK in the range <7.x
+ *    -> 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];
+
+  // Case 1:
+  if (!installedSdkPackage) {
+    return await handleNoSdkInstalled();
+  }
+
+  const { name: installedSdkName, version: installedSdkVersionOrRange } =
+    installedSdkPackage;
+
+  const minInstalledVersion = getMinInstalledVersion(
+    installedSdkVersionOrRange,
+    installedSdkName,
+  );
+
+  if (!minInstalledVersion) {
+    // This is handled in the getMinInstalledVersion function
+    return;
+  }
+
+  const hasDebugIdCompatibleSdkVersion = satisfies(
+    minInstalledVersion,
+    `>=${MINIMUM_DEBUG_ID_SDK_VERSION}`,
+  );
+
+  // Case 2:
+  if (hasDebugIdCompatibleSdkVersion) {
+    Sentry.setTag('initial-sdk-version', '>=7.47.0');
+    return;
+  }
+
+  const hasV7SdkVersion = satisfies(minInstalledVersion, '>=7.0.0');
+
+  clack.log.warn(
+    `${chalk.yellowBright(
+      `It seems like you're using an outdated version (${installedSdkVersionOrRange}) of the ${chalk.bold(
+        installedSdkName,
+      )} SDK.`,
+    )}
+Uploading source maps is easiest with an SDK from version ${chalk.bold(
+      MINIMUM_DEBUG_ID_SDK_VERSION,
+    )} or newer.    
+`,
+  );
+
+  // Case 3:
+  if (hasV7SdkVersion) {
+    await handleAutoUpdateSdk(installedSdkName);
+    return;
+  }
+
+  // Case 4:
+  await handleManuallyUpdateSdk(minInstalledVersion);
+}
+
+async function handleManuallyUpdateSdk(minInstalledVersion: string) {
+  Sentry.setTag(
+    'initial-sdk-version',
+    `${satisfies(minInstalledVersion, '>=6.0.0') ? '6.x' : '<6.0.0'}`,
+  );
+
+  clack.log
+    .info(`When upgrading from a version older than 7.0.0, make sure to follow the migration guide:
+https://github.com/getsentry/sentry-javascript/blob/develop/MIGRATION.md#upgrading-from-6x-to-7x
+`);
+
+  const didUpdate = await abortIfCancelled(
+    clack.select({
+      message: 'Did you update your SDK to the latest version?',
+      options: [
+        {
+          label: 'Yes!',
+          value: true,
+        },
+        {
+          label: "No, I'll do it later...",
+          value: false,
+          hint: chalk.yellow(
+            `Remember to update your SDK to at least ${MINIMUM_DEBUG_ID_SDK_VERSION}.`,
+          ),
+        },
+      ],
+      initialValue: true,
+    }),
+  );
+
+  Sentry.setTag(
+    'resolved-sdk-status',
+    didUpdate ? 'updated-manually' : 'update-later',
+  );
+}
+
+async function handleAutoUpdateSdk(packageName: string) {
+  Sentry.setTag('initial-sdk-version', '>=7.0.0 <7.47.0');
+
+  const shouldUpdate = await abortIfCancelled(
+    clack.select({
+      message:
+        'Do you want to automatically update your SDK to the latest version?',
+      options: [
+        {
+          label: 'Yes!',
+          value: true,
+          hint: chalk.green('Recommended'),
+        },
+        {
+          label: "No, I'll do it later...",
+          value: false,
+          hint: chalk.yellow(
+            `Remember to update your SDK to at least ${MINIMUM_DEBUG_ID_SDK_VERSION}.`,
+          ),
+        },
+      ],
+      initialValue: true,
+    }),
+  );
+
+  if (shouldUpdate) {
+    await installPackage({
+      packageName,
+      alreadyInstalled: true,
+      askBeforeUpdating: false, // we already did this above
+    });
+  }
+
+  Sentry.setTag(
+    'resolved-sdk-status',
+    shouldUpdate ? 'updated-automatically' : 'update-later',
+  );
+}
+
+async function handleNoSdkInstalled(): Promise<void> {
+  Sentry.setTag('initial-sdk-version', 'none');
+
+  clack.log.warn(
+    `${chalk.yellowBright(
+      `It seems like you didn't yet install a Sentry SDK in your project.`,
+    )}
+We recommend setting up the SDK before continuing with the source maps wizard.
+
+${chalk.dim(`Take a look at our docs to get started:
+https://docs.sentry.io/`)}`,
+  );
+
+  const installedSDK = await abortIfCancelled(
+    clack.select({
+      message: 'Did you set up your Sentry SDK?',
+      options: [
+        { label: 'Yes, continue!', value: true },
+        {
+          label: "I'll do it later...",
+          value: false,
+          hint: chalk.yellow(
+            'You need to set up an SDK before you can use Sentry',
+          ),
+        },
+      ],
+      initialValue: true,
+    }),
+  );
+
+  Sentry.setTag(
+    'resolved-sdk-status',
+    installedSDK ? 'installed-manually' : 'install-later',
+  );
+}
+
+function getMinInstalledVersion(
+  installedSdkVersionOrRange: string,
+  installedSdkName: string,
+): string | undefined {
+  try {
+    // If `minVersion` is unable to parse the version it will throw an error
+    // However, it will also return `null` if the parameter is undefined, which
+    // we explicitly checked before but the typing doesn't know that.
+    const minInstalledVersion = minVersion(installedSdkVersionOrRange)?.version;
+    if (minInstalledVersion) {
+      return minInstalledVersion;
+    }
+  } catch {
+    // handling this, along with the `null` case below
+  }
+
+  Sentry.setTag('initial-sdk-version', 'unknown');
+  clack.log.warn(
+    `${chalk.yellow(
+      `Could not parse the version of your installed SDK ("${installedSdkName}": "${installedSdkVersionOrRange}")`,
+    )}
+
+Please make sure that your Sentry SDK is updated to version ${chalk.bold(
+      MINIMUM_DEBUG_ID_SDK_VERSION,
+    )} or newer.
+    `,
+  );
+
+  return undefined;
+}

package/src/sveltekit/sveltekit-wizard.ts

@@ -13,17 +13,14 @@ import {
   installPackage,
   printWelcome,
 } from '../utils/clack-utils';
+import { WizardOptions } from '../utils/types';
 import { createExamplePage } from './sdk-example';
 import { createOrMergeSvelteKitFiles, loadSvelteConfig } from './sdk-setup';
 
 import { setupCLIConfig } from './sentry-cli-setup';
 
-interface SvelteKitWizardOptions {
-  promoCode?: string;
-}
-
 export async function runSvelteKitWizard(
-  options: SvelteKitWizardOptions,
+  options: WizardOptions,
 ): Promise<void> {
   printWelcome({
     wizardName: 'Sentry SvelteKit Wizard',
@@ -35,7 +32,7 @@ export async function runSvelteKitWizard(
   const packageJson = await getPackageDotJson();
   await ensurePackageIsInstalled(packageJson, '@sveltejs/kit', 'Sveltekit');
 
-  const { url: sentryUrl, selfHosted } = await askForSelfHosted();
+  const { url: sentryUrl, selfHosted } = await askForSelfHosted(options.url);
 
   const { projects, apiKeys } = await askForWizardLogin({
     promoCode: options.promoCode,