@sentry/wizard 3.11.0 → 3.12.0

package/src/sourcemaps/tools/vite.ts

@@ -15,8 +15,11 @@ import chalk from 'chalk';
 import {
   abortIfCancelled,
   addDotEnvSentryBuildPluginFile,
+  askForToolConfigPath,
+  createNewConfigFile,
   getPackageDotJson,
   installPackage,
+  showCopyPasteInstructions,
 } from '../../utils/clack-utils';
 import { hasPackageInstalled } from '../../utils/package-json';
 
@@ -91,58 +94,43 @@ export const configureVitePlugin: SourceMapUploadToolConfigurationFunction =
     });
 
     const viteConfigPath =
-      findFile(path.resolve(process.cwd(), 'vite.config')) ||
-      (await askForViteConfigPath());
+      findFile(path.resolve(process.cwd(), 'vite.config')) ??
+      (await askForToolConfigPath('Vite', 'vite.config.js'));
 
     let successfullyAdded = false;
     if (viteConfigPath) {
       successfullyAdded = await addVitePluginToConfig(viteConfigPath, options);
     } else {
-      successfullyAdded = await createNewViteConfig(options);
+      successfullyAdded = await createNewConfigFile(
+        path.join(process.cwd(), 'vite.config.js'),
+        getViteConfigSnippet(options, false),
+        'More information about vite configs: https://vitejs.dev/config/',
+      );
+      Sentry.setTag(
+        'created-new-config',
+        successfullyAdded ? 'success' : 'fail',
+      );
     }
 
     if (successfullyAdded) {
+      clack.log.info(
+        `We recommend checking the ${
+          viteConfigPath ? 'modified' : 'added'
+        } file after the wizard finished to ensure it works with your build setup.`,
+      );
+
       Sentry.setTag('ast-mod', 'success');
     } else {
       Sentry.setTag('ast-mod', 'fail');
       await showCopyPasteInstructions(
         path.basename(viteConfigPath || 'vite.config.js'),
-        options,
+        getViteConfigSnippet(options, true),
       );
     }
 
     await addDotEnvSentryBuildPluginFile(options.authToken);
   };
 
