@sentry/wizard 3.1.0 → 3.2.0

package/lib/Steps/Integrations/NextJs.ts

@@ -1,103 +1,20 @@
-/* eslint-disable max-lines */
-import Chalk from 'chalk';
-import * as fs from 'fs';
 import type { Answers } from 'inquirer';
-import { prompt } from 'inquirer';
-import * as _ from 'lodash';
-import * as path from 'path';
+import { runNextjsWizard } from '../../../src/nextjs/nextjs-wizard';
 
 import type { Args } from '../../Constants';
-import { debug, green, l, nl, red } from '../../Helper/Logging';
-import { mergeConfigFile } from '../../Helper/MergeConfig';
-import { checkPackageVersion } from '../../Helper/Package';
-import { getPackageMangerChoice } from '../../Helper/PackageManager';
-import type { SentryCliProps } from '../../Helper/SentryCli';
-import { SentryCli } from '../../Helper/SentryCli';
 import { BaseIntegration } from './BaseIntegration';
 
-const COMPATIBLE_NEXTJS_VERSIONS = '>=10.0.8 <14.0.0';
-const COMPATIBLE_SDK_VERSIONS = '>=7.3.0';
-const PROPERTIES_FILENAME = 'sentry.properties';
-const SENTRYCLIRC_FILENAME = '.sentryclirc';
-const GITIGNORE_FILENAME = '.gitignore';
-const CONFIG_DIR = 'configs/';
-const MERGEABLE_CONFIG_INFIX = 'wizardcopy';
-
-// for those files which can go in more than one place, the list of places they
-// could go (the first one which works will be used)
-const TEMPLATE_DESTINATIONS: { [key: string]: string[] } = {
-  '_error.js': ['pages', 'src/pages'],
-  'next.config.js': ['.'],
-  'sentry.server.config.js': ['.'],
-  'sentry.client.config.js': ['.'],
-  'sentry.edge.config.js': ['.'],
-};
-
-let appPackage: any = {};
-
-try {
-  appPackage = require(path.join(process.cwd(), 'package.json'));
-} catch {
-  // We don't need to have this
-}
-
+/**
+ * This class just redirects to the new `nextjs-wizard.ts` flow
+ * for anyone calling the wizard without the '-i nextjs' flag.
+ */
 export class NextJs extends BaseIntegration {
-  protected _sentryCli: SentryCli;
-
   public constructor(protected _argv: Args) {
     super(_argv);
-    this._sentryCli = new SentryCli(this._argv);
   }
 
-  public async emit(answers: Answers): Promise<Answers> {
-    const dsn = _.get(answers, ['config', 'dsn', 'public'], null);
-    nl();
-
-    const sentryCliProps = this._sentryCli.convertAnswersToProperties(answers);
-    await this._createSentryCliConfig(sentryCliProps);
-
-    const templateDirectory = path.join(__dirname, '..', '..', '..', 'NextJs');
-    const configDirectory = path.join(templateDirectory, CONFIG_DIR);
-
-    if (fs.existsSync(configDirectory)) {
-      await this._createNextConfig(configDirectory, dsn);
-    } else {
-      debug(
-        `Couldn't find ${configDirectory}, probably because you ran this from inside of \`/lib\` rather than \`/dist\``,
-      );
-      nl();
-    }
-
-    const selectedProjectSlug: string | null = answers.config?.project?.slug;
-    if (selectedProjectSlug) {
-      const hasFirstEvent = answers.wizard?.projects?.find?.(
-        (p: { slug: string }) => p.slug === selectedProjectSlug,
-      )?.firstEvent;
-      if (!hasFirstEvent) {
-        await this._setTemplate(
-          templateDirectory,
-          'sentry_sample_error.js',
-          ['pages', 'src/pages'],
-          dsn,
-        );
-        l(
-          Chalk.bgYellowBright(`
-|------------------------------------------------------------------------|
-|                          Installation Complete                         |
-| To verify your installation and finish onboarding, launch your Next.js |
-| application, navigate to http://localhost:3000/sentry_sample_error     |
-| and send us a sample error.                                            |
-|------------------------------------------------------------------------|
-`),
-        );
-      }
-    }
-
-    l(
-      'For more information, see https://docs.sentry.io/platforms/javascript/guides/nextjs/',
-    );
-    nl();
-
+  public async emit(_answers: Answers): Promise<Answers> {
+    await runNextjsWizard({ promoCode: this._argv.promoCode });
     return {};
   }
 
@@ -106,314 +23,7 @@ export class NextJs extends BaseIntegration {
     if (this._shouldConfigure) {
       return this._shouldConfigure;
     }
-
-    nl();
-
-    let userAnswers: Answers = { continue: true };
-    const hasCompatibleNextjsVersion = checkPackageVersion(
-      appPackage,
-      'next',
-      COMPATIBLE_NEXTJS_VERSIONS,
-      true,
-    );
-
-    const packageManager = getPackageMangerChoice();
-    const hasSdkInstalled = this._hasPackageInstalled('@sentry/nextjs');
-
-    let hasCompatibleSdkVersion = false;
-    // if no package but we have nextjs, let's add it if we can
-    if (!hasSdkInstalled && packageManager && hasCompatibleNextjsVersion) {
-      await packageManager.installPackage('@sentry/nextjs');
-      // can assume it's compatible since we just installed it
-      hasCompatibleSdkVersion = true;
-    } else {
-      // otherwise, let's check the version and spit out the appropriate error
-      hasCompatibleSdkVersion = checkPackageVersion(
-        appPackage,
-        '@sentry/nextjs',
-        COMPATIBLE_SDK_VERSIONS,
-        true,
-      );
-    }
-    const hasAllPackagesCompatible =
-      hasCompatibleNextjsVersion && hasCompatibleSdkVersion;
-
-    if (!hasAllPackagesCompatible && !this._argv.quiet) {
-      userAnswers = await prompt({
-        message:
-          'There were errors during your project checkup, do you still want to continue?',
-        name: 'continue',
-        default: false,
-        type: 'confirm',
-      });
-    }
-
-    nl();
-
-    if (!userAnswers['continue']) {
-      throw new Error('Please install the required dependencies to continue.');
-    }
-
-    this._shouldConfigure = Promise.resolve({ nextjs: true });
     // eslint-disable-next-line @typescript-eslint/unbound-method
     return this.shouldConfigure;
   }
-
-  private async _createSentryCliConfig(
-    cliProps: SentryCliProps,
-  ): Promise<void> {
-    const { 'auth/token': authToken, ...cliPropsToWrite } = cliProps;
-
-    /**
-     * To not commit the auth token to the VCS, instead of adding it to the
-     * properties file (like the rest of props), it's added to the Sentry CLI
-     * config, which is added to the gitignore. This way makes the properties
-     * file safe to commit without exposing any auth tokens.
-     */
-    if (authToken) {
-      try {
-        await fs.promises.appendFile(
-          SENTRYCLIRC_FILENAME,
-          this._sentryCli.dumpConfig({ auth: { token: authToken } }),
-        );
-        green(`✓ Successfully added the auth token to ${SENTRYCLIRC_FILENAME}`);
-      } catch {
-        red(
-          `⚠ Could not add the auth token to ${SENTRYCLIRC_FILENAME}, ` +
-            `please add it to identify your user account:\n${authToken}`,
-        );
-        nl();
-      }
-    } else {
-      red(
-        `⚠ Did not find an auth token, please add your token to ${SENTRYCLIRC_FILENAME}`,
-      );
-      l(
-        'To generate an auth token, visit https://sentry.io/settings/account/api/auth-tokens/',
-      );
-      l(
-        'To learn how to configure Sentry CLI, visit ' +
-          'https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-sentry-cli',
-      );
-    }
-
-    await this._addToGitignore(
-      SENTRYCLIRC_FILENAME,
-      `⚠ Could not add ${SENTRYCLIRC_FILENAME} to ${GITIGNORE_FILENAME}, ` +
-        'please add it to not commit your auth key.',
-    );
-
-    try {
-      await fs.promises.writeFile(
-        `./${PROPERTIES_FILENAME}`,
-        this._sentryCli.dumpProperties(cliPropsToWrite),
-      );
-      green('✓ Successfully created sentry.properties');
-    } catch {
-      red(`⚠ Could not add org and project data to ${PROPERTIES_FILENAME}`);
-      l(
-        'See docs for a manual setup: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-sentry-cli',
-      );
-    }
-    nl();
-  }
-
-  private async _addToGitignore(
-    filepath: string,
-    errorMsg: string,
-  ): Promise<void> {
-    /**
-     * Don't check whether the given file is ignored because:
-     * 1. It's tricky to check it without git.
-     * 2. Git might not be installed or accessible.
-     * 3. It's convenient to use a module to interact with git, but it would
-     *    increase the size x2 approximately. Docs say to run the Wizard without
-     *    installing it, and duplicating the size would slow the set-up down.
-     * 4. The Wizard is meant to be run once.
-     * 5. A message is logged informing users it's been added to the gitignore.
-     * 6. It will be added to the gitignore as many times as it runs - not a big
-     *    deal.
-     * 7. It's straightforward to remove it from the gitignore.
-     */
-    try {
-      await fs.promises.appendFile(
-        GITIGNORE_FILENAME,
-        `\n# Sentry\n${filepath}\n`,
-      );
-      green(`✓ ${filepath} added to ${GITIGNORE_FILENAME}`);
-    } catch {
-      red(errorMsg);
-    }
-  }
-
-  private async _createNextConfig(
-    configDirectory: string,
-    dsn: any,
-  ): Promise<void> {
-    const templates = fs.readdirSync(configDirectory);
-    // next.config.template.js used for merging next.config.js , not its own template,
-    // so it shouldn't have a setTemplate call
-    const filteredTemplates = templates.filter(
-      (template) => template !== 'next.config.template.js',
-    );
-    for (const template of filteredTemplates) {
-      await this._setTemplate(
-        configDirectory,
-        template,
-        TEMPLATE_DESTINATIONS[template],
-        dsn,
-      );
-    }
-    red(
-      '⚠ Performance monitoring is enabled capturing 100% of transactions.\n' +
-        '  Learn more in https://docs.sentry.io/product/performance/',
-    );
-    nl();
-  }
-
-  private async _setTemplate(
-    configDirectory: string,
-    templateFile: string,
-    destinationOptions: string[],
-    dsn: string,
-  ): Promise<void> {
-    const templatePath = path.join(configDirectory, templateFile);
-
-    for (const destinationDir of destinationOptions) {
-      if (!fs.existsSync(destinationDir)) {
-        continue;
-      }
-      const destinationPath = path.join(destinationDir, templateFile);
-      // in case the file in question already exists, we'll make a copy with
-      // `MERGEABLE_CONFIG_INFIX` inserted just before the extension, so as not
-      // to overwrite the existing file
-      const mergeableFilePath = path.join(
-        destinationDir,
-        this._spliceInPlace(
-          templateFile.split('.'),
-          -1,
-          0,
-          MERGEABLE_CONFIG_INFIX,
-        ).join('.'),
-      );
-
-      if (templateFile === 'next.config.js') {
-        await this._mergeNextConfig(
-          destinationPath,
-          templatePath,
-          destinationDir,
-          templateFile,
-          configDirectory,
-          mergeableFilePath,
-        );
-        return;
-      } else {
-        if (!fs.existsSync(destinationPath)) {
-          this._fillAndCopyTemplate(templatePath, destinationPath, dsn);
-        } else if (!fs.existsSync(mergeableFilePath)) {
-          this._fillAndCopyTemplate(templatePath, mergeableFilePath, dsn);
-          red(
-            `File \`${templateFile}\` already exists, so created \`${mergeableFilePath}\`.\n` +
-              'Please merge those files.',
-          );
-          nl();
-        } else {
-          red(
-            `Both \`${templateFile}\` and \`${mergeableFilePath}\` already exist.\n` +
-              'Please merge those files.',
-          );
-          nl();
-        }
-        return;
-      }
-    }
-
-    red(
-      `Could not find appropriate destination for \`${templateFile}\`. Tried: ${destinationOptions}.`,
-    );
-    nl();
-  }
-
-  private _fillAndCopyTemplate(
-    sourcePath: string,
-    targetPath: string,
-    dsn: string,
-  ): void {
-    const templateContent = fs.readFileSync(sourcePath).toString();
-    const filledTemplate = templateContent.replace('___DSN___', dsn);
-    fs.writeFileSync(targetPath, filledTemplate);
-  }
-
-  private _hasPackageInstalled(packageName: string): boolean {
-    const depsVersion = _.get(appPackage, ['dependencies', packageName]);
-    const devDepsVersion = _.get(appPackage, ['devDependencies', packageName]);
-    return !!depsVersion || !!devDepsVersion;
-  }
-
-  private _spliceInPlace(
-    arr: Array<any>,
-    start: number,
-    deleteCount: number,
-    ...inserts: any[]
-  ): Array<any> {
-    arr.splice(start, deleteCount, ...inserts);
-    return arr;
-  }
-
-  private async _mergeNextConfig(
-    destinationPath: string,
-    templatePath: string,
-    destinationDir: string,
-    templateFile: string,
-    configDirectory: string,
-    mergeableFilePath: string,
-  ): Promise<void> {
-    // if no next.config.js exists, we'll create one
-    if (!fs.existsSync(destinationPath)) {
-      fs.copyFileSync(templatePath, destinationPath);
-      green('Created File `next.config.js`');
-      nl();
-    } else {
-      // creates a file name for the copy of the original next.config.js file
-      // with the name `next.config.original.js`
-      const originalFileName = this._spliceInPlace(
-        templateFile.split('.'),
-        -1,
-        0,
-        'original',
-      ).join('.');
-      const originalFilePath = path.join(destinationDir, originalFileName);
-      // makes copy of original next.config.js
-      fs.writeFileSync(originalFilePath, fs.readFileSync(destinationPath));
-      await this._addToGitignore(
-        originalFilePath,
-        'Unable to add next.config.original.js to gitignore',
-      );
-
-      const mergedTemplatePath = path.join(
-        configDirectory,
-        'next.config.template.js',
-      );
-      // attempts to merge with existing next.config.js, if true -> success
-      if (mergeConfigFile(destinationPath, mergedTemplatePath)) {
-        green(
-          `Updated \`${templateFile}\` with Sentry. The original ${templateFile} was saved as \`next.config.original.js\`.\n` +
-            'Information on the changes made to the Next.js configuration file an be found at https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/',
-        );
-        nl();
-      } else {
-        // if merge fails, we'll create a copy of the `next.config.js` template and ask them to merge
-        fs.copyFileSync(templatePath, mergeableFilePath);
-        await this._addToGitignore(
-          mergeableFilePath,
-          'Unable to add next.config.wizard.js template to gitignore',
-        );
-        red(
-          `Unable to merge  \`${templateFile}\`, so created \`${mergeableFilePath}\`.\n` +
-            'Please integrate next.config.wizardcopy.js into your next.config.js or next.config.ts file',
-        );
-        nl();
-      }
-    }
-  }
 }

package/lib/Steps/Integrations/ReactNative.ts

@@ -14,11 +14,13 @@ import {
   matchFiles,
   patchMatchingFile,
 } from '../../Helper/File';
-import { dim, green, nl, red } from '../../Helper/Logging';
+import { dim, green, l, nl, red } from '../../Helper/Logging';
 import { checkPackageVersion } from '../../Helper/Package';
-import { getPackageMangerChoice } from '../../Helper/PackageManager';
+import { getPackageManagerChoice } from '../../Helper/PackageManager';
 import { SentryCli } from '../../Helper/SentryCli';
 import { MobileProject } from './MobileProject';
+import { BottomBar } from '../../Helper/BottomBar';
+import { URL } from 'url';
 
 const xcode = require('xcode');
 
@@ -37,11 +39,15 @@ export class ReactNative extends MobileProject {
    */
   private static _buildGradleAndroidSectionBeginning = /^android {/m;
 
+  private url: string | undefined;
+
   protected _answers: Answers;
   protected _sentryCli: SentryCli;
 
+
   public constructor(protected _argv: Args) {
     super(_argv);
+    this.url = _argv.url;
     this._sentryCli = new SentryCli(this._argv);
   }
 
@@ -55,7 +61,7 @@ export class ReactNative extends MobileProject {
     nl();
 
     let userAnswers: Answers = { continue: true };
-    const packageManager = getPackageMangerChoice();
+    const packageManager = getPackageManagerChoice();
 
     const hasCompatibleReactNativeVersion = checkPackageVersion(
       this._readAppPackage(),
@@ -79,7 +85,10 @@ export class ReactNative extends MobileProject {
     }
 
     if (packageManager) {
+      BottomBar.show(`Adding ${SENTRY_REACT_NATIVE_PACKAGE}...`);
       await packageManager.installPackage(SENTRY_REACT_NATIVE_PACKAGE);
+      BottomBar.hide();
+      green(`✓ Added \`${SENTRY_REACT_NATIVE_PACKAGE}\``);
     }
     const hasCompatibleSentryReactNativeVersion = checkPackageVersion(
       this._readAppPackage(),
@@ -115,7 +124,9 @@ export class ReactNative extends MobileProject {
               this._patchXcodeProj.bind(this),
             );
             green('✓ Patched build script in Xcode project.');
+            BottomBar.show('Adding Sentry pods...');
             await this._podInstall();
+            BottomBar.hide();
             green('✓ Pods installed.');
           } else {
             await patchMatchingFile(
@@ -135,6 +146,41 @@ export class ReactNative extends MobileProject {
 
     await Promise.all(promises);
 
+    let host: string | null = null
+    try {
+      host = (new URL(this.url || '')).host;
+    } catch (_error) {
+      // ignore
+    }
+    const orgSlug = _.get(answers, 'config.organization.slug', null);
+    const projectId = _.get(answers, 'config.project.id', null);
+    const projectIssuesUrl = host && orgSlug && projectId
+      ? `https://${orgSlug}.${host}/issues/?project=${projectId}`
+      : null;
+
+    l(`
+To make sure everything is set up correctly, put the following code snippet into your application.
+The snippet will create a button that, when tapped, sends a test event to Sentry.
+`);
+
+    if (projectIssuesUrl) {
+      l(`After that check your project issues:`);
+      l(projectIssuesUrl);
+      nl();
+    }
+
+    l(`<Button title='Try!' onPress={ () => { Sentry.captureException(new Error('First error')) }}/>`);
+    nl();
+
+    if (!this._argv.quiet) {
+      await prompt({
+        message: 'Have you successfully sent a test event?',
+        name: 'snippet',
+        default: true,
+        type: 'confirm',
+      });
+    }
+
     return answers;
   }
 

package/lib/Steps/Integrations/SvelteKit.ts

@@ -0,0 +1,29 @@
+import type { Answers } from 'inquirer';
+import { runSvelteKitWizard } from '../../../src/sveltekit/sveltekit-wizard';
+
+import type { Args } from '../../Constants';
+import { BaseIntegration } from './BaseIntegration';
+
+/**
+ * This class just redirects to the new `sveltekit-wizard.ts` flow
+ * for anyone calling the wizard without the '-i sveltekit' flag.
+ */
+export class SvelteKit extends BaseIntegration {
+  public constructor(protected _argv: Args) {
+    super(_argv);
+  }
+
+  public async emit(_answers: Answers): Promise<Answers> {
+    await runSvelteKitWizard({ promoCode: this._argv.promoCode });
+    return {};
+  }
+
+  public async shouldConfigure(_answers: Answers): Promise<Answers> {
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    if (this._shouldConfigure) {
+      return this._shouldConfigure;
+    }
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    return this.shouldConfigure;
+  }
+}

package/lib/Steps/SentryProjectSelector.ts

@@ -71,6 +71,7 @@ export class SentryProjectSelector extends BaseStep {
           ),
         },
         project: {
+          id: _.get(selectedProject, 'selectedProject.id', null),
           slug: _.get(selectedProject, 'selectedProject.slug', null),
         },
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/wizard",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "homepage": "https://github.com/getsentry/sentry-wizard",
   "repository": "https://github.com/getsentry/sentry-wizard",
   "description": "Sentry wizard helping you to configure your project",

package/src/{nextjs-wizard.ts → nextjs/nextjs-wizard.ts}

@@ -1,7 +1,9 @@
 /* eslint-disable max-lines */
-import * as clack from '@clack/prompts';
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
 import chalk from 'chalk';
 import * as fs from 'fs';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
 import { builders, generateCode, parseModule } from 'magicast';
 import * as path from 'path';
 
@@ -12,10 +14,12 @@ import {
   askForSelfHosted,
   askForWizardLogin,
   confirmContinueEvenThoughNoGitRepo,
+  ensurePackageIsInstalled,
+  getPackageDotJson,
   installPackage,
   printWelcome,
   SentryProjectData,
-} from './clack-utils';
+} from '../utils/clack-utils';
 import {
   getNextjsConfigCjsAppendix,
   getNextjsConfigCjsTemplate,
@@ -25,7 +29,7 @@ import {
   getSentryConfigContents,
   getSentryExampleApiRoute,
   getSentryExamplePageContents,
-} from './templates/nextjs-templates';
+} from '../templates/nextjs-templates';
 
 interface NextjsWizardOptions {
   promoCode?: string;
@@ -42,43 +46,8 @@ export async function runNextjsWizard(
 
   await confirmContinueEvenThoughNoGitRepo();
 
-  const packageJsonFileContents = await fs.promises
-    .readFile(path.join(process.cwd(), 'package.json'), 'utf8')
-    .catch(() => {
-      clack.log.error(
-        'Could not find package.json. Make sure to run the wizard in the root of your Next.js app!',
-      );
-      abort();
-    });
-
-  let packageJson:
-    | { dependencies?: { ['@sentry/nextjs']: string; ['next']: string } }
-    | undefined = undefined;
-
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    packageJson = JSON.parse(packageJsonFileContents);
-  } catch (e) {
-    clack.log.error(
-      'Unable to parse your package.json. Make sure it has a valid format!',
-    );
-
-    abort();
-  }
-
-  if (!packageJson?.dependencies?.['next']) {
-    const continueWithoutNext = await clack.confirm({
-      message:
-        'Next.js does not seem to be installed. Do you still want to continue?',
-      initialValue: false,
-    });
-
-    abortIfCancelled(continueWithoutNext);
-
-    if (!continueWithoutNext) {
-      abort();
-    }
-  }
+  const packageJson = await getPackageDotJson();
+  await ensurePackageIsInstalled(packageJson, 'next', 'Next.js');
 
   const { url: sentryUrl, selfHosted } = await askForSelfHosted();
 
@@ -89,7 +58,7 @@ export async function runNextjsWizard(
 
   const selectedProject: SentryProjectData | symbol = await clack.select({
     message: 'Select your Sentry project.',
-    options: projects.map(project => {
+    options: projects.map((project) => {
       return {
         value: project,
         label: `${project.organization.slug}/${project.slug}`,
@@ -109,7 +78,7 @@ export async function runNextjsWizard(
     isUsingTypescript = fs.existsSync(
       path.join(process.cwd(), 'tsconfig.json'),
     );
-  } catch (e) {
+  } catch {
     // noop - Default to assuming user is not using typescript
   }
 
@@ -218,7 +187,7 @@ export async function runNextjsWizard(
     if (probablyIncludesSdk) {
       const injectAnyhow = await clack.confirm({
         message: `${chalk.bold(
-          nextConfigMjs,
+          nextConfigJs,
         )} already contains Sentry SDK configuration. Should the wizard modify it anyways?`,
       });
 
@@ -300,7 +269,7 @@ export async function runNextjsWizard(
           )}. ${chalk.dim('(you probably want to clean this up a bit!)')}`,
         );
       }
-    } catch (e) {
+    } catch {
       clack.log.warn(
         chalk.yellow(
           `Something went wrong writing to ${chalk.bold(nextConfigMjs)}`,