@sentry/wizard 3.34.3 → 3.35.0

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,209 @@
+// @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,
+  featureSelectionPrompt,
+  isUsingTypeScript,
+} from '../utils/clack-utils';
+import { traceStep } from '../telemetry';
+
+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',
+        );
+      }
+    });
+  }
+}

package/src/nuxt/templates.ts

@@ -0,0 +1,296 @@
+import { getIssueStreamUrl } from '../utils/url';
+
+type SelectedSentryFeatures = {
+  performance: boolean;
+  replay: boolean;
+};
+
+export function getDefaultNuxtConfig(): string {
+  return `// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true }
+})
+`;
+}
+
+export function getNuxtModuleFallbackTemplate(options: {
+  org: string;
+  project: string;
+  url: string;
+  selfHosted: boolean;
+}): string {
+  return `  modules: ["@sentry/nuxt/module"],
+  sentry: {
+    sourceMapsUploadOptions: {
+      org: "${options.org}",
+      project: "${options.project}",${
+    options.selfHosted ? `\n      url: "${options.url}",` : ''
+  }
+    },
+  },
+  sourcemap: { client: "hidden" },`;
+}
+
+export function getSentryConfigContents(
+  dsn: string,
+  config: 'client' | 'server',
+  selectedFeatures: SelectedSentryFeatures,
+): string {
+  if (config === 'client') {
+    return getSentryClientConfigContents(dsn, selectedFeatures);
+  }
+
+  return getSentryServerConfigContents(dsn, selectedFeatures);
+}
+
+const featuresConfigMap: Record<keyof SelectedSentryFeatures, string> = {
+  performance: [
+    '  // We recommend adjusting this value in production, or using tracesSampler',
+    '  // for finer control',
+    '  tracesSampleRate: 1.0,',
+  ].join('\n'),
+  replay: [
+    '  // 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,',
+    '  ',
+    '  // If the entire session is not sampled, use the below sample rate to sample',
+    '  // sessions when an error occurs.',
+    '  replaysOnErrorSampleRate: 1.0,',
+    '  ',
+    "  // If you don't want to use Session Replay, just remove the line below:",
+    '  integrations: [Sentry.replayIntegration()],',
+  ].join('\n'),
+};
+
+const featuresMap: Record<
+  'client' | 'server',
+  Array<keyof SelectedSentryFeatures>
+> = {
+  client: ['performance', 'replay'],
+  server: ['performance'],
+};
+
+export function getConfigBody(
+  dsn: string,
+  variant: 'client' | 'server',
+  selectedFeatures: SelectedSentryFeatures,
+) {
+  return [
+    `dsn: "${dsn}",`,
+    Object.entries(selectedFeatures)
+      .map(([feature, activated]: [keyof SelectedSentryFeatures, boolean]) => {
+        return featuresMap[variant].includes(feature) && activated
+          ? featuresConfigMap[feature]
+          : null;
+      })
+      .filter(Boolean)
+      .join('\n\n'),
+  ]
+    .filter(Boolean)
+    .join('\n\n');
+}
+
+function getSentryClientConfigContents(
+  dsn: string,
+  selectedFeatures: SelectedSentryFeatures,
+): string {
+  return `import * as Sentry from "@sentry/nuxt";
+
+Sentry.init({
+  // If set up, you can use your runtime config here
+  // dsn: useRuntimeConfig().public.sentry.dsn,
+  ${getConfigBody(dsn, 'client', selectedFeatures)}
+  
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});
+`;
+}
+
+function getSentryServerConfigContents(
+  dsn: string,
+  selectedFeatures: SelectedSentryFeatures,
+): string {
+  return `import * as Sentry from "@sentry/nuxt";
+ 
+Sentry.init({
+  ${getConfigBody(dsn, 'server', selectedFeatures)}
+  
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});
+`;
+}
+
+export function getIndexRouteTemplate(): string {
+  return `<!--
+This is just to verify the sentry-example-page.
+Feel free to delete this file.
+-->
+
+<template></template>`;
+}
+
+export function getSentryExamplePageTemplate(options: {
+  url: string;
+  org: string;
+  projectId: string;
+}): string {
+  const { url, org, projectId } = options;
+  const issuesPageLink = getIssueStreamUrl({ url, orgSlug: org, projectId });
+
+  return `<!--
+This is just a very simple page with a button to throw an example error.
+Feel free to delete this file.
+-->
+
+<script setup>
+  import * as Sentry from '@sentry/nuxt';
+  import { useFetch} from '#imports'
+  
+  function getSentryData() {
+    Sentry.startSpan(
+      {
+        name: 'Example Frontend Span',
+        op: 'test'
+      },
+      async () => {
+        const { error } = await useFetch('/api/sentry-example-api');
+        if (error.value) {
+          throw new Error('Sentry Example Frontend Error');
+        }
+      }
+    )
+  }
+</script>
+
+<template>
+  <title>Sentry Onboarding</title>
+  <div>
+  <main>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 44">
+      <path
+        fill="currentColor"
+        d="M124.32,28.28,109.56,9.22h-3.68V34.77h3.73V15.19l15.18,19.58h3.26V9.22h-3.73ZM87.15,23.54h13.23V20.22H87.14V12.53h14.93V9.21H83.34V34.77h18.92V31.45H87.14ZM71.59,20.3h0C66.44,19.06,65,18.08,65,15.7c0-2.14,1.89-3.59,4.71-3.59a12.06,12.06,0,0,1,7.07,2.55l2-2.83a14.1,14.1,0,0,0-9-3c-5.06,0-8.59,3-8.59,7.27,0,4.6,3,6.19,8.46,7.52C74.51,24.74,76,25.78,76,28.11s-2,3.77-5.09,3.77a12.34,12.34,0,0,1-8.3-3.26l-2.25,2.69a15.94,15.94,0,0,0,10.42,3.85c5.48,0,9-2.95,9-7.51C79.75,23.79,77.47,21.72,71.59,20.3ZM195.7,9.22l-7.69,12-7.64-12h-4.46L186,24.67V34.78h3.84V24.55L200,9.22Zm-64.63,3.46h8.37v22.1h3.84V12.68h8.37V9.22H131.08ZM169.41,24.8c3.86-1.07,6-3.77,6-7.63,0-4.91-3.59-8-9.38-8H154.67V34.76h3.8V25.58h6.45l6.48,9.2h4.44l-7-9.82Zm-10.95-2.5V12.6h7.17c3.74,0,5.88,1.77,5.88,4.84s-2.29,4.86-5.84,4.86Z M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z"
+      />
+    </svg>
+    <p>
+      Get Started with this <strong>simple Example:</strong>
+    </p>
+
+    <p>1. Send us a sample error:</p>
+    <button type="button" @click="getSentryData"> Throw error! </button>
+
+    <p>
+      2. Look for the error on the
+      <a href="${issuesPageLink}">Issues Page</a>.
+    </p>
+    <p style="margin-top: 24px;">
+      For more information, take a look at the
+      <a href="https://docs.sentry.io/platforms/javascript/guides/nuxt/">
+        Sentry Nuxt Documentation
+      </a>
+    </p>
+  </main>
+</div>
+</template>
+
+<style scoped>
+  main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  svg {
+    font-size: 4rem;
+    margin: 14px 0;
+    height: 1em;
+  }
+
+  button {
+    padding: 12px;
+    cursor: pointer;
+    background-color: rgb(54, 45, 89);
+    border-radius: 4px;
+    border: none;
+    color: white;
+    font-size: 1em;
+    margin: 1em;
+    transition: all 0.25s ease-in-out;
+  }
+  button:hover {
+    background-color: #8c5393;
+    box-shadow: 4px;
+    box-shadow: 0px 0px 15px 2px rgba(140, 83, 147, 0.5);
+  }
+  button:active {
+    background-color: #c73852;
+  }
+</style>
+`;
+}
+
+export function getSentryExampleApiTemplate() {
+  return `// This is just a very simple API route that throws an example error.
+// Feel free to delete this file.
+import { defineEventHandler } from '#imports';
+
+export default defineEventHandler(event => {
+  throw new Error("Sentry Example API Route Error");
+});
+`;
+}
+
+export function getSentryErrorButtonTemplate() {
+  return `<!--
+This is just a very simple component that throws an example error.
+Feel free to delete this file.
+-->
+
+<script setup>
+  import * as Sentry from '@sentry/nuxt';
+  
+  const throwError = () => {
+    Sentry.startSpan(
+      {
+        name: 'Example Frontend Span',
+        op: 'test'
+      },
+      () => {
+        throw new Error('Sentry Example Error');
+      }
+    )
+  };
+</script>
+
+<template>
+  <button id="errorBtn" @click="throwError"> Throw Error! </button>
+</template>
+
+<style scoped>
+  button {
+    padding: 12px;
+    cursor: pointer;
+    background-color: rgb(54, 45, 89);
+    border-radius: 4px;
+    border: none;
+    color: white;
+    font-size: 1em;
+    margin: 1em;
+    transition: all 0.25s ease-in-out;
+  }
+  button:hover {
+    background-color: #8c5393;
+    box-shadow: 4px;
+    box-shadow: 0px 0px 15px 2px rgba(140, 83, 147, 0.5);
+  }
+  button:active {
+    background-color: #c73852;
+  }
+</style>
+`;
+}

