@sentry/wizard 1.2.11 → 1.2.15

package/lib/Steps/Integrations/NextJs.ts

@@ -1,18 +1,30 @@
+/* eslint-disable max-lines */
 import * as fs from 'fs';
 import { Answers, prompt } from 'inquirer';
 import * as _ from 'lodash';
 import * as path from 'path';
-import { clean, gte, minVersion, satisfies, validRange } from 'semver';
+import { satisfies, subset, valid, validRange } from 'semver';
 
 import { Args } from '../../Constants';
 import { debug, green, l, nl, red } from '../../Helper/Logging';
-import { SentryCli } from '../../Helper/SentryCli';
+import { SentryCli, SentryCliProps } from '../../Helper/SentryCli';
 import { BaseIntegration } from './BaseIntegration';
 
-const MIN_NEXTJS_VERSION = '10.0.8'; // Must be a fixed version: `X.Y.Z`
+const COMPATIBLE_NEXTJS_VERSIONS = '>=10.0.8 <12.0.0';
 const PROPERTIES_FILENAME = 'sentry.properties';
+const SENTRYCLIRC_FILENAME = '.sentryclirc';
+const GITIGNORE_FILENAME = '.gitignore';
 const CONFIG_DIR = 'configs/';
-const MERGEABLE_CONFIG_PREFIX = '_';
+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': ['.'],
+};
 
 let appPackage: any = {};
 
