@sentry/wizard 3.8.0 → 3.9.1

package/src/sourcemaps/tools/vite.ts

@@ -1,5 +1,12 @@
 // @ts-ignore - clack is ESM and TS complains about that. It works though
 import clack, { select } from '@clack/prompts';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import { generateCode, parseModule } from 'magicast';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import { addVitePlugin } from 'magicast/helpers';
+
+import * as Sentry from '@sentry/node';
+
 import chalk from 'chalk';
 import {
   abortIfCancelled,
@@ -13,30 +20,61 @@ import {
   SourceMapUploadToolConfigurationFunction,
   SourceMapUploadToolConfigurationOptions,
 } from './types';
+import { findScriptFile, hasSentryContent } from '../../utils/ast-utils';
+
+import * as path from 'path';
+import * as fs from 'fs';
+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 getCodeSnippet = (options: SourceMapUploadToolConfigurationOptions) =>
-  chalk.gray(`
-import { defineConfig } from "vite";
-${chalk.greenBright('import { sentryVitePlugin } from "@sentry/vite-plugin"')};
+const getViteConfigContent = (
+  importStmt: string,
+  generateSourceMapsOption: string,
+  sentryVitePluginFunction: string,
+) => `import { defineConfig } from "vite";
+${importStmt}
 
 export default defineConfig({
   build: {
-    ${chalk.greenBright(
-      'sourcemap: true, // Source map generation must be turned on',
-    )}
+    ${generateSourceMapsOption}
   },
   plugins: [
     // Put the Sentry vite plugin after all other plugins
-    ${chalk.greenBright(`sentryVitePlugin({
-      authToken: process.env.SENTRY_AUTH_TOKEN,
-      org: "${options.orgSlug}",
-      project: "${options.projectSlug}",${
-      options.selfHosted ? `\n      url: "${options.url}",` : ''
-    }
-    }),`)}
+    ${sentryVitePluginFunction}
   ],
 });
-`);
+`;
 
 export const configureVitePlugin: SourceMapUploadToolConfigurationFunction =
   async (options) => {
@@ -48,21 +86,175 @@ export const configureVitePlugin: SourceMapUploadToolConfigurationFunction =
       ),
     });
 
-    clack.log.step(
-      `Add the following code to your ${chalk.bold('vite.config.js')} file:`,
-    );
+    const viteConfigPath =
+      findScriptFile(path.resolve(process.cwd(), 'vite.config')) ||
+      (await askForViteConfigPath());
 
-    // 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));
+    let successfullyAdded = false;
+    if (viteConfigPath) {
+      successfullyAdded = await addVitePluginToConfig(viteConfigPath, options);
+    } else {
+      successfullyAdded = await createNewViteConfig(options);
+    }
 
-    await abortIfCancelled(
-      select({
-        message: 'Did you copy the snippet above?',
-        options: [{ label: 'Yes, continue!', value: true }],
-        initialValue: true,
-      }),
-    );
+    if (successfullyAdded) {
+      Sentry.setTag('ast-mod', 'success');
+    } else {
+      Sentry.setTag('ast-mod', 'fail');
+      await showCopyPasteInstructions(
+        path.basename(viteConfigPath || 'vite.config.js'),
+        options,
+      );
+    }
 
     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;
+  }
+}
+
+async function addVitePluginToConfig(
+  viteConfigPath: string,
+  options: SourceMapUploadToolConfigurationOptions,
+): Promise<boolean> {
+  try {
+    const prettyViteConfigFilename = chalk.cyan(path.basename(viteConfigPath));
+
+    const viteConfigContent = (
+      await fs.promises.readFile(viteConfigPath)
+    ).toString();
+
+    const mod = parseModule(viteConfigContent);
+
+    if (hasSentryContent(mod)) {
+      const shouldContinue = await abortIfCancelled(
+        clack.select({
+          message: `${prettyViteConfigFilename} already contains Sentry-related code. Should the wizard modify it anyway?`,
+          options: [
+            {
+              label: 'Yes, add the Sentry Vite plugin',
+              value: true,
+            },
+            {
+              label: 'No, show me instructions to manually add the plugin',
+              value: false,
+            },
+          ],
+          initialValue: true,
+        }),
+      );
+
+      if (!shouldContinue) {
+        Sentry.setTag('ast-mod-fail-reason', 'has-sentry-content');
+        return false;
+      }
+    }
+
+    const { orgSlug: org, projectSlug: project, selfHosted, url } = options;
+
+    addVitePlugin(mod, {
+      imported: 'sentryVitePlugin',
+      from: '@sentry/vite-plugin',
+      constructor: 'sentryVitePlugin',
+      options: {
+        org,
+        project,
+        ...(selfHosted && { url }),
+      },
+    });
+
+    const code = generateCode(mod.$ast).code;
+
+    await fs.promises.writeFile(viteConfigPath, code);
+
+    clack.log.success(
+      `Added the Sentry Vite plugin to ${prettyViteConfigFilename}`,
+    );
+
+    return true;
+  } catch (e) {
+    debug(e);
+    Sentry.setTag('ast-mod-fail-reason', 'insertion-fail');
+    return false;
+  }
+}
+
+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(
+    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.';
+        }
+      },
+    }),
+  );
+}

