@sentry/wizard 3.3.1 → 3.4.0

package/src/sourcemaps/sourcemaps-wizard.ts

@@ -16,14 +16,21 @@ import { SourceMapUploadToolConfigurationOptions } from './tools/types';
 import { configureVitePlugin } from './tools/vite';
 import { configureSentryCLI } from './tools/sentry-cli';
 import { configureWebPackPlugin } from './tools/webpack';
+import { configureTscSourcemapGenerationFlow } from './tools/tsc';
+import { configureRollupPlugin } from './tools/rollup';
+import { configureEsbuildPlugin } from './tools/esbuild';
 
 interface SourceMapsWizardOptions {
   promoCode?: string;
 }
 
-type SupportedBundlers = 'webpack' | 'vite' | 'rollup' | 'esbuild';
-type SupportedTools = 'sentry-cli';
-type SupportedBundlersTools = SupportedBundlers | SupportedTools;
+type SupportedTools =
+  | 'webpack'
+  | 'vite'
+  | 'rollup'
+  | 'esbuild'
+  | 'tsc'
+  | 'sentry-cli';
 
 export async function runSourcemapsWizard(
   options: SourceMapsWizardOptions,
@@ -59,7 +66,7 @@ export async function runSourcemapsWizard(
   });
 
   clack.log.step(
-    'Add the Sentry auth token as an environment variable to your CI setup:',
+    '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
@@ -103,29 +110,29 @@ SENTRY_AUTH_TOKEN=${apiKeys.token}
 
    ${chalk.cyan(`Validate your setup with the following Steps:
 
-   1. Build your application in ${chalk.bold('production mode')}
+   1. Build your application in ${chalk.bold('production mode')}.
       ${chalk.gray(
-        `${arrow} You should see source map upload logs in your console when building`,
+        `${arrow} You should see source map upload logs in your console.`,
       )}
-   2. Run your application and throw a test error
-      ${chalk.gray(`${arrow} You should see the error in Sentry`)}
-   3. Open the error in Sentry and verify it's source-mapped
+   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} If your error is source-mapped, the stack trace should show your original source code`,
+        `${arrow} The stack trace should show your original source code.`,
       )}
    `)}
    ${chalk.dim(
-     `If you encounter any issues, follow our Troubleshooting Guide:
+     `If you encounter any issues, please refer to the Troubleshooting Guide:
    https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js
 
-   If the guide didn't help or you encountered a bug, let us know:
+   If the guide doesn't help or you encounter a bug, please let us know:
    https://github.com/getsentry/sentry-javascript/issues`,
    )}
 `);
 }
 
-async function askForUsedBundlerTool(): Promise<SupportedBundlersTools> {
-  const selectedTool: SupportedBundlersTools | symbol = await abortIfCancelled(
+async function askForUsedBundlerTool(): Promise<SupportedTools> {
+  const selectedTool: SupportedTools | symbol = await abortIfCancelled(
     clack.select({
       message: 'Which bundler or build tool are you using?',
       options: [
@@ -139,17 +146,21 @@ async function askForUsedBundlerTool(): Promise<SupportedBundlersTools> {
           value: 'vite',
           hint: 'Configure source maps upload using Vite',
         },
-        // TODO: Implement rollup and esbuild flows
-        // {
-        //   label: 'esbuild',
-        //   value: 'esbuild',
-        //   hint: 'Configure source maps upload using esbuild',
-        // },
-        // {
-        //   label: 'Rollup',
-        //   value: 'rollup',
-        //   hint: 'Configure source maps upload using Rollup',
-        // },
+        {
+          label: 'esbuild',
+          value: 'esbuild',
+          hint: 'Configure source maps upload using esbuild',
+        },
+        {
+          label: 'Rollup',
+          value: 'rollup',
+          hint: 'Configure source maps upload using Rollup',
+        },
+        {
+          label: 'tsc',
+          value: 'tsc',
+          hint: 'Configure source maps when using tsc as build tool',
+        },
         {
           label: 'None of the above',
           value: 'sentry-cli',
@@ -163,17 +174,25 @@ async function askForUsedBundlerTool(): Promise<SupportedBundlersTools> {
 }
 
 async function startToolSetupFlow(
-  selctedTool: SupportedBundlersTools,
+  selctedTool: SupportedTools,
   options: SourceMapUploadToolConfigurationOptions,
 ): Promise<void> {
   switch (selctedTool) {
+    case 'webpack':
+      await configureWebPackPlugin(options);
+      break;
     case 'vite':
       await configureVitePlugin(options);
       break;
-    case 'webpack':
-      await configureWebPackPlugin(options);
+    case 'esbuild':
+      await configureEsbuildPlugin(options);
+      break;
+    case 'rollup':
+      await configureRollupPlugin(options);
+      break;
+    case 'tsc':
+      await configureSentryCLI(options, configureTscSourcemapGenerationFlow);
       break;
-    // TODO: implement other bundlers
     default:
       await configureSentryCLI(options);
       break;

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,121 @@ 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`,
       }),
     );
 
-    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/utils/clack-utils.ts

@@ -92,7 +92,7 @@ export function printWelcome(options: {
 
   let welcomeText =
     options.message ||
-    'This Wizard will help you to set up Sentry for your application.\nThank you for using Sentry :)';
+    'This Wizard will help you set up Sentry for your application.\nThank you for using Sentry :)';
 
   if (options.promoCode) {
     welcomeText += `\n\nUsing promo-code: ${options.promoCode}`;
@@ -190,7 +190,7 @@ export async function askForWizardLogin(options: {
   const loginSpinner = clack.spinner();
 
   loginSpinner.start(
-    'Waiting for you to click the link above 👆. Take your time.',
+    "Waiting for you to log in using the link above. Once you're logged in, return to this wizard.",
   );
 
   const data = await new Promise<WizardProjectData>((resolve) => {
@@ -413,7 +413,7 @@ export async function addSentryCliRc(authToken: string): Promise<void> {
     }
   }
 
-  await addAuthTokenFileToGitIgnore('.sentyclirc');
+  await addAuthTokenFileToGitIgnore('.sentryclirc');
 }
 
 export async function addDotEnvSentryBuildPluginFile(