@sentry/wizard 3.34.4 → 3.36.0

package/src/nuxt/nuxt-wizard.ts

@@ -0,0 +1,177 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import * as clack from '@clack/prompts';
+import * as Sentry from '@sentry/node';
+import chalk from 'chalk';
+import { lt, minVersion } from 'semver';
+import type { WizardOptions } from '../utils/types';
+import { traceStep, withTelemetry } from '../telemetry';
+import {
+  abort,
+  abortIfCancelled,
+  addDotEnvSentryBuildPluginFile,
+  askShouldCreateExampleComponent,
+  askShouldCreateExamplePage,
+  confirmContinueIfNoOrDirtyGitRepo,
+  ensurePackageIsInstalled,
+  getOrAskForProjectData,
+  getPackageDotJson,
+  getPackageManager,
+  installPackage,
+  printWelcome,
+  runPrettierIfInstalled,
+} from '../utils/clack-utils';
+import { getPackageVersion, hasPackageInstalled } from '../utils/package-json';
+import {
+  addSDKModule,
+  getNuxtConfig,
+  createConfigFiles,
+  addNuxtOverrides,
+} from './sdk-setup';
+import {
+  createExampleComponent,
+  createExamplePage,
+  supportsExamplePage,
+} from './sdk-example';
+import { isNuxtV4 } from './utils';
+
+export function runNuxtWizard(options: WizardOptions) {
+  return withTelemetry(
+    {
+      enabled: options.telemetryEnabled,
+      integration: 'nuxt',
+      wizardOptions: options,
+    },
+    () => runNuxtWizardWithTelemetry(options),
+  );
+}
+
+export async function runNuxtWizardWithTelemetry(
+  options: WizardOptions,
+): Promise<void> {
+  printWelcome({
+    wizardName: 'Sentry Nuxt Wizard',
+    promoCode: options.promoCode,
+    telemetryEnabled: options.telemetryEnabled,
+  });
+
+  await confirmContinueIfNoOrDirtyGitRepo();
+
+  const packageJson = await getPackageDotJson();
+
+  await ensurePackageIsInstalled(packageJson, 'nuxt', 'Nuxt');
+
+  const nuxtVersion = getPackageVersion('nuxt', packageJson);
+  Sentry.setTag('nuxt-version', nuxtVersion);
+
+  const minVer = minVersion(nuxtVersion || '0.0.0');
+
+  if (!nuxtVersion || !minVer || lt(minVer, '3.7.0')) {
+    clack.log.warn(
+      "It seems you're using a Nuxt version <3.7.0 which is not supported by Sentry.\nWe recommend upgrading to the latest version before you continue.",
+    );
+    const shouldContinue = await abortIfCancelled(
+      clack.select({
+        message: 'Do you want to continue anyway?',
+        options: [
+          {
+            label: 'Yes, continue',
+            hint: 'The SDK might not work correctly',
+            value: true,
+          },
+          { label: "No, I'll upgrade first", value: false },
+        ],
+      }),
+    );
+    if (!shouldContinue) {
+      await abort('Exiting Wizard', 0);
+      return;
+    }
+  }
+
+  const { authToken, selectedProject, selfHosted, sentryUrl } =
+    await getOrAskForProjectData(options, 'javascript-nuxt');
+
+  const packageManager = await getPackageManager();
+
+  await addNuxtOverrides(packageManager, minVer);
+
+  const sdkAlreadyInstalled = hasPackageInstalled('@sentry/nuxt', packageJson);
+  Sentry.setTag('sdk-already-installed', sdkAlreadyInstalled);
+
+  await installPackage({
+    packageName: '@sentry/nuxt',
+    alreadyInstalled: sdkAlreadyInstalled,
+    packageManager,
+  });
+
+  await addDotEnvSentryBuildPluginFile(authToken);
+
+  const nuxtConfig = await traceStep('load-nuxt-config', getNuxtConfig);
+
+  const projectData = {
+    org: selectedProject.organization.slug,
+    project: selectedProject.slug,
+    projectId: selectedProject.id,
+    url: sentryUrl,
+    selfHosted,
+  };
+
+  await traceStep('configure-sdk', async () => {
+    await addSDKModule(nuxtConfig, projectData);
+    await createConfigFiles(selectedProject.keys[0].dsn.public);
+  });
+
+  let shouldCreateExamplePage = false;
+  let shouldCreateExampleButton = false;
+
+  const isV4 = await isNuxtV4(nuxtConfig, nuxtVersion);
+  const canCreateExamplePage = await supportsExamplePage(isV4);
+  Sentry.setTag('supports-example-page-creation', canCreateExamplePage);
+
+  if (canCreateExamplePage) {
+    shouldCreateExamplePage = await askShouldCreateExamplePage();
+
+    if (shouldCreateExamplePage) {
+      await traceStep('create-example-page', async () =>
+        createExamplePage(isV4, projectData),
+      );
+    }
+  } else {
+    shouldCreateExampleButton = await askShouldCreateExampleComponent();
+
+    if (shouldCreateExampleButton) {
+      await traceStep('create-example-component', async () =>
+        createExampleComponent(isV4),
+      );
+    }
+  }
+
+  await runPrettierIfInstalled();
+
+  clack.outro(
+    buildOutroMessage(shouldCreateExamplePage, shouldCreateExampleButton),
+  );
+}
+
+function buildOutroMessage(
+  shouldCreateExamplePage: boolean,
+  shouldCreateExampleButton: boolean,
+): string {
+  let msg = chalk.green('\nSuccessfully installed the Sentry Nuxt SDK!');
+
+  if (shouldCreateExamplePage) {
+    msg += `\n\nYou can validate your setup by visiting ${chalk.cyan(
+      '"/sentry-example-page"',
+    )}.`;
+  }
+  if (shouldCreateExampleButton) {
+    msg += `\n\nYou can validate your setup by adding the ${chalk.cyan(
+      '`SentryExampleButton`',
+    )} component to a page and triggering it.`;
+  }
+
+  msg += `\n\nCheck out the SDK documentation for further configuration:
+https://docs.sentry.io/platforms/javascript/guides/nuxt/`;
+
+  return msg;
+}

