Merge branch 'master' into feat/apple-support

CHANGELOG.md

@@ -2,7 +2,9 @@
 
 ## Unreleased
 
-- feat: Add support for iOS (#334)
+- feat(apple): Add support for iOS (#334)
+- feat(sourcemaps): Detect SvelteKit and NextJS projects and redirect to dedicated wizards (#341)
+- ref(sourcemaps): Improve Outro message (#344) 
 
 ## 3.5.0
 

package.json

@@ -26,7 +26,7 @@
     "@clack/core": "0.3.2",
     "@clack/prompts": "0.6.3",
     "@sentry/cli": "^1.72.0",
-    "@sentry/node": "^7.56.0",
+    "@sentry/node": "^7.57.0",
     "axios": "1.3.5",
     "chalk": "^2.4.1",
     "glob": "^7.1.3",

src/sourcemaps/sourcemaps-wizard.ts

@@ -9,6 +9,7 @@ import {
   askForSelfHosted,
   askForWizardLogin,
   confirmContinueEvenThoughNoGitRepo,
+  detectPackageManager,
   printWelcome,
 } from '../utils/clack-utils';
 import { isUnicodeSupported } from '../utils/vendor/is-unicorn-supported';
@@ -23,6 +24,8 @@ import { WizardOptions } from '../utils/types';
 import { configureCRASourcemapGenerationFlow } from './tools/create-react-app';
 import { ensureMinimumSdkVersionIsInstalled } from './utils/sdk-version';
 import { traceStep } from '../telemetry';
+import { URL } from 'url';
+import { checkIfMoreSuitableWizardExistsAndAskForRedirect } from './utils/other-wizards';
 
 type SupportedTools =
   | 'webpack'
@@ -43,6 +46,17 @@ export async function runSourcemapsWizard(
     promoCode: options.promoCode,
   });
 
+  const moreSuitableWizard = await traceStep(
+    'check-framework-wizard',
+    checkIfMoreSuitableWizardExistsAndAskForRedirect,
+  );
+  if (moreSuitableWizard) {
+    await traceStep('run-to-framework-wizard', () =>
+      moreSuitableWizard(options),
+    );
+    return;
+  }
+
   await traceStep('detect-git', confirmContinueEvenThoughNoGitRepo);
 
   await traceStep('check-sdk-version', ensureMinimumSdkVersionIsInstalled);
@@ -79,7 +93,13 @@ export async function runSourcemapsWizard(
 
   await traceStep('ci-setup', () => setupCi(apiKeys.token));
 
-  traceStep('outro', printOutro);
+  traceStep('outro', () =>
+    printOutro(
+      sentryUrl,
+      selectedProject.organization.slug,
+      selectedProject.id,
+    ),
+  );
 }
 
 async function askForUsedBundlerTool(): Promise<SupportedTools> {
@@ -199,19 +219,31 @@ SENTRY_AUTH_TOKEN=${authToken}
   }
 }
 
-function printOutro() {
+function printOutro(url: string, orgSlug: string, projectId: string) {
+  const pacMan = detectPackageManager() || 'npm';
+  const buildCommand = `'${pacMan}${pacMan === '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 arrow = isUnicodeSupported() ? '→' : '->';
 
   clack.outro(`${chalk.green("That's it - everything is set up!")}
 
-   ${chalk.cyan(`Validate your setup with the following Steps:
+   ${chalk.cyan(`Test and validate your setup locally with the following Steps:
 
    1. Build your application in ${chalk.bold('production mode')}.
+      ${chalk.gray(`${arrow} For example, run ${chalk.bold(buildCommand)}.`)}
       ${chalk.gray(
         `${arrow} You should see source map upload logs in your console.`,
       )}
    2. Run your application and throw a test error.
-      ${chalk.gray(`${arrow} The error should be visible in Sentry.`)}
+      ${chalk.gray(`${arrow} The error should appear in Sentry:`)}
+      ${chalk.gray(`${arrow} ${issueStreamUrl}`)}
    3. Open the error in Sentry and verify that it's source-mapped.
       ${chalk.gray(
         `${arrow} The stack trace should show your original source code.`,

src/sourcemaps/tools/esbuild.ts

@@ -5,9 +5,9 @@ import {
   abortIfCancelled,
   addDotEnvSentryBuildPluginFile,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
+import { hasPackageInstalled } from '../../utils/package-json';
 
 import {
   SourceMapUploadToolConfigurationFunction,

src/sourcemaps/tools/rollup.ts

@@ -5,9 +5,9 @@ import {
   abortIfCancelled,
   addDotEnvSentryBuildPluginFile,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
+import { hasPackageInstalled } from '../../utils/package-json';
 
 import {
   SourceMapUploadToolConfigurationFunction,
@@ -49,9 +49,7 @@ export const configureRollupPlugin: SourceMapUploadToolConfigurationFunction =
       ),
     });
 
-    clack.log.step(
-      `Add the following code to your rollup config:`,
-    );
+    clack.log.step(`Add the following code to your rollup config:`);
 
     // Intentially logging directly to console here so that the code can be copied/pasted directly
     // eslint-disable-next-line no-console

src/sourcemaps/tools/sentry-cli.ts

@@ -8,11 +8,11 @@ import {
   abortIfCancelled,
   addSentryCliRc,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
 
 import { SourceMapUploadToolConfigurationOptions } from './types';
+import { hasPackageInstalled } from '../../utils/package-json';
 
 export async function configureSentryCLI(
   options: SourceMapUploadToolConfigurationOptions,

src/sourcemaps/tools/vite.ts

@@ -5,9 +5,9 @@ import {
   abortIfCancelled,
   addDotEnvSentryBuildPluginFile,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
+import { hasPackageInstalled } from '../../utils/package-json';
 
 import {
   SourceMapUploadToolConfigurationFunction,

src/sourcemaps/tools/webpack.ts

@@ -5,9 +5,9 @@ import {
   abortIfCancelled,
   addDotEnvSentryBuildPluginFile,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
 } from '../../utils/clack-utils';
+import { hasPackageInstalled } from '../../utils/package-json';
 
 import {
   SourceMapUploadToolConfigurationFunction,

src/sourcemaps/utils/other-wizards.ts

@@ -0,0 +1,148 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+import { runNextjsWizard } from '../../nextjs/nextjs-wizard';
+import { runSvelteKitWizard } from '../../sveltekit/sveltekit-wizard';
+
+import {
+  abort,
+  abortIfCancelled,
+  getPackageDotJson,
+} from '../../utils/clack-utils';
+import {
+  findPackageFromList,
+  hasPackageInstalled,
+} from '../../utils/package-json';
+
+import * as Sentry from '@sentry/node';
+import { WizardOptions } from '../../utils/types';
+
+type WizardFunction = (options: WizardOptions) => Promise<void>;
+
+type FrameworkInfo = {
+  frameworkName: string;
+  frameworkSlug: string;
+  frameworkPackage: string;
+  sourcemapsDocsLink: string;
+  wizard: WizardFunction;
+};
+
+const sdkMap: Record<string, FrameworkInfo> = {
+  '@sentry/nextjs': {
+    frameworkName: 'Next.js',
+    frameworkSlug: 'nextjs',
+    frameworkPackage: 'next',
+    sourcemapsDocsLink:
+      'https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-source-maps',
+    wizard: runNextjsWizard,
+  },
+  '@sentry/sveltekit': {
+    frameworkName: 'SvelteKit',
+    frameworkSlug: 'sveltekit',
+    frameworkPackage: '@sveltejs/kit',
+    sourcemapsDocsLink:
+      'https://docs.sentry.io/platforms/javascript/guides/sveltekit/manual-setup/#configure-source-maps-upload',
+    wizard: runSvelteKitWizard,
+  },
+};
+
+export async function checkIfMoreSuitableWizardExistsAndAskForRedirect(): Promise<
+  WizardFunction | undefined
+> {
+  const sdkName = await checkIfMoreSuitableWizardExists();
+
+  if (!sdkName) {
+    return undefined;
+  }
+
+  return await askForRedirect(sdkName);
+}
+
+async function checkIfMoreSuitableWizardExists(): Promise<string | undefined> {
+  Sentry.setTag('using-wrong-wizard', false);
+
+  const packageJson = await getPackageDotJson();
+
+  const installedSdkPackage = findPackageFromList(
+    Object.keys(sdkMap),
+    packageJson,
+  );
+
+  if (!installedSdkPackage) {
+    return undefined;
+  }
+
+  const sdkPackageName = installedSdkPackage.name;
+
+  const { frameworkPackage } = sdkMap[sdkPackageName];
+
+  if (!hasPackageInstalled(frameworkPackage, packageJson)) {
+    // The user has installed the SDK but not the framework.
+    // Maybe it's a false positive and the user is using a different framework.
+    // Let's not redirect them to the framework wizard in that case.
+    return undefined;
+  }
+
+  Sentry.setTag('using-wrong-wizard', true);
+
+  return sdkPackageName;
+}
+
+async function askForRedirect(
+  sdkName: string,
+): Promise<WizardFunction | undefined> {
+  const { frameworkName, sourcemapsDocsLink, frameworkSlug, wizard } =
+    sdkMap[sdkName];
+
+  clack.log.warn(
+    `${chalk.yellow(
+      `It seems like you're using this wizard in a ${frameworkName} project.`,
+    )}
+
+We recommend using our dedicated ${frameworkName} wizard instead of this wizard.
+The ${frameworkName} wizard will set up our ${sdkName} SDK and also configure uploading source maps for you.
+
+If you already tried the ${frameworkName} wizard and it didn't work for you, check out the following guides:
+
+Manual source maps configuration for ${frameworkName}:
+${sourcemapsDocsLink}
+
+Troubleshooting Source Maps:
+https://docs.sentry.io/platforms/javascript/guides/${frameworkSlug}/sourcemaps/troubleshooting_js/
+`,
+  );
+
+  const nextStep: 'redirect' | 'continue' | 'stop' = await abortIfCancelled(
+    clack.select({
+      message: `Do you want to run the ${frameworkName} wizard now?`,
+      options: [
+        {
+          label: 'Yes',
+          value: 'redirect',
+          hint: `${chalk.green('Recommended')}`,
+        },
+        {
+          label: 'No, continue with this wizard',
+          value: 'continue',
+        },
+        {
+          label: "No, I'll check out the guides ",
+          value: 'stop',
+          hint: 'Exit this wizard',
+        },
+      ],
+    }),
+  );
+
+  Sentry.setTag('wrong-wizard-decision', nextStep);
+
+  switch (nextStep) {
+    case 'redirect':
+      return wizard;
+    case 'stop':
+      await abort('Exiting Wizard', 0);
+      break;
+    default:
+      return undefined;
+  }
+}

src/sourcemaps/utils/sdk-version.ts

@@ -5,11 +5,11 @@ import { minVersion, satisfies } from 'semver';
 import {
   abortIfCancelled,
   getPackageDotJson,
-  getPackageVersion,
   installPackage,
 } from '../../utils/clack-utils';
 
 import * as Sentry from '@sentry/node';
+import { findPackageFromList } from '../../utils/package-json';
 
 const MINIMUM_DEBUG_ID_SDK_VERSION = '7.47.0';
 
@@ -36,12 +36,7 @@ const SENTRY_SDK_PACKAGE_NAMES = [
   // Base SDKs
   '@sentry/browser',
   '@sentry/node',
-] as const;
-
-type SdkPackage = {
-  name: (typeof SENTRY_SDK_PACKAGE_NAMES)[number];
-  version: string;
-};
+];
 
 /**
  * Check for a minimum SDK version and prompt the user to upgrade if necessary.
@@ -57,15 +52,10 @@ type SdkPackage = {
  *    -> We tell users to manually upgrade (migrate between majors)
  */
 export async function ensureMinimumSdkVersionIsInstalled(): Promise<void> {
-  const packageJson = await getPackageDotJson();
-
-  const installedSdkPackages = SENTRY_SDK_PACKAGE_NAMES.map((packageName) => ({
-    name: packageName,
-    version: getPackageVersion(packageName, packageJson),
-  })).filter((sdkPackage): sdkPackage is SdkPackage => !!sdkPackage.version);
-
-  const installedSdkPackage =
-    installedSdkPackages.length > 0 && installedSdkPackages[0];
+  const installedSdkPackage = findPackageFromList(
+    SENTRY_SDK_PACKAGE_NAMES,
+    await getPackageDotJson(),
+  );
 
   // Case 1:
   if (!installedSdkPackage) {

src/sveltekit/sveltekit-wizard.ts

@@ -9,10 +9,10 @@ import {
   confirmContinueEvenThoughNoGitRepo,
   ensurePackageIsInstalled,
   getPackageDotJson,
-  hasPackageInstalled,
   installPackage,
   printWelcome,
 } from '../utils/clack-utils';
+import { hasPackageInstalled } from '../utils/package-json';
 import { WizardOptions } from '../utils/types';
 import { createExamplePage } from './sdk-example';
 import { createOrMergeSvelteKitFiles, loadSvelteConfig } from './sdk-setup';