@sentry/wizard 3.12.0 → 3.13.0

package/src/remix/remix-wizard.ts

@@ -53,10 +53,8 @@ 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({
@@ -70,16 +68,15 @@ async function runRemixWizardWithTelemetry(
   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.

package/src/remix/sdk-setup.ts

@@ -151,7 +151,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 +170,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/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) => {

package/src/sveltekit/sdk-setup.ts

@@ -4,6 +4,8 @@ import * as path from 'path';
 import * as url from 'url';
 import chalk from 'chalk';
 
+import * as Sentry from '@sentry/node';
+
 // @ts-ignore - clack is ESM and TS complains about that. It works though
 import clack from '@clack/prompts';
 // @ts-ignore - magicast is ESM and TS complains about that. It works though
@@ -20,6 +22,7 @@ import { findFile, hasSentryContent } from '../utils/ast-utils';
 import * as recast from 'recast';
 import x = recast.types;
 import t = x.namedTypes;
+import { traceStep } from '../telemetry';
 
 const SVELTE_CONFIG_FILE = 'svelte.config.js';
 
@@ -59,19 +62,25 @@ export async function createOrMergeSvelteKitFiles(
 
   const { dsn } = projectInfo;
 
+  Sentry.setTag(
+    'client-hooks-file-strategy',
+    originalClientHooksFile ? 'merge' : 'create',
+  );
   if (!originalClientHooksFile) {
     clack.log.info('No client hooks file found, creating a new one.');
     await createNewHooksFile(`${clientHooksPath}.${fileEnding}`, 'client', dsn);
+  } else {
+    await mergeHooksFile(originalClientHooksFile, 'client', dsn);
   }
+
+  Sentry.setTag(
+    'server-hooks-file-strategy',
+    originalServerHooksFile ? 'merge' : 'create',
+  );
   if (!originalServerHooksFile) {
     clack.log.info('No server hooks file found, creating a new one.');
     await createNewHooksFile(`${serverHooksPath}.${fileEnding}`, 'server', dsn);
-  }
-
-  if (originalClientHooksFile) {
-    await mergeHooksFile(originalClientHooksFile, 'client', dsn);
-  }
-  if (originalServerHooksFile) {
+  } else {
     await mergeHooksFile(originalServerHooksFile, 'server', dsn);
   }
 
@@ -124,6 +133,7 @@ async function createNewHooksFile(
   await fs.promises.writeFile(hooksFileDest, filledTemplate);
 
   clack.log.success(`Created ${hooksFileDest}`);
+  Sentry.setTag(`created-${hooktype}-hooks`, 'success');
 }
 
 /**
@@ -143,6 +153,9 @@ async function mergeHooksFile(
   dsn: string,
 ): Promise<void> {
   const originalHooksMod = await loadFile(hooksFile);
+
+  const file: 'server-hooks' | 'client-hooks' = `${hookType}-hooks`;
+
   if (hasSentryContent(originalHooksMod.$ast as t.Program)) {
     // We don't want to mess with files that already have Sentry content.
     // Let's just bail out at this point.
@@ -152,32 +165,59 @@ async function mergeHooksFile(
       )} already contains Sentry code.
 Skipping adding Sentry functionality to.`,
     );
+    Sentry.setTag(`modified-${file}`, 'fail');
+    Sentry.setTag(`${file}-fail-reason`, 'has-sentry-content');
     return;
   }
 
-  originalHooksMod.imports.$add({
-    from: '@sentry/sveltekit',
-    imported: '*',
-    local: 'Sentry',
-  });
+  await modifyAndRecordFail(
+    () =>
+      originalHooksMod.imports.$add({
+        from: '@sentry/sveltekit',
+        imported: '*',
+        local: 'Sentry',
+      }),
+    'import-injection',
+    file,
+  );
 
-  if (hookType === 'client') {
-    insertClientInitCall(dsn, originalHooksMod);
-  } else {
-    insertServerInitCall(dsn, originalHooksMod);
-  }
+  await modifyAndRecordFail(
+    () => {
+      if (hookType === 'client') {
+        insertClientInitCall(dsn, originalHooksMod);
+      } else {
+        insertServerInitCall(dsn, originalHooksMod);
+      }
+    },
+    'init-call-injection',
+    file,
+  );
 
-  wrapHandleError(originalHooksMod);
+  await modifyAndRecordFail(
+    () => wrapHandleError(originalHooksMod),
+    'wrap-handle-error',
+    file,
+  );
 
   if (hookType === 'server') {
-    wrapHandle(originalHooksMod);
+    await modifyAndRecordFail(
+      () => wrapHandle(originalHooksMod),
+      'wrap-handle',
+      'server-hooks',
+    );
   }
 
-  const modifiedCode = originalHooksMod.generate().code;
-
-  await fs.promises.writeFile(hooksFile, modifiedCode);
+  await modifyAndRecordFail(
+    async () => {
+      const modifiedCode = originalHooksMod.generate().code;
+      await fs.promises.writeFile(hooksFile, modifiedCode);
+    },
+    'write-file',
+    file,
+  );
 
   clack.log.success(`Added Sentry code to ${hooksFile}`);
+  Sentry.setTag(`modified-${hookType}-hooks`, 'success');
 }
 
 function insertClientInitCall(
@@ -410,32 +450,45 @@ async function modifyViteConfig(
         )} already contains Sentry code.
 Skipping adding Sentry functionality to.`,
       );
+      Sentry.setTag(`modified-vite-cfg`, 'fail');
+      Sentry.setTag(`vite-cfg-fail-reason`, 'has-sentry-content');
       return;
     }
 
-    addVitePlugin(viteModule, {
-      imported: 'sentrySvelteKit',
-      from: '@sentry/sveltekit',
-      constructor: 'sentrySvelteKit',
-      options: {
-        sourceMapsUploadOptions: {
-          org,
-          project,
-          ...(selfHosted && { url }),
-        },
-      },
-      index: 0,
-    });
-
-    const code = generateCode(viteModule.$ast).code;
+    await modifyAndRecordFail(
+      () =>
+        addVitePlugin(viteModule, {
+          imported: 'sentrySvelteKit',
+          from: '@sentry/sveltekit',
+          constructor: 'sentrySvelteKit',
+          options: {
+            sourceMapsUploadOptions: {
+              org,
+              project,
+              ...(selfHosted && { url }),
+            },
+          },
+          index: 0,
+        }),
+      'add-vite-plugin',
+      'vite-cfg',
+    );
 
-    await fs.promises.writeFile(viteConfigPath, code);
+    await modifyAndRecordFail(
+      async () => {
+        const code = generateCode(viteModule.$ast).code;
+        await fs.promises.writeFile(viteConfigPath, code);
+      },
+      'write-file',
+      'vite-cfg',
+    );
   } catch (e) {
     debug(e);
     await showFallbackViteCopyPasteSnippet(
       viteConfigPath,
       getViteConfigCodeSnippet(org, project, selfHosted, url),
     );
+    Sentry.captureException('Sveltekit Vite Config Modification Fail');
   }
 }
 
@@ -512,3 +565,22 @@ function getInitCallInsertionIndex(originalHooksModAST: Program): number {
     : 0;
   return initCallInsertionIndex;
 }
+
+/**
+ * Applies the @param modifyCallback and records Sentry tags if the call failed.
+ * In case of a failure, a tag is set with @param reason as a fail reason
+ * and the error is rethrown.
+ */
+async function modifyAndRecordFail<T>(
+  modifyCallback: () => T | Promise<T>,
+  reason: string,
+  fileType: 'server-hooks' | 'client-hooks' | 'vite-cfg',
+): Promise<void> {
+  try {
+    await traceStep(`${fileType}-${reason}`, modifyCallback);
+  } catch (e) {
+    Sentry.setTag(`modified-${fileType}`, 'fail');
+    Sentry.setTag(`${fileType}-mod-fail-reason`, reason);
+    throw e;
+  }
+}