@sentry/wizard 3.12.0 → 3.13.0

package/src/sveltekit/sveltekit-wizard.ts

@@ -1,9 +1,12 @@
 // @ts-ignore - clack is ESM and TS complains about that. It works though
-import clack from '@clack/prompts';
+import * as clack from '@clack/prompts';
 import chalk from 'chalk';
 
+import * as Sentry from '@sentry/node';
+
 import {
   abort,
+  abortIfCancelled,
   addSentryCliConfig,
   confirmContinueEvenThoughNoGitRepo,
   ensurePackageIsInstalled,
@@ -12,46 +15,105 @@ import {
   installPackage,
   printWelcome,
 } from '../utils/clack-utils';
-import { hasPackageInstalled } from '../utils/package-json';
+import { getPackageVersion, hasPackageInstalled } from '../utils/package-json';
 import { WizardOptions } from '../utils/types';
 import { createExamplePage } from './sdk-example';
 import { createOrMergeSvelteKitFiles, loadSvelteConfig } from './sdk-setup';
+import { traceStep, withTelemetry } from '../telemetry';
+import { getKitVersionBucket, getSvelteVersionBucket } from './utils';
 
 export async function runSvelteKitWizard(
   options: WizardOptions,
+): Promise<void> {
+  return withTelemetry(
+    {
+      enabled: options.telemetryEnabled,
+      integration: 'sveltekit',
+    },
+    () => runSvelteKitWizardWithTelemetry(options),
+  );
+}
+
+export async function runSvelteKitWizardWithTelemetry(
+  options: WizardOptions,
 ): Promise<void> {
   printWelcome({
     wizardName: 'Sentry SvelteKit Wizard',
     promoCode: options.promoCode,
+    telemetryEnabled: options.telemetryEnabled,
   });
 
-  await confirmContinueEvenThoughNoGitRepo();
+  await traceStep('detect-git', confirmContinueEvenThoughNoGitRepo);
 
   const packageJson = await getPackageDotJson();
-  await ensurePackageIsInstalled(packageJson, '@sveltejs/kit', 'Sveltekit');
+  await traceStep('detect-framework-version', () =>
+    ensurePackageIsInstalled(packageJson, '@sveltejs/kit', 'Sveltekit'),
+  );
+
+  const kitVersion = getPackageVersion('@sveltejs/kit', packageJson);
+  const kitVersionBucket = getKitVersionBucket(kitVersion);
+  Sentry.setTag('sveltekit-version', kitVersionBucket);
+
+  if (kitVersionBucket === '0.x') {
+    clack.log.warn(
+      "It seems you're using a SvelteKit version <1.0.0 which is not supported by Sentry.\nWe recommend upgrading to the latest 1.x version before you continue.",
+    );
+    const shouldContinue = await abortIfCancelled(
+      clack.select({
+        message: 'Do you want to continue anyway?',
+        options: [
+          {
+            label: 'Yes, continue',
+            hint: 'The SDK might not work correctly',
+            value: true,
+          },
+          { label: "No, I'll upgrade first", value: false },
+        ],
+      }),
+    );
+    if (!shouldContinue) {
+      await abort('Exiting Wizard', 0);
+      return;
+    }
+  }
+
+  Sentry.setTag(
+    'svelte-version',
+    getSvelteVersionBucket(getPackageVersion('svelte', packageJson)),
+  );
 
   const { selectedProject, selfHosted, sentryUrl, authToken } =
     await getOrAskForProjectData(options, 'javascript-sveltekit');
 
-  await installPackage({
-    packageName: '@sentry/sveltekit',
-    alreadyInstalled: hasPackageInstalled('@sentry/sveltekit', packageJson),
-  });
+  const sdkAlreadyInstalled = hasPackageInstalled(
+    '@sentry/sveltekit',
+    packageJson,
+  );
+  Sentry.setTag('sdk-already-installed', sdkAlreadyInstalled);
+
+  await traceStep('install-sdk', () =>
+    installPackage({
+      packageName: '@sentry/sveltekit',
+      alreadyInstalled: sdkAlreadyInstalled,
+    }),
+  );
 
-  await addSentryCliConfig(authToken);
+  await traceStep('add-cli-config', () => addSentryCliConfig(authToken));
 
-  const svelteConfig = await loadSvelteConfig();
+  const svelteConfig = await traceStep('load-svelte-config', loadSvelteConfig);
 
   try {
-    await createOrMergeSvelteKitFiles(
-      {
-        dsn: selectedProject.keys[0].dsn.public,
-        org: selectedProject.organization.slug,
-        project: selectedProject.slug,
-        selfHosted,
-        url: sentryUrl,
-      },
-      svelteConfig,
+    await traceStep('configure-sdk', () =>
+      createOrMergeSvelteKitFiles(
+        {
+          dsn: selectedProject.keys[0].dsn.public,
+          org: selectedProject.organization.slug,
+          project: selectedProject.slug,
+          selfHosted,
+          url: sentryUrl,
+        },
+        svelteConfig,
+      ),
     );
   } catch (e: unknown) {
     clack.log.error('Error while setting up the SvelteKit SDK:');
@@ -64,17 +126,20 @@ export async function runSvelteKitWizard(
           : 'Unknown error',
       ),
     );
+    Sentry.captureException('Error while setting up the SvelteKit SDK');
     await abort('Exiting Wizard');
     return;
   }
 
   try {
-    await createExamplePage(svelteConfig, {
-      selfHosted,
-      url: sentryUrl,
-      orgSlug: selectedProject.organization.slug,
-      projectId: selectedProject.id,
-    });
+    await traceStep('create-example-page', () =>
+      createExamplePage(svelteConfig, {
+        selfHosted,
+        url: sentryUrl,
+        orgSlug: selectedProject.organization.slug,
+        projectId: selectedProject.id,
+      }),
+    );
   } catch (e: unknown) {
     clack.log.error('Error while creating an example page to test Sentry:');
     clack.log.info(
@@ -86,6 +151,9 @@ export async function runSvelteKitWizard(
           : 'Unknown error',
       ),
     );
+    Sentry.captureException(
+      'Error while creating an example Svelte page to test Sentry',
+    );
     await abort('Exiting Wizard');
     return;
   }

package/src/sveltekit/utils.ts

@@ -0,0 +1,50 @@
+import { lt, minVersion } from 'semver';
+
+export function getKitVersionBucket(
+  version: string | undefined,
+): 'none' | 'invalid' | '0.x' | '>=1.0.0 <1.24.0' | '>=1.24.0' {
+  if (!version) {
+    return 'none';
+  }
+
+  const minVer = minVersion(version);
+  if (!minVer) {
+    return 'invalid';
+  }
+
+  if (lt(minVer, '1.0.0')) {
+    return '0.x';
+  } else if (lt(minVer, '1.24.0')) {
+    return '>=1.0.0 <1.24.0';
+  } else {
+    // This is the version when the client-side invalidation fix was released
+    // https://github.com/sveltejs/kit/releases/tag/%40sveltejs%2Fkit%401.24.0
+    // https://github.com/sveltejs/kit/pull/10576
+    return '>=1.24.0';
+  }
+}
+
+export function getSvelteVersionBucket(
+  version: string | undefined,
+): 'none' | 'invalid' | '<3.0.0' | '3.x' | '4.x' | '>4.x' {
+  if (!version) {
+    return 'none';
+  }
+
+  const minVer = minVersion(version);
+  if (!minVer) {
+    return 'invalid';
+  }
+
+  if (lt(minVer, '3.0.0')) {
+    return '<3.0.0';
+  }
+  if (lt(minVer, '4.0.0')) {
+    return '3.x';
+  }
+  if (lt(minVer, '5.0.0')) {
+    return '4.x';
+  }
+  // Svelte 5 isn't released yet but it's being worked on
+  return '>4.x';
+}

package/src/utils/ast-utils.ts

@@ -4,6 +4,8 @@ import * as recast from 'recast';
 import x = recast.types;
 import t = x.namedTypes;
 
+const b = recast.types.builders;
+
 /**
  * Checks if a file where we don't know its concrete file type yet exists
  * and returns the full path to the file with the correct file type.
@@ -36,3 +38,181 @@ export function hasSentryContent(program: t.Program): boolean {
 
   return !!foundSentry;
 }
+
+/**
+ * Searches for a property of an ObjectExpression by name
+ *
+ * @param object the ObjectExpression to search in
+ * @param name the name of the property to search for
+ *
+ * @returns the property if it exists
+ */
+export function getObjectProperty(
+  object: t.ObjectExpression,
+  name: string,
+): t.Property | undefined {
+  return object.properties.find((p): p is t.Property => {
+    const isObjectProp = p.type === 'Property' || p.type === 'ObjectProperty';
+
+    if (!isObjectProp) {
+      return false;
+    }
+
+    const hasMatchingLiteralKey =
+      isObjectProp &&
+      (p.key.type === 'Literal' || p.key.type === 'StringLiteral') &&
+      p.key.value === name;
+
+    if (hasMatchingLiteralKey) {
+      return true;
+    }
+
+    // has matching identifier key
+    return isObjectProp && p.key.type === 'Identifier' && p.key.name === name;
+  });
+}
+
+/**
+ * Attempts to find a property of an ObjectExpression by name. If it doesn't exist,
+ * the property will be added to the ObjectExpression with the provided default value.
+ *
+ * @param object the parent object expression to search in
+ * @param name the name of the property to search for
+ * @param defaultValue the default value to set if the property doesn't exist
+ *
+ * @returns the
+ */
+export function getOrSetObjectProperty(
+  object: t.ObjectExpression,
+  name: string,
+  defaultValue:
+    | t.Literal
+    | t.BooleanLiteral
+    | t.StringLiteral
+    | t.ObjectExpression,
+): t.Property {
+  const existingProperty = getObjectProperty(object, name);
+
+  if (existingProperty) {
+    return existingProperty;
+  }
+
+  const newProperty = b.property.from({
+    kind: 'init',
+    key: b.stringLiteral(name),
+    value: defaultValue,
+  });
+
+  object.properties.push(newProperty);
+
+  return newProperty;
+}
+
+/**
+ * Sets a property of an ObjectExpression if it exists, otherwise adds it
+ * to the ObjectExpression. Optionally, a comment can be added to the
+ * property.
+ *
+ * @param object the ObjectExpression to set the property on
+ * @param name the name of the property to set
+ * @param value  the value of the property to set
+ * @param comment (optional) a comment to add to the property
+ */
+export function setOrUpdateObjectProperty(
+  object: t.ObjectExpression,
+  name: string,
+  value: t.Literal | t.BooleanLiteral | t.StringLiteral | t.ObjectExpression,
+  comment?: string,
+) {
+  const newComments =
+    comment &&
+    comment.split('\n').map((c) => b.commentLine(` ${c}`, true, false));
+
+  const existingProperty = getObjectProperty(object, name);
+
+  if (existingProperty) {
+    existingProperty.value = value;
+    if (newComments) {
+      existingProperty.comments = [
+        ...(existingProperty?.comments || []),
+        ...newComments,
+      ];
+    }
+  } else {
+    object.properties.push(
+      b.objectProperty.from({
+        key: b.stringLiteral(name),
+        value,
+        ...(newComments && {
+          comments: newComments,
+        }),
+      }),
+    );
+  }
+}
+
+type JsonCParseResult =
+  | {
+      jsonObject: t.ObjectExpression;
+      ast: t.Program;
+    }
+  | {
+      jsonObject: undefined;
+      ast: undefined;
+    };
+
+/**
+ * Parses a JSON string with (potential) comments (JSON-C) and returns the JS AST
+ * that can be walked and modified with recast like a normal JS AST.
+ *
+ * This is done by wrapping the JSON-C string in parentheses, thereby making it
+ * a JS `Program` with an `ExpressionStatement` as its body. The expression is then
+ * extracted from the AST and returned alongside the AST.
+ *
+ * To preserve as much original formatting as possible, the returned `ast`
+ * property should be passed to {@link `printJsonC`} to get the JSON-C string back.
+ *
+ * If the input is not valid JSON-C, the result will be undefined.
+ *
+ * @see {@link JsonCParseResult}
+ *
+ * @param jsonString a JSON-C string
+ *
+ * @returns a {@link JsonCParseResult}, containing either the JSON-C object and the AST or undefined in both cases
+ */
+export function parseJsonC(jsonString: string): JsonCParseResult {
+  try {
+    const jsTsConfig = `(${jsonString})`;
+    // no idea why recast returns any here, this is dumb :/
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const ast = recast.parse(jsTsConfig.toString()).program as t.Program;
+
+    const jsonObject =
+      (ast.body[0].type === 'ExpressionStatement' &&
+        ast.body[0].expression.type === 'ObjectExpression' &&
+        ast.body[0].expression) ||
+      undefined;
+
+    if (jsonObject) {
+      return { jsonObject, ast };
+    }
+  } catch {
+    /* empty */
+  }
+  return { jsonObject: undefined, ast: undefined };
+}
+
+/**
+ * Takes the AST of a parsed JSON-C "program" and returns the JSON-C string without
+ * any of the temporary JS wrapper code that was previously applied.
+ *
+ * Only use this in conjunction with {@link `parseJsonC`}
+ *
+ * @param ast the `ast` returned from {@link `parseJsonC`}
+ *
+ * @returns the JSON-C string
+ */
+export function printJsonC(ast: t.Program): string {
+  const js = recast.print(ast).code;
+  return js.substring(1, js.length - 1);
+}

package/src/utils/clack-utils.ts

@@ -125,18 +125,23 @@ export function printWelcome(options: {
 
   let welcomeText =
     options.message ||
-    'This Wizard will help you set up Sentry for your application.\nThank you for using Sentry :)';
+    `The ${options.wizardName} will help you set up Sentry for your application.\nThank you for using Sentry :)`;
 
   if (options.promoCode) {
-    welcomeText += `\n\nUsing promo-code: ${options.promoCode}`;
+    welcomeText = `${welcomeText}\n\nUsing promo-code: ${options.promoCode}`;
   }
 
   if (wizardPackage.version) {
-    welcomeText += `\n\nVersion: ${wizardPackage.version}`;
+    welcomeText = `${welcomeText}\n\nVersion: ${wizardPackage.version}`;
   }
 
   if (options.telemetryEnabled) {
-    welcomeText += `\n\nYou are using the Sentry Wizard with telemetry enabled. This helps us improve the Wizard.\nYou can disable it at any time by running \`sentry-wizard --disable-telemetry\`.`;
+    welcomeText = `${welcomeText}
+
+This wizard sends telemetry data and crash reports to Sentry. This helps us improve the Wizard.
+You can turn this off at any time by running ${chalk.cyanBright(
+      'sentry-wizard --disable-telemetry',
+    )}.`;
   }
 
   clack.note(welcomeText);
@@ -248,43 +253,9 @@ export async function installPackage({
   );
 }
 
-async function addOrgAndProjectToSentryCliRc(
-  org: string,
-  project: string,
-  setupConfig: CliSetupConfig,
-): Promise<void> {
-  const configContents = fs.readFileSync(
-    path.join(process.cwd(), setupConfig.filename),
-    'utf8',
-  );
-
-  if (setupConfig.likelyAlreadyHasOrgAndProject(configContents)) {
-    clack.log.warn(
-      `${chalk.bold(
-        setupConfig.filename,
-      )} already has org and project. Will not add them.`,
-    );
-  } else {
-    try {
-      await fs.promises.appendFile(
-        path.join(process.cwd(), setupConfig.filename),
-        `\n${setupConfig.orgAndProjContent(org, project)}\n`,
-      );
-    } catch (e) {
-      clack.log.warn(
-        `${chalk.bold(
-          setupConfig.filename,
-        )} could not be updated with org and project.`,
-      );
-    }
-  }
-}
-
 export async function addSentryCliConfig(
   authToken: string,
   setupConfig: CliSetupConfig = sourceMapsCliSetupConfig,
-  orgSlug?: string,
-  projectSlug?: string,
 ): Promise<void> {
   const configExists = fs.existsSync(
     path.join(process.cwd(), setupConfig.filename),
@@ -352,10 +323,6 @@ export async function addSentryCliConfig(
     }
   }
 
-  if (orgSlug && projectSlug) {
-    await addOrgAndProjectToSentryCliRc(orgSlug, projectSlug, setupConfig);
-  }
-
   await addAuthTokenFileToGitIgnore(setupConfig.filename);
 }
 
@@ -457,6 +424,7 @@ export async function ensurePackageIsInstalled(
   packageName: string,
 ) {
   if (!hasPackageInstalled(packageId, packageJson)) {
+    Sentry.setTag('package-installed', false);
     const continueWithoutPackage = await abortIfCancelled(
       clack.confirm({
         message: `${packageName} does not seem to be installed. Do you still want to continue?`,
@@ -467,6 +435,8 @@ export async function ensurePackageIsInstalled(
     if (!continueWithoutPackage) {
       await abort(undefined, 0);
     }
+  } else {
+    Sentry.setTag('package-installed', true);
   }
 }
 
@@ -826,7 +796,7 @@ export async function askForToolConfigPath(
     clack.confirm({
       message: `Do you have a ${toolName} config file (e.g. ${chalk.cyan(
         configFileName,
-      )}?`,
+      )})?`,
       initialValue: true,
     }),
   );
@@ -866,27 +836,35 @@ export async function askForToolConfigPath(
  *
  * @param filename the name of the file to which the code snippet should be applied.
  * If a path is provided, only the filename will be used.
- * @param codeSnippet the snippet to be printed.
- * Make sure to follow the diff-like format of highlighting lines that require changes
- * and showing unchanged lines in gray.
  *
- * TODO: Link to wizard spec (develop) once it is live
+ * @param codeSnippet the snippet to be printed. Use {@link makeCodeSnippet}  to create the
+ * diff-like format for visually highlighting unchanged or modified lines of code.
+ *
+ * @param hint (optional) a hint to be printed after the main instruction to add
+ * the code from @param codeSnippet to their @param filename.
+ *
+ * More guidelines on copy/paste instructions:
+ * @see {@link https://develop.sentry.dev/sdk/setup-wizards/#copy--paste-snippets}
+ *
  * TODO: refactor copy paste instructions across different wizards to use this function.
  *       this might require adding a custom message parameter to the function
  */
 export async function showCopyPasteInstructions(
   filename: string,
   codeSnippet: string,
+  hint?: string,
 ): Promise<void> {
   clack.log.step(
     `Add the following code to your ${chalk.cyan(
       path.basename(filename),
-    )} file:`,
+    )} file:${hint ? chalk.dim(` (${chalk.dim(hint)})`) : ''}`,
   );
 
+  // Padding the code snippet to be printed with a \n at the beginning and end
+  // This makes it easier to distinguish the snippet from the rest of the output
   // Intentionally logging directly to console here so that the code can be copied/pasted directly
   // eslint-disable-next-line no-console
-  console.log(`\n${codeSnippet}`);
+  console.log(`\n${codeSnippet}\n`);
 
   await abortIfCancelled(
     clack.select({
@@ -897,6 +875,47 @@ export async function showCopyPasteInstructions(
   );
 }
 
+/**
+ * Callback that exposes formatting helpers for a code snippet.
+ * @param unchanged - Formats text as old code.
+ * @param plus - Formats text as new code.
+ * @param minus - Formats text as removed code.
+ */
+type CodeSnippetFormatter = (
+  unchanged: (txt: string) => string,
+  plus: (txt: string) => string,
+  minus: (txt: string) => string,
+) => string;
+
+/**
+ * Crafts a code snippet that can be used to e.g.
+ * - print copy/paste instructions to the console
+ * - create a new config file.
+ *
+ * @param colors set this to true if you want the final snippet to be colored.
+ * This is useful for printing the snippet to the console as part of copy/paste instructions.
+ *
+ * @param callback the callback that returns the formatted code snippet.
+ * It exposes takes the helper functions for marking code as unchaned, new or removed.
+ * These functions no-op if no special formatting should be applied
+ * and otherwise apply the appropriate formatting/coloring.
+ * (@see {@link CodeSnippetFormatter})
+ *
+ * @see {@link showCopyPasteInstructions} for the helper with which to display the snippet in the console.
+ *
+ * @returns a string containing the final, formatted code snippet.
+ */
+export function makeCodeSnippet(
+  colors: boolean,
+  callback: CodeSnippetFormatter,
+): string {
+  const unchanged = (txt: string) => (colors ? chalk.grey(txt) : txt);
+  const plus = (txt: string) => (colors ? chalk.greenBright(txt) : txt);
+  const minus = (txt: string) => (colors ? chalk.redBright(txt) : txt);
+
+  return callback(unchanged, plus, minus);
+}
+
 /**
  * Creates a new config file with the given @param filepath and @param codeSnippet.
  *

package/src/utils/package-manager.ts

@@ -10,38 +10,44 @@ export interface PackageManager {
   lockFile: string;
   installCommand: string;
   buildCommand: string;
+  /* The command that the package manager uses to run a script from package.json */
+  runScriptCommand: string;
 }
 
-const bun: PackageManager = {
+export const BUN: PackageManager = {
   name: 'bun',
   label: 'Bun',
   lockFile: 'bun.lockb',
   installCommand: 'bun add',
-  buildCommand: 'bun build',
+  buildCommand: 'bun run build',
+  runScriptCommand: 'bun run',
 };
-const yarn: PackageManager = {
+export const YARN: PackageManager = {
   name: 'yarn',
   label: 'Yarn',
   lockFile: 'yarn.lock',
   installCommand: 'yarn add',
   buildCommand: 'yarn build',
+  runScriptCommand: 'yarn',
 };
-const pnpm: PackageManager = {
+export const PNPM: PackageManager = {
   name: 'pnpm',
   label: 'PNPM',
   lockFile: 'pnpm-lock.yaml',
   installCommand: 'pnpm add',
   buildCommand: 'pnpm build',
+  runScriptCommand: 'pnpm',
 };
-const npm: PackageManager = {
+export const NPM: PackageManager = {
   name: 'npm',
   label: 'NPM',
   lockFile: 'package-lock.json',
   installCommand: 'npm add',
   buildCommand: 'npm run build',
+  runScriptCommand: 'npm run',
 };
 
-export const packageManagers = [bun, yarn, pnpm, npm];
+export const packageManagers = [BUN, YARN, PNPM, NPM];
 
 export function detectPackageManger(): PackageManager | null {
   for (const packageManager of packageManagers) {