package/src/sveltekit/sdk-setup.ts

@@ -13,7 +13,9 @@ import { builders, generateCode, loadFile, parseModule } from 'magicast';
 // @ts-ignore - magicast is ESM and TS complains about that. It works though
 import { addVitePlugin } from 'magicast/helpers';
 import { getClientHooksTemplate, getServerHooksTemplate } from './templates';
-import { isUsingTypeScript } from '../utils/clack-utils';
+import { abortIfCancelled, isUsingTypeScript } from '../utils/clack-utils';
+import { debug } from '../utils/debug';
+import { findScriptFile, hasSentryContent } from '../utils/ast-utils';
 
 const SVELTE_CONFIG_FILE = 'svelte.config.js';
 
@@ -29,20 +31,30 @@ export type PartialSvelteConfig = {
   };
 };
 
+type ProjectInfo = {
+  dsn: string;
+  org: string;
+  project: string;
+  selfHosted: boolean;
+  url: string;
+};
+
 export async function createOrMergeSvelteKitFiles(
-  dsn: string,
+  projectInfo: ProjectInfo,
   svelteConfig: PartialSvelteConfig,
 ): Promise<void> {
   const { clientHooksPath, serverHooksPath } = getHooksConfigDirs(svelteConfig);
 
   // full file paths with correct file ending (or undefined if not found)
-  const originalClientHooksFile = findHooksFile(clientHooksPath);
-  const originalServerHooksFile = findHooksFile(serverHooksPath);
+  const originalClientHooksFile = findScriptFile(clientHooksPath);
+  const originalServerHooksFile = findScriptFile(serverHooksPath);
 
-  const viteConfig = findHooksFile(path.resolve(process.cwd(), 'vite.config'));
+  const viteConfig = findScriptFile(path.resolve(process.cwd(), 'vite.config'));
 
   const fileEnding = isUsingTypeScript() ? 'ts' : 'js';
 
+  const { dsn } = projectInfo;
+
   if (!originalClientHooksFile) {
     clack.log.info('No client hooks file found, creating a new one.');
     await createNewHooksFile(`${clientHooksPath}.${fileEnding}`, 'client', dsn);
@@ -60,7 +72,7 @@ export async function createOrMergeSvelteKitFiles(
   }
 
   if (viteConfig) {
-    await modifyViteConfig(viteConfig);
+    await modifyViteConfig(viteConfig, projectInfo);
   }
 }
 
@@ -91,16 +103,6 @@ function getHooksConfigDirs(svelteConfig: PartialSvelteConfig): {
   };
 }
 
-/**
- * Checks if a hooks file exists and returns the full path to the file with the correct file type.
- */
-function findHooksFile(hooksFile: string): string | undefined {
-  const possibleFileTypes = ['.js', '.ts', '.mjs'];
-  return possibleFileTypes
-    .map((type) => `${hooksFile}${type}`)
-    .find((file) => fs.existsSync(file));
-}
-
 /**
  * Reads the template, replaces the dsn placeholder with the actual dsn and writes the file to @param hooksFileDest
  */
