@sentry/wizard 3.11.0 → 3.13.0

package/src/sourcemaps/tools/webpack.ts

@@ -1,11 +1,25 @@
+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,
+  makeCodeSnippet,
+  showCopyPasteInstructions,
 } from '../../utils/clack-utils';
 import { hasPackageInstalled } from '../../utils/package-json';
 
@@ -14,28 +28,33 @@ 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';
+
+const getCodeSnippet = (
+  options: SourceMapUploadToolConfigurationOptions,
+  colors: boolean,
+) =>
+  makeCodeSnippet(colors, (unchanged, plus) =>
+    unchanged(`${plus(
+      'const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");',
+    )}
 
 module.exports = {
-  // ... other config options
-  ${chalk.greenBright(
-    'devtool: "source-map", // Source map generation must be turned on',
-  )}
+  // ... other options
+  ${plus('devtool: "source-map", // Source map generation must be turned on')}
   plugins: [
-    ${chalk.greenBright(`sentryWebpackPlugin({
+    // Put the Sentry Webpack plugin after all other plugins
+    ${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) => {
@@ -47,21 +66,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',
+      );
+    }
 
-    // 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));
+    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',
+    });
 
-    await abortIfCancelled(
-      select({
-        message: 'Did you copy the snippet above?',
-        options: [{ label: 'Yes, continue!', value: true }],
+    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;
+    }
+
+    const enabledSourcemaps = enableSourcemapsGeneration(configObject);
+
+    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

@@ -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
@@ -17,6 +19,11 @@ 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;
+import { traceStep } from '../telemetry';
+
 const SVELTE_CONFIG_FILE = 'svelte.config.js';
 
 export type PartialSvelteConfig = {
@@ -55,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);
   }
 
@@ -120,6 +133,7 @@ async function createNewHooksFile(
   await fs.promises.writeFile(hooksFileDest, filledTemplate);
 
   clack.log.success(`Created ${hooksFileDest}`);
+  Sentry.setTag(`created-${hooktype}-hooks`, 'success');
 }
 
 /**
@@ -139,7 +153,10 @@ async function mergeHooksFile(
   dsn: string,
 ): Promise<void> {
   const originalHooksMod = await loadFile(hooksFile);
-  if (hasSentryContent(originalHooksMod)) {
+
+  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.
     clack.log.warn(
@@ -148,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(
@@ -399,39 +443,52 @@ 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),
         )} 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');
   }
 }
 
@@ -508,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;
+  }
+}