@sentry/wizard 3.34.4 → 3.36.0

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),
   });
 

package/src/run.ts

@@ -8,6 +8,7 @@ import type { PreselectedProject, WizardOptions } from './utils/types';
 import { runAndroidWizard } from './android/android-wizard';
 import { runAppleWizard } from './apple/apple-wizard';
 import { runNextjsWizard } from './nextjs/nextjs-wizard';
+import { runNuxtWizard } from './nuxt/nuxt-wizard';
 import { runRemixWizard } from './remix/remix-wizard';
 import { runSvelteKitWizard } from './sveltekit/sveltekit-wizard';
 import { runSourcemapsWizard } from './sourcemaps/sourcemaps-wizard';
@@ -22,6 +23,7 @@ type WizardIntegration =
   | 'cordova'
   | 'electron'
   | 'nextjs'
+  | 'nuxt'
   | 'remix'
   | 'sveltekit'
   | 'sourcemaps';
@@ -103,6 +105,7 @@ export async function run(argv: Args) {
           { value: 'cordova', label: 'Cordova' },
           { value: 'electron', label: 'Electron' },
           { value: 'nextjs', label: 'Next.js' },
+          { value: 'nuxt', label: 'Nuxt' },
           { value: 'remix', label: 'Remix' },
           { value: 'sveltekit', label: 'SvelteKit' },
           { value: 'sourcemaps', label: 'Configure Source Maps Upload' },
@@ -148,6 +151,10 @@ export async function run(argv: Args) {
       await runNextjsWizard(wizardOptions);
       break;
 
+    case 'nuxt':
+      await runNuxtWizard(wizardOptions);
+      break;
+
     case 'remix':
       await runRemixWizard(wizardOptions);
       break;

package/src/sourcemaps/tools/rollup.ts

@@ -51,7 +51,7 @@ export const configureRollupPlugin: SourceMapUploadToolConfigurationFunction =
 
     clack.log.step(`Add the following code to your rollup config:`);
 
-    // Intentially logging directly to console here so that the code can be copied/pasted directly
+    // Intentionally logging directly to console here so that the code can be copied/pasted directly
     // eslint-disable-next-line no-console
     console.log(getCodeSnippet(options));
 

package/src/sveltekit/sveltekit-wizard.ts

@@ -95,7 +95,8 @@ export async function runSvelteKitWizardWithTelemetry(
   Sentry.setTag('sdk-already-installed', sdkAlreadyInstalled);
 
   await installPackage({
-    packageName: '@sentry/sveltekit',
+    packageName: '@sentry/sveltekit@^8',
+    packageNameDisplayLabel: '@sentry/sveltekit',
     alreadyInstalled: sdkAlreadyInstalled,
   });
 

package/src/utils/clack-utils.ts

@@ -354,17 +354,23 @@ export async function installPackage({
   packageName,
   alreadyInstalled,
   askBeforeUpdating = true,
+  packageNameDisplayLabel,
+  packageManager,
 }: {
+  /** The string that is passed to the package manager CLI as identifier to install (e.g. `@sentry/nextjs`, or `@sentry/nextjs@^8`) */
   packageName: string;
   alreadyInstalled: boolean;
   askBeforeUpdating?: boolean;
+  /** Overrides what is shown in the installation logs in place of the `packageName` option. Useful if the `packageName` is ugly (e.g. `@sentry/nextjs@^8`) */
+  packageNameDisplayLabel?: string;
+  packageManager?: PackageManager;
 }): Promise<{ packageManager?: PackageManager }> {
   return traceStep('install-package', async () => {
     if (alreadyInstalled && askBeforeUpdating) {
       const shouldUpdatePackage = await abortIfCancelled(
         clack.confirm({
           message: `The ${chalk.bold.cyan(
-            packageName,
+            packageNameDisplayLabel ?? packageName,
           )} package is already installed. Do you want to update it to the latest version?`,
         }),
       );
@@ -376,18 +382,18 @@ export async function installPackage({
 
     const sdkInstallSpinner = clack.spinner();
 
-    const packageManager = await getPackageManager();
+    const pkgManager = packageManager || (await getPackageManager());
 
     sdkInstallSpinner.start(
       `${alreadyInstalled ? 'Updating' : 'Installing'} ${chalk.bold.cyan(
-        packageName,
-      )} with ${chalk.bold(packageManager.label)}.`,
+        packageNameDisplayLabel ?? packageName,
+      )} with ${chalk.bold(pkgManager.label)}.`,
     );
 
     try {
       await new Promise<void>((resolve, reject) => {
         childProcess.exec(
-          `${packageManager.installCommand} ${packageName} ${packageManager.flags}`,
+          `${pkgManager.installCommand} ${packageName} ${pkgManager.flags}`,
           (err, stdout, stderr) => {
             if (err) {
               // Write a log file so we can better troubleshoot issues
@@ -425,11 +431,11 @@ export async function installPackage({
 
     sdkInstallSpinner.stop(
       `${alreadyInstalled ? 'Updated' : 'Installed'} ${chalk.bold.cyan(
-        packageName,
-      )} with ${chalk.bold(packageManager.label)}.`,
+        packageNameDisplayLabel ?? packageName,
+      )} with ${chalk.bold(pkgManager.label)}.`,
     );
 
-    return { packageManager };
+    return { packageManager: pkgManager };
   });
 }
 
@@ -593,7 +599,7 @@ SENTRY_AUTH_TOKEN=${authToken}
 
     if (hasAuthToken) {
       clack.log.warn(
-        `${chalk.bold(
+        `${chalk.bold.cyan(
           SENTRY_DOT_ENV_FILE,
         )} already has auth token. Will not add one.`,
       );
@@ -608,11 +614,11 @@ SENTRY_AUTH_TOKEN=${authToken}
           },
         );
         clack.log.success(
-          `Added auth token to ${chalk.bold(SENTRY_DOT_ENV_FILE)}`,
+          `Added auth token to ${chalk.bold.cyan(SENTRY_DOT_ENV_FILE)}`,
         );
       } catch {
         clack.log.warning(
-          `Failed to add auth token to ${chalk.bold(
+          `Failed to add auth token to ${chalk.bold.cyan(
             SENTRY_DOT_ENV_FILE,
           )}. Uploading source maps during build will likely not work locally.`,
         );
@@ -625,13 +631,13 @@ SENTRY_AUTH_TOKEN=${authToken}
         flag: 'w',
       });
       clack.log.success(
-        `Created ${chalk.bold(
+        `Created ${chalk.bold.cyan(
           SENTRY_DOT_ENV_FILE,
         )} with auth token for you to test source map uploading locally.`,
       );
     } catch {
       clack.log.warning(
-        `Failed to create ${chalk.bold(
+        `Failed to create ${chalk.bold.cyan(
           SENTRY_DOT_ENV_FILE,
         )} with auth token. Uploading source maps during build will likely not work locally.`,
       );
@@ -804,6 +810,26 @@ export async function getPackageDotJson(): Promise<PackageDotJson> {
   return packageJson || {};
 }
 
+export async function updatePackageDotJson(
+  packageDotJson: PackageDotJson,
+): Promise<void> {
+  try {
+    await fs.promises.writeFile(
+      path.join(process.cwd(), 'package.json'),
+      // TODO: maybe figure out the original indentation
+      JSON.stringify(packageDotJson, null, 2),
+      {
+        encoding: 'utf8',
+        flag: 'w',
+      },
+    );
+  } catch {
+    clack.log.error(`Unable to update your ${chalk.cyan('package.json')}.`);
+
+    await abort();
+  }
+}
+
 export async function getPackageManager(): Promise<PackageManager> {
   const detectedPackageManager = detectPackageManger();
 
@@ -850,6 +876,7 @@ export async function getOrAskForProjectData(
   options: WizardOptions,
   platform?:
     | 'javascript-nextjs'
+    | 'javascript-nuxt'
     | 'javascript-remix'
     | 'javascript-sveltekit'
     | 'apple-ios'
@@ -1011,6 +1038,7 @@ async function askForWizardLogin(options: {
   promoCode?: string;
   platform?:
     | 'javascript-nextjs'
+    | 'javascript-nuxt'
     | 'javascript-remix'
     | 'javascript-sveltekit'
     | 'apple-ios'
@@ -1413,6 +1441,24 @@ export async function askShouldCreateExamplePage(
   );
 }
 
+export async function askShouldCreateExampleComponent(): Promise<boolean> {
+  return traceStep('ask-create-example-component', () =>
+    abortIfCancelled(
+      clack.select({
+        message: `Do you want to create an example component to test your Sentry setup?`,
+        options: [
+          {
+            value: true,
+            label: 'Yes',
+            hint: 'Recommended - Check your git status before committing!',
+          },
+          { value: false, label: 'No' },
+        ],
+      }),
+    ),
+  );
+}
+
 export async function featureSelectionPrompt<F extends ReadonlyArray<Feature>>(
   features: F,
 ): Promise<{ [key in F[number]['id']]: boolean }> {
@@ -1445,3 +1491,18 @@ export async function featureSelectionPrompt<F extends ReadonlyArray<Feature>>(
     return selectedFeatures as { [key in F[number]['id']]: boolean };
   });
 }
+
+export async function askShouldAddPackageOverride(
+  pkgName: string,
+  pkgVersion: string,
+): Promise<boolean> {
+  return traceStep(`ask-add-package-override`, () =>
+    abortIfCancelled(
+      clack.confirm({
+        message: `Do you want to add an override for ${chalk.cyan(
+          pkgName,
+        )} version ${chalk.cyan(pkgVersion)}?`,
+      }),
+    ),
+  );
+}

package/src/utils/package-json.ts

@@ -3,6 +3,11 @@ export type PackageDotJson = {
   scripts?: Record<string, string | undefined>;
   dependencies?: Record<string, string>;
   devDependencies?: Record<string, string>;
+  resolutions?: Record<string, string>;
+  overrides?: Record<string, string>;
+  pnpm?: {
+    overrides?: Record<string, string>;
+  };
 };
 
 type NpmPackage = {