@sentry/wizard 3.16.3 → 3.16.5

package/src/nextjs/nextjs-wizard.ts

@@ -23,15 +23,18 @@ import {
 } from '../utils/clack-utils';
 import { SentryProjectData, WizardOptions } from '../utils/types';
 import {
+  getFullUnderscoreErrorCopyPasteSnippet,
   getNextjsConfigCjsAppendix,
   getNextjsConfigCjsTemplate,
   getNextjsConfigEsmCopyPasteSnippet,
   getNextjsSentryBuildOptionsTemplate,
   getNextjsWebpackPluginOptionsTemplate,
   getSentryConfigContents,
+  getSentryDefaultUnderscoreErrorPage,
   getSentryExampleApiRoute,
   getSentryExampleAppDirApiRoute,
   getSentryExamplePageContents,
+  getSimpleUnderscoreErrorCopyPasteSnippet,
 } from './templates';
 import { traceStep, withTelemetry } from '../telemetry';
 import { getPackageVersion, hasPackageInstalled } from '../utils/package-json';
@@ -83,6 +86,109 @@ export async function runNextjsWizardWithTelemetry(
     createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl),
   );
 
+  await traceStep('create-underscoreerror-page', async () => {
+    const srcDir = path.join(process.cwd(), 'src');
+    const maybePagesDirPath = path.join(process.cwd(), 'pages');
+    const maybeSrcPagesDirPath = path.join(srcDir, 'pages');
+
+    const pagesLocation =
+      fs.existsSync(maybePagesDirPath) &&
+      fs.lstatSync(maybePagesDirPath).isDirectory()
+        ? ['pages']
+        : fs.existsSync(maybeSrcPagesDirPath) &&
+          fs.lstatSync(maybeSrcPagesDirPath).isDirectory()
+        ? ['src', 'pages']
+        : undefined;
+
+    if (!pagesLocation) {
+      return;
+    }
+
+    const underscoreErrorPageFile = fs.existsSync(
+      path.join(process.cwd(), ...pagesLocation, '_error.tsx'),
+    )
+      ? '_error.tsx'
+      : fs.existsSync(path.join(process.cwd(), ...pagesLocation, '_error.ts'))
+      ? '_error.ts'
+      : fs.existsSync(path.join(process.cwd(), ...pagesLocation, '_error.jsx'))
+      ? '_error.jsx'
+      : fs.existsSync(path.join(process.cwd(), ...pagesLocation, '_error.js'))
+      ? '_error.js'
+      : undefined;
+
+    if (!underscoreErrorPageFile) {
+      await fs.promises.writeFile(
+        path.join(process.cwd(), ...pagesLocation, '_error.jsx'),
+        getSentryDefaultUnderscoreErrorPage(),
+        { encoding: 'utf8', flag: 'w' },
+      );
+
+      clack.log.success(
+        `Created ${chalk.bold(path.join(...pagesLocation, '_error.jsx'))}.`,
+      );
+    } else if (
+      fs
+        .readFileSync(
+          path.join(process.cwd(), ...pagesLocation, underscoreErrorPageFile),
+          'utf8',
+        )
+        .includes('getInitialProps')
+    ) {
+      clack.log.info(
+        `It seems like you already have a custom error page.\n\nPlease put the following function call in the ${chalk.bold(
+          'getInitialProps',
+        )}\nmethod of your custom error page at ${chalk.bold(
+          path.join(...pagesLocation, underscoreErrorPageFile),
+        )}:`,
+      );
+
+      // eslint-disable-next-line no-console
+      console.log(getSimpleUnderscoreErrorCopyPasteSnippet());
+
+      const shouldContinue = await abortIfCancelled(
+        clack.confirm({
+          message: `Did you modify your ${chalk.bold(
+            path.join(...pagesLocation, underscoreErrorPageFile),
+          )} file as described above?`,
+          active: 'Yes',
+          inactive: 'No, get me out of here',
+        }),
+      );
+
+      if (!shouldContinue) {
+        await abort();
+      }
+    } else {
+      clack.log.info(
+        `It seems like you already have a custom error page.\n\nPlease add the following code to your custom error page\nat ${chalk.bold(
+          path.join(...pagesLocation, underscoreErrorPageFile),
+        )}:`,
+      );
+
+      // eslint-disable-next-line no-console
+      console.log(
+        getFullUnderscoreErrorCopyPasteSnippet(
+          underscoreErrorPageFile === '_error.ts' ||
+            underscoreErrorPageFile === '_error.tsx',
+        ),
+      );
+
+      const shouldContinue = await abortIfCancelled(
+        clack.confirm({
+          message: `Did add the code to your ${chalk.bold(
+            path.join(...pagesLocation, underscoreErrorPageFile),
+          )} file as described above?`,
+          active: 'Yes',
+          inactive: 'No, get me out of here',
+        }),
+      );
+
+      if (!shouldContinue) {
+        await abort();
+      }
+    }
+  });
+
   await traceStep('create-example-page', async () =>
     createExamplePage(selfHosted, selectedProject, sentryUrl),
   );