@@ -137,9 +139,15 @@ async function mergeHooksFile(
   dsn: string,
 ): Promise<void> {
   const originalHooksMod = await loadFile(hooksFile);
-  if (hasSentryContent(path.basename(hooksFile), originalHooksMod.$code)) {
+  if (hasSentryContent(originalHooksMod)) {
     // We don't want to mess with files that already have Sentry content.
     // Let's just bail out at this point.
+    clack.log.warn(
+      `File ${chalk.cyan(
+        path.basename(hooksFile),
+      )} already contains Sentry code.
+Skipping adding Sentry functionality to.`,
+    );
     return;
   }
 
@@ -347,20 +355,6 @@ function wrapHandle(mod: ProxifiedModule<any>): void {
   }
 }
 
-/** Checks if the Sentry SvelteKit SDK is already mentioned in the file */
-function hasSentryContent(fileName: string, fileContent: string): boolean {
-  if (fileContent.includes('@sentry/sveltekit')) {
-    clack.log.warn(
-      `File ${chalk.cyan(path.basename(fileName))} already contains Sentry code.
-Skipping adding Sentry functionality to ${chalk.cyan(
-        path.basename(fileName),
-      )}.`,
-    );
-    return true;
-  }
-  return false;
-}
-
 export async function loadSvelteConfig(): Promise<PartialSvelteConfig> {
   const configFilePath = path.join(process.cwd(), SVELTE_CONFIG_FILE);
 
@@ -392,28 +386,113 @@ Please make sure, you're running this wizard with Node 16 or newer`);
   }
 }
 
