@sentry/wizard 3.12.0 → 3.14.0

package/src/remix/remix-wizard.ts

@@ -4,7 +4,7 @@ import chalk from 'chalk';
 
 import {
   addSentryCliConfig,
-  confirmContinueEvenThoughNoGitRepo,
+  confirmContinueIfNoOrDirtyGitRepo,
   ensurePackageIsInstalled,
   getOrAskForProjectData,
   getPackageDotJson,
@@ -45,7 +45,7 @@ async function runRemixWizardWithTelemetry(
     telemetryEnabled: options.telemetryEnabled,
   });
 
-  await confirmContinueEvenThoughNoGitRepo();
+  await confirmContinueIfNoOrDirtyGitRepo();
 
   const remixConfig = await loadRemixConfig();
   const packageJson = await getPackageDotJson();
@@ -53,33 +53,28 @@ async function runRemixWizardWithTelemetry(
   // We expect `@remix-run/dev` to be installed for every Remix project
   await ensurePackageIsInstalled(packageJson, '@remix-run/dev', 'Remix');
 
-  const { selectedProject, authToken } = await getOrAskForProjectData(
-    options,
-    'javascript-remix',
-  );
+  const { selectedProject, authToken, sentryUrl } =
+    await getOrAskForProjectData(options, 'javascript-remix');
 
-  await traceStep('Install Sentry SDK', () =>
-    installPackage({
-      packageName: '@sentry/remix',
-      alreadyInstalled: hasPackageInstalled('@sentry/remix', packageJson),
-    }),
-  );
+  await installPackage({
+    packageName: '@sentry/remix',
+    alreadyInstalled: hasPackageInstalled('@sentry/remix', packageJson),
+  });
 
   const dsn = selectedProject.keys[0].dsn.public;
 
   const isTS = isUsingTypeScript();
   const isV2 = isRemixV2(remixConfig, packageJson);
 
-  await addSentryCliConfig(
-    authToken,
-    sourceMapsCliSetupConfig,
-    selectedProject.organization.slug,
-    selectedProject.name,
-  );
+  await addSentryCliConfig(authToken, sourceMapsCliSetupConfig);
 
   await traceStep('Update build script for sourcemap uploads', async () => {
     try {
-      await updateBuildScript();
+      await updateBuildScript({
+        org: selectedProject.organization.slug,
+        project: selectedProject.name,
+        url: sentryUrl,
+      });
     } catch (e) {
       clack.log
         .warn(`Could not update build script to generate and upload sourcemaps.
@@ -110,7 +105,7 @@ async function runRemixWizardWithTelemetry(
 
   await traceStep('Initialize Sentry on server entry', async () => {
     try {
-      await initializeSentryOnEntryServer(dsn, isTS, isV2);
+      await initializeSentryOnEntryServer(dsn, isV2, isTS);
     } catch (e) {
       clack.log.warn(`Could not initialize Sentry on server entry.
   Please do it manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/`);

package/src/remix/sdk-setup.ts

@@ -12,7 +12,7 @@ import * as url from 'url';
 // @ts-expect-error - clack is ESM and TS complains about that. It works though
 import clack from '@clack/prompts';
 import chalk from 'chalk';
-import { parse } from 'semver';
+import { gte, minVersion } from 'semver';
 
 // @ts-expect-error - magicast is ESM and TS complains about that. It works though
 import { builders, generateCode, loadFile, writeFile } from 'magicast';
@@ -97,8 +97,17 @@ export function isRemixV2(
   packageJson: PackageDotJson,
 ): boolean {
   const remixVersion = getPackageVersion('@remix-run/react', packageJson);
-  const remixVersionMajor = remixVersion && parse(remixVersion)?.major;
-  const isV2Remix = remixVersionMajor && remixVersionMajor >= 2;
+  if (!remixVersion) {
+    return false;
+  }
+
+  const minVer = minVersion(remixVersion);
+
+  if (!minVer) {
+    return false;
+  }
+
+  const isV2Remix = gte(minVer, '2.0.0');
 
   return isV2Remix || remixConfig?.future?.v2_errorBoundary || false;
 }
@@ -151,7 +160,11 @@ export async function instrumentRootRoute(
   /* eslint-enable @typescript-eslint/no-unsafe-member-access */
 }
 
-export async function updateBuildScript(): Promise<void> {
+export async function updateBuildScript(args: {
+  org: string;
+  project: string;
+  url?: string;
+}): Promise<void> {
   /* eslint-disable @typescript-eslint/no-unsafe-member-access */
   // Add sourcemaps option to build script
   const packageJsonPath = path.join(process.cwd(), 'package.json');
@@ -166,7 +179,9 @@ export async function updateBuildScript(): Promise<void> {
 
   if (!packageJson.scripts.build) {
     packageJson.scripts.build =
-      'remix build --sourcemap && sentry-upload-sourcemaps';
+      `remix build --sourcemap && sentry-upload-sourcemaps --org ${args.org} --project ${args.project}` +
+      (args.url ? ` --url ${args.url}` : '');
+
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   } else if (packageJson.scripts.build.includes('remix build')) {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call

package/src/sourcemaps/sourcemaps-wizard.ts

@@ -6,7 +6,7 @@ import * as Sentry from '@sentry/node';
 import {
   abort,
   abortIfCancelled,
-  confirmContinueEvenThoughNoGitRepo,
+  confirmContinueIfNoOrDirtyGitRepo,
   SENTRY_DOT_ENV_FILE,
   printWelcome,
   SENTRY_CLI_RC_FILE,
@@ -70,7 +70,7 @@ You can turn this off by running the wizard with the '--disable-telemetry' flag.
     return;
   }
 
-  await traceStep('detect-git', confirmContinueEvenThoughNoGitRepo);
+  await confirmContinueIfNoOrDirtyGitRepo();
 
   await traceStep('check-sdk-version', ensureMinimumSdkVersionIsInstalled);
 

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

@@ -1,5 +1,5 @@
 // @ts-ignore - clack is ESM and TS complains about that. It works though
-import clack from '@clack/prompts';
+import * as clack from '@clack/prompts';
 import chalk from 'chalk';
 import * as Sentry from '@sentry/node';
 import * as path from 'path';
@@ -14,7 +14,7 @@ import {
 import { SourceMapUploadToolConfigurationOptions } from './types';
 import { hasPackageInstalled, PackageDotJson } from '../../utils/package-json';
 import { traceStep } from '../../telemetry';
-import { detectPackageManger } from '../../utils/package-manager';
+import { detectPackageManger, NPM } from '../../utils/package-manager';
 
 const SENTRY_NPM_SCRIPT_NAME = 'sentry:sourcemaps';
 
@@ -194,7 +194,7 @@ async function askShouldAddToBuildCommand(): Promise<boolean> {
  *
  * @param packageDotJson The package.json which will be modified.
  */
-async function addSentryCommandToBuildCommand(
+export async function addSentryCommandToBuildCommand(
   packageDotJson: PackageDotJson,
 ): Promise<void> {
   // This usually shouldn't happen because earlier we added the
@@ -205,8 +205,7 @@ async function addSentryCommandToBuildCommand(
     (s) => s !== SENTRY_NPM_SCRIPT_NAME,
   );
 
-  const packageManager = detectPackageManger();
-  const packageManagerName = packageManager?.name ?? 'npm';
+  const packageManager = detectPackageManger() ?? NPM;
 
   // Heuristic to pre-select the build command:
   // Often, 'build' is the prod build command, so we favour it.
@@ -221,7 +220,7 @@ async function addSentryCommandToBuildCommand(
     (await abortIfCancelled(
       clack.confirm({
         message: `Is ${chalk.cyan(
-          `${packageManagerName} run ${buildCommand}`,
+          `${packageManager.runScriptCommand} ${buildCommand}`,
         )} your production build command?`,
       }),
     ));
@@ -229,7 +228,7 @@ async function addSentryCommandToBuildCommand(
   if (allNpmScripts.length && (!buildCommand || !isProdBuildCommand)) {
     buildCommand = await abortIfCancelled(
       clack.select({
-        message: `Which ${packageManagerName} command in your ${chalk.cyan(
+        message: `Which ${packageManager.name} command in your ${chalk.cyan(
           'package.json',
         )} builds your application for production?`,
         options: allNpmScripts
@@ -252,10 +251,18 @@ Please add it manually to your prod build command.`,
     return;
   }
 
+  const oldCommand = packageDotJson.scripts[buildCommand];
+  if (!oldCommand) {
+    // very unlikely to happen but nevertheless
+    clack.log.warn(
+      `\`${buildCommand}\` doesn't seem to be part of your package.json scripts`,
+    );
+    return;
+  }
+
   packageDotJson.scripts[
     buildCommand
-    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-  ] = `${packageDotJson.scripts[buildCommand]} && ${packageManager} run ${SENTRY_NPM_SCRIPT_NAME}`;
+  ] = `${oldCommand} && ${packageManager.runScriptCommand} ${SENTRY_NPM_SCRIPT_NAME}`;
 
   await fs.promises.writeFile(
     path.join(process.cwd(), 'package.json'),

package/src/sourcemaps/tools/tsc.ts

@@ -1,39 +1,144 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+import * as recast from 'recast';
+
+import * as Sentry from '@sentry/node';
+
 // @ts-ignore - clack is ESM and TS complains about that. It works though
-import clack, { select } from '@clack/prompts';
+import * as clack 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);
+import {
+  askForToolConfigPath,
+  createNewConfigFile,
+  makeCodeSnippet,
+  showCopyPasteInstructions,
+} from '../../utils/clack-utils';
+import {
+  findFile,
+  getOrSetObjectProperty,
+  parseJsonC,
+  printJsonC,
+  setOrUpdateObjectProperty,
+} from '../../utils/ast-utils';
+import { debug } from '../../utils/debug';
 
-  await abortIfCancelled(
-    select({
-      message: 'Did you update your config as shown in the snippet above?',
-      options: [{ label: 'Yes, continue!', value: true }],
-      initialValue: true,
-    }),
-  );
-}
+const b = recast.types.builders;
 
-const codeSnippet = chalk.gray(`
-{
+const getCodeSnippet = (colors: boolean) =>
+  makeCodeSnippet(colors, (unchanged, plus, _) =>
+    unchanged(
+      `{
   "compilerOptions": {
-    ${chalk.greenBright('"sourceMap": true,')}
-    ${chalk.greenBright('"inlineSources": true,')}
+    ${plus('"sourceMap": true,')}
+    ${plus('"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": "/"')}
+    ${plus('"sourceRoot": "/"')}
+  }
+}`,
+    ),
+  );
+
+export async function configureTscSourcemapGenerationFlow(): Promise<void> {
+  const tsConfigPath =
+    findFile(path.join(process.cwd(), 'tsconfig'), ['.json']) ??
+    (await askForToolConfigPath('TypeScript', 'tsconfig.json'));
+
+  let successfullyAdded = false;
+  if (tsConfigPath) {
+    successfullyAdded = await enableSourcemaps(tsConfigPath);
+  } else {
+    successfullyAdded = await createNewConfigFile(
+      path.join(process.cwd(), 'tsconfig.json'),
+      getCodeSnippet(false),
+    );
+    Sentry.setTag('created-new-config', successfullyAdded ? 'success' : 'fail');
+  }
+
+  if (successfullyAdded) {
+    Sentry.setTag('ast-mod', 'success');
+    clack.log.info(
+      `We recommend checking the ${
+        tsConfigPath ? 'modified' : 'added'
+      } file after the wizard finished to ensure it works with your build setup.`,
+    );
+  } else {
+    Sentry.setTag('ast-mod', 'fail');
+    await showCopyPasteInstructions(
+      'tsconfig.json',
+      getCodeSnippet(true),
+      'This ensures that source maps are generated correctly',
+    );
+  }
+}
+
+/**
+ * Modifies tsconfig.json (@param tsConfigPath) to enable source maps generation.
+ *
+ * Exported only for testing
+ */
+export async function enableSourcemaps(tsConfigPath: string): Promise<boolean> {
+  try {
+    const tsConfig = await fs.promises.readFile(tsConfigPath, 'utf-8');
+
+    const { ast, jsonObject } = parseJsonC(tsConfig.toString());
+
+    if (!jsonObject || !ast) {
+      // this will only happen if the input file isn't valid JSON-C
+      Sentry.setTag('ast-mod-fail-reason', 'original-file-invalid');
+      return false;
+    }
+
+    const compilerOptionsProp = getOrSetObjectProperty(
+      jsonObject,
+      'compilerOptions',
+      b.objectExpression([]),
+    );
+
+    const compilerOptionsObj = compilerOptionsProp.value;
+
+    if (!compilerOptionsObj || compilerOptionsObj.type !== 'ObjectExpression') {
+      // a valid compilerOptions prop should always be an object expression
+      Sentry.setTag('ast-mod-fail-reason', 'original-file-invalid');
+      return false;
+    }
+
+    setOrUpdateObjectProperty(
+      compilerOptionsObj,
+      'sourceMap',
+      b.booleanLiteral(true),
+    );
+
+    setOrUpdateObjectProperty(
+      compilerOptionsObj,
+      'inlineSources',
+      b.booleanLiteral(true),
+    );
+
+    setOrUpdateObjectProperty(
+      compilerOptionsObj,
+      'sourceRoot',
+      b.stringLiteral('/'),
+      'Set `sourceRoot` to  "/" to strip the build path prefix\nfrom generated source code references.\nThis improves issue grouping in Sentry.',
+    );
+
+    const code = printJsonC(ast);
+
+    await fs.promises.writeFile(tsConfigPath, code);
+
+    clack.log.success(
+      `Enabled source maps generation in ${chalk.cyan(
+        path.basename(tsConfigPath || 'tsconfig.json'),
+      )}.`,
+    );
+
+    return true;
+  } catch (e) {
+    debug(e);
+    Sentry.setTag('ast-mod-fail-reason', 'insertion-fail');
+    return false;
   }
 }
-`);

package/src/sourcemaps/tools/vite.ts

@@ -19,6 +19,7 @@ import {
   createNewConfigFile,
   getPackageDotJson,
   installPackage,
+  makeCodeSnippet,
   showCopyPasteInstructions,
 } from '../../utils/clack-utils';
 import { hasPackageInstalled } from '../../utils/package-json';
@@ -36,52 +37,27 @@ import { debug } from '../../utils/debug';
 const getViteConfigSnippet = (
   options: SourceMapUploadToolConfigurationOptions,
   colors: boolean,
-) => {
-  const rawImportStmt =
-    'import { sentryVitePlugin } from "@sentry/vite-plugin";';
-  const rawGenerateSourceMapsOption =
-    'sourcemap: true, // Source map generation must be turned on';
-  const rawSentryVitePluginFunction = `sentryVitePlugin({
-      authToken: process.env.SENTRY_AUTH_TOKEN,
-      org: "${options.orgSlug}",
-      project: "${options.projectSlug}",${
-    options.selfHosted ? `\n      url: "${options.url}",` : ''
-  }
-    }),`;
-
-  const importStmt = colors ? chalk.greenBright(rawImportStmt) : rawImportStmt;
-  const generateSourceMapsOption = colors
-    ? chalk.greenBright(rawGenerateSourceMapsOption)
-    : rawGenerateSourceMapsOption;
-  const sentryVitePluginFunction = colors
-    ? chalk.greenBright(rawSentryVitePluginFunction)
-    : rawSentryVitePluginFunction;
-
-  const code = getViteConfigContent(
-    importStmt,
-    generateSourceMapsOption,
-    sentryVitePluginFunction,
-  );
-  return colors ? chalk.gray(code) : code;
-};
-
-const getViteConfigContent = (
-  importStmt: string,
-  generateSourceMapsOption: string,
-  sentryVitePluginFunction: string,
-) => `import { defineConfig } from "vite";
-${importStmt}
+) =>
+  makeCodeSnippet(colors, (unchanged, plus, _) =>
+    unchanged(`import { defineConfig } from "vite";
+${plus('import { sentryVitePlugin } from "@sentry/vite-plugin";')}
 
 export default defineConfig({
   build: {
-    ${generateSourceMapsOption}
+    ${plus('sourcemap: true, // Source map generation must be turned on')}
   },
   plugins: [
     // Put the Sentry vite plugin after all other plugins
-    ${sentryVitePluginFunction}
+    ${plus(`sentryVitePlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: "${options.orgSlug}",
+      project: "${options.projectSlug}",${
+      options.selfHosted ? `\n      url: "${options.url}",` : ''
+    }
+    }),`)}
   ],
-});
-`;
+});`),
+  );
 
 export const configureVitePlugin: SourceMapUploadToolConfigurationFunction =
   async (options) => {

package/src/sourcemaps/tools/webpack.ts

@@ -18,6 +18,7 @@ import {
   createNewConfigFile,
   getPackageDotJson,
   installPackage,
+  makeCodeSnippet,
   showCopyPasteInstructions,
 } from '../../utils/clack-utils';
 import { hasPackageInstalled } from '../../utils/package-json';
@@ -33,51 +34,27 @@ import { debug } from '../../utils/debug';
 const getCodeSnippet = (
   options: SourceMapUploadToolConfigurationOptions,
   colors: boolean,
-) => {
-  const rawImportStmt =
-    'const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");';
-  const rawGenerateSourceMapsOption =
-    'devtool: "source-map", // Source map generation must be turned on';
-  const rawSentryWebpackPluginFunction = `sentryWebpackPlugin({
-      authToken: process.env.SENTRY_AUTH_TOKEN,
-      org: "${options.orgSlug}",
-      project: "${options.projectSlug}",${
-    options.selfHosted ? `\n      url: "${options.url}",` : ''
-  }
-    })`;
-
-  const importStmt = colors ? chalk.greenBright(rawImportStmt) : rawImportStmt;
-  const generateSourceMapsOption = colors
-    ? chalk.greenBright(rawGenerateSourceMapsOption)
-    : rawGenerateSourceMapsOption;
-  const sentryWebpackPluginFunction = colors
-    ? chalk.greenBright(rawSentryWebpackPluginFunction)
-    : rawSentryWebpackPluginFunction;
-
-  const code = getWebpackConfigContent(
-    importStmt,
-    generateSourceMapsOption,
-    sentryWebpackPluginFunction,
-  );
-
-  return colors ? chalk.gray(code) : code;
-};
-
-const getWebpackConfigContent = (
-  importStmt: string,
-  generateSourceMapsOption: string,
-  sentryWebpackPluginFunction: string,
-) => `${importStmt}
+) =>
+  makeCodeSnippet(colors, (unchanged, plus) =>
+    unchanged(`${plus(
+      'const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");',
+    )}
 
 module.exports = {
   // ... other options
-  ${generateSourceMapsOption},
+  ${plus('devtool: "source-map", // Source map generation must be turned on')}
   plugins: [
     // Put the Sentry Webpack plugin after all other plugins
-    ${sentryWebpackPluginFunction},
+    ${plus(`sentryWebpackPlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: "${options.orgSlug}",
+      project: "${options.projectSlug}",${
+      options.selfHosted ? `\n      url: "${options.url}",` : ''
+    }
+    }),`)}
   ],
-}
-`;
+}`),
+  );
 
 export const configureWebPackPlugin: SourceMapUploadToolConfigurationFunction =
   async (options) => {