@sentry/wizard 3.23.0 → 3.23.2

package/src/nextjs/nextjs-wizard.ts

@@ -66,6 +66,8 @@ export async function runNextjsWizardWithTelemetry(
     telemetryEnabled: options.telemetryEnabled,
   });
 
+  const typeScriptDetected = isUsingTypeScript();
+
   await confirmContinueIfNoOrDirtyGitRepo();
 
   const packageJson = await getPackageDotJson();
@@ -236,15 +238,19 @@ export async function runNextjsWizardWithTelemetry(
       : undefined;
 
     if (!globalErrorPageFile) {
+      const newGlobalErrorFileName = `global-error.${
+        typeScriptDetected ? 'tsx' : 'jsx'
+      }`;
+
       await fs.promises.writeFile(
-        path.join(process.cwd(), ...appDirLocation, 'global-error.jsx'),
+        path.join(process.cwd(), ...appDirLocation, newGlobalErrorFileName),
         getSentryDefaultGlobalErrorPage(),
         { encoding: 'utf8', flag: 'w' },
       );
 
       clack.log.success(
         `Created ${chalk.cyan(
-          path.join(...appDirLocation, 'global-error.jsx'),
+          path.join(...appDirLocation, newGlobalErrorFileName),
         )}.`,
       );
     } else {
@@ -417,11 +423,14 @@ async function createOrMergeNextJsFiles(
     }
 
     if (instrumentationHookLocation === 'does-not-exist') {
+      const newInstrumentationFileName = `instrumentation.${
+        typeScriptDetected ? 'ts' : 'js'
+      }`;
       const srcFolderExists = fs.existsSync(path.join(process.cwd(), 'src'));
 
       const instrumentationHookPath = srcFolderExists
-        ? path.join(process.cwd(), 'src', 'instrumentation.ts')
-        : path.join(process.cwd(), 'instrumentation.ts');
+        ? path.join(process.cwd(), 'src', newInstrumentationFileName)
+        : path.join(process.cwd(), newInstrumentationFileName);
 
       const successfullyCreated = await createNewConfigFile(
         instrumentationHookPath,
@@ -430,7 +439,7 @@ async function createOrMergeNextJsFiles(
 
       if (!successfullyCreated) {
         await showCopyPasteInstructions(
-          'instrumentation.ts',
+          newInstrumentationFileName,
           getInstrumentationHookCopyPasteSnippet(
             srcFolderExists ? 'src' : 'root',
           ),
@@ -455,7 +464,7 @@ async function createOrMergeNextJsFiles(
       orgSlug: selectedProject.organization.slug,
       projectSlug: selectedProject.slug,
       selfHosted,
-      url: sentryUrl,
+      sentryUrl,
       tunnelRoute: sdkConfigOptions.tunnelRoute,
     });
 
@@ -630,6 +639,8 @@ async function createExamplePage(
   const maybeAppDirPath = path.join(process.cwd(), 'app');
   const maybeSrcAppDirPath = path.join(srcDir, 'app');
 
+  const typeScriptDetected = isUsingTypeScript();
+
   let pagesLocation =
     fs.existsSync(maybePagesDirPath) &&
     fs.lstatSync(maybePagesDirPath).isDirectory()
@@ -665,7 +676,7 @@ async function createExamplePage(
       selfHosted,
       orgSlug: selectedProject.organization.slug,
       projectId: selectedProject.id,
-      url: sentryUrl,
+      sentryUrl,
       useClient: true,
     });
 
@@ -676,12 +687,14 @@ async function createExamplePage(
       },
     );
 
+    const newPageFileName = `page.${typeScriptDetected ? 'tsx' : 'jsx'}`;
+
     await fs.promises.writeFile(
       path.join(
         process.cwd(),
         ...appLocation,
         'sentry-example-page',
-        'page.jsx',
+        newPageFileName,
       ),
       examplePageContents,
       { encoding: 'utf8', flag: 'w' },
@@ -689,7 +702,7 @@ async function createExamplePage(
 
     clack.log.success(
       `Created ${chalk.cyan(
-        path.join(...appLocation, 'sentry-example-page', 'page.jsx'),
+        path.join(...appLocation, 'sentry-example-page', newPageFileName),
       )}.`,
     );
 
@@ -700,13 +713,15 @@ async function createExamplePage(
       },
     );
 
+    const newRouteFileName = `route.${typeScriptDetected ? 'ts' : 'js'}`;
+
     await fs.promises.writeFile(
       path.join(
         process.cwd(),
         ...appLocation,
         'api',
         'sentry-example-api',
-        'route.js',
+        newRouteFileName,
       ),
       getSentryExampleAppDirApiRoute(),
       { encoding: 'utf8', flag: 'w' },
@@ -714,7 +729,12 @@ async function createExamplePage(
 
     clack.log.success(
       `Created ${chalk.cyan(
-        path.join(...appLocation, 'api', 'sentry-example-api', 'route.js'),
+        path.join(
+          ...appLocation,
+          'api',
+          'sentry-example-api',
+          newRouteFileName,
+        ),
       )}.`,
     );
   } else if (pagesLocation) {
@@ -722,7 +742,7 @@ async function createExamplePage(
       selfHosted,
       orgSlug: selectedProject.organization.slug,
       projectId: selectedProject.id,
-      url: sentryUrl,
+      sentryUrl,
       useClient: false,
     });
 

package/src/nextjs/templates.ts

@@ -5,7 +5,7 @@ type WithSentryConfigOptions = {
   orgSlug: string;
   projectSlug: string;
   selfHosted: boolean;
-  url: string;
+  sentryUrl: string;
   tunnelRoute: boolean;
 };
 
@@ -14,14 +14,16 @@ export function getWithSentryConfigOptionsTemplate({
   projectSlug,
   selfHosted,
   tunnelRoute,
-  url,
+  sentryUrl,
 }: WithSentryConfigOptions): string {
   return `{
     // For all available options, see:
     // https://github.com/getsentry/sentry-webpack-plugin#options
 
     org: "${orgSlug}",
-    project: "${projectSlug}",${selfHosted ? `\n    url: "${url}"` : ''}
+    project: "${projectSlug}",${
+    selfHosted ? `\n    sentryUrl: "${sentryUrl}"` : ''
+  }
 
     // Only print logs for uploading source maps in CI
     silent: !process.env.CI,
@@ -168,13 +170,13 @@ Sentry.init({
 
 export function getSentryExamplePageContents(options: {
   selfHosted: boolean;
-  url: string;
+  sentryUrl: string;
   orgSlug: string;
   projectId: string;
   useClient: boolean;
 }): string {
   const issuesPageLink = options.selfHosted
-    ? `${options.url}organizations/${options.orgSlug}/issues/?project=${options.projectId}`
+    ? `${options.sentryUrl}organizations/${options.orgSlug}/issues/?project=${options.projectId}`
     : `https://${options.orgSlug}.sentry.io/issues/?project=${options.projectId}`;
 
   return `${

package/test/nextjs/templates.test.ts

@@ -0,0 +1,147 @@
+import { getWithSentryConfigOptionsTemplate } from '../../src/nextjs/templates';
+
+describe('NextJS code templates', () => {
+  describe('getWithSentryConfigOptionsTemplate', () => {
+    it('generates options for SaaS', () => {
+      const template = getWithSentryConfigOptionsTemplate({
+        orgSlug: 'my-org',
+        projectSlug: 'my-project',
+        selfHosted: false,
+        sentryUrl: 'https://dont-use-this-url.com',
+        tunnelRoute: 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,
+
+            // 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,
+          }"
+      `);
+    });
+
+    it('generates options for self-hosted', () => {
+      const template = getWithSentryConfigOptionsTemplate({
+        orgSlug: 'my-org',
+        projectSlug: 'my-project',
+        selfHosted: true,
+        sentryUrl: 'https://my-sentry.com',
+        tunnelRoute: true,
+      });
+
+      expect(template).toMatchInlineSnapshot(`
+        "{
+            // For all available options, see:
+            // https://github.com/getsentry/sentry-webpack-plugin#options
+
+            org: "my-org",
+            project: "my-project",
+            sentryUrl: "https://my-sentry.com"
+
+            // 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,
+
+            // 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,
+          }"
+      `);
+    });
+
+    it('comments out tunnelRoute if `tunnelRoute` option is disabled', () => {
+      const template = getWithSentryConfigOptionsTemplate({
+        orgSlug: 'my-org',
+        projectSlug: 'my-project',
+        selfHosted: false,
+        sentryUrl: 'https://dont-use-this-url.com',
+        tunnelRoute: false,
+      });
+
+      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,
+
+            // 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",
+
+            // 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,
+          }"
+      `);
+    });
+  });
+});