feat(nextjs): Prompt for reactComponentAnnotation. (#634)

Co-authored-by: Luca Forstner <luca.forstner@sentry.io>

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - feat(nextjs): Support all `next.config` file types (#630)
 - fix(nextjs): Update instrumentation and example creation logic for app or pages usage (#629)
+- feat(nextjs): Prompt for `reactComponentAnnotation` (#634)
 - fix(nextjs): Add missing Error.getInitialProps calls in Next.js error page snippets (#632)
 - fix/feat: Improve error logging for package installation (#635)
 

src/nextjs/nextjs-wizard.ts

@@ -93,9 +93,12 @@ export async function runNextjsWizardWithTelemetry(
 
   await traceStep('configure-sdk', async () => {
     const tunnelRoute = await askShouldSetTunnelRoute();
+    const reactComponentAnnotation =
+      await askShouldEnableReactComponentAnnotation();
 
     await createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, {
       tunnelRoute,
+      reactComponentAnnotation,
     });
   });
 
@@ -321,6 +324,7 @@ ${chalk.dim(
 
 type SDKConfigOptions = {
   tunnelRoute: boolean;
+  reactComponentAnnotation: boolean;
 };
 
 async function createOrMergeNextJsFiles(
@@ -491,6 +495,7 @@ async function createOrMergeNextJsFiles(
       selfHosted,
       sentryUrl,
       tunnelRoute: sdkConfigOptions.tunnelRoute,
+      reactComponentAnnotation: sdkConfigOptions.reactComponentAnnotation,
     });
 
     const nextConfigPossibleFilesMap = {
@@ -875,3 +880,29 @@ async function askShouldSetTunnelRoute() {
     return shouldSetTunnelRoute;
   });
 }
+
+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: false,
+      }),
+    );
+
+    return shouldEnableReactComponentAnnotation;
+  });
+}

src/nextjs/templates.ts

@@ -7,13 +7,15 @@ type WithSentryConfigOptions = {
   selfHosted: boolean;
   sentryUrl: string;
   tunnelRoute: boolean;
+  reactComponentAnnotation: boolean;
 };
 
 export function getWithSentryConfigOptionsTemplate({
   orgSlug,
   projectSlug,
   selfHosted,
   tunnelRoute,
+  reactComponentAnnotation,
   sentryUrl,
 }: WithSentryConfigOptions): string {
   return `{
@@ -32,7 +34,15 @@ 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,
+    widenClientFileUpload: true,${
+      reactComponentAnnotation
+        ? `\n
+    // Automatically annotate React components to show their full name in breadcrumbs and session replay
+    reactComponentAnnotation: {
+      enabled: true,
+    },`
+        : ''
+    }
 
     // ${
       tunnelRoute ? 'Route' : 'Uncomment to route'
@@ -125,7 +135,6 @@ export function getSentryConfigContents(
   let additionalOptions = '';
   if (config === 'client') {
     additionalOptions = `
-
   replaysOnErrorSampleRate: 1.0,
 
   // This sets the sample rate to be 10%. You may want this to be 100% while

test/nextjs/templates.test.ts

@@ -9,6 +9,7 @@ describe('NextJS code templates', () => {
         selfHosted: false,
         sentryUrl: 'https://dont-use-this-url.com',
         tunnelRoute: true,
+        reactComponentAnnotation: false,
       });
 
       expect(template).toMatchInlineSnapshot(`
@@ -56,6 +57,7 @@ describe('NextJS code templates', () => {
         selfHosted: true,
         sentryUrl: 'https://my-sentry.com',
         tunnelRoute: true,
+        reactComponentAnnotation: false,
       });
 
       expect(template).toMatchInlineSnapshot(`
@@ -104,6 +106,7 @@ describe('NextJS code templates', () => {
         selfHosted: false,
         sentryUrl: 'https://dont-use-this-url.com',
         tunnelRoute: false,
+        reactComponentAnnotation: false,
       });
 
       expect(template).toMatchInlineSnapshot(`
@@ -143,5 +146,58 @@ describe('NextJS 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://github.com/getsentry/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",
+
+            // Hides source maps from generated client bundles
+            hideSourceMaps: true,
+
+            // 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,
+          }"
+            `);
+    });
   });
 });