package/src/nextjs/templates.ts

@@ -1,3 +1,5 @@
+import chalk from 'chalk';
+
 export function getNextjsWebpackPluginOptionsTemplate(
   orgSlug: string,
   projectSlug: string,
@@ -267,3 +269,58 @@ export function GET() {
 }
 `;
 }
+
+export function getSentryDefaultUnderscoreErrorPage() {
+  return `import * as Sentry from "@sentry/nextjs";
+import Error from "next/error";
+
+const CustomErrorComponent = (props) => {
+  return <Error statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  // This will contain the status code of the response
+  return Error.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;
+`;
+}
+
+export function getSimpleUnderscoreErrorCopyPasteSnippet() {
+  return `
+${chalk.green(`import * as Sentry from '@sentry/nextjs';`)}
+
+${chalk.dim(
+  '// Replace "YourCustomErrorComponent" with your custom error component!',
+)}
+YourCustomErrorComponent.getInitialProps = async (${chalk.green(
+    `contextData`,
+  )}) => {
+  ${chalk.green('await Sentry.captureUnderscoreErrorException(contextData);')}
+
+  ${chalk.dim('// ...other getInitialProps code')}
+};
+`;
+}
+
+export function getFullUnderscoreErrorCopyPasteSnippet(isTs: boolean) {
+  return `
+import * as Sentry from '@sentry/nextjs';${
+    isTs ? '\nimport type { NextPageContext } from "next";' : ''
+  }
+
+${chalk.dim(
+  '// Replace "YourCustomErrorComponent" with your custom error component!',
+)}
+YourCustomErrorComponent.getInitialProps = async (contextData${
+    isTs ? ': NextPageContext' : ''
+  }) => {
+  await Sentry.captureUnderscoreErrorException(contextData);
+};
+`;
+}

package/src/react-native/react-native-wizard.ts

@@ -37,7 +37,6 @@ import {
 import { runReactNativeUninstall } from './uninstall';
 import { APP_BUILD_GRADLE, XCODE_PROJECT, getFirstMatchedPath } from './glob';
 import { ReactNativeWizardOptions } from './options';
-import { SentryProjectData } from '../utils/types';
 import {
   addSentryInitWithSdkImport,
   doesJsCodeIncludeSdkSentryImport,
@@ -45,6 +44,7 @@ import {
 } from './javascript';
 import { traceStep, withTelemetry } from '../telemetry';
 import * as Sentry from '@sentry/node';
+import { getIssueStreamUrl } from '../utils/url';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const xcode = require('xcode');
@@ -107,6 +107,7 @@ export async function runReactNativeWizardWithTelemetry(
     await getOrAskForProjectData(options, 'react-native');
   const orgSlug = selectedProject.organization.slug;
   const projectSlug = selectedProject.slug;
+  const projectId = selectedProject.id;
   const cliConfig: RNCliSetupConfigContent = {
     authToken,
     org: orgSlug,
@@ -134,7 +135,9 @@ export async function runReactNativeWizardWithTelemetry(
   }
 
   const confirmedFirstException = await confirmFirstSentryException(
-    selectedProject,
+    sentryUrl,
+    orgSlug,
+    projectId,
   );
   Sentry.setTag('user-confirmed-first-error', confirmedFirstException);
 
@@ -207,8 +210,12 @@ async function addSentryInit({ dsn }: { dsn: string }) {
   );
 }
 
-async function confirmFirstSentryException(project: SentryProjectData) {
-  const projectsIssuesUrl = `${project.organization.links.organizationUrl}/issues/?project=${project.id}`;
+async function confirmFirstSentryException(
+  url: string,
+  orgSlug: string,
+  projectId: string,
+) {
+  const issuesStreamUrl = getIssueStreamUrl({ url, orgSlug, projectId });
 
   clack.log
     .step(`To make sure everything is set up correctly, put the following code snippet into your application.
@@ -216,7 +223,7 @@ The snippet will create a button that, when tapped, sends a test event to Sentry
 
 After that check your project issues:
 
-${chalk.cyan(projectsIssuesUrl)}`);
+${chalk.cyan(issuesStreamUrl)}`);
 
   // We want the code snippet to be easily copy-pasteable, without any clack artifacts
   // eslint-disable-next-line no-console

package/src/remix/remix-wizard.ts

@@ -74,7 +74,7 @@ async function runRemixWizardWithTelemetry(
     try {
       await updateBuildScript({
         org: selectedProject.organization.slug,
-        project: selectedProject.name,
+        project: selectedProject.slug,
         url: sentryUrl === DEFAULT_URL ? undefined : sentryUrl,
         isHydrogen: isHydrogenApp(packageJson),
       });

package/src/sourcemaps/sourcemaps-wizard.ts

@@ -24,13 +24,13 @@ import { WizardOptions } from '../utils/types';
 import { configureCRASourcemapGenerationFlow } from './tools/create-react-app';
 import { ensureMinimumSdkVersionIsInstalled } from './utils/sdk-version';
 import { traceStep, withTelemetry } from '../telemetry';
-import { URL } from 'url';
 import { checkIfMoreSuitableWizardExistsAndAskForRedirect } from './utils/other-wizards';
 import { configureAngularSourcemapGenerationFlow } from './tools/angular';
 import { detectUsedTool, SupportedTools } from './utils/detect-tool';
 import { configureNextJsSourceMapsUpload } from './tools/nextjs';
 import { configureRemixSourceMapsUpload } from './tools/remix';
 import { detectPackageManger } from '../utils/package-manager';
+import { getIssueStreamUrl } from '../utils/url';
 
 export async function runSourcemapsWizard(
   options: WizardOptions,
@@ -334,12 +334,7 @@ function printOutro(url: string, orgSlug: string, projectId: string) {
   const packageManager = detectPackageManger();
   const buildCommand = packageManager?.buildCommand ?? 'npm run build';
 
-  const urlObject = new URL(url);
-  urlObject.host = `${orgSlug}.${urlObject.host}`;
-  urlObject.pathname = '/issues/';
-  urlObject.searchParams.set('project', projectId);
-
-  const issueStreamUrl = urlObject.toString();
+  const issueStreamUrl = getIssueStreamUrl({ url, orgSlug, projectId });
 
   const arrow = isUnicodeSupported() ? '→' : '->';
 

package/src/utils/clack-utils.ts

@@ -1001,7 +1001,6 @@ async function askForProjectSelection(
   );
 
   Sentry.setTag('project', selection.slug);
-  Sentry.setTag('project-platform', selection.platform);
   Sentry.setUser({ id: selection.organization.slug });
 
   return selection;

package/src/utils/types.ts

@@ -1,15 +1,18 @@
 export interface SentryProjectData {
   id: string;
   slug: string;
-  name: string;
-  platform: string;
+  status: string;
   organization: {
+    id: string;
+    name: string;
     slug: string;
-    links: {
-      organizationUrl: string;
+    region: string;
+    status: {
+      id: string;
+      name: string;
     };
   };
-  keys: [{ dsn: { public: string } }];
+  keys: [{ dsn: { public: string }; isActive: boolean }];
 }
 
 export type WizardOptions = {

package/src/utils/url.ts

@@ -0,0 +1,23 @@
+import { URL } from 'url';
+
+/**
+ * Returns the url to the Sentry project stream.
+ *
+ * Example: https://org-slug.sentry.io/issues/?project=1234567
+ */
+export function getIssueStreamUrl({
+  url,
+  orgSlug,
+  projectId,
+}: {
+  url: string;
+  orgSlug: string;
+  projectId: string;
+}): string {
+  const urlObject = new URL(url);
+  urlObject.host = `${orgSlug}.${urlObject.host}`;
+  urlObject.pathname = '/issues/';
+  urlObject.searchParams.set('project', projectId);
+
+  return urlObject.toString();
+}