package/src/nuxt/sdk-example.ts

@@ -0,0 +1,135 @@
+import * as fs from 'fs';
+import * as path from 'path';
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import {
+  getIndexRouteTemplate,
+  getSentryExampleApiTemplate,
+  getSentryExamplePageTemplate,
+  getSentryErrorButtonTemplate,
+} from './templates';
+import { abort, isUsingTypeScript } from '../utils/clack-utils';
+import chalk from 'chalk';
+import * as Sentry from '@sentry/node';
+
+function getSrcDirectory(isNuxtV4: boolean) {
+  // In nuxt v4, the src directory is `app/` unless
+  // users already had a `pages` directory
+  return isNuxtV4 && !fs.existsSync(path.resolve('pages')) ? 'app' : '.';
+}
+
+export async function supportsExamplePage(isNuxtV4: boolean) {
+  // We currently only support creating an example page
+  // if users can reliably access it without having to
+  // add code changes themselves.
+  //
+  // If users have an `app.vue` layout without the
+  // needed component to render routes (<NuxtPage/>),
+  // we bail out of creating an example page altogether.
+  const src = getSrcDirectory(isNuxtV4);
+  const app = path.join(src, 'app.vue');
+
+  // If there's no `app.vue` layout, nuxt automatically renders
+  // the routes.
+  if (!fs.existsSync(path.resolve(app))) {
+    return true;
+  }
+
+  const content = await fs.promises.readFile(path.resolve(app), 'utf8');
+  return !!content.match(/<NuxtPage/g);
+}
+
+export async function createExamplePage(
+  isNuxtV4: boolean,
+  options: {
+    org: string;
+    project: string;
+    projectId: string;
+    url: string;
+  },
+) {
+  try {
+    const src = getSrcDirectory(isNuxtV4);
+    const pages = path.join(src, 'pages');
+
+    if (!fs.existsSync(path.resolve(pages))) {
+      fs.mkdirSync(path.resolve(pages), { recursive: true });
+
+      const indexPage = path.join(pages, 'index.vue');
+
+      await fs.promises.writeFile(
+        path.resolve(indexPage),
+        getIndexRouteTemplate(),
+      );
+
+      clack.log.success(`Created ${chalk.cyan(indexPage)}.`);
+    }
+
+    const examplePage = path.join(pages, 'sentry-example-page.vue');
+
+    if (fs.existsSync(path.resolve(examplePage))) {
+      clack.log.warn(
+        `It seems like a sentry example page already exists. Skipping creation of example page.`,
+      );
+      return;
+    }
+
+    await fs.promises.writeFile(
+      path.resolve(examplePage),
+      getSentryExamplePageTemplate(options),
+    );
+
+    clack.log.success(`Created ${chalk.cyan(examplePage)}.`);
+
+    const api = path.join('server', 'api');
+
+    if (!fs.existsSync(path.resolve(api))) {
+      fs.mkdirSync(path.resolve(api), { recursive: true });
+    }
+
+    const exampleApi = path.join(
+      api,
+      isUsingTypeScript() ? 'sentry-example-api.ts' : 'sentry-example-api.js',
+    );
+
+    await fs.promises.writeFile(
+      path.resolve(exampleApi),
+      getSentryExampleApiTemplate(),
+    );
+
+    clack.log.success(`Created ${chalk.cyan(exampleApi)}.`);
+  } catch (e: unknown) {
+    clack.log.error('Error while creating an example page to test Sentry:');
+    clack.log.info(
+      chalk.dim(
+        typeof e === 'object' && e != null && 'toString' in e
+          ? e.toString()
+          : typeof e === 'string'
+          ? e
+          : 'Unknown error',
+      ),
+    );
+    Sentry.captureException(
+      'Error while creating an example Nuxt page to test Sentry',
+    );
+    await abort('Exiting Wizard');
+  }
+}
+
+export async function createExampleComponent(isNuxtV4: boolean) {
+  const src = getSrcDirectory(isNuxtV4);
+  const components = path.join(src, 'components');
+
+  if (!fs.existsSync(path.resolve(components))) {
+    fs.mkdirSync(path.resolve(components), { recursive: true });
+  }
+
+  const exampleComponent = path.join(components, 'SentryErrorButton.vue');
+
+  await fs.promises.writeFile(
+    path.resolve(exampleComponent),
+    getSentryErrorButtonTemplate(),
+  );
+
+  clack.log.success(`Created ${chalk.cyan(exampleComponent)}.`);
+}