-async function modifyViteConfig(viteConfigPath: string): Promise<void> {
+async function modifyViteConfig(
+  viteConfigPath: string,
+  projectInfo: ProjectInfo,
+): Promise<void> {
   const viteConfigContent = (
     await fs.promises.readFile(viteConfigPath, 'utf-8')
   ).toString();
 
-  if (hasSentryContent(viteConfigPath, viteConfigContent)) {
-    return;
+  const { org, project, url, selfHosted } = projectInfo;
+
+  try {
+    const viteModule = parseModule(viteConfigContent);
+
+    if (hasSentryContent(viteModule)) {
+      clack.log.warn(
+        `File ${chalk.cyan(
+          path.basename(viteConfigPath),
+        )} already contains Sentry code.
+Skipping adding Sentry functionality to.`,
+      );
+      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 fs.promises.writeFile(viteConfigPath, code);
+  } catch (e) {
+    debug(e);
+    await showFallbackViteCopyPasteSnippet(
+      viteConfigPath,
+      getViteConfigCodeSnippet(org, project, selfHosted, url),
+    );
   }
+}
 
-  const viteModule = parseModule(viteConfigContent);
+async function showFallbackViteCopyPasteSnippet(
+  viteConfigPath: string,
+  codeSnippet: string,
+) {
+  const viteConfigFilename = path.basename(viteConfigPath);
 
-  addVitePlugin(viteModule, {
-    imported: 'sentrySvelteKit',
-    from: '@sentry/sveltekit',
-    constructor: 'sentrySvelteKit',
-    index: 0,
-  });
+  clack.log.warning(
+    `Couldn't automatically modify your ${chalk.cyan(viteConfigFilename)}
+${chalk.dim(`This sometimes happens when we encounter more complex vite configs.
+It may not seem like it but sometimes our magical powers are limited ;)`)}`,
+  );
+
+  clack.log.info("But don't worry - it's super easy to do this yourself!");
 
-  const code = generateCode(viteModule.$ast).code;
-  await fs.promises.writeFile(viteConfigPath, code);
+  clack.log.step(
+    `Add the following code to your ${chalk.cyan(viteConfigFilename)}:`,
+  );
+
+  // Intentionally logging to console here for easier copy/pasting
+  // eslint-disable-next-line no-console
+  console.log(codeSnippet);
+
+  await abortIfCancelled(
+    clack.select({
+      message: 'Did you copy the snippet above?',
+      options: [
+        { label: 'Yes!', value: true, hint: "Great, that's already it!" },
+      ],
+      initialValue: true,
+    }),
+  );
 }
 
+const getViteConfigCodeSnippet = (
+  org: string,
+  project: string,
+  selfHosted: boolean,
+  url: string,
+) =>
+  chalk.gray(`
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+${chalk.greenBright("import { sentrySvelteKit } from '@sentry/sveltekit'")}
+
+export default defineConfig({
+  plugins: [
+    // Make sure \`sentrySvelteKit\` is registered before \`sveltekit\`
+    ${chalk.greenBright(`sentrySvelteKit({
+      sourceMapsUploadOptions: {
+        org: '${org}',
+        project: '${project}',${selfHosted ? `\n        url: '${url}',` : ''}
+      }  
+    }),`)}
+    sveltekit(),
+  ]
+});
+`);
+
 /**
  * We want to insert the init call on top of the file but after all import statements
  */

package/src/sveltekit/sveltekit-wizard.ts

@@ -4,6 +4,7 @@ import chalk from 'chalk';
 
 import {
   abort,
+  addSentryCliRc,
   askForProjectSelection,
   askForSelfHosted,
   askForWizardLogin,
@@ -18,8 +19,6 @@ import { WizardOptions } from '../utils/types';
 import { createExamplePage } from './sdk-example';
 import { createOrMergeSvelteKitFiles, loadSvelteConfig } from './sdk-setup';
 
-import { setupCLIConfig } from './sentry-cli-setup';
-
 export async function runSvelteKitWizard(
   options: WizardOptions,
 ): Promise<void> {
@@ -48,14 +47,21 @@ export async function runSvelteKitWizard(
     alreadyInstalled: hasPackageInstalled('@sentry/sveltekit', packageJson),
   });
 
-  await setupCLIConfig(apiKeys.token, selectedProject, sentryUrl);
-
-  const dsn = selectedProject.keys[0].dsn.public;
+  await addSentryCliRc(apiKeys.token);
 
   const svelteConfig = await loadSvelteConfig();
 
   try {
-    await createOrMergeSvelteKitFiles(dsn, svelteConfig);
+    await createOrMergeSvelteKitFiles(
+      {
+        dsn: selectedProject.keys[0].dsn.public,
+        org: selectedProject.organization.slug,
+        project: selectedProject.slug,
+        selfHosted,
+        url: sentryUrl,
+      },
+      svelteConfig,
+    );
   } catch (e: unknown) {
     clack.log.error('Error while setting up the SvelteKit SDK:');
     clack.log.info(

package/src/utils/ast-utils.ts

@@ -0,0 +1,20 @@
+import * as fs from 'fs';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import { ProxifiedModule } from 'magicast';
+
+/**
+ * Checks if a JS/TS 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}`)
+    .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/'));
+}

package/src/utils/debug.ts

@@ -0,0 +1,20 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import * as clack from '@clack/prompts';
+import chalk from 'chalk';
+import { prepareMessage } from '../../lib/Helper/Logging';
+
+let debugEnabled = false;
+
+export function debug(...args: unknown[]) {
+  if (!debugEnabled) {
+    return;
+  }
+
+  const msg = args.map((a) => prepareMessage(a)).join(' ');
+
+  clack.log.info(chalk.dim(msg));
+}
+
+export function enableDebugLogs() {
+  debugEnabled = true;
+}

package/src/utils/string.ts

@@ -0,0 +1,7 @@
+export function stripAnsii(str: string): string {
+  return str.replace(
+    // eslint-disable-next-line no-control-regex
+    /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
+    '',
+  );
+}

package/test/utils/ast-utils.test.ts

@@ -0,0 +1,44 @@
+//@ts-ignore
+import { parseModule } from 'magicast';
+import { hasSentryContent } from '../../src/utils/ast-utils';
+
+describe('AST utils', () => {
+  describe('hasSentryContent', () => {
+    it("returns true if a '@sentry/' import was found in the parsed module", () => {
+      const code = `
+        import { sentryVitePlugin } from "@sentry/vite-plugin";
+        import * as somethingelse from 'gs';
+
+        export default {
+            plugins: [sentryVitePlugin()]
+        }
+      `;
+
+      expect(hasSentryContent(parseModule(code))).toBe(true);
+    });
+    it.each([
+      `
+      import * as somethingelse from 'gs';
+      export default {
+          plugins: []
+      }
+      `,
+      `import * as somethingelse from 'gs';
+       // import { sentryVitePlugin } from "@sentry/vite-plugin"
+      export default {
+          plugins: []
+      }
+      `,
+      `import * as thirdPartyVitePlugin from "vite-plugin-@sentry"
+      export default {
+        plugins: [thirdPartyVitePlugin()]
+      }
+      `,
+    ])(
+      "reutrns false for modules without a valid '@sentry/' import",
+      (code) => {
+        expect(hasSentryContent(parseModule(code))).toBe(false);
+      },
+    );
+  });
+});

package/dist/src/sveltekit/sentry-cli-setup.d.ts

@@ -1,2 +0,0 @@
-import { SentryProjectData } from '../utils/types';
-export declare function setupCLIConfig(authToken: string, selectedProject: SentryProjectData, sentryUrl: string): Promise<void>;