@sentry/wizard 3.34.3 → 3.35.0

package/e2e-tests/tests/sveltekit.test.ts

@@ -9,6 +9,7 @@ import {
   checkIfRunsOnProdMode,
   checkPackageJson,
   cleanupGit,
+  createFile,
   KEYS,
   revertLocalChanges,
   startWizardInstance,
@@ -16,65 +17,93 @@ import {
 } from '../utils';
 import * as path from 'path';
 
-describe('Sveltekit', () => {
-  const integration = Integration.sveltekit;
-  const projectDir = path.resolve(
-    __dirname,
-    '../test-applications/sveltekit-test-app',
-  );
-
-  beforeAll(async () => {
-    const wizardInstance = startWizardInstance(integration, projectDir);
+const SERVER_HOOK_TEMPLATE = `import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	if (event.url.pathname.startsWith('/custom')) {
+		return new Response('custom response');
+	}
+
+	const response = await resolve(event);
+	return response;
+};
+`;
+const CLIENT_HOOK_TEMPLATE = `
+export async function handleError({ error, event }) {
+  // you can capture the \`error\` and \`event\` from the client
+  // but it only runs if the unexpected error comes from \`+ page.ts\`
+  console.log(error)
+
+  return {
+    // don't show sensitive data to the user
+    message: 'Yikes! 💩',
+  }
+}
+`;
+
+async function runWizardOnSvelteKitProject(projectDir: string, integration: Integration, fileModificationFn?: (projectDir: string, integration: Integration) => unknown) {
+  const wizardInstance = startWizardInstance(integration, projectDir);
+  let packageManagerPrompted = false;
+
+  if (fileModificationFn) {
+    fileModificationFn(projectDir, integration);
+
+    // As we modified project, we have a warning prompt before we get the package manager prompt
+    await wizardInstance.waitForOutput(
+      'Do you want to continue anyway?',
+    );
 
-    const packageManagerPrompted = await wizardInstance.waitForOutput(
+    packageManagerPrompted = await wizardInstance.sendStdinAndWaitForOutput(
+      [KEYS.ENTER],
       'Please select your package manager.',
-      {
-        optional: true,
-      }
     );
-
-    const tracingOptionPrompted =
-      packageManagerPrompted &&
-      (await wizardInstance.sendStdinAndWaitForOutput(
-        // Selecting `yarn` as the package manager
-        [KEYS.DOWN, KEYS.ENTER],
-        // "Do you want to enable Tracing", sometimes doesn't work as `Tracing` can be printed in bold.
-        'to track the performance of your application?',
-        {
-          timeout: 240_000,
-        }
-      ));
-
-    const replayOptionPrompted =
-      tracingOptionPrompted &&
-      (await wizardInstance.sendStdinAndWaitForOutput(
-        [KEYS.ENTER],
-        // "Do you want to enable Sentry Session Replay", sometimes doesn't work as `Sentry Session Replay` can be printed in bold.
-        'to get a video-like reproduction of errors during a user session?',
-      ));
-
-    replayOptionPrompted &&
-      (await wizardInstance.sendStdinAndWaitForOutput(
-        [KEYS.ENTER],
-        'Do you want to create an example page',
-        {
-          optional: true,
-        },
-      ));
-
-    await wizardInstance.sendStdinAndWaitForOutput(
-      [KEYS.ENTER, KEYS.ENTER],
-      'Successfully installed the Sentry SvelteKit SDK!',
+  } else {
+    packageManagerPrompted = await wizardInstance.waitForOutput(
+      'Please select your package manager'
     );
+  }
+
+  const tracingOptionPrompted =
+    packageManagerPrompted &&
+    (await wizardInstance.sendStdinAndWaitForOutput(
+      // Selecting `yarn` as the package manager
+      [KEYS.DOWN, KEYS.ENTER],
+      // "Do you want to enable Tracing", sometimes doesn't work as `Tracing` can be printed in bold.
+      'to track the performance of your application?',
+      {
+        timeout: 240_000,
+      }
+    ));
+
+  const replayOptionPrompted =
+    tracingOptionPrompted &&
+    (await wizardInstance.sendStdinAndWaitForOutput(
+      [KEYS.ENTER],
+      // "Do you want to enable Sentry Session Replay", sometimes doesn't work as `Sentry Session Replay` can be printed in bold.
+      'to get a video-like reproduction of errors during a user session?',
+    ));
+
+  replayOptionPrompted &&
+    (await wizardInstance.sendStdinAndWaitForOutput(
+      [KEYS.ENTER],
+      'Do you want to create an example page',
+      {
+        optional: true,
+      },
+    ));
 
-    wizardInstance.kill();
-  });
+  await wizardInstance.sendStdinAndWaitForOutput(
+    [KEYS.ENTER, KEYS.ENTER],
+    'Successfully installed the Sentry SvelteKit SDK!',
+  );
 
-  afterAll(() => {
-    revertLocalChanges(projectDir);
-    cleanupGit(projectDir);
-  });
+  wizardInstance.kill();
+}
 
+function checkSvelteKitProject(projectDir: string, integration: Integration, options?: {
+  devModeExpectedOutput: string;
+  prodModeExpectedOutput: string;
+}) {
   test('should have the correct package.json', () => {
     checkPackageJson(projectDir, integration);
   });
@@ -99,11 +128,43 @@ describe('Sveltekit', () => {
     checkFileExists(path.resolve(projectDir, 'src/hooks.client.ts'));
   });
 
-  test('hooks.client.ts contains sentry import', () => {
-    checkFileContents(
-      path.resolve(projectDir, 'src/hooks.client.ts'),
-      [`import * as Sentry from '@sentry/sveltekit';`,
-        `Sentry.init({
+  test('builds successfully', async () => {
+    await checkIfBuilds(projectDir, 'Successfully uploaded source maps to Sentry');
+  });
+
+  test('runs on dev mode correctly', async () => {
+    await checkIfRunsOnDevMode(projectDir, options?.devModeExpectedOutput || 'ready in');
+  });
+
+  test('runs on prod mode correctly', async () => {
+    await checkIfRunsOnProdMode(projectDir, options?.prodModeExpectedOutput || 'to expose', 'preview');
+  });
+}
+
+describe('Sveltekit', () => {
+  describe('without existing hooks', () => {
+    const integration = Integration.sveltekit;
+    const projectDir = path.resolve(
+      __dirname,
+      '../test-applications/sveltekit-test-app',
+    );
+
+    beforeAll(async () => {
+      await runWizardOnSvelteKitProject(projectDir, integration);
+    });
+
+    afterAll(() => {
+      revertLocalChanges(projectDir);
+      cleanupGit(projectDir);
+    });
+
+    checkSvelteKitProject(projectDir, integration);
+
+    test('hooks.client.ts contains sentry', () => {
+      checkFileContents(
+        path.resolve(projectDir, 'src/hooks.client.ts'),
+        [`import * as Sentry from '@sentry/sveltekit';`,
+          `Sentry.init({
   dsn: '${TEST_ARGS.PROJECT_DSN}',
 
   tracesSampleRate: 1.0,
@@ -118,37 +179,77 @@ describe('Sveltekit', () => {
 
   // If you don't want to use Session Replay, just remove the line below:
   integrations: [replayIntegration()],
-});`]);
-  });
-
-
-  test('hooks.server.ts contains sentry import', () => {
-    checkFileContents(
-      path.resolve(projectDir, 'src/hooks.server.ts'),
-      [
-        `import * as Sentry from '@sentry/sveltekit';`,
-        `Sentry.init({
+});`, 'export const handleError = handleErrorWithSentry(']);
+    });
+
+    test('hooks.server.ts contains sentry', () => {
+      checkFileContents(
+        path.resolve(projectDir, 'src/hooks.server.ts'),
+        [
+          `import * as Sentry from '@sentry/sveltekit';`,
+          `Sentry.init({
   dsn: '${TEST_ARGS.PROJECT_DSN}',
 
   tracesSampleRate: 1.0,
 
   // uncomment the line below to enable Spotlight (https://spotlightjs.com)
   // spotlight: import.meta.env.DEV,
-});`])
-  });
-
-
-  test('runs on dev mode correctly', async () => {
-    await checkIfRunsOnDevMode(projectDir, 'ready in');
+});`, 'export const handleError = handleErrorWithSentry();']);
+    });
   });
 
-  test('should build successfully', async () => {
-    await checkIfBuilds(projectDir, 'Successfully uploaded source maps to Sentry');
-  });
+  describe('with existing hooks', () => {
+    const integration = Integration.sveltekit;
+    const projectDir = path.resolve(
+      __dirname,
+      '../test-applications/sveltekit-test-app',
+    );
 
-  test('runs on prod mode correctly', async () => {
-    // We can't use the full prompt `Network: use--host to expose` as `--host` can be printed in bold.
-    await checkIfRunsOnProdMode(projectDir, 'to expose', "preview");
+    beforeAll(async () => {
+      await runWizardOnSvelteKitProject(projectDir, integration, (projectDir) => {
+        createFile(
+          path.resolve(projectDir, 'src/hooks.server.ts'),
+          SERVER_HOOK_TEMPLATE,
+        )
+
+        createFile(
+          path.resolve(projectDir, 'src/hooks.client.ts'),
+          CLIENT_HOOK_TEMPLATE,
+        )
+      });
+    });
+
+    afterAll(() => {
+      revertLocalChanges(projectDir);
+      cleanupGit(projectDir);
+    });
+
+    checkSvelteKitProject(projectDir, integration);
+
+    // These are removed from the common tests as the content is different
+    // when the hooks are merged instead of created from the template
+    test('hooks.client.ts contains sentry instrumentation', () => {
+      checkFileContents(
+        path.resolve(projectDir, 'src/hooks.client.ts'),
+        [`import * as Sentry from '@sentry/sveltekit';`,
+          `Sentry.init({
+    dsn: "${TEST_ARGS.PROJECT_DSN}",
+    tracesSampleRate: 1,
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1,
+    integrations: [Sentry.replayIntegration()]
+})`, 'export const handleError = Sentry.handleErrorWithSentry(']);
+    });
+
+    test('hooks.server.ts contains sentry init', () => {
+      checkFileContents(
+        path.resolve(projectDir, 'src/hooks.server.ts'),
+        [`import * as Sentry from '@sentry/sveltekit';`,
+          `Sentry.init({
+    dsn: "${TEST_ARGS.PROJECT_DSN}",
+    tracesSampleRate: 1
+})`, 'export const handleError = Sentry.handleErrorWithSentry();']);
+    });
   });
 });
 

package/e2e-tests/utils/index.ts

@@ -227,11 +227,39 @@ export function startWizardInstance(
 }
 
 /**
- * Read the file contents and check if it contains the given content
+ * Create a file with the given content
  *
  * @param filePath
  * @param content
  */
+export function createFile(filePath: string, content?: string) {
+  return fs.writeFileSync(filePath, content || '');
+}
+
+/**
+ * Modify the file with the new content
+ *
+ * @param filePath
+ * @param oldContent
+ * @param newContent
+ */
+export function modifyFile(filePath: string, replaceMap: Record<string, string>) {
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  let newFileContent = fileContent;
+
+  for (const [oldContent, newContent] of Object.entries(replaceMap)) {
+    newFileContent = newFileContent.replace(oldContent, newContent);
+  }
+
+  fs.writeFileSync(filePath, newFileContent);
+}
+
+/**
+ * Read the file contents and check if it contains the given content
+ *
+ * @param {string} filePath
+ * @param {(string | string[])} content
+ */
 export function checkFileContents(
   filePath: string,
   content: string | string[],
@@ -255,6 +283,7 @@ export function checkFileExists(filePath: string) {
 
 /**
  * Check if the package.json contains the given integration
+ *
  * @param projectDir
  * @param integration
  */
@@ -264,6 +293,7 @@ export function checkPackageJson(projectDir: string, integration: Integration) {
 
 /**
  * Check if the .sentryclirc contains the auth token
+ *
  * @param projectDir
  */
 export function checkSentryCliRc(projectDir: string) {

package/lib/Constants.ts

@@ -6,6 +6,7 @@ export enum Integration {
   cordova = 'cordova',
   electron = 'electron',
   nextjs = 'nextjs',
+  nuxt = 'nuxt',
   remix = 'remix',
   sveltekit = 'sveltekit',
   sourcemaps = 'sourcemaps',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/wizard",
-  "version": "3.34.3",
+  "version": "3.35.0",
   "homepage": "https://github.com/getsentry/sentry-wizard",
   "repository": "https://github.com/getsentry/sentry-wizard",
   "description": "Sentry wizard helping you to configure your project",
@@ -25,8 +25,8 @@
   "dependencies": {
     "@clack/core": "^0.3.4",
     "@clack/prompts": "0.7.0",
-    "@sentry/cli": "^1.72.0",
-    "@sentry/node": "^7.69.0",
+    "@sentry/cli": "^1.77.3",
+    "@sentry/node": "^7.119.2",
     "axios": "1.7.4",
     "chalk": "^2.4.1",
     "glob": "^8.1.0",

package/src/apple/templates.ts

@@ -20,7 +20,13 @@ export function getSwiftSnippet(dsn: string): string {
   return `        SentrySDK.start { options in
             options.dsn = "${dsn}"
             options.debug = true // Enabled debug when first installing is always helpful
-            options.enableTracing = true 
+            // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
+            // We recommend adjusting this value in production.
+            options.tracesSampleRate = 1.0
+
+            // Sample rate for profiling, applied on top of TracesSampleRate.
+            // We recommend adjusting this value in production.
+            options.profilesSampleRate = 1.0 
 
             // Uncomment the following lines to add more data to your events
             // options.attachScreenshot = true // This adds a screenshot to the error events
@@ -34,7 +40,13 @@ export function getObjcSnippet(dsn: string): string {
   return `    [SentrySDK startWithConfigureOptions:^(SentryOptions * options) {
         options.dsn = @"${dsn}";
         options.debug = YES; // Enabled debug when first installing is always helpful
-        options.enableTracing = YES;
+        // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
+        // We recommend adjusting this value in production.
+        options.tracesSampleRate = @1.0;
+
+        // Sample rate for profiling, applied on top of TracesSampleRate.
+        // We recommend adjusting this value in production.
+        options.profilesSampleRate = @1.0;
 
         //Uncomment the following lines to add more data to your events
         //options.attachScreenshot = YES; //This will add a screenshot to the error events

package/src/nextjs/nextjs-wizard.ts

@@ -94,6 +94,7 @@ export async function runNextjsWizardWithTelemetry(
   const { packageManager: packageManagerFromInstallStep } =
     await installPackage({
       packageName: '@sentry/nextjs@^8',
+      packageNameDisplayLabel: '@sentry/nextjs',
       alreadyInstalled: !!packageJson?.dependencies?.['@sentry/nextjs'],
     });
 

package/src/nuxt/nuxt-wizard.ts

@@ -0,0 +1,166 @@
+// @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 { 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,
+  installPackage,
+  printWelcome,
+  runPrettierIfInstalled,
+} from '../utils/clack-utils';
+import { getPackageVersion, hasPackageInstalled } from '../utils/package-json';
+import { addSDKModule, getNuxtConfig, createConfigFiles } from './sdk-setup';
+import {
+  createExampleComponent,
+  createExamplePage,
+  supportsExamplePage,
+} from './sdk-example';
+import { isNuxtV4 } from './utils';
+import chalk from 'chalk';
+
+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 sdkAlreadyInstalled = hasPackageInstalled('@sentry/nuxt', packageJson);
+  Sentry.setTag('sdk-already-installed', sdkAlreadyInstalled);
+
+  await installPackage({
+    packageName: '@sentry/nuxt',
+    alreadyInstalled: sdkAlreadyInstalled,
+  });
+
+  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;
+}