@sentry/wizard 3.1.0-beta.0 → 3.2.0

package/src/{nextjs-wizard.ts → nextjs/nextjs-wizard.ts}

@@ -1,7 +1,9 @@
 /* eslint-disable max-lines */
-import * as clack from '@clack/prompts';
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
 import chalk from 'chalk';
 import * as fs from 'fs';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
 import { builders, generateCode, parseModule } from 'magicast';
 import * as path from 'path';
 
@@ -12,10 +14,22 @@ import {
   askForSelfHosted,
   askForWizardLogin,
   confirmContinueEvenThoughNoGitRepo,
+  ensurePackageIsInstalled,
+  getPackageDotJson,
   installPackage,
   printWelcome,
   SentryProjectData,
-} from './clack-utils';
+} from '../utils/clack-utils';
+import {
+  getNextjsConfigCjsAppendix,
+  getNextjsConfigCjsTemplate,
+  getNextjsConfigEsmCopyPasteSnippet,
+  getNextjsSentryBuildOptionsTemplate,
+  getNextjsWebpackPluginOptionsTemplate,
+  getSentryConfigContents,
+  getSentryExampleApiRoute,
+  getSentryExamplePageContents,
+} from '../templates/nextjs-templates';
 
 interface NextjsWizardOptions {
   promoCode?: string;
@@ -32,43 +46,8 @@ export async function runNextjsWizard(
 
   await confirmContinueEvenThoughNoGitRepo();
 
-  const packageJsonFileContents = await fs.promises
-    .readFile(path.join(process.cwd(), 'package.json'), 'utf8')
-    .catch(() => {
-      clack.log.error(
-        'Could not find package.json. Make sure to run the wizard in the root of your Next.js app!',
-      );
-      abort();
-    });
-
-  let packageJson:
-    | { dependencies?: { ['@sentry/nextjs']: string; ['next']: string } }
-    | undefined = undefined;
-
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    packageJson = JSON.parse(packageJsonFileContents);
-  } catch (e) {
-    clack.log.error(
-      'Unable to parse your package.json. Make sure it has a valid format!',
-    );
-
-    abort();
-  }
-
-  if (!packageJson?.dependencies?.['next']) {
-    const continueWithoutNext = await clack.confirm({
-      message:
-        'Next.js does not seem to be installed. Do you still want to continue?',
-      initialValue: false,
-    });
-
-    abortIfCancelled(continueWithoutNext);
-
-    if (!continueWithoutNext) {
-      abort();
-    }
-  }
+  const packageJson = await getPackageDotJson();
+  await ensurePackageIsInstalled(packageJson, 'next', 'Next.js');
 
   const { url: sentryUrl, selfHosted } = await askForSelfHosted();
 
@@ -79,7 +58,7 @@ export async function runNextjsWizard(
 
   const selectedProject: SentryProjectData | symbol = await clack.select({
     message: 'Select your Sentry project.',
-    options: projects.map(project => {
+    options: projects.map((project) => {
       return {
         value: project,
         label: `${project.organization.slug}/${project.slug}`,
@@ -99,7 +78,7 @@ export async function runNextjsWizard(
     isUsingTypescript = fs.existsSync(
       path.join(process.cwd(), 'tsconfig.json'),
     );
-  } catch (e) {
+  } catch {
     // noop - Default to assuming user is not using typescript
   }
 
@@ -162,48 +141,11 @@ export async function runNextjsWizard(
     }
   }
 
-  const webpackOptionsTemplate = `{
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
-
-    // Suppresses source map uploading logs during build
-    silent: true,
-
-    org: "${selectedProject.organization.slug}",
-    project: "${selectedProject.slug}",
-  }`;
-
-  const sentryBuildOptionsTemplate = `{
-    // 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,
-
-    // 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: "/monitoring",
-
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
-
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
-  }`;
-
-  const newNextConfigTemplate = `const { withSentryConfig } = require("@sentry/nextjs");
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-module.exports = withSentryConfig(
-  nextConfig,
-  ${webpackOptionsTemplate},
-  ${sentryBuildOptionsTemplate}
-);
-`;
+  const sentryWebpackOptionsTemplate = getNextjsWebpackPluginOptionsTemplate(
+    selectedProject.organization.slug,
+    selectedProject.slug,
+  );
+  const sentryBuildOptionsTemplate = getNextjsSentryBuildOptionsTemplate();
 
   const nextConfigJs = 'next.config.js';
   const nextConfigMjs = 'next.config.mjs';
@@ -218,7 +160,10 @@ module.exports = withSentryConfig(
   if (!nextConfigJsExists && !nextConfigMjsExists) {
     await fs.promises.writeFile(
       path.join(process.cwd(), nextConfigJs),
-      newNextConfigTemplate,
+      getNextjsConfigCjsTemplate(
+        sentryWebpackOptionsTemplate,
+        sentryBuildOptionsTemplate,
+      ),
       { encoding: 'utf8', flag: 'w' },
     );
 
@@ -242,7 +187,7 @@ module.exports = withSentryConfig(
     if (probablyIncludesSdk) {
       const injectAnyhow = await clack.confirm({
         message: `${chalk.bold(
-          nextConfigMjs,
+          nextConfigJs,
         )} already contains Sentry SDK configuration. Should the wizard modify it anyways?`,
       });
 
@@ -252,21 +197,12 @@ module.exports = withSentryConfig(
     }
 
     if (shouldInject) {
-      const cjsAppendix = `
-
-// Inected Content via Sentry Wizard Below
-
-const { withSentryConfig } = require("@sentry/nextjs");
-
-module.exports = withSentryConfig(
-  module.exports,
-  ${webpackOptionsTemplate},
-  ${sentryBuildOptionsTemplate}
-);
-`;
-      fs.appendFileSync(
+      await fs.promises.appendFile(
         path.join(process.cwd(), nextConfigJs),
-        cjsAppendix,
+        getNextjsConfigCjsAppendix(
+          sentryWebpackOptionsTemplate,
+          sentryBuildOptionsTemplate,
+        ),
         'utf8',
       );
 
@@ -314,7 +250,7 @@ module.exports = withSentryConfig(
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         mod.exports.default = builders.raw(`withSentryConfig(
       ${expressionToWrap},
-      ${webpackOptionsTemplate},
+      ${sentryWebpackOptionsTemplate},
       ${sentryBuildOptionsTemplate}
 )`);
         const newCode = mod.generate().code;
@@ -333,7 +269,7 @@ module.exports = withSentryConfig(
           )}. ${chalk.dim('(you probably want to clean this up a bit!)')}`,
         );
       }
-    } catch (e) {
+    } catch {
       clack.log.warn(
         chalk.yellow(
           `Something went wrong writing to ${chalk.bold(nextConfigMjs)}`,
@@ -346,15 +282,12 @@ module.exports = withSentryConfig(
       );
 
       // eslint-disable-next-line no-console
-      console.log(`\n
-// next.config.mjs
-import { withSentryConfig } from "@sentry/nextjs";
-
-export default withSentryConfig(
-  yourNextConfig,
-  ${webpackOptionsTemplate},
-  ${sentryBuildOptionsTemplate}
-);\n`);
+      console.log(
+        getNextjsConfigEsmCopyPasteSnippet(
+          sentryWebpackOptionsTemplate,
+          sentryBuildOptionsTemplate,
+        ),
+      );
 
       const shouldContinue = await clack.confirm({
         message: `Are you done putting the snippet above into ${chalk.bold(
@@ -391,7 +324,7 @@ export default withSentryConfig(
   }
 
   if (pagesLocation) {
-    const examplePageContents = createExamplePage({
+    const examplePageContents = getSentryExamplePageContents({
       selfHosted,
       orgSlug: selectedProject.organization.slug,
       projectId: selectedProject.id,
@@ -421,7 +354,7 @@ export default withSentryConfig(
         'api',
         'sentry-example-api.js',
       ),
-      exampleApiRoute,
+      getSentryExampleApiRoute(),
       { encoding: 'utf8', flag: 'w' },
     );
 
@@ -456,164 +389,3 @@ ${
    )}`,
   );
 }
-
-function getSentryConfigContents(
-  dsn: string,
-  config: 'server' | 'client' | 'edge',
-): string {
-  let primer;
-  if (config === 'server') {
-    primer = `// This file configures the initialization of Sentry on the server.
-// The config you add here will be used whenever the server handles a request.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/`;
-  } else if (config === 'client') {
-    primer = `// This file configures the initialization of Sentry on the client.
-// The config you add here will be used whenever a users loads a page in their browser.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/`;
-  } else if (config === 'edge') {
-    primer = `// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
-// The config you add here will be used whenever one of the edge features is loaded.
-// Note that this config is unrelated to the Verel Edge Runtime and is also required when running locally.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/`;
-  }
-
-  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
-  // in development and sample at a lower rate in production
-  replaysSessionSampleRate: 0.1,
-
-  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
-  integrations: [
-    new Sentry.Replay({
-      // Additional Replay configuration goes in here, for example:
-      maskAllText: true,
-      blockAllMedia: true,
-    }),
-  ],`;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-  return `${primer}
-
-import * as Sentry from "@sentry/nextjs";
-
-Sentry.init({
-  dsn: "${dsn}",
-
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,${additionalOptions}
-});
-`;
-}
-
-function createExamplePage(options: {
-  selfHosted: boolean;
-  url: string;
-  orgSlug: string;
-  projectId: string;
-}): string {
-  const issuesPageLink = options.selfHosted
-    ? `${options.url}organizations/${options.orgSlug}/issues/?project=${options.projectId}`
-    : `https://${options.orgSlug}.sentry.io/issues/?project=${options.projectId}`;
-
-  return `import Head from "next/head";
-import * as Sentry from "@sentry/nextjs";
-
-export default function Home() {
-  return (
-    <div>
-      <Head>
-        <title>Sentry Onboarding</title>
-        <meta name="description" content="Test Sentry for your Next.js app!" />
-      </Head>
-
-      <main
-        style={{
-          minHeight: "100vh",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <h1 style={{ fontSize: "4rem", margin: "14px 0" }}>
-          <svg
-            style={{
-              height: "1em",
-            }}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 200 44"
-          >
-            <path
-              fill="currentColor"
-              d="M124.32,28.28,109.56,9.22h-3.68V34.77h3.73V15.19l15.18,19.58h3.26V9.22h-3.73ZM87.15,23.54h13.23V20.22H87.14V12.53h14.93V9.21H83.34V34.77h18.92V31.45H87.14ZM71.59,20.3h0C66.44,19.06,65,18.08,65,15.7c0-2.14,1.89-3.59,4.71-3.59a12.06,12.06,0,0,1,7.07,2.55l2-2.83a14.1,14.1,0,0,0-9-3c-5.06,0-8.59,3-8.59,7.27,0,4.6,3,6.19,8.46,7.52C74.51,24.74,76,25.78,76,28.11s-2,3.77-5.09,3.77a12.34,12.34,0,0,1-8.3-3.26l-2.25,2.69a15.94,15.94,0,0,0,10.42,3.85c5.48,0,9-2.95,9-7.51C79.75,23.79,77.47,21.72,71.59,20.3ZM195.7,9.22l-7.69,12-7.64-12h-4.46L186,24.67V34.78h3.84V24.55L200,9.22Zm-64.63,3.46h8.37v22.1h3.84V12.68h8.37V9.22H131.08ZM169.41,24.8c3.86-1.07,6-3.77,6-7.63,0-4.91-3.59-8-9.38-8H154.67V34.76h3.8V25.58h6.45l6.48,9.2h4.44l-7-9.82Zm-10.95-2.5V12.6h7.17c3.74,0,5.88,1.77,5.88,4.84s-2.29,4.86-5.84,4.86Z M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z"
-            ></path>
-          </svg>
-        </h1>
-
-        <p>Get started by sending us a sample error:</p>
-        <button
-          type="button"
-          style={{
-            padding: "12px",
-            cursor: "pointer",
-            backgroundColor: "#AD6CAA",
-            borderRadius: "4px",
-            border: "none",
-            color: "white",
-            fontSize: "14px",
-            margin: "18px",
-          }}
-          onClick={async () => {
-            const transaction = Sentry.startTransaction({
-              name: "Example Frontend Transaction",
-            });
-
-            Sentry.configureScope((scope) => {
-              scope.setSpan(transaction);
-            });
-
-            try {
-              const res = await fetch("/api/sentry-example-api");
-              if (!res.ok) {
-                throw new Error("Sentry Example Frontend Error");
-              }
-            } finally {
-              transaction.finish();
-            }
-          }}
-        >
-          Throw error!
-        </button>
-
-        <p>
-          Next, look for the error on the{" "}
-          <a href="${issuesPageLink}">Issues Page</a>.
-        </p>
-        <p style={{ marginTop: "24px" }}>
-          For more information, see{" "}
-          <a href="https://docs.sentry.io/platforms/javascript/guides/nextjs/">
-            https://docs.sentry.io/platforms/javascript/guides/nextjs/
-          </a>
-        </p>
-      </main>
-    </div>
-  );
-}
-`;
-}
-
-const exampleApiRoute = `// A faulty API route to test Sentry's error monitoring
-export default function handler(_req, res) {
-  throw new Error("Sentry Example API Route Error");
-  res.status(200).json({ name: "John Doe" });
-}
-`;

package/src/sveltekit/sdk-example.ts

@@ -0,0 +1,56 @@
+import * as fs from 'fs';
+import * as path from 'path';
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+
+import { PartialSvelteConfig } from './sdk-setup';
+import {
+  getSentryExampleApiRoute,
+  getSentryExampleSveltePage,
+} from '../templates/sveltekit-templates';
+
+/**
+ * Creates example page and API route to test Sentry
+ */
+export async function createExamplePage(
+  svelteConfig: PartialSvelteConfig,
+  projectProps: {
+    selfHosted: boolean;
+    url: string;
+    orgSlug: string;
+    projectId: string;
+  },
+): Promise<void> {
+  const routesDirectory = svelteConfig.kit?.files?.routes || 'src/routes';
+  const exampleRoutePath = path.resolve(
+    path.join(routesDirectory, 'sentry-example'),
+  );
+
+  if (!fs.existsSync(routesDirectory)) {
+    clack.log.warn(
+      `Couldn't find your routes directory. Creating it now: ${routesDirectory}`,
+    );
+    fs.mkdirSync(routesDirectory, { recursive: true });
+  }
+
+  if (!fs.existsSync(exampleRoutePath)) {
+    fs.mkdirSync(exampleRoutePath);
+  } else {
+    clack.log.warn(
+      `It seems like a sentry example page already exists (${path.basename(
+        exampleRoutePath,
+      )}). Skipping creation of example route.`,
+    );
+    return;
+  }
+
+  await fs.promises.writeFile(
+    path.join(exampleRoutePath, '+page.svelte'),
+    getSentryExampleSveltePage(projectProps),
+  );
+
+  await fs.promises.writeFile(
+    path.join(exampleRoutePath, '+server.js'),
+    getSentryExampleApiRoute(),
+  );
+}