@@ -35,12 +47,7 @@ export class NextJs extends BaseIntegration {
     nl();
 
     const sentryCliProps = this._sentryCli.convertAnswersToProperties(answers);
-    fs.writeFileSync(
-      `./${PROPERTIES_FILENAME}`,
-      this._sentryCli.dumpProperties(sentryCliProps),
-    );
-    green(`Successfully created sentry.properties`);
-    nl();
+    await this._createSentryCliConfig(sentryCliProps);
 
     const configDirectory = path.join(
       __dirname,
@@ -55,7 +62,7 @@ export class NextJs extends BaseIntegration {
       this._createNextConfig(configDirectory, dsn);
     } else {
       debug(
-        `Couldn't find ${configDirectory}, probably because you run from src`,
+        `Couldn't find ${configDirectory}, probably because you ran this from inside of \`/lib\` rather than \`/dist\``,
       );
       nl();
     }
@@ -76,7 +83,7 @@ export class NextJs extends BaseIntegration {
     nl();
 
     let userAnswers: Answers = { continue: true };
-    if (!this._checkDep('next', true) && !this._argv.quiet) {
+    if (!this._checkUserNextVersion('next') && !this._argv.quiet) {
       userAnswers = await prompt({
         message:
           'There were errors during your project checkup, do you still want to continue?',
@@ -97,10 +104,102 @@ export class NextJs extends BaseIntegration {
     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 _createNextConfig(configDirectory: string, dsn: any): void {
     const templates = fs.readdirSync(configDirectory);
     for (const template of templates) {
-      this._setTemplate(configDirectory, template, dsn);
+      this._setTemplate(
+        configDirectory,
+        template,
+        TEMPLATE_DESTINATIONS[template],
+        dsn,
+      );
     }
     red(
       '⚠ Performance monitoring is enabled capturing 100% of transactions.\n' +
@@ -111,27 +210,54 @@ export class NextJs extends BaseIntegration {
 
   private _setTemplate(
     configDirectory: string,
-    template: string,
+    templateFile: string,
+    destinationOptions: string[],
     dsn: string,
   ): void {
-    const templatePath = path.join(configDirectory, template);
-    const mergeableFile = MERGEABLE_CONFIG_PREFIX + template;
-    if (!fs.existsSync(template)) {
-      this._fillAndCopyTemplate(templatePath, template, dsn);
-    } else if (!fs.existsSync(mergeableFile)) {
-      this._fillAndCopyTemplate(templatePath, mergeableFile, dsn);
-      red(
-        `File ${template} already exists, so created ${mergeableFile}.\n` +
-          `Please, merge those files.`,
-      );
-      nl();
-    } else {
-      red(
-        `File ${template} already exists, and ${mergeableFile} also exists.\n` +
-          'Please, merge those files.',
+    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('.'),
       );
-      nl();
+
+      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(
@@ -144,63 +270,61 @@ export class NextJs extends BaseIntegration {
     fs.writeFileSync(targetPath, filledTemplate);
   }
 
-  private _checkDep(packageName: string, minVersion?: boolean): boolean {
-    const depVersion = _.get(
-      appPackage,
-      ['dependencies', packageName],
-      '0.0.0',
-    );
-    const devDepVersion = _.get(
-      appPackage,
-      ['devDependencies', packageName],
-      '0.0.0',
-    );
+  private _checkUserNextVersion(packageName: string): boolean {
+    const depsVersion = _.get(appPackage, ['dependencies', packageName]);
+    const devDepsVersion = _.get(appPackage, ['devDependencies', packageName]);
 
-    if (
-      !_.get(appPackage, `dependencies.${packageName}`, false) &&
-      !_.get(appPackage, `devDependencies.${packageName}`, false)
-    ) {
-      red(`✗ ${packageName} isn't in your dependencies`);
-      red(`  please install it with yarn/npm`);
+    if (!depsVersion && !devDepsVersion) {
+      red(`✗ ${packageName} isn't in your dependencies.`);
+      red('  Please install it with yarn/npm.');
       return false;
     } else if (
-      !this._fulfillsMinVersion(depVersion) &&
-      !this._fulfillsMinVersion(devDepVersion)
+      !this._fulfillsVersionRange(depsVersion) &&
+      !this._fulfillsVersionRange(devDepsVersion)
     ) {
       red(
-        `✗ Your installed version of \`${packageName}\` is not supported, >=${MIN_NEXTJS_VERSION} needed.`,
+        `✗ Your \`package.json\` specifies a version of \`${packageName}\` outside of the compatible version range ${COMPATIBLE_NEXTJS_VERSIONS}.\n`,
       );
       return false;
     } else {
-      if (minVersion) {
-        green(`✓ ${packageName} >= ${MIN_NEXTJS_VERSION} is installed`);
-      } else {
-        green(`✓ ${packageName} is installed`);
-      }
+      green(
+        `✓ A compatible version of \`${packageName}\` is specified in \`package.json\`.`,
+      );
       return true;
     }
   }
 
-  private _fulfillsMinVersion(version: string): boolean {
-    // The latest version, which at the moment is greater than the minimum
-    // version, shouldn't be a blocker in the wizard.
+  private _fulfillsVersionRange(version: string): boolean {
+    // The latest version is currently 12.x, which is not yet supported.
     if (version === 'latest') {
-      return true;
+      return false;
     }
 
-    const cleanedVersion = clean(version);
-    if (cleanedVersion) {
-      // gte(x, y) : true if x >= y
-      return gte(cleanedVersion, MIN_NEXTJS_VERSION);
-    }
+    let cleanedUserVersion, isRange;
 
-    const minVersionRange = `>=${MIN_NEXTJS_VERSION}`;
-    const userVersionRange = validRange(version);
-    const minUserVersion = minVersion(userVersionRange);
-    if (minUserVersion == null) {
-      // This should never happen
-      return false;
+    if (valid(version)) {
+      cleanedUserVersion = valid(version);
+      isRange = false;
+    } else if (validRange(version)) {
+      cleanedUserVersion = validRange(version);
+      isRange = true;
     }
-    return satisfies(minUserVersion, minVersionRange);
+
+    return (
+      !!cleanedUserVersion &&
+      (isRange
+        ? subset(cleanedUserVersion, COMPATIBLE_NEXTJS_VERSIONS)
+        : satisfies(cleanedUserVersion, COMPATIBLE_NEXTJS_VERSIONS))
+    );
+  }
+
+  private _spliceInPlace(
+    arr: Array<any>,
+    start: number,
+    deleteCount: number,
+    ...inserts: any[]
+  ): Array<any> {
+    arr.splice(start, deleteCount, ...inserts);
+    return arr;
   }
 }

package/package.json

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

package/scripts/NextJs/configs/_error.js

@@ -0,0 +1,61 @@
+import NextErrorComponent from 'next/error';
+
+import * as Sentry from '@sentry/nextjs';
+
+const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {
+  if (!hasGetInitialPropsRun && err) {
+    // getInitialProps is not called in case of
+    // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
+    // err via _app.js so it can be captured
+    Sentry.captureException(err);
+    // Flushing is not required in this case as it only happens on the client
+  }
+
+  return <NextErrorComponent statusCode={statusCode} />;
+};
+
+MyError.getInitialProps = async ({ res, err, asPath }) => {
+  const errorInitialProps = await NextErrorComponent.getInitialProps({
+    res,
+    err,
+  });
+
+  // Workaround for https://github.com/vercel/next.js/issues/8592, mark when
+  // getInitialProps has run
+  errorInitialProps.hasGetInitialPropsRun = true;
+
+  // Running on the server, the response object (`res`) is available.
+  //
+  // Next.js will pass an err on the server if a page's data fetching methods
+  // threw or returned a Promise that rejected
+  //
+  // Running on the client (browser), Next.js will provide an err if:
+  //
+  //  - a page's `getInitialProps` threw or returned a Promise that rejected
+  //  - an exception was thrown somewhere in the React lifecycle (render,
+  //    componentDidMount, etc) that was caught by Next.js's React Error
+  //    Boundary. Read more about what types of exceptions are caught by Error
+  //    Boundaries: https://reactjs.org/docs/error-boundaries.html
+
+  if (err) {
+    Sentry.captureException(err);
+
+    // Flushing before returning is necessary if deploying to Vercel, see
+    // https://vercel.com/docs/platform/limits#streaming-responses
+    await Sentry.flush(2000);
+
+    return errorInitialProps;
+  }
+
+  // If this point is reached, getInitialProps was called without any
+  // information about what the error might be. This is unexpected and may
+  // indicate a bug introduced in Next.js, so record it in Sentry
+  Sentry.captureException(
+    new Error(`_error.js getInitialProps missing data at path: ${asPath}`),
+  );
+  await Sentry.flush(2000);
+
+  return errorInitialProps;
+};
+
+export default MyError;

package/scripts/NextJs/configs/next.config.js

@@ -9,7 +9,7 @@ const moduleExports = {
   // Your existing module.exports
 };
 
-const SentryWebpackPluginOptions = {
+const sentryWebpackPluginOptions = {
   // Additional config options for the Sentry Webpack plugin. Keep in mind that
   // the following options are set automatically, and overriding them is not
   // recommended:
@@ -23,4 +23,4 @@ const SentryWebpackPluginOptions = {
 
 // Make sure adding Sentry options is the last code to run before exporting, to
 // ensure that your source maps include changes from all other Webpack plugins
-module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);
+module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);