package/src/nuxt/utils.ts

@@ -0,0 +1,32 @@
+import { gte, minVersion } from 'semver';
+// @ts-expect-error - magicast is ESM and TS complains about that. It works though
+import { loadFile } from 'magicast';
+
+export async function isNuxtV4(
+  nuxtConfig: string,
+  packageVersion: string | undefined,
+) {
+  if (!packageVersion) {
+    return false;
+  }
+
+  const minVer = minVersion(packageVersion);
+  if (minVer && gte(minVer, '4.0.0')) {
+    return true;
+  }
+
+  // At the time of writing, nuxt 4 is not on its own
+  // major yet. We must read the `compatibilityVersion`
+  // from the nuxt config.
+  const mod = await loadFile(nuxtConfig);
+  const config =
+    mod.exports.default.$type === 'function-call'
+      ? mod.exports.default.$args[0]
+      : mod.exports.default;
+
+  if (config && config.future && config.future.compatibilityVersion === 4) {
+    return true;
+  }
+
+  return false;
+}

package/src/remix/remix-wizard.ts

@@ -70,7 +70,8 @@ async function runRemixWizardWithTelemetry(
     await getOrAskForProjectData(options, 'javascript-remix');
 
   await installPackage({
-    packageName: '@sentry/remix',
+    packageName: '@sentry/remix@^8',
+    packageNameDisplayLabel: '@sentry/remix',
     alreadyInstalled: hasPackageInstalled('@sentry/remix', packageJson),
   });