@sentry/wizard 3.10.0 → 3.12.0

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/sourcemaps/utils/detect-tool.ts

@@ -11,7 +11,8 @@ export type SupportedTools =
   | 'create-react-app'
   | 'angular'
   | 'nextjs'
-  | 'remix';
+  | 'remix'
+  | 'no-tool';
 
 // A map of package names pointing to the tool slug.
 // The order is important, because we want to detect the most specific tool first.

package/src/sveltekit/sdk-setup.ts

@@ -15,7 +15,11 @@ import { addVitePlugin } from 'magicast/helpers';
 import { getClientHooksTemplate, getServerHooksTemplate } from './templates';
 import { abortIfCancelled, isUsingTypeScript } from '../utils/clack-utils';
 import { debug } from '../utils/debug';
-import { findScriptFile, hasSentryContent } from '../utils/ast-utils';
+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';
 
@@ -46,10 +50,10 @@ export async function createOrMergeSvelteKitFiles(
   const { clientHooksPath, serverHooksPath } = getHooksConfigDirs(svelteConfig);
 
   // full file paths with correct file ending (or undefined if not found)
-  const originalClientHooksFile = findScriptFile(clientHooksPath);
-  const originalServerHooksFile = findScriptFile(serverHooksPath);
+  const originalClientHooksFile = findFile(clientHooksPath);
+  const originalServerHooksFile = findFile(serverHooksPath);
 
-  const viteConfig = findScriptFile(path.resolve(process.cwd(), 'vite.config'));
+  const viteConfig = findFile(path.resolve(process.cwd(), 'vite.config'));
 
   const fileEnding = isUsingTypeScript() ? 'ts' : 'js';
 
@@ -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/sveltekit/sveltekit-wizard.ts

@@ -4,12 +4,10 @@ import chalk from 'chalk';
 
 import {
   abort,
-  addSentryCliRc,
-  askForProjectSelection,
-  askForSelfHosted,
-  askForWizardLogin,
+  addSentryCliConfig,
   confirmContinueEvenThoughNoGitRepo,
   ensurePackageIsInstalled,
+  getOrAskForProjectData,
   getPackageDotJson,
   installPackage,
   printWelcome,
@@ -32,22 +30,15 @@ export async function runSvelteKitWizard(
   const packageJson = await getPackageDotJson();
   await ensurePackageIsInstalled(packageJson, '@sveltejs/kit', 'Sveltekit');
 
-  const { url: sentryUrl, selfHosted } = await askForSelfHosted(options.url);
-
-  const { projects, apiKeys } = await askForWizardLogin({
-    promoCode: options.promoCode,
-    url: sentryUrl,
-    platform: 'javascript-sveltekit',
-  });
-
-  const selectedProject = await askForProjectSelection(projects);
+  const { selectedProject, selfHosted, sentryUrl, authToken } =
+    await getOrAskForProjectData(options, 'javascript-sveltekit');
 
   await installPackage({
     packageName: '@sentry/sveltekit',
     alreadyInstalled: hasPackageInstalled('@sentry/sveltekit', packageJson),
   });
 
-  await addSentryCliRc(apiKeys.token);
+  await addSentryCliConfig(authToken);
 
   const svelteConfig = await loadSvelteConfig();
 

package/src/telemetry.ts

@@ -52,6 +52,8 @@ function createSentryInstance(enabled: boolean, integration: string) {
     dsn: 'https://8871d3ff64814ed8960c96d1fcc98a27@o1.ingest.sentry.io/4505425820712960',
     enabled: enabled,
 
+    environment: `production-${integration}`,
+
     tracesSampleRate: 1,
     sampleRate: 1,
 

package/src/utils/ast-utils.ts

@@ -1,20 +1,38 @@
 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 JS/TS file where we don't know its concrete file type yet exists
+ * Checks if a file where we don't know its concrete file type yet exists
  * and returns the full path to the file with the correct file type.
  */
-export function findScriptFile(hooksFile: string): string | undefined {
-  const possibleFileTypes = ['.js', '.ts', '.mjs'];
-  return possibleFileTypes
-    .map((type) => `${hooksFile}${type}`)
+export function findFile(
+  filePath: string,
+  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;
 }