@sentry/wizard 3.7.1 → 3.9.0

package/src/sourcemaps/utils/other-wizards.ts

@@ -1,7 +1,6 @@
 // @ts-ignore - clack is ESM and TS complains about that. It works though
 import clack from '@clack/prompts';
 import chalk from 'chalk';
-import { runNextjsWizard } from '../../nextjs/nextjs-wizard';
 import { runSvelteKitWizard } from '../../sveltekit/sveltekit-wizard';
 
 import {
@@ -17,33 +16,37 @@ import {
 import * as Sentry from '@sentry/node';
 import { WizardOptions } from '../../utils/types';
 
+import * as childProcess from 'child_process';
+
 type WizardFunction = (options: WizardOptions) => Promise<void>;
 
 type FrameworkInfo = {
   frameworkName: string;
-  frameworkSlug: string;
   frameworkPackage: string;
+  troubleshootingDocsLink: string;
   sourcemapsDocsLink: string;
   wizard: WizardFunction;
 };
 
 const sdkMap: Record<string, FrameworkInfo> = {
-  '@sentry/nextjs': {
-    frameworkName: 'Next.js',
-    frameworkSlug: 'nextjs',
-    frameworkPackage: 'next',
-    sourcemapsDocsLink:
-      'https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-source-maps',
-    wizard: runNextjsWizard,
-  },
   '@sentry/sveltekit': {
     frameworkName: 'SvelteKit',
-    frameworkSlug: 'sveltekit',
     frameworkPackage: '@sveltejs/kit',
     sourcemapsDocsLink:
       'https://docs.sentry.io/platforms/javascript/guides/sveltekit/manual-setup/#configure-source-maps-upload',
+    troubleshootingDocsLink:
+      'https://docs.sentry.io/platforms/javascript/guides/sveltekit/sourcemaps/troubleshooting_js/',
     wizard: runSvelteKitWizard,
   },
+  '@sentry/react-native': {
+    frameworkName: 'React Native',
+    frameworkPackage: 'react-native',
+    sourcemapsDocsLink:
+      'https://docs.sentry.io/platforms/react-native/sourcemaps/',
+    troubleshootingDocsLink:
+      'https://docs.sentry.io/platforms/react-native/troubleshooting/#source-maps',
+    wizard: runReactNativeWizard,
+  },
 };
 
 export async function checkIfMoreSuitableWizardExistsAndAskForRedirect(): Promise<
@@ -91,7 +94,7 @@ async function checkIfMoreSuitableWizardExists(): Promise<string | undefined> {
 async function askForRedirect(
   sdkName: string,
 ): Promise<WizardFunction | undefined> {
-  const { frameworkName, sourcemapsDocsLink, frameworkSlug, wizard } =
+  const { frameworkName, sourcemapsDocsLink, troubleshootingDocsLink, wizard } =
     sdkMap[sdkName];
 
   clack.log.warn(
@@ -108,7 +111,7 @@ Manual source maps configuration for ${frameworkName}:
 ${sourcemapsDocsLink}
 
 Troubleshooting Source Maps:
-https://docs.sentry.io/platforms/javascript/guides/${frameworkSlug}/sourcemaps/troubleshooting_js/
+${troubleshootingDocsLink}
 `,
   );
 
@@ -146,3 +149,19 @@ https://docs.sentry.io/platforms/javascript/guides/${frameworkSlug}/sourcemaps/t
       return undefined;
   }
 }
+
+function runReactNativeWizard(): Promise<void> {
+  const [runner, ...wizardArgs] = [...process.argv];
+  wizardArgs.push('--integration', 'reactNative');
+
+  try {
+    childProcess.spawnSync(runner, wizardArgs, {
+      cwd: process.cwd(),
+      stdio: 'inherit',
+    });
+  } catch {
+    return Promise.reject();
+  }
+
+  return Promise.resolve();
+}

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

@@ -3,6 +3,8 @@ import clack from '@clack/prompts';
 import chalk from 'chalk';
 
 import {
+  abort,
+  addSentryCliRc,
   askForProjectSelection,
   askForSelfHosted,
   askForWizardLogin,
@@ -17,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> {
@@ -47,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(
@@ -66,6 +73,7 @@ export async function runSvelteKitWizard(
           : 'Unknown error',
       ),
     );
+    await abort('Exiting Wizard');
     return;
   }
 
@@ -87,6 +95,7 @@ export async function runSvelteKitWizard(
           : 'Unknown error',
       ),
     );
+    await abort('Exiting Wizard');
     return;
   }
 

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/bash.ts

@@ -3,42 +3,55 @@ import * as https from 'https';
 import * as fs from 'fs';
 
 export function hasSentryCLI(): boolean {
-    try {
-        child_process.execSync('sentry-cli --version');
-        return true;
-    } catch (e) {
-        return false;
-    }
+  try {
+    child_process.execSync('sentry-cli --version');
+    return true;
+  } catch (e) {
+    return false;
+  }
 }
 
 export async function installSentryCLI(): Promise<void> {
-    const httpAsync = new Promise((resolve, reject) => {
-        const file = fs.createWriteStream('installcli.sh');
-        https.get('https://sentry.io/get-cli/', (response) => {
-            response.pipe(file);
-            file.on('finish', () => {
-                file.close();
-                try {
-                    child_process.execSync('bash ./installcli.sh');
-                } catch (e) {
-                    reject(e);
-                    return
-                }
-                fs.unlinkSync('installcli.sh');
-                resolve(null);
-            });
+  const httpAsync = new Promise((resolve, reject) => {
+    const file = fs.createWriteStream('installcli.sh');
+    https.get('https://sentry.io/get-cli/', (response) => {
+      response.pipe(file);
+      file.on('finish', () => {
+        file.close();
+        try {
+          child_process.execSync('bash ./installcli.sh');
+        } catch (e) {
+          reject(e);
+          return;
+        }
+        fs.unlinkSync('installcli.sh');
+        resolve(null);
+      });
 
-            file.on('error', (err) => {
-                fs.unlinkSync('installcli.sh');
-                reject(err);
-            });
-        });
+      file.on('error', (err) => {
+        fs.unlinkSync('installcli.sh');
+        reject(err);
+      });
     });
+  });
 
-    await httpAsync;
+  await httpAsync;
 }
 
-export function execute(command: string): string {
-    const output = child_process.execSync(command);
-    return output.toString();
+export function executeSync(command: string): string {
+  const output = child_process.execSync(command);
+  return output.toString();
+}
+
+export function execute(command: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    child_process.exec(command, (error, stdout, _) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+
+      resolve(stdout);
+    });
+  });
 }

package/src/utils/clack-utils.ts

@@ -11,6 +11,8 @@ import { promisify } from 'util';
 import * as Sentry from '@sentry/node';
 import { windowedSelect } from './vendor/clack-custom-select';
 import { hasPackageInstalled, PackageDotJson } from './package-json';
+import { SentryProjectData, WizardOptions } from './types';
+import { traceStep } from '../telemetry';
 
 const opn = require('opn') as (
   url: string,
@@ -28,17 +30,6 @@ interface WizardProjectData {
   projects: SentryProjectData[];
 }
 
-export interface SentryProjectData {
-  id: string;
-  slug: string;
-  name: string;
-  platform: string;
-  organization: {
-    slug: string;
-  };
-  keys: [{ dsn: { public: string } }];
-}
-
 export async function abort(message?: string, status?: number): Promise<never> {
   clack.outro(message ?? 'Wizard setup cancelled.');
   const sentryHub = Sentry.getCurrentHub();
@@ -206,9 +197,7 @@ export async function askForWizardLogin(options: {
 
   const loginSpinner = clack.spinner();
 
-  loginSpinner.start(
-    "Waiting for you to log in using the link above. Once you're logged in, return to this wizard.",
-  );
+  loginSpinner.start('Waiting for you to log in using the link above');
 
   const data = await new Promise<WizardProjectData>((resolve) => {
     const pollingInterval = setInterval(() => {
@@ -661,3 +650,42 @@ export function isUsingTypeScript() {
     return false;
   }
 }
+
+export async function getOrAskForProjectData(options: WizardOptions): Promise<{
+  sentryUrl: string;
+  selfHosted: boolean;
+  selectedProject: SentryProjectData;
+  authToken: string;
+}> {
+  if (options.preSelectedProject) {
+    return {
+      selfHosted: options.preSelectedProject.selfHosted,
+      sentryUrl: options.url ?? SAAS_URL,
+      authToken: options.preSelectedProject.authToken,
+      selectedProject: options.preSelectedProject.project,
+    };
+  }
+  const { url: sentryUrl, selfHosted } = await traceStep(
+    'ask-self-hosted',
+    () => askForSelfHosted(options.url),
+  );
+
+  const { projects, apiKeys } = await traceStep('login', () =>
+    askForWizardLogin({
+      promoCode: options.promoCode,
+      url: sentryUrl,
+      platform: 'javascript-nextjs',
+    }),
+  );
+
+  const selectedProject = await traceStep('select-project', () =>
+    askForProjectSelection(projects),
+  );
+
+  return {
+    sentryUrl,
+    selfHosted,
+    authToken: apiKeys.token,
+    selectedProject,
+  };
+}

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/package-json.ts

@@ -1,5 +1,5 @@
 export type PackageDotJson = {
-  scripts?: Record<string, string>;
+  scripts?: Record<string, string | undefined>;
   dependencies?: Record<string, string>;
   devDependencies?: Record<string, string>;
 };

package/src/utils/types.ts

@@ -1,3 +1,14 @@
+export interface SentryProjectData {
+  id: string;
+  slug: string;
+  name: string;
+  platform: string;
+  organization: {
+    slug: string;
+  };
+  keys: [{ dsn: { public: string } }];
+}
+
 export type WizardOptions = {
   /**
    * Controls whether the wizard should send telemetry data to Sentry.
@@ -15,4 +26,15 @@ export type WizardOptions = {
    * This can be passed via the `-u` or `--url` arg.
    */
   url?: string;
+
+  /**
+   * If this is set, the wizard will skip the login and project selection step.
+   * (This can not yet be set externally but for example when redirecting from
+   * one wizard to another when the project was already selected)
+   */
+  preSelectedProject?: {
+    project: SentryProjectData;
+    authToken: string;
+    selfHosted: boolean;
+  };
 };

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/clack-utils';
-export declare function setupCLIConfig(authToken: string, selectedProject: SentryProjectData, sentryUrl: string): Promise<void>;