@sentry/wizard 3.27.0 → 3.29.0

package/src/sveltekit/sdk-setup.ts

@@ -15,7 +15,11 @@ import { builders, generateCode, loadFile, parseModule } from 'magicast';
 // @ts-ignore - magicast is ESM and TS complains about that. It works though
 import { addVitePlugin } from 'magicast/helpers';
 import { getClientHooksTemplate, getServerHooksTemplate } from './templates';
-import { abortIfCancelled, isUsingTypeScript } from '../utils/clack-utils';
+import {
+  abortIfCancelled,
+  featureSelectionPrompt,
+  isUsingTypeScript,
+} from '../utils/clack-utils';
 import { debug } from '../utils/debug';
 import { findFile, hasSentryContent } from '../utils/ast-utils';
 
@@ -50,6 +54,23 @@ export async function createOrMergeSvelteKitFiles(
   projectInfo: ProjectInfo,
   svelteConfig: PartialSvelteConfig,
 ): Promise<void> {
+  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 { clientHooksPath, serverHooksPath } = getHooksConfigDirs(svelteConfig);
 
   // full file paths with correct file ending (or undefined if not found)
@@ -68,9 +89,19 @@ export async function createOrMergeSvelteKitFiles(
   );
   if (!originalClientHooksFile) {
     clack.log.info('No client hooks file found, creating a new one.');
-    await createNewHooksFile(`${clientHooksPath}.${fileEnding}`, 'client', dsn);
+    await createNewHooksFile(
+      `${clientHooksPath}.${fileEnding}`,
+      'client',
+      dsn,
+      selectedFeatures,
+    );
   } else {
-    await mergeHooksFile(originalClientHooksFile, 'client', dsn);
+    await mergeHooksFile(
+      originalClientHooksFile,
+      'client',
+      dsn,
+      selectedFeatures,
+    );
   }
 
   Sentry.setTag(
@@ -79,9 +110,19 @@ export async function createOrMergeSvelteKitFiles(
   );
   if (!originalServerHooksFile) {
     clack.log.info('No server hooks file found, creating a new one.');
-    await createNewHooksFile(`${serverHooksPath}.${fileEnding}`, 'server', dsn);
+    await createNewHooksFile(
+      `${serverHooksPath}.${fileEnding}`,
+      'server',
+      dsn,
+      selectedFeatures,
+    );
   } else {
-    await mergeHooksFile(originalServerHooksFile, 'server', dsn);
+    await mergeHooksFile(
+      originalServerHooksFile,
+      'server',
+      dsn,
+      selectedFeatures,
+    );
   }
 
   if (viteConfig) {
@@ -123,11 +164,15 @@ async function createNewHooksFile(
   hooksFileDest: string,
   hooktype: 'client' | 'server',
   dsn: string,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
 ): Promise<void> {
   const filledTemplate =
     hooktype === 'client'
-      ? getClientHooksTemplate(dsn)
-      : getServerHooksTemplate(dsn);
+      ? getClientHooksTemplate(dsn, selectedFeatures)
+      : getServerHooksTemplate(dsn, selectedFeatures);
 
   await fs.promises.mkdir(path.dirname(hooksFileDest), { recursive: true });
   await fs.promises.writeFile(hooksFileDest, filledTemplate);
@@ -151,6 +196,10 @@ async function mergeHooksFile(
   hooksFile: string,
   hookType: 'client' | 'server',
   dsn: string,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
 ): Promise<void> {
   const originalHooksMod = await loadFile(hooksFile);
 
@@ -184,9 +233,9 @@ Skipping adding Sentry functionality to.`,
   await modifyAndRecordFail(
     () => {
       if (hookType === 'client') {
-        insertClientInitCall(dsn, originalHooksMod);
+        insertClientInitCall(dsn, originalHooksMod, selectedFeatures);
       } else {
-        insertServerInitCall(dsn, originalHooksMod);
+        insertServerInitCall(dsn, originalHooksMod, selectedFeatures);
       }
     },
     'init-call-injection',
@@ -224,20 +273,38 @@ function insertClientInitCall(
   dsn: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   originalHooksMod: ProxifiedModule<any>,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
 ): void {
   const initCallComment = `
-    // If you don't want to use Session Replay, remove the \`Replay\` integration, 
+    // If you don't want to use Session Replay, remove the \`Replay\` integration,
     // \`replaysSessionSampleRate\` and \`replaysOnErrorSampleRate\` options.`;
 
+  const initArgs: {
+    dsn: string;
+    tracesSampleRate?: number;
+    replaysSessionSampleRate?: number;
+    replaysOnErrorSampleRate?: number;
+    integrations?: string[];
+  } = {
+    dsn,
+  };
+
+  if (selectedFeatures.performance) {
+    initArgs.tracesSampleRate = 1.0;
+  }
+
+  if (selectedFeatures.replay) {
+    initArgs.replaysSessionSampleRate = 0.1;
+    initArgs.replaysOnErrorSampleRate = 1.0;
+    initArgs.integrations = [builders.functionCall('Sentry.replayIntegration')];
+  }
+
   // This assignment of any values is fine because we're just creating a function call in magicast
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const initCall = builders.functionCall('Sentry.init', {
-    dsn,
-    tracesSampleRate: 1.0,
-    replaysSessionSampleRate: 0.1,
-    replaysOnErrorSampleRate: 1.0,
-    integrations: [builders.functionCall('Sentry.replayIntegration')],
-  });
+  const initCall = builders.functionCall('Sentry.init', initArgs);
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const initCallWithComment = builders.raw(
@@ -262,13 +329,24 @@ function insertServerInitCall(
   dsn: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   originalHooksMod: ProxifiedModule<any>,
+  selectedFeatures: {
+    performance: boolean;
+  },
 ): void {
+  const initArgs: {
+    dsn: string;
+    tracesSampleRate?: number;
+  } = {
+    dsn,
+  };
+
+  if (selectedFeatures.performance) {
+    initArgs.tracesSampleRate = 1.0;
+  }
+
   // This assignment of any values is fine because we're just creating a function call in magicast
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const initCall = builders.functionCall('Sentry.init', {
-    dsn,
-    tracesSampleRate: 1.0,
-  });
+  const initCall = builders.functionCall('Sentry.init', initArgs);
 
   const originalHooksModAST = originalHooksMod.$ast as Program;
 
@@ -546,7 +624,7 @@ export default defineConfig({
       sourceMapsUploadOptions: {
         org: '${org}',
         project: '${project}',${selfHosted ? `\n        url: '${url}',` : ''}
-      }  
+      }
     }),`)}
     sveltekit(),
   ]

package/src/sveltekit/sveltekit-wizard.ts

@@ -15,9 +15,10 @@ import {
   getPackageDotJson,
   installPackage,
   printWelcome,
+  runPrettierIfInstalled,
 } from '../utils/clack-utils';
 import { getPackageVersion, hasPackageInstalled } from '../utils/package-json';
-import { WizardOptions } from '../utils/types';
+import type { WizardOptions } from '../utils/types';
 import { createExamplePage } from './sdk-example';
 import { createOrMergeSvelteKitFiles, loadSvelteConfig } from './sdk-setup';
 import { traceStep, withTelemetry } from '../telemetry';
@@ -163,6 +164,8 @@ export async function runSvelteKitWizardWithTelemetry(
     }
   }
 
+  await runPrettierIfInstalled();
+
   clack.outro(buildOutroMessage(shouldCreateExamplePage));
 }
 

package/src/sveltekit/templates.ts

@@ -1,21 +1,36 @@
-export function getClientHooksTemplate(dsn: string) {
+export function getClientHooksTemplate(
+  dsn: string,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
+) {
   return `import { handleErrorWithSentry, replayIntegration } from "@sentry/sveltekit";
 import * as Sentry from '@sentry/sveltekit';
 
 Sentry.init({
   dsn: '${dsn}',
+${
+  selectedFeatures.performance
+    ? `
   tracesSampleRate: 1.0,
-
-  // This sets the sample rate to be 10%. You may want this to be 100% while
+`
+    : ''
+}
+${
+  selectedFeatures.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: [replayIntegration()],
+  integrations: [replayIntegration()],`
+    : ''
+}
 });
 
 // If you have a custom error handler, pass it to \`handleErrorWithSentry\`
@@ -23,17 +38,28 @@ export const handleError = handleErrorWithSentry();
 `;
 }
 
-export function getServerHooksTemplate(dsn: string) {
+export function getServerHooksTemplate(
+  dsn: string,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
+) {
   return `import { sequence } from "@sveltejs/kit/hooks";
 import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit";
 import * as Sentry from '@sentry/sveltekit';
 
 Sentry.init({
   dsn: '${dsn}',
+${
+  selectedFeatures.performance
+    ? `
   tracesSampleRate: 1.0,
-
+`
+    : ''
+}
   // uncomment the line below to enable Spotlight (https://spotlightjs.com)
-  // spotlight: import.meta.env.DEV,  
+  // spotlight: import.meta.env.DEV,
 });
 
 // If you have custom handlers, make sure to place them after \`sentryHandle()\` in the \`sequence\` function.
@@ -57,9 +83,9 @@ export function getSentryExampleSveltePage(options: {
     ? `${options.url}organizations/${options.orgSlug}/issues/?project=${options.projectId}`
     : `https://${options.orgSlug}.sentry.io/issues/?project=${options.projectId}`;
 
-  return `<!-- 
+  return `<!--
 This is just a very simple page with a button to throw an example error.
-Feel free to delete this file and the entire sentry route.  
+Feel free to delete this file and the entire sentry route.
 -->
 
 <script>

package/src/utils/clack-utils.ts

@@ -670,6 +670,52 @@ async function addCliConfigFileToGitIgnore(filename: string): Promise<void> {
   }
 }
 
+export async function runPrettierIfInstalled(): Promise<void> {
+  return traceStep('run-prettier', async () => {
+    const packageJson = await getPackageDotJson();
+    const prettierInstalled = hasPackageInstalled('prettier', packageJson);
+
+    if (prettierInstalled) {
+      // prompt the user if they want to run prettier
+      const shouldRunPrettier = await abortIfCancelled(
+        clack.confirm({
+          message:
+            'Looks like you have Prettier in your project. Do you want to run it on your files?',
+        }),
+      );
+
+      if (!shouldRunPrettier) {
+        return;
+      }
+    } else {
+      return;
+    }
+
+    const prettierSpinner = clack.spinner();
+    prettierSpinner.start('Running Prettier on your files.');
+
+    try {
+      await new Promise<void>((resolve, reject) => {
+        childProcess.exec('npx prettier --write .', (err) => {
+          if (err) {
+            reject(err);
+          } else {
+            resolve();
+          }
+        });
+      });
+    } catch {
+      prettierSpinner.stop('Prettier failed to run.');
+      clack.log.error(
+        'Prettier failed to run. There may be formatting issues in your updated files.',
+      );
+      return;
+    }
+
+    prettierSpinner.stop('Prettier has formatted your files.');
+  });
+}
+
 /**
  * Checks if @param packageId is listed as a dependency in @param packageJson.
  * If not, it will ask users if they want to continue without the package.
@@ -734,7 +780,7 @@ export async function getPackageDotJson(): Promise<PackageDotJson> {
   return packageJson || {};
 }
 
-async function getPackageManager(): Promise<PackageManager> {
+export async function getPackageManager(): Promise<PackageManager> {
   const detectedPackageManager = detectPackageManger();
 
   if (detectedPackageManager) {

package/test/remix/client-entry.test.ts

@@ -0,0 +1,122 @@
+// @ts-expect-error - magicast is ESM and TS complains about that. It works though
+import { parseModule } from 'magicast';
+import { updateEntryClientMod } from '../../src/remix/sdk-setup';
+
+describe('initializeSentryOnEntryClient', () => {
+  it('should initialize Sentry on client entry with all features enabled', () => {
+    // Empty entry.client.tsx file for testing
+    const originalEntryClientMod = parseModule('');
+
+    const dsn = 'https://sentry.io/123';
+    const selectedFeatures = {
+      performance: true,
+      replay: true,
+    };
+
+    const result = updateEntryClientMod(
+      originalEntryClientMod,
+      dsn,
+      selectedFeatures,
+    );
+
+    expect(result.generate().code).toMatchInlineSnapshot(`
+      "import {  useEffect,} from "react";
+
+      import {
+        useLocation,
+        useMatches,
+      } from "@remix-run/react";
+
+      import * as Sentry from "@sentry/remix";
+
+      Sentry.init({
+          dsn: "https://sentry.io/123",
+          tracesSampleRate: 1,
+
+          integrations: [Sentry.browserTracingIntegration({
+            useEffect,
+            useLocation,
+            useMatches
+          }), Sentry.replayIntegration({
+              maskAllText: true,
+              blockAllMedia: true
+          })],
+
+          replaysSessionSampleRate: 0.1,
+          replaysOnErrorSampleRate: 1
+      })"
+    `);
+  });
+
+  it('should initialize Sentry on client entry when performance disabled', () => {
+    // Empty entry.client.tsx file for testing
+    const originalEntryClientMod = parseModule('');
+
+    const dsn = 'https://sentry.io/123';
+    const selectedFeatures = {
+      performance: false,
+      replay: true,
+    };
+
+    const result = updateEntryClientMod(
+      originalEntryClientMod,
+      dsn,
+      selectedFeatures,
+    );
+
+    expect(result.generate().code).toMatchInlineSnapshot(`
+      "import * as Sentry from "@sentry/remix";
+
+      Sentry.init({
+          dsn: "https://sentry.io/123",
+
+          integrations: [Sentry.replayIntegration({
+              maskAllText: true,
+              blockAllMedia: true
+          })],
+
+          replaysSessionSampleRate: 0.1,
+          replaysOnErrorSampleRate: 1
+      })"
+    `);
+  });
+
+  it('should initialize Sentry on client entry when replay disabled', () => {
+    // Empty entry.client.tsx file for testing
+    const originalEntryClientMod = parseModule('');
+
+    const dsn = 'https://sentry.io/123';
+    const selectedFeatures = {
+      performance: true,
+      replay: false,
+    };
+
+    const result = updateEntryClientMod(
+      originalEntryClientMod,
+      dsn,
+      selectedFeatures,
+    );
+
+    expect(result.generate().code).toMatchInlineSnapshot(`
+      "import {  useEffect,} from "react";
+
+      import {
+        useLocation,
+        useMatches,
+      } from "@remix-run/react";
+
+      import * as Sentry from "@sentry/remix";
+
+      Sentry.init({
+          dsn: "https://sentry.io/123",
+          tracesSampleRate: 1,
+
+          integrations: [Sentry.browserTracingIntegration({
+            useEffect,
+            useLocation,
+            useMatches
+          })]
+      })"
+    `);
+  });
+});

package/test/remix/server-instrumentation.test.ts

@@ -0,0 +1,38 @@
+import { generateServerInstrumentationFile } from '../../src/remix/sdk-setup';
+
+describe('generateServerInstrumentationFile', () => {
+  it('should generate server instrumentation file', () => {
+    const result = generateServerInstrumentationFile('https://sentry.io/123', {
+      performance: true,
+      replay: true,
+    });
+
+    expect(result.instrumentationFileMod.generate().code)
+      .toMatchInlineSnapshot(`
+      "import * as Sentry from "@sentry/remix";
+
+      Sentry.init({
+          dsn: "https://sentry.io/123",
+          tracesSampleRate: 1,
+          autoInstrumentRemix: true
+      })"
+    `);
+  });
+
+  it('should generate server instrumentation file when performance is disabled', () => {
+    const result = generateServerInstrumentationFile('https://sentry.io/123', {
+      performance: false,
+      replay: true,
+    });
+
+    expect(result.instrumentationFileMod.generate().code)
+      .toMatchInlineSnapshot(`
+      "import * as Sentry from "@sentry/remix";
+
+      Sentry.init({
+          dsn: "https://sentry.io/123",
+          autoInstrumentRemix: true
+      })"
+    `);
+  });
+});

package/test/sveltekit/templates.test.ts

@@ -0,0 +1,152 @@
+import {
+  getClientHooksTemplate,
+  getServerHooksTemplate,
+} from '../../src/sveltekit/templates';
+
+describe('getClientHooksTemplate', () => {
+  it('should generate client hooks template with all features enabled', () => {
+    const result = getClientHooksTemplate('https://sentry.io/123', {
+      performance: true,
+      replay: true,
+    });
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { handleErrorWithSentry, replayIntegration } from "@sentry/sveltekit";
+      import * as Sentry from '@sentry/sveltekit';
+
+      Sentry.init({
+        dsn: 'https://sentry.io/123',
+
+        tracesSampleRate: 1.0,
+
+        // 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: [replayIntegration()],
+      });
+
+      // If you have a custom error handler, pass it to \`handleErrorWithSentry\`
+      export const handleError = handleErrorWithSentry();
+      "
+    `);
+  });
+
+  it('should generate client hooks template when performance disabled', () => {
+    const result = getClientHooksTemplate('https://sentry.io/123', {
+      performance: false,
+      replay: true,
+    });
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { handleErrorWithSentry, replayIntegration } from "@sentry/sveltekit";
+      import * as Sentry from '@sentry/sveltekit';
+
+      Sentry.init({
+        dsn: 'https://sentry.io/123',
+
+        // 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: [replayIntegration()],
+      });
+
+      // If you have a custom error handler, pass it to \`handleErrorWithSentry\`
+      export const handleError = handleErrorWithSentry();
+      "
+    `);
+  });
+
+  it('should generate client hooks template when replay disabled', () => {
+    const result = getClientHooksTemplate('https://sentry.io/123', {
+      performance: true,
+      replay: false,
+    });
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { handleErrorWithSentry, replayIntegration } from "@sentry/sveltekit";
+      import * as Sentry from '@sentry/sveltekit';
+
+      Sentry.init({
+        dsn: 'https://sentry.io/123',
+
+        tracesSampleRate: 1.0,
+
+
+      });
+
+      // If you have a custom error handler, pass it to \`handleErrorWithSentry\`
+      export const handleError = handleErrorWithSentry();
+      "
+    `);
+  });
+});
+
+describe('getServerHooksTemplate', () => {
+  it('should generate server hooks template with all features enabled', () => {
+    const result = getServerHooksTemplate('https://sentry.io/123', {
+      performance: true,
+      replay: true,
+    });
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { sequence } from "@sveltejs/kit/hooks";
+      import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit";
+      import * as Sentry from '@sentry/sveltekit';
+
+      Sentry.init({
+        dsn: 'https://sentry.io/123',
+
+        tracesSampleRate: 1.0,
+
+        // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+        // spotlight: import.meta.env.DEV,
+      });
+
+      // If you have custom handlers, make sure to place them after \`sentryHandle()\` in the \`sequence\` function.
+      export const handle = sequence(sentryHandle());
+
+      // If you have a custom error handler, pass it to \`handleErrorWithSentry\`
+      export const handleError = handleErrorWithSentry();
+      "
+    `);
+  });
+
+  it('should generate server hooks template when performance disabled', () => {
+    const result = getServerHooksTemplate('https://sentry.io/123', {
+      performance: false,
+      replay: true,
+    });
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { sequence } from "@sveltejs/kit/hooks";
+      import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit";
+      import * as Sentry from '@sentry/sveltekit';
+
+      Sentry.init({
+        dsn: 'https://sentry.io/123',
+
+        // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+        // spotlight: import.meta.env.DEV,
+      });
+
+      // If you have custom handlers, make sure to place them after \`sentryHandle()\` in the \`sequence\` function.
+      export const handle = sequence(sentryHandle());
+
+      // If you have a custom error handler, pass it to \`handleErrorWithSentry\`
+      export const handleError = handleErrorWithSentry();
+      "
+    `);
+  });
+});