@sentry/wizard 3.25.2 → 3.27.0

package/src/nextjs/templates.ts

@@ -7,6 +7,7 @@ type WithSentryConfigOptions = {
   selfHosted: boolean;
   sentryUrl: string;
   tunnelRoute: boolean;
+  reactComponentAnnotation: boolean;
 };
 
 export function getWithSentryConfigOptionsTemplate({
@@ -14,6 +15,7 @@ export function getWithSentryConfigOptionsTemplate({
   projectSlug,
   selfHosted,
   tunnelRoute,
+  reactComponentAnnotation,
   sentryUrl,
 }: WithSentryConfigOptions): string {
   return `{
@@ -32,7 +34,15 @@ export function getWithSentryConfigOptionsTemplate({
     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
     // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,
+    widenClientFileUpload: true,${
+      reactComponentAnnotation
+        ? `\n
+    // Automatically annotate React components to show their full name in breadcrumbs and session replay
+    reactComponentAnnotation: {
+      enabled: true,
+    },`
+        : ''
+    }
 
     // ${
       tunnelRoute ? 'Route' : 'Uncomment to route'
@@ -102,9 +112,26 @@ export default withSentryConfig(
 `;
 }
 
+function getClientIntegrationsSnippet(features: { replay: boolean }) {
+  if (features.replay) {
+    return `
+
+  // Add optional integrations for additional features
+  integrations: [
+    Sentry.replayIntegration(),
+  ],`;
+  }
+
+  return '';
+}
+
 export function getSentryConfigContents(
   dsn: string,
   config: 'server' | 'client' | 'edge',
+  selectedFeaturesMap: {
+    replay: boolean;
+    performance: boolean;
+  },
 ): string {
   let primer;
   if (config === 'server') {
@@ -122,33 +149,31 @@ export function getSentryConfigContents(
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/`;
   }
 
-  let additionalOptions = '';
-  if (config === 'client') {
-    additionalOptions = `
+  const integrationsOptions = getClientIntegrationsSnippet({
+    replay: config === 'client' && selectedFeaturesMap.replay,
+  });
 
-  replaysOnErrorSampleRate: 1.0,
+  let replayOptions = '';
+  if (config === 'client') {
+    if (selectedFeaturesMap.replay) {
+      replayOptions += `
 
+  // Define how likely Replay events are sampled.
   // This sets the sample rate to be 10%. You may want this to be 100% while
   // in development and sample at a lower rate in production
   replaysSessionSampleRate: 0.1,
 
-  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
-  integrations: [
-    Sentry.replayIntegration({
-      // Additional Replay configuration goes in here, for example:
-      maskAllText: true,
-      blockAllMedia: true,
-    }),
-  ],`;
+  // Define how likely Replay events are sampled when an error occurs.
+  replaysOnErrorSampleRate: 1.0,`;
+    }
   }
 
-  let spotlightOption = '';
-  if (config === 'server') {
-    spotlightOption = `
+  let performanceOptions = '';
+  if (selectedFeaturesMap.performance) {
+    performanceOptions += `
 
-  // Uncomment the line below to enable Spotlight (https://spotlightjs.com)
-  // spotlight: process.env.NODE_ENV === 'development',
-  `;
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,`;
   }
 
   // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
@@ -157,13 +182,10 @@ export function getSentryConfigContents(
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  dsn: "${dsn}",
-
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1,
+  dsn: "${dsn}",${integrationsOptions}${performanceOptions}${replayOptions}
 
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,${additionalOptions}${spotlightOption}
+  debug: false,
 });
 `;
 }
@@ -261,7 +283,7 @@ export default function Page() {
 `;
 }
 
-export function getSentryExampleApiRoute() {
+export function getSentryExamplePagesDirApiRoute() {
   return `// A faulty API route to test Sentry's error monitoring
 export default function handler(_req, res) {
   throw new Error("Sentry Example API Route Error");
@@ -307,16 +329,19 @@ export default CustomErrorComponent;
 export function getSimpleUnderscoreErrorCopyPasteSnippet() {
   return `
 ${chalk.green(`import * as Sentry from '@sentry/nextjs';`)}
+${chalk.green(`import Error from "next/error";`)}
 
 ${chalk.dim(
   '// Replace "YourCustomErrorComponent" with your custom error component!',
 )}
 YourCustomErrorComponent.getInitialProps = async (${chalk.green(
-    `contextData`,
+    'contextData',
   )}) => {
   ${chalk.green('await Sentry.captureUnderscoreErrorException(contextData);')}
 
   ${chalk.dim('// ...other getInitialProps code')}
+
+  return Error.getInitialProps(contextData);
 };
 `;
 }
@@ -326,6 +351,7 @@ export function getFullUnderscoreErrorCopyPasteSnippet(isTs: boolean) {
 import * as Sentry from '@sentry/nextjs';${
     isTs ? '\nimport type { NextPageContext } from "next";' : ''
   }
+import Error from "next/error";
 
 ${chalk.dim(
   '// Replace "YourCustomErrorComponent" with your custom error component!',
@@ -334,6 +360,8 @@ YourCustomErrorComponent.getInitialProps = async (contextData${
     isTs ? ': NextPageContext' : ''
   }) => {
   await Sentry.captureUnderscoreErrorException(contextData);
+
+  return Error.getInitialProps(contextData);
 };
 `;
 }

package/src/run.ts

@@ -60,7 +60,7 @@ export async function run(argv: Args) {
           { value: 'android', label: 'Android' },
           { value: 'cordova', label: 'Cordova' },
           { value: 'electron', label: 'Electron' },
-          { value: 'nextjs', label: 'NextJS' },
+          { value: 'nextjs', label: 'Next.js' },
           { value: 'remix', label: 'Remix' },
           { value: 'sveltekit', label: 'SvelteKit' },
           { value: 'sourcemaps', label: 'Configure Source Maps Upload' },

package/src/sourcemaps/sourcemaps-wizard.ts

@@ -141,7 +141,7 @@ async function askForUsedBundlerTool(): Promise<SupportedTools> {
         {
           label: 'Next.js',
           value: 'nextjs',
-          hint: 'Select this option if you want to set up source maps in a NextJS project.',
+          hint: 'Select this option if you want to set up source maps in a Next.js project.',
         },
         {
           label: 'Remix',

package/src/telemetry.ts

@@ -8,6 +8,7 @@ import {
   runWithAsyncContext,
   setTag,
   startSpan,
+  flush,
 } from '@sentry/node';
 import packageJson from '../package.json';
 
@@ -49,7 +50,12 @@ export async function withTelemetry<F>(
     throw e;
   } finally {
     sentryHub.endSession();
-    await sentryClient.flush(3000);
+    await sentryClient.flush(3000).then(null, () => {
+      // If telemetry flushing fails we generally don't care
+    });
+    await flush(3000).then(null, () => {
+      // If telemetry flushing fails we generally don't care
+    });
   }
 }
 

package/src/utils/clack-utils.ts

@@ -10,12 +10,11 @@ import { setInterval } from 'timers';
 import { URL } from 'url';
 import * as Sentry from '@sentry/node';
 import { hasPackageInstalled, PackageDotJson } from './package-json';
-import { SentryProjectData, WizardOptions } from './types';
+import { Feature, SentryProjectData, WizardOptions } from './types';
 import { traceStep } from '../telemetry';
 import {
   detectPackageManger,
   PackageManager,
-  installPackageWithPackageManager,
   packageManagers,
 } from './package-manager';
 import { debug } from './debug';
@@ -23,6 +22,9 @@ import { fulfillsVersionRange } from './semver';
 
 const opn = require('opn') as (
   url: string,
+  options?: {
+    wait?: boolean;
+  },
 ) => Promise<childProcess.ChildProcess>;
 
 export const SENTRY_DOT_ENV_FILE = '.env.sentry-build-plugin';
@@ -383,7 +385,31 @@ export async function installPackage({
     );
 
     try {
-      await installPackageWithPackageManager(packageManager, packageName);
+      await new Promise<void>((resolve, reject) => {
+        childProcess.exec(
+          `${packageManager.installCommand} ${packageName} ${packageManager.flags}`,
+          (err, stdout, stderr) => {
+            if (err) {
+              // Write a log file so we can better troubleshoot issues
+              fs.writeFileSync(
+                path.join(
+                  process.cwd(),
+                  `sentry-wizard-installation-error-${Date.now()}.log`,
+                ),
+                JSON.stringify({
+                  stdout,
+                  stderr,
+                }),
+                { encoding: 'utf8' },
+              );
+
+              reject(err);
+            } else {
+              resolve();
+            }
+          },
+        );
+      });
     } catch (e) {
       sdkInstallSpinner.stop('Installation failed.');
       clack.log.error(
@@ -391,7 +417,7 @@ export async function installPackage({
           'Encountered the following error during installation:',
           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
         )}\n\n${e}\n\n${chalk.dim(
-          'If you think this issue is caused by the Sentry wizard, let us know here:\nhttps://github.com/getsentry/sentry-wizard/issues',
+          "The wizard has created a `sentry-wizard-installation-error-*.log` file. If you think this issue is caused by the Sentry wizard, create an issue on GitHub and include the log file's content:\nhttps://github.com/getsentry/sentry-wizard/issues",
         )}`,
       );
       await abort();
@@ -614,10 +640,21 @@ SENTRY_AUTH_TOKEN=${authToken}
 }
 
 async function addCliConfigFileToGitIgnore(filename: string): Promise<void> {
-  //TODO: Add a check to see if the file is already ignored in .gitignore
+  const gitignorePath = path.join(process.cwd(), '.gitignore');
+
   try {
+    const gitignoreContent = await fs.promises.readFile(gitignorePath, 'utf8');
+    if (gitignoreContent.split(/\r?\n/).includes(filename)) {
+      clack.log.info(
+        `${chalk.bold('.gitignore')} already has ${chalk.bold(
+          filename,
+        )}. Will not add it again.`,
+      );
+      return;
+    }
+
     await fs.promises.appendFile(
-      path.join(process.cwd(), '.gitignore'),
+      gitignorePath,
       `\n# Sentry Config File\n${filename}\n`,
       { encoding: 'utf8' },
     );
@@ -958,7 +995,7 @@ async function askForWizardLogin(options: {
     )}\n\n${chalk.cyan(urlToOpen)}`,
   );
 
-  opn(urlToOpen).catch(() => {
+  opn(urlToOpen, { wait: false }).catch(() => {
     // opn throws in environments that don't have a browser (e.g. remote shells) so we just noop here
   });
 
@@ -1240,3 +1277,36 @@ export async function askShouldCreateExamplePage(
     ),
   );
 }
+
+export async function featureSelectionPrompt<F extends ReadonlyArray<Feature>>(
+  features: F,
+): Promise<{ [key in F[number]['id']]: boolean }> {
+  return traceStep('feature-selection', async () => {
+    const selectedFeatures: Record<string, boolean> = {};
+
+    for (const feature of features) {
+      const selected = await abortIfCancelled(
+        clack.select({
+          message: feature.prompt,
+          initialValue: true,
+          options: [
+            {
+              value: true,
+              label: 'Yes',
+              hint: feature.enabledHint,
+            },
+            {
+              value: false,
+              label: 'No',
+              hint: feature.disabledHint,
+            },
+          ],
+        }),
+      );
+
+      selectedFeatures[feature.id] = selected;
+    }
+
+    return selectedFeatures as { [key in F[number]['id']]: boolean };
+  });
+}

package/src/utils/package-manager.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/typedef */
-import { exec } from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
-import { promisify } from 'util';
 
 import * as Sentry from '@sentry/node';
 import { traceStep } from '../telemetry';
@@ -15,6 +13,8 @@ export interface PackageManager {
   buildCommand: string;
   /* The command that the package manager uses to run a script from package.json */
   runScriptCommand: string;
+  flags: string;
+  detect: () => boolean;
 }
 
 export const BUN: PackageManager = {
@@ -24,14 +24,47 @@ export const BUN: PackageManager = {
   installCommand: 'bun add',
   buildCommand: 'bun run build',
   runScriptCommand: 'bun run',
+  flags: '',
+  detect: () => fs.existsSync(path.join(process.cwd(), BUN.lockFile)),
 };
-export const YARN: PackageManager = {
+export const YARN_V1: PackageManager = {
   name: 'yarn',
-  label: 'Yarn',
+  label: 'Yarn V1',
   lockFile: 'yarn.lock',
   installCommand: 'yarn add',
   buildCommand: 'yarn build',
   runScriptCommand: 'yarn',
+  flags: '--ignore-workspace-root-check',
+  detect: () => {
+    try {
+      return fs
+        .readFileSync(path.join(process.cwd(), YARN_V1.lockFile), 'utf-8')
+        .slice(0, 500)
+        .includes('yarn lockfile v1');
+    } catch (e) {
+      return false;
+    }
+  },
+};
+/** YARN V2/3/4 */
+export const YARN_V2: PackageManager = {
+  name: 'yarn',
+  label: 'Yarn V2/3/4',
+  lockFile: 'yarn.lock',
+  installCommand: 'yarn add',
+  buildCommand: 'yarn build',
+  runScriptCommand: 'yarn',
+  flags: '',
+  detect: () => {
+    try {
+      return fs
+        .readFileSync(path.join(process.cwd(), YARN_V2.lockFile), 'utf-8')
+        .slice(0, 500)
+        .includes('__metadata');
+    } catch (e) {
+      return false;
+    }
+  },
 };
 export const PNPM: PackageManager = {
   name: 'pnpm',
@@ -40,6 +73,8 @@ export const PNPM: PackageManager = {
   installCommand: 'pnpm add',
   buildCommand: 'pnpm build',
   runScriptCommand: 'pnpm',
+  flags: '--ignore-workspace-root-check',
+  detect: () => fs.existsSync(path.join(process.cwd(), PNPM.lockFile)),
 };
 export const NPM: PackageManager = {
   name: 'npm',
@@ -48,14 +83,16 @@ export const NPM: PackageManager = {
   installCommand: 'npm add',
   buildCommand: 'npm run build',
   runScriptCommand: 'npm run',
+  flags: '',
+  detect: () => fs.existsSync(path.join(process.cwd(), NPM.lockFile)),
 };
 
-export const packageManagers = [BUN, YARN, PNPM, NPM];
+export const packageManagers = [BUN, YARN_V1, YARN_V2, PNPM, NPM];
 
 export function detectPackageManger(): PackageManager | null {
   return traceStep('detect-package-manager', () => {
     for (const packageManager of packageManagers) {
-      if (fs.existsSync(path.join(process.cwd(), packageManager.lockFile))) {
+      if (packageManager.detect()) {
         Sentry.setTag('package-manager', packageManager.name);
         return packageManager;
       }
@@ -64,10 +101,3 @@ export function detectPackageManger(): PackageManager | null {
     return null;
   });
 }
-
-export async function installPackageWithPackageManager(
-  packageManager: PackageManager,
-  packageName: string,
-): Promise<void> {
-  await promisify(exec)(`${packageManager.installCommand} ${packageName}`);
-}

package/src/utils/types.ts

@@ -44,3 +44,10 @@ export type WizardOptions = {
     selfHosted: boolean;
   };
 };
+
+export interface Feature {
+  id: string;
+  prompt: string;
+  enabledHint?: string;
+  disabledHint?: string;
+}

package/src/utils/url.ts

@@ -15,8 +15,12 @@ export function getIssueStreamUrl({
   projectId: string;
 }): string {
   const urlObject = new URL(url);
-  urlObject.host = `${orgSlug}.${urlObject.host}`;
-  urlObject.pathname = '/issues/';
+  if (urlObject.host === 'sentry.io') {
+    urlObject.host = `${orgSlug}.${urlObject.host}`;
+    urlObject.pathname = '/issues/';
+  } else {
+    urlObject.pathname = `/organizations/${orgSlug}/issues/`;
+  }
   urlObject.searchParams.set('project', projectId);
 
   return urlObject.toString();