@sentry/wizard 3.28.0 → 3.29.0

package/src/remix/remix-wizard.ts

@@ -7,15 +7,17 @@ import {
   askShouldCreateExamplePage,
   confirmContinueIfNoOrDirtyGitRepo,
   ensurePackageIsInstalled,
+  featureSelectionPrompt,
   getOrAskForProjectData,
   getPackageDotJson,
   installPackage,
   isUsingTypeScript,
   printWelcome,
   rcCliSetupConfig,
+  runPrettierIfInstalled,
 } from '../utils/clack-utils';
 import { hasPackageInstalled } from '../utils/package-json';
-import { WizardOptions } from '../utils/types';
+import type { WizardOptions } from '../utils/types';
 import {
   initializeSentryOnEntryClient,
   instrumentSentryOnEntryServer,
@@ -76,8 +78,22 @@ async function runRemixWizardWithTelemetry(
   const isTS = isUsingTypeScript();
   const isV2 = isRemixV2(remixConfig, packageJson);
   const viteConfig = findFile('vite.config');
-
-  await addSentryCliConfig({ authToken }, rcCliSetupConfig);
+  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);
 
   if (viteConfig) {
     await traceStep(
@@ -108,6 +124,8 @@ async function runRemixWizardWithTelemetry(
           url: sentryUrl === DEFAULT_URL ? undefined : sentryUrl,
           isHydrogen: isHydrogenApp(packageJson),
         });
+
+        await addSentryCliConfig({ authToken }, rcCliSetupConfig);
       } catch (e) {
         clack.log
           .warn(`Could not update build script to generate and upload sourcemaps.
@@ -139,7 +157,7 @@ async function runRemixWizardWithTelemetry(
 
   await traceStep('Initialize Sentry on client entry', async () => {
     try {
-      await initializeSentryOnEntryClient(dsn, isTS);
+      await initializeSentryOnEntryClient(dsn, isTS, selectedFeatures);
     } catch (e) {
       clack.log.warn(`Could not initialize Sentry on client entry.
   Please do it manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup/`);
@@ -151,7 +169,10 @@ async function runRemixWizardWithTelemetry(
 
   await traceStep('Create server instrumentation file', async () => {
     try {
-      instrumentationFile = await createServerInstrumentationFile(dsn);
+      instrumentationFile = await createServerInstrumentationFile(
+        dsn,
+        selectedFeatures,
+      );
     } catch (e) {
       clack.log.warn(
         'Could not create a server instrumentation file. Please do it manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup/',
@@ -166,7 +187,10 @@ async function runRemixWizardWithTelemetry(
     'Create server instrumentation file and import it',
     async () => {
       try {
-        serverFileInstrumented = await insertServerInstrumentationFile(dsn);
+        serverFileInstrumented = await insertServerInstrumentationFile(
+          dsn,
+          selectedFeatures,
+        );
       } catch (e) {
         clack.log.warn(
           'Could not create a server instrumentation file. Please do it manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup/',
@@ -216,6 +240,8 @@ async function runRemixWizardWithTelemetry(
     });
   }
 
+  await runPrettierIfInstalled();
+
   clack.outro(`
 ${chalk.green(
   'Sentry has been successfully configured for your Remix project.',

package/src/remix/sdk-setup.ts

@@ -76,23 +76,72 @@ export function runRemixReveal(isTS: boolean): void {
   }
 }
 
+function getInitCallArgs(
+  dsn: string,
+  type: 'client' | 'server',
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
+) {
+  const initCallArgs = {
+    dsn,
+  } as Record<string, unknown>;
+
+  // Adding tracing sample rate for both client and server
+  if (selectedFeatures.performance) {
+    initCallArgs.tracesSampleRate = 1.0;
+  }
+
+  // Adding integrations and replay options only for client
+  if (
+    type === 'client' &&
+    (selectedFeatures.performance || selectedFeatures.replay)
+  ) {
+    initCallArgs.integrations = [];
+
+    if (selectedFeatures.performance) {
+      // @ts-expect-error - Adding Proxified AST node to the array
+      initCallArgs.integrations.push(
+        builders.functionCall(
+          'Sentry.browserTracingIntegration',
+          builders.raw('{ useEffect, useLocation, useMatches }'),
+        ),
+      );
+    }
+
+    if (selectedFeatures.replay) {
+      // @ts-expect-error - Adding Proxified AST node to the array
+      initCallArgs.integrations.push(
+        builders.functionCall('Sentry.replayIntegration', {
+          maskAllText: true,
+          blockAllMedia: true,
+        }),
+      );
+
+      initCallArgs.replaysSessionSampleRate = 0.1;
+      initCallArgs.replaysOnErrorSampleRate = 1.0;
+    }
+  }
+
+  // Adding autoInstrumentRemix option only for server
+  if (type === 'server') {
+    initCallArgs.autoInstrumentRemix = true;
+  }
+
+  return initCallArgs;
+}
+
 function insertClientInitCall(
   dsn: string,
   originalHooksMod: ProxifiedModule<any>,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
 ): void {
-  const initCall = builders.functionCall('Sentry.init', {
-    dsn,
-    tracesSampleRate: 1.0,
-    replaysSessionSampleRate: 0.1,
-    replaysOnErrorSampleRate: 1.0,
-    integrations: [
-      builders.functionCall(
-        'Sentry.browserTracingIntegration',
-        builders.raw('{ useEffect, useLocation, useMatches }'),
-      ),
-      builders.functionCall('Sentry.replayIntegration'),
-    ],
-  });
+  const initCallArgs = getInitCallArgs(dsn, 'client', selectedFeatures);
+  const initCall = builders.functionCall('Sentry.init', initCallArgs);
 
   const originalHooksModAST = originalHooksMod.$ast as Program;
   const initCallInsertionIndex =
@@ -107,7 +156,13 @@ function insertClientInitCall(
   );
 }
 
-export async function createServerInstrumentationFile(dsn: string) {
+export function generateServerInstrumentationFile(
+  dsn: string,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
+) {
   // create an empty file named `instrument.server.mjs`
   const instrumentationFile = 'instrumentation.server.mjs';
   const instrumentationFileMod = parseModule('');
@@ -118,11 +173,8 @@ export async function createServerInstrumentationFile(dsn: string) {
     local: 'Sentry',
   });
 
-  const initCall = builders.functionCall('Sentry.init', {
-    dsn,
-    tracesSampleRate: 1.0,
-    autoInstrumentRemix: true,
-  });
+  const initCallArgs = getInitCallArgs(dsn, 'server', selectedFeatures);
+  const initCall = builders.functionCall('Sentry.init', initCallArgs);
 
   const instrumentationFileModAST = instrumentationFileMod.$ast as Program;
 
@@ -138,13 +190,35 @@ export async function createServerInstrumentationFile(dsn: string) {
     generateCode(initCall).code,
   );
 
-  await writeFile(instrumentationFileModAST, instrumentationFile);
+  return { instrumentationFile, instrumentationFileMod };
+}
+
+export async function createServerInstrumentationFile(
+  dsn: string,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
+) {
+  const { instrumentationFile, instrumentationFileMod } =
+    generateServerInstrumentationFile(dsn, selectedFeatures);
+
+  await writeFile(instrumentationFileMod.$ast, instrumentationFile);
 
   return instrumentationFile;
 }
 
-export async function insertServerInstrumentationFile(dsn: string) {
-  const instrumentationFile = await createServerInstrumentationFile(dsn);
+export async function insertServerInstrumentationFile(
+  dsn: string,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
+) {
+  const instrumentationFile = await createServerInstrumentationFile(
+    dsn,
+    selectedFeatures,
+  );
 
   const expressServerPath = await findCustomExpressServerImplementation();
 
@@ -297,9 +371,52 @@ export async function updateBuildScript(args: {
   /* eslint-enable @typescript-eslint/no-unsafe-member-access */
 }
 
+export function updateEntryClientMod(
+  originalEntryClientMod: ProxifiedModule<any>,
+  dsn: string,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
+): ProxifiedModule<any> {
+  originalEntryClientMod.imports.$add({
+    from: '@sentry/remix',
+    imported: '*',
+    local: 'Sentry',
+  });
+
+  if (selectedFeatures.performance) {
+    originalEntryClientMod.imports.$add({
+      from: '@remix-run/react',
+      imported: 'useLocation',
+      local: 'useLocation',
+    });
+
+    originalEntryClientMod.imports.$add({
+      from: '@remix-run/react',
+      imported: 'useMatches',
+      local: 'useMatches',
+    });
+
+    originalEntryClientMod.imports.$add({
+      from: 'react',
+      imported: 'useEffect',
+      local: 'useEffect',
+    });
+  }
+
+  insertClientInitCall(dsn, originalEntryClientMod, selectedFeatures);
+
+  return originalEntryClientMod;
+}
+
 export async function initializeSentryOnEntryClient(
   dsn: string,
   isTS: boolean,
+  selectedFeatures: {
+    performance: boolean;
+    replay: boolean;
+  },
 ): Promise<void> {
   const clientEntryFilename = `entry.client.${isTS ? 'tsx' : 'jsx'}`;
 
@@ -315,34 +432,14 @@ export async function initializeSentryOnEntryClient(
     return;
   }
 
-  originalEntryClientMod.imports.$add({
-    from: '@sentry/remix',
-    imported: '*',
-    local: 'Sentry',
-  });
-
-  originalEntryClientMod.imports.$add({
-    from: 'react',
-    imported: 'useEffect',
-    local: 'useEffect',
-  });
-
-  originalEntryClientMod.imports.$add({
-    from: '@remix-run/react',
-    imported: 'useLocation',
-    local: 'useLocation',
-  });
-
-  originalEntryClientMod.imports.$add({
-    from: '@remix-run/react',
-    imported: 'useMatches',
-    local: 'useMatches',
-  });
-
-  insertClientInitCall(dsn, originalEntryClientMod);
+  const updatedEntryClientMod = updateEntryClientMod(
+    originalEntryClientMod,
+    dsn,
+    selectedFeatures,
+  );
 
   await writeFile(
-    originalEntryClientMod.$ast,
+    updatedEntryClientMod.$ast,
     path.join(process.cwd(), 'app', clientEntryFilename),
   );
 

package/src/sveltekit/sveltekit-wizard.ts

@@ -15,6 +15,7 @@ import {
   getPackageDotJson,
   installPackage,
   printWelcome,
+  runPrettierIfInstalled,
 } from '../utils/clack-utils';
 import { getPackageVersion, hasPackageInstalled } from '../utils/package-json';
 import type { WizardOptions } from '../utils/types';
@@ -163,6 +164,8 @@ export async function runSvelteKitWizardWithTelemetry(
     }
   }
 
+  await runPrettierIfInstalled();
+
   clack.outro(buildOutroMessage(shouldCreateExamplePage));
 }
 

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
+      })"
+    `);
+  });
+});