-async function createNewViteConfig(
-  options: SourceMapUploadToolConfigurationOptions,
-): Promise<boolean> {
-  try {
-    await fs.promises.writeFile(
-      'vite.config.js',
-      getViteConfigSnippet(options, false),
-    );
-    Sentry.setTag('created-new-config', 'success');
-    return true;
-  } catch (e) {
-    debug(e);
-    Sentry.setTag('created-new-config', 'fail');
-    clack.log.warn(
-      `Could not create a new ${chalk.cyan(
-        'vite.config.js',
-      )} file. Please create one manually and follow the instructions below.`,
-    );
-
-    clack.log.info(
-      chalk.gray(
-        'More information about vite configs: https://vitejs.dev/config/',
-      ),
-    );
-
-    return false;
-  }
-}
-
 export async function addVitePluginToConfig(
   viteConfigPath: string,
   options: SourceMapUploadToolConfigurationOptions,
@@ -156,7 +144,7 @@ export async function addVitePluginToConfig(
 
     const mod = parseModule(viteConfigContent);
 
-    if (hasSentryContent(mod)) {
+    if (hasSentryContent(mod.$ast as t.Program)) {
       const shouldContinue = await abortIfCancelled(
         clack.select({
           message: `${prettyViteConfigFilename} already contains Sentry-related code. Should the wizard modify it anyway?`,
@@ -215,60 +203,6 @@ export async function addVitePluginToConfig(
   }
 }
 
-async function showCopyPasteInstructions(
-  viteConfigFilename: string,
-  options: SourceMapUploadToolConfigurationOptions,
-) {
-  clack.log.step(
-    `Add the following code to your ${chalk.cyan(viteConfigFilename)} file:`,
-  );
-
-  // Intentionally logging directly to console here so that the code can be copied/pasted directly
-  // eslint-disable-next-line no-console
-  console.log(`\n${getViteConfigSnippet(options, true)}`);
-
-  await abortIfCancelled(
-    clack.select({
-      message: 'Did you copy the snippet above?',
-      options: [{ label: 'Yes, continue!', value: true }],
-      initialValue: true,
-    }),
-  );
-}
-
-async function askForViteConfigPath(): Promise<string | undefined> {
-  const hasViteConfig = await abortIfCancelled(
-    clack.confirm({
-      message: `Do you have a vite config file (e.g. ${chalk.cyan(
-        'vite.config.js',
-      )}?`,
-      initialValue: true,
-    }),
-  );
-
-  if (!hasViteConfig) {
-    return undefined;
-  }
-
-  return await abortIfCancelled(
-    clack.text({
-      message: 'Please enter the path to your vite config file:',
-      placeholder: `.${path.sep}vite.config.js`,
-      validate: (value) => {
-        if (!value) {
-          return 'Please enter a path.';
-        }
-
-        try {
-          fs.accessSync(value);
-        } catch {
-          return 'Could not access the file at this path.';
-        }
-      },
-    }),
-  );
-}
-
 function enableSourcemapGeneration(program: t.Program): boolean {
   const configObj = getViteConfigObject(program);
 

package/src/sourcemaps/tools/webpack.ts

@@ -1,11 +1,24 @@
+import * as path from 'path';
+import * as fs from 'fs';
+
 // @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 * as recast from 'recast';
+import x = recast.types;
+import t = x.namedTypes;
+
+import * as Sentry from '@sentry/node';
+
 import {
   abortIfCancelled,
   addDotEnvSentryBuildPluginFile,
+  askForToolConfigPath,
+  createNewConfigFile,
   getPackageDotJson,
   installPackage,
+  showCopyPasteInstructions,
 } from '../../utils/clack-utils';
 import { hasPackageInstalled } from '../../utils/package-json';
 
@@ -14,28 +27,57 @@ import {
   SourceMapUploadToolConfigurationOptions,
 } from './types';
 
-const getCodeSnippet = (options: SourceMapUploadToolConfigurationOptions) =>
-  chalk.gray(`
-${chalk.greenBright(
-  'const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");',
-)}
+import { findFile, hasSentryContent } from '../../utils/ast-utils';
+import { debug } from '../../utils/debug';
 
-module.exports = {
-  // ... other config options
-  ${chalk.greenBright(
-    'devtool: "source-map", // Source map generation must be turned on',
-  )}
-  plugins: [
-    ${chalk.greenBright(`sentryWebpackPlugin({
+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}",` : ''
-    }  
-    })`)},
-  ],
+    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}
+
+module.exports = {
+  // ... other options
+  ${generateSourceMapsOption},
+  plugins: [
+    // Put the Sentry Webpack plugin after all other plugins
+    ${sentryWebpackPluginFunction},
+  ],
+}
+`;
 
 export const configureWebPackPlugin: SourceMapUploadToolConfigurationFunction =
   async (options) => {
@@ -47,21 +89,318 @@ export const configureWebPackPlugin: SourceMapUploadToolConfigurationFunction =
       ),
     });
 
-    clack.log.step(
-      `Add the following code to your ${chalk.bold('webpack.config.js')} file:`,
-    );
+    const webpackConfigPath =
+      findFile(path.resolve(process.cwd(), 'webpack.config')) ??
+      (await askForToolConfigPath('Webpack', 'webpack.config.js'));
+
+    let successfullyAdded = false;
+    if (webpackConfigPath) {
+      successfullyAdded = await modifyWebpackConfig(webpackConfigPath, options);
+    } else {
+      successfullyAdded = await createNewConfigFile(
+        path.join(process.cwd(), 'webpack.config.js'),
+        getCodeSnippet(options, false),
+        'More information about Webpack configs: https://vitejs.dev/config/',
+      );
+      Sentry.setTag(
+        'created-new-config',
+        successfullyAdded ? 'success' : 'fail',
+      );
+    }
+
+    if (successfullyAdded) {
+      clack.log.info(
+        `We recommend checking the ${
+          webpackConfigPath ? 'modified' : 'added'
+        } file after the wizard finished to ensure it works with your build setup.`,
+      );
+
+      Sentry.setTag('ast-mod', 'success');
+    } else {
+      Sentry.setTag('ast-mod', 'fail');
+      await showCopyPasteInstructions(
+        path.basename(webpackConfigPath || 'webpack.config.js'),
+        getCodeSnippet(options, true),
+      );
+    }
+
+    await addDotEnvSentryBuildPluginFile(options.authToken);
+  };
+
+/**
+ * Modifies a webpack config file to enable source map generation and add the Sentry webpack plugin
+ * exported only for testing
+ */
+export async function modifyWebpackConfig(
+  webpackConfigPath: string,
+  options: SourceMapUploadToolConfigurationOptions,
+): Promise<boolean> {
+  try {
+    const webpackConfig = await fs.promises.readFile(webpackConfigPath, {
+      encoding: 'utf-8',
+    });
+
+    const prettyConfigFilename = chalk.cyan(path.basename(webpackConfigPath));
+
+    // no idea why recast returns any here, this is dumb :/
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const program = recast.parse(webpackConfig.toString()).program as t.Program;
+
+    if (!(await shouldModifyWebpackConfig(program, prettyConfigFilename))) {
+      // Sentry tag is set in shouldModifyWebpackConfig
+      return false;
+    }
+
+    const exportStmt = getCjsModuleExports(program);
+    if (!exportStmt) {
+      // We only care about CJS at the moment since it's probably the most widely used format for webpack configs.
+      debug(`Could not find module.exports = {...} in ${webpackConfigPath}.`);
+      Sentry.setTag('ast-mod-fail-reason', 'config-object-not-found');
+      return false;
+    }
+
+    const configObject = getWebpackConfigObject(exportStmt, program);
+
+    if (!configObject) {
+      debug(`Couldn't find config object in ${webpackConfigPath}`);
+      Sentry.setTag('ast-mod-fail-reason', 'config-object-not-found');
+      return false;
+    }
 
-    // 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));
+    const enabledSourcemaps = enableSourcemapsGeneration(configObject);
 
-    await abortIfCancelled(
-      select({
-        message: 'Did you copy the snippet above?',
-        options: [{ label: 'Yes, continue!', value: true }],
+    if (enabledSourcemaps) {
+      clack.log.success(
+        `Enabled source map generation in ${prettyConfigFilename}.`,
+      );
+    } else {
+      clack.log.warn(
+        `Couldn't enable source maps generation in ${prettyConfigFilename} Please follow the instructions below.`,
+      );
+      Sentry.setTag('ast-mod-fail-reason', 'insertion-fail');
+      return false;
+    }
+
+    const addedPlugin = addSentryWebpackPlugin(program, configObject, options);
+    if (addedPlugin) {
+      clack.log.success(
+        `Added Sentry webpack plugin to ${prettyConfigFilename}.`,
+      );
+    } else {
+      clack.log.warn(
+        `Couldn't add Sentry webpack plugin to ${prettyConfigFilename}. Please follow the instructions below.`,
+      );
+      Sentry.setTag('ast-mod-fail-reason', 'insertion-fail');
+      return false;
+    }
+
+    const code = recast.print(program).code;
+    await fs.promises.writeFile(webpackConfigPath, code);
+
+    return true;
+  } catch (e) {
+    Sentry.setTag('ast-mod-fail-reason', 'insertion-fail');
+    debug(e);
+    return false;
+  }
+}
+
+async function shouldModifyWebpackConfig(
+  program: t.Program,
+  prettyConfigFilename: string,
+) {
+  if (hasSentryContent(program)) {
+    const shouldContinue = await abortIfCancelled(
+      clack.select({
+        message: `Seems like ${prettyConfigFilename} already contains Sentry-related code. Should the wizard modify it anyway?`,
+        options: [
+          {
+            label: 'Yes, add the Sentry Webpack plugin',
+            value: true,
+          },
+          {
+            label: 'No, show me instructions to manually add the plugin',
+            value: false,
+          },
+        ],
         initialValue: true,
       }),
     );
 
-    await addDotEnvSentryBuildPluginFile(options.authToken);
-  };
+    if (!shouldContinue) {
+      Sentry.setTag('ast-mod-fail-reason', 'has-sentry-content');
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function addSentryWebpackPlugin(
+  program: t.Program,
+  configObj: t.ObjectExpression,
+  options: SourceMapUploadToolConfigurationOptions,
+) {
+  const b = addSentryWebpackPluginImport(program);
+
+  const sentryPluginCall = b.callExpression(
+    b.identifier('sentryWebpackPlugin'),
+    [
+      b.objectExpression([
+        b.objectProperty(
+          b.identifier('authToken'),
+          b.identifier('process.env.SENTRY_AUTH_TOKEN'),
+        ),
+        b.objectProperty(b.identifier('org'), b.stringLiteral(options.orgSlug)),
+        b.objectProperty(
+          b.identifier('project'),
+          b.stringLiteral(options.projectSlug),
+        ),
+        ...(options.selfHosted
+          ? [
+              b.objectProperty(
+                b.identifier('url'),
+                b.stringLiteral(options.url),
+              ),
+            ]
+          : []),
+      ]),
+    ],
+  );
+
+  const pluginsProp = configObj.properties.find(
+    (p): p is t.Property =>
+      p.type === 'Property' &&
+      p.key.type === 'Identifier' &&
+      p.key.name === 'plugins',
+  );
+
+  if (pluginsProp) {
+    if (pluginsProp.value.type === 'ArrayExpression') {
+      pluginsProp.value.elements.push(sentryPluginCall);
+    } else {
+      pluginsProp.value = b.arrayExpression([sentryPluginCall]);
+    }
+    return true;
+  }
+
+  configObj.properties.push(
+    b.objectProperty(
+      b.identifier('plugins'),
+      b.arrayExpression([sentryPluginCall]),
+    ),
+  );
+
+  return true;
+}
+
+function addSentryWebpackPluginImport(program: t.Program) {
+  const b = recast.types.builders;
+
+  const sentryPluginRequireStmt = b.variableDeclaration('const', [
+    b.variableDeclarator(
+      b.objectPattern([
+        b.objectProperty.from({
+          key: b.identifier('sentryWebpackPlugin'),
+          value: b.identifier('sentryWebpackPlugin'),
+          shorthand: true,
+        }),
+      ]),
+      b.callExpression(b.identifier('require'), [
+        b.stringLiteral('@sentry/webpack-plugin'),
+      ]),
+    ),
+  ]);
+
+  program.body.unshift(sentryPluginRequireStmt);
+  return b;
+}
+
+function enableSourcemapsGeneration(configObj: t.ObjectExpression): boolean {
+  const b = recast.types.builders;
+
+  const devtoolProp = configObj.properties.find(
+    (p): p is t.Property =>
+      p.type === 'Property' &&
+      p.key.type === 'Identifier' &&
+      p.key.name === 'devtool',
+  );
+
+  if (devtoolProp) {
+    // devtool can have quite a lot of source maps values.
+    // see: https://webpack.js.org/configuration/devtool/#devtool
+    // For Sentry to work best, we should set it to "source-map" or "hidden-source-map"
+    // Heuristic:
+    // - all values that contain "hidden" will be set to "hidden-source-map"
+    // - all other values will be set to "source-map"
+    if (
+      (devtoolProp.value.type === 'Literal' ||
+        devtoolProp.value.type === 'StringLiteral') &&
+      devtoolProp.value.value?.toString().startsWith('hidden-')
+    ) {
+      devtoolProp.value = b.stringLiteral('hidden-source-map');
+    } else {
+      devtoolProp.value = b.stringLiteral('source-map');
+    }
+    return true;
+  }
+
+  configObj.properties.push(
+    b.objectProperty(b.identifier('devtool'), b.stringLiteral('source-map')),
+  );
+
+  return true;
+}
+
+function getWebpackConfigObject(
+  moduleExports: t.AssignmentExpression,
+  program: t.Program,
+): t.ObjectExpression | undefined {
+  const rhs = moduleExports.right;
+  if (rhs.type === 'ObjectExpression') {
+    return rhs;
+  }
+  if (rhs.type === 'Identifier') {
+    const configId = rhs.name;
+
+    const configDeclaration = program.body.find(
+      (s): s is t.VariableDeclaration =>
+        s.type === 'VariableDeclaration' &&
+        !!s.declarations.find(
+          (d) =>
+            d.type === 'VariableDeclarator' &&
+            d.id.type === 'Identifier' &&
+            d.id.name === configId,
+        ),
+    );
+
+    const declarator = configDeclaration?.declarations.find(
+      (d): d is t.VariableDeclarator =>
+        d.type === 'VariableDeclarator' &&
+        d.id.type === 'Identifier' &&
+        d.id.name === configId,
+    );
+
+    return declarator?.init?.type === 'ObjectExpression'
+      ? declarator.init
+      : undefined;
+  }
+
+  return undefined;
+}
+
+function getCjsModuleExports(
+  program: t.Program,
+): t.AssignmentExpression | undefined {
+  const moduleExports = program.body.find(
+    (s): s is t.ExpressionStatement =>
+      s.type === 'ExpressionStatement' &&
+      s.expression.type === 'AssignmentExpression' &&
+      s.expression.left.type === 'MemberExpression' &&
+      s.expression.left.object.type === 'Identifier' &&
+      s.expression.left.object.name === 'module' &&
+      s.expression.left.property.type === 'Identifier' &&
+      s.expression.left.property.name === 'exports',
+  );
+  return moduleExports?.expression as t.AssignmentExpression;
+}

package/src/sveltekit/sdk-setup.ts

@@ -17,6 +17,10 @@ import { abortIfCancelled, isUsingTypeScript } from '../utils/clack-utils';
 import { debug } from '../utils/debug';
 import { findFile, hasSentryContent } from '../utils/ast-utils';
 
+import * as recast from 'recast';
+import x = recast.types;
+import t = x.namedTypes;
+
 const SVELTE_CONFIG_FILE = 'svelte.config.js';
 
 export type PartialSvelteConfig = {
@@ -139,7 +143,7 @@ async function mergeHooksFile(
   dsn: string,
 ): Promise<void> {
   const originalHooksMod = await loadFile(hooksFile);
-  if (hasSentryContent(originalHooksMod)) {
+  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.
     clack.log.warn(
@@ -399,7 +403,7 @@ async function modifyViteConfig(
   try {
     const viteModule = parseModule(viteConfigContent);
 
-    if (hasSentryContent(viteModule)) {
+    if (hasSentryContent(viteModule.$ast as t.Program)) {
       clack.log.warn(
         `File ${chalk.cyan(
           path.basename(viteConfigPath),

package/src/utils/ast-utils.ts

@@ -1,6 +1,8 @@
 import * as fs from 'fs';
-// @ts-ignore - magicast is ESM and TS complains about that. It works though
-import { ProxifiedModule } from 'magicast';
+
+import * as recast from 'recast';
+import x = recast.types;
+import t = x.namedTypes;
 
 /**
  * Checks if a file where we don't know its concrete file type yet exists
@@ -8,15 +10,29 @@ import { ProxifiedModule } from 'magicast';
  */
 export function findFile(
   filePath: string,
-  fileTypes: string[] = ['.js', '.ts', '.mjs'],
+  fileTypes: string[] = ['.js', '.ts', '.mjs', '.cjs'],
 ): string | undefined {
   return fileTypes
     .map((type) => `${filePath}${type}`)
     .find((file) => fs.existsSync(file));
 }
 
-/** Checks if a Sentry package is already mentioned in the file */
-export function hasSentryContent(mod: ProxifiedModule<object>): boolean {
-  const imports = mod.imports.$items.map((i) => i.from);
-  return !!imports.find((i) => i.startsWith('@sentry/'));
+/**
+ * checks for require('@sentry/*') syntax
+ */
+export function hasSentryContent(program: t.Program): boolean {
+  let foundSentry: boolean | undefined = false;
+  recast.visit(program, {
+    visitStringLiteral(path) {
+      foundSentry = foundSentry || path.node.value.startsWith('@sentry/');
+      this.traverse(path);
+    },
+    visitLiteral(path) {
+      foundSentry =
+        foundSentry || path.node.value?.toString().startsWith('@sentry/');
+      this.traverse(path);
+    },
+  });
+
+  return !!foundSentry;
 }