feat(nextjs): Remove react component annotation prompt and insertion (#858)

Author: Luca Forstner

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- feat(nextjs): Remove react component annotation prompt and insertion ([#858](https://github.com/getsentry/sentry-wizard/pull/858))
 - Prevent addition of multiple `sentry:sourcemaps` commands ([#840](https://github.com/getsentry/sentry-wizard/pull/840))
 
 ## 4.4.0

e2e-tests/tests/nextjs-14.test.ts

@@ -41,15 +41,8 @@ describe('NextJS-14', () => {
         },
       ));
 
-    const reactComponentAnnotationsPrompted =
-      routeThroughNextJsPrompted &&
-      (await wizardInstance.sendStdinAndWaitForOutput(
-        [KEYS.ENTER],
-        'Do you want to enable React component annotations',
-      ));
-
     const tracingOptionPrompted =
-      reactComponentAnnotationsPrompted &&
+      routeThroughNextJsPrompted &&
       (await wizardInstance.sendStdinAndWaitForOutput(
         [KEYS.ENTER],
         // "Do you want to enable Tracing", sometimes doesn't work as `Tracing` can be printed in bold.

e2e-tests/tests/nextjs-15.test.ts

@@ -41,15 +41,8 @@ describe('NextJS-15', () => {
         },
       ));
 
-    const reactComponentAnnotationsPrompted =
-      routeThroughNextJsPrompted &&
-      (await wizardInstance.sendStdinAndWaitForOutput(
-        [KEYS.ENTER],
-        'Do you want to enable React component annotations',
-      ));
-
     const tracingOptionPrompted =
-      reactComponentAnnotationsPrompted &&
+      routeThroughNextJsPrompted &&
       (await wizardInstance.sendStdinAndWaitForOutput(
         [KEYS.ENTER],
         // "Do you want to enable Tracing", sometimes doesn't work as `Tracing` can be printed in bold.

src/nextjs/nextjs-wizard.ts

@@ -103,12 +103,9 @@ export async function runNextjsWizardWithTelemetry(
 
   await traceStep('configure-sdk', async () => {
     const tunnelRoute = await askShouldSetTunnelRoute();
-    const reactComponentAnnotation =
-      await askShouldEnableReactComponentAnnotation();
 
     await createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, {
       tunnelRoute,
-      reactComponentAnnotation,
     });
   });
 
@@ -362,7 +359,6 @@ ${chalk.dim(
 
 type SDKConfigOptions = {
   tunnelRoute: boolean;
-  reactComponentAnnotation: boolean;
 };
 
 async function createOrMergeNextJsFiles(
@@ -551,7 +547,6 @@ async function createOrMergeNextJsFiles(
       selfHosted,
       sentryUrl,
       tunnelRoute: sdkConfigOptions.tunnelRoute,
-      reactComponentAnnotation: sdkConfigOptions.reactComponentAnnotation,
     });
 
     const nextConfigPossibleFilesMap = {
@@ -964,32 +959,6 @@ async function askShouldSetTunnelRoute() {
   });
 }
 
-async function askShouldEnableReactComponentAnnotation() {
-  return await traceStep('ask-react-component-annotation-option', async () => {
-    const shouldEnableReactComponentAnnotation = await abortIfCancelled(
-      clack.select({
-        message:
-          'Do you want to enable React component annotations to make breadcrumbs and session replays more readable?',
-        options: [
-          {
-            label: 'Yes',
-            value: true,
-            hint: 'Annotates React component names - increases bundle size',
-          },
-          {
-            label: 'No',
-            value: false,
-            hint: 'Continue without React component annotations',
-          },
-        ],
-        initialValue: true,
-      }),
-    );
-
-    return shouldEnableReactComponentAnnotation;
-  });
-}
-
 /**
  * Returns true or false depending on whether we think the user is using Turbopack. May return null in case we aren't sure.
  */

src/nextjs/templates.ts

@@ -7,15 +7,13 @@ type WithSentryConfigOptions = {
   selfHosted: boolean;
   sentryUrl: string;
   tunnelRoute: boolean;
-  reactComponentAnnotation: boolean;
 };
 
 export function getWithSentryConfigOptionsTemplate({
   orgSlug,
   projectSlug,
   selfHosted,
   tunnelRoute,
-  reactComponentAnnotation,
   sentryUrl,
 }: WithSentryConfigOptions): string {
   return `{
@@ -34,15 +32,7 @@ export function getWithSentryConfigOptionsTemplate({
     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
     // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,${
-      reactComponentAnnotation
-        ? `\n
-    // Automatically annotate React components to show their full name in breadcrumbs and session replay
-    reactComponentAnnotation: {
-      enabled: true,
-    },`
-        : ''
-    }
+    widenClientFileUpload: true,
 
     // ${
       tunnelRoute ? 'Route' : 'Uncomment to route'

test/nextjs/templates.test.ts

@@ -247,7 +247,6 @@ describe('Next.js code templates', () => {
         selfHosted: false,
         sentryUrl: 'https://dont-use-this-url.com',
         tunnelRoute: true,
-        reactComponentAnnotation: false,
       });
 
       expect(template).toMatchInlineSnapshot(`
@@ -292,7 +291,6 @@ describe('Next.js code templates', () => {
         selfHosted: true,
         sentryUrl: 'https://my-sentry.com',
         tunnelRoute: true,
-        reactComponentAnnotation: false,
       });
 
       expect(template).toMatchInlineSnapshot(`
@@ -338,7 +336,6 @@ describe('Next.js code templates', () => {
         selfHosted: false,
         sentryUrl: 'https://dont-use-this-url.com',
         tunnelRoute: false,
-        reactComponentAnnotation: false,
       });
 
       expect(template).toMatchInlineSnapshot(`
@@ -375,55 +372,5 @@ describe('Next.js code templates', () => {
           }"
       `);
     });
-
-    it('adds `reactComponentAnnotations` option if `reactComponentAnnotations` is enabled', () => {
-      const template = getWithSentryConfigOptionsTemplate({
-        orgSlug: 'my-org',
-        projectSlug: 'my-project',
-        selfHosted: false,
-        sentryUrl: 'https://dont-use-this-url.com',
-        tunnelRoute: true,
-        reactComponentAnnotation: true,
-      });
-
-      expect(template).toMatchInlineSnapshot(`
-        "{
-            // For all available options, see:
-            // https://www.npmjs.com/package/@sentry/webpack-plugin#options
-
-            org: "my-org",
-            project: "my-project",
-
-            // Only print logs for uploading source maps in CI
-            silent: !process.env.CI,
-
-            // For all available options, see:
-            // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-            // Upload a larger set of source maps for prettier stack traces (increases build time)
-            widenClientFileUpload: true,
-
-            // Automatically annotate React components to show their full name in breadcrumbs and session replay
-            reactComponentAnnotation: {
-              enabled: true,
-            },
-
-            // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-            // This can increase your server load as well as your hosting bill.
-            // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-            // side errors will fail.
-            tunnelRoute: "/monitoring",
-
-            // Automatically tree-shake Sentry logger statements to reduce bundle size
-            disableLogger: true,
-
-            // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-            // See the following for more information:
-            // https://docs.sentry.io/product/crons/
-            // https://vercel.com/docs/cron-jobs
-            automaticVercelMonitors: true,
-          }"
-            `);
-    });
   });
 });