feat(nextjs): Ask users about tunnelRoute option (#556)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- feat(nextjs): Ask users about tunnelRoute option (#556)
+
 ## 3.21.0
 
 - feat(nextjs): Add comment to add spotlight in Sentry.init for Next.js server config (#545)

src/nextjs/nextjs-wizard.ts

@@ -86,9 +86,13 @@ export async function runNextjsWizardWithTelemetry(
     alreadyInstalled: !!packageJson?.dependencies?.['@sentry/nextjs'],
   });
 
-  await traceStep('configure-sdk', async () =>
-    createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl),
-  );
+  await traceStep('configure-sdk', async () => {
+    const tunnelRoute = await askShouldSetTunnelRoute();
+
+    await createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, {
+      tunnelRoute,
+    });
+  });
 
   await traceStep('create-underscoreerror-page', async () => {
     const srcDir = path.join(process.cwd(), 'src');
@@ -306,10 +310,15 @@ ${chalk.dim(
 )}`);
 }
 
+type SDKConfigOptions = {
+  tunnelRoute: boolean;
+};
+
 async function createOrMergeNextJsFiles(
   selectedProject: SentryProjectData,
   selfHosted: boolean,
   sentryUrl: string,
+  sdkConfigOptions: SDKConfigOptions,
 ) {
   const typeScriptDetected = isUsingTypeScript();
 
@@ -387,7 +396,12 @@ async function createOrMergeNextJsFiles(
     selfHosted,
     sentryUrl,
   );
-  const sentryBuildOptionsTemplate = getNextjsSentryBuildOptionsTemplate();
+
+  const { tunnelRoute } = sdkConfigOptions;
+
+  const sentryBuildOptionsTemplate = getNextjsSentryBuildOptionsTemplate({
+    tunnelRoute,
+  });
 
   const nextConfigJs = 'next.config.js';
   const nextConfigMjs = 'next.config.mjs';
@@ -701,3 +715,40 @@ async function createExamplePage(
     );
   }
 }
+
+/**
+ * Ask users if they want to set the tunnelRoute option.
+ * We can't set this by default because it potentially increases hosting bills.
+ * It's valuable enough to for users to justify asking the additional question.
+ */
+async function askShouldSetTunnelRoute() {
+  return await traceStep('ask-tunnelRoute-option', async () => {
+    const shouldSetTunnelRoute = await abortIfCancelled(
+      clack.select({
+        message:
+          'Do you want to route Sentry requests in the browser through your NextJS server to avoid ad blockers?',
+        options: [
+          {
+            label: 'Yes',
+            value: true,
+            hint: 'Can increase your server load and hosting bill',
+          },
+          {
+            label: 'No',
+            value: false,
+            hint: 'Browser errors and events might be blocked by ad blockers before being sent to Sentry',
+          },
+        ],
+        initialValue: false,
+      }),
+    );
+
+    if (!shouldSetTunnelRoute) {
+      clack.log.info(
+        "Sounds good! We'll leave the option commented for later, just in case :)",
+      );
+    }
+
+    return shouldSetTunnelRoute;
+  });
+}

src/nextjs/templates.ts

@@ -17,7 +17,13 @@ export function getNextjsWebpackPluginOptionsTemplate(
   }`;
 }
 
-export function getNextjsSentryBuildOptionsTemplate(): string {
+type SentryNextjsBuildOptions = {
+  tunnelRoute: boolean;
+};
+
+export function getNextjsSentryBuildOptionsTemplate({
+  tunnelRoute,
+}: SentryNextjsBuildOptions): string {
   return `{
     // For all available options, see:
     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
@@ -28,10 +34,13 @@ export function getNextjsSentryBuildOptionsTemplate(): string {
     // Transpiles SDK to be compatible with IE11 (increases bundle size)
     transpileClientSDK: true,
 
-    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers. (increases server load)
+    // ${
+      tunnelRoute ? 'Route' : 'Uncomment to 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",
+    ${tunnelRoute ? '' : '// '}tunnelRoute: "/monitoring",
 
     // Hides source maps from generated client bundles
     hideSourceMaps: true,