package/src/nuxt/sdk-setup.ts

@@ -0,0 +1,248 @@
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import * as Sentry from '@sentry/node';
+import chalk from 'chalk';
+import fs from 'fs';
+// @ts-expect-error - magicast is ESM and TS complains about that. It works though
+import { loadFile, generateCode, MagicastError } from 'magicast';
+// @ts-expect-error - magicast is ESM and TS complains about that. It works though
+import { addNuxtModule } from 'magicast/helpers';
+import path from 'path';
+import {
+  getConfigBody,
+  getDefaultNuxtConfig,
+  getNuxtModuleFallbackTemplate,
+  getSentryConfigContents,
+} from './templates';
+import {
+  abort,
+  abortIfCancelled,
+  askShouldAddPackageOverride,
+  featureSelectionPrompt,
+  isUsingTypeScript,
+} from '../utils/clack-utils';
+import { traceStep } from '../telemetry';
+import { lt, SemVer } from 'semver';
+import { PackageManager } from '../utils/package-manager';
+
+const possibleNuxtConfig = [
+  'nuxt.config.js',
+  'nuxt.config.mjs',
+  'nuxt.config.cjs',
+  'nuxt.config.ts',
+  'nuxt.config.mts',
+  'nuxt.config.cts',
+];
+
+export async function getNuxtConfig(): Promise<string> {
+  let configFile = possibleNuxtConfig.find((fileName) =>
+    fs.existsSync(path.join(process.cwd(), fileName)),
+  );
+
+  if (!configFile) {
+    clack.log.info('No Nuxt config file found, creating a new one.');
+    Sentry.setTag('nuxt-config-strategy', 'create');
+    // nuxt recommends its config to be .ts by default
+    configFile = 'nuxt.config.ts';
+
+    await fs.promises.writeFile(
+      path.join(process.cwd(), configFile),
+      getDefaultNuxtConfig(),
+      { encoding: 'utf-8', flag: 'w' },
+    );
+
+    clack.log.success(`Created ${chalk.cyan('nuxt.config.ts')}.`);
+  }
+
+  return path.join(process.cwd(), configFile);
+}
+
+export async function addSDKModule(
+  config: string,
+  options: { org: string; project: string; url: string; selfHosted: boolean },
+): Promise<void> {
+  try {
+    const mod = await loadFile(config);
+
+    addNuxtModule(mod, '@sentry/nuxt/module', 'sentry', {
+      sourceMapsUploadOptions: {
+        org: options.org,
+        project: options.project,
+        ...(options.selfHosted && { url: options.url }),
+      },
+    });
+    addNuxtModule(mod, '@sentry/nuxt/module', 'sourcemap', {
+      client: 'hidden',
+    });
+
+    const { code } = generateCode(mod);
+
+    await fs.promises.writeFile(config, code, { encoding: 'utf-8', flag: 'w' });
+
+    clack.log.success(
+      `Added Sentry Nuxt Module to ${chalk.cyan(path.basename(config))}.`,
+    );
+  } catch (e: unknown) {
+    // Cases where users spread options are not covered by magicast,
+    // so we fall back to showing how to configure the nuxt config
+    // manually.
+    if (e instanceof MagicastError) {
+      clack.log.warn(
+        `Automatic configuration of ${chalk.cyan(
+          path.basename(config),
+        )} failed, please add the following settings:`,
+      );
+      // eslint-disable-next-line no-console
+      console.log(`\n\n${getNuxtModuleFallbackTemplate(options)}\n\n`);
+    } else {
+      clack.log.error(
+        'Error while adding the Sentry Nuxt Module to the Nuxt config.',
+      );
+      clack.log.info(
+        chalk.dim(
+          typeof e === 'object' && e != null && 'toString' in e
+            ? e.toString()
+            : typeof e === 'string'
+            ? e
+            : 'Unknown error',
+        ),
+      );
+      Sentry.captureException('Error while setting up the Nuxt SDK');
+      await abort('Exiting Wizard');
+    }
+  }
+}
+
+export async function createConfigFiles(dsn: string) {
+  const selectedFeatures = await featureSelectionPrompt([
+    {
+      id: 'performance',
+      prompt: `Do you want to enable ${chalk.bold(
+        'Tracing',
+      )} to track the performance of your application?`,
+      enabledHint: 'recommended',
+    },
+    {
+      id: 'replay',
+      prompt: `Do you want to enable ${chalk.bold(
+        'Sentry Session Replay',
+      )} to get a video-like reproduction of errors during a user session?`,
+      enabledHint: 'recommended, but increases bundle size',
+    },
+  ] as const);
+
+  const typeScriptDetected = isUsingTypeScript();
+
+  const configVariants = ['server', 'client'] as const;
+
+  for (const configVariant of configVariants) {
+    await traceStep(`create-sentry-${configVariant}-config`, async () => {
+      const jsConfig = `sentry.${configVariant}.config.js`;
+      const tsConfig = `sentry.${configVariant}.config.ts`;
+
+      const jsConfigExists = fs.existsSync(path.join(process.cwd(), jsConfig));
+      const tsConfigExists = fs.existsSync(path.join(process.cwd(), tsConfig));
+
+      let shouldWriteFile = true;
+
+      if (jsConfigExists || tsConfigExists) {
+        const existingConfigs = [];
+
+        if (jsConfigExists) {
+          existingConfigs.push(jsConfig);
+        }
+
+        if (tsConfigExists) {
+          existingConfigs.push(tsConfig);
+        }
+
+        const overwriteExistingConfigs = await abortIfCancelled(
+          clack.confirm({
+            message: `Found existing Sentry ${configVariant} config (${existingConfigs.join(
+              ', ',
+            )}). Overwrite ${existingConfigs.length > 1 ? 'them' : 'it'}?`,
+          }),
+        );
+        Sentry.setTag(
+          `overwrite-${configVariant}-config`,
+          overwriteExistingConfigs,
+        );
+
+        shouldWriteFile = overwriteExistingConfigs;
+
+        if (overwriteExistingConfigs) {
+          if (jsConfigExists) {
+            fs.unlinkSync(path.join(process.cwd(), jsConfig));
+            clack.log.warn(`Removed existing ${chalk.cyan(jsConfig)}.`);
+          }
+          if (tsConfigExists) {
+            fs.unlinkSync(path.join(process.cwd(), tsConfig));
+            clack.log.warn(`Removed existing ${chalk.cyan(tsConfig)}.`);
+          }
+        }
+      }
+
+      if (shouldWriteFile) {
+        await fs.promises.writeFile(
+          path.join(process.cwd(), typeScriptDetected ? tsConfig : jsConfig),
+          getSentryConfigContents(dsn, configVariant, selectedFeatures),
+          { encoding: 'utf8', flag: 'w' },
+        );
+        clack.log.success(
+          `Created new ${chalk.cyan(
+            typeScriptDetected ? tsConfig : jsConfig,
+          )}.`,
+        );
+        Sentry.setTag(`created-${configVariant}-config`, true);
+      } else {
+        clack.log.info(
+          `Okay, here are the changes your ${chalk.cyan(
+            typeScriptDetected ? tsConfig : jsConfig,
+          )} should contain:`,
+        );
+        // eslint-disable-next-line no-console
+        console.log(
+          '\n\n  ' +
+            getConfigBody(dsn, configVariant, selectedFeatures) +
+            '\n\n',
+        );
+      }
+    });
+  }
+}
+
+export async function addNuxtOverrides(
+  packageManager: PackageManager,
+  nuxtMinVer: SemVer | null,
+) {
+  const overrides = [
+    {
+      pkgName: 'nitropack',
+      pkgVersion: '~2.9.7',
+    },
+    {
+      pkgName: '@vercel/nft',
+      pkgVersion: '^0.27.4',
+    },
+    ...(nuxtMinVer && lt(nuxtMinVer, '3.14.0')
+      ? [{ pkgName: 'ofetch', pkgVersion: '^1.4.0' }]
+      : []),
+  ];
+
+  clack.log.warn(
+    `To ensure Sentry can properly instrument your code it needs to add version overrides for some Nuxt dependencies.\n\nFor more info see: ${chalk.cyan(
+      'https://github.com/getsentry/sentry-javascript/issues/14514',
+    )}`,
+  );
+
+  for (const { pkgName, pkgVersion } of overrides) {
+    const shouldAddOverride = await askShouldAddPackageOverride(
+      pkgName,
+      pkgVersion,
+    );
+
+    if (shouldAddOverride) {
+      await packageManager.addOverride(pkgName, pkgVersion);
+    }
+  }
+}