@sentry/wizard 3.1.0 → 3.2.1

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(),
+  );
+}

package/src/sveltekit/sdk-setup.ts

@@ -0,0 +1,431 @@
+import type { ExportNamedDeclaration, Program } from '@babel/types';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as url from 'url';
+import chalk from 'chalk';
+
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import type { ProxifiedModule } from 'magicast';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import { builders, generateCode, loadFile, parseModule } from 'magicast';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import { addVitePlugin } from 'magicast/helpers';
+import {
+  getClientHooksTemplate,
+  getServerHooksTemplate,
+} from '../templates/sveltekit-templates';
+
+const SVELTE_CONFIG_FILE = 'svelte.config.js';
+
+export type PartialSvelteConfig = {
+  kit?: {
+    files?: {
+      hooks?: {
+        client?: string;
+        server?: string;
+      };
+      routes?: string;
+    };
+  };
+};
+
+export async function createOrMergeSvelteKitFiles(
+  dsn: string,
+  svelteConfig: PartialSvelteConfig,
+): Promise<void> {
+  const { clientHooksPath, serverHooksPath } = getHooksConfigDirs(svelteConfig);
+
+  // full file paths with correct file ending (or undefined if not found)
+  const originalClientHooksFile = findHooksFile(clientHooksPath);
+  const originalServerHooksFile = findHooksFile(serverHooksPath);
+
+  const viteConfig = findHooksFile(path.resolve(process.cwd(), 'vite.config'));
+
+  if (!originalClientHooksFile) {
+    clack.log.info('No client hooks file found, creating a new one.');
+    await createNewHooksFile(`${clientHooksPath}.js`, 'client', dsn);
+  }
+  if (!originalServerHooksFile) {
+    clack.log.info('No server hooks file found, creating a new one.');
+    await createNewHooksFile(`${serverHooksPath}.js`, 'client', dsn);
+  }
+
+  if (originalClientHooksFile) {
+    await mergeHooksFile(originalClientHooksFile, 'client', dsn);
+  }
+  if (originalServerHooksFile) {
+    await mergeHooksFile(originalServerHooksFile, 'server', dsn);
+  }
+
+  if (viteConfig) {
+    await modifyViteConfig(viteConfig);
+  }
+}
+
+/**
+ * Attempts to read the svelte.config.js file to find the location of the hooks files.
+ * If users specified a custom location, we'll use that. Otherwise, we'll use the default.
+ */
+function getHooksConfigDirs(svelteConfig: PartialSvelteConfig): {
+  clientHooksPath: string;
+  serverHooksPath: string;
+} {
+  const relativeUserClientHooksPath = svelteConfig?.kit?.files?.hooks?.client;
+  const relativeUserServerHooksPath = svelteConfig?.kit?.files?.hooks?.server;
+  const userClientHooksPath =
+    relativeUserClientHooksPath &&
+    path.resolve(process.cwd(), relativeUserClientHooksPath);
+  const userServerHooksPath =
+    relativeUserServerHooksPath &&
+    path.resolve(process.cwd(), relativeUserServerHooksPath);
+
+  const defaulHooksDir = path.resolve(process.cwd(), 'src');
+  const defaultClientHooksPath = path.resolve(defaulHooksDir, 'hooks.client'); // file ending missing on purpose
+  const defaultServerHooksPath = path.resolve(defaulHooksDir, 'hooks.server'); // same here
+
+  return {
+    clientHooksPath: userClientHooksPath || defaultClientHooksPath,
+    serverHooksPath: userServerHooksPath || defaultServerHooksPath,
+  };
+}
+
+/**
+ * Checks if a hooks file exists and returns the full path to the file with the correct file type.
+ */
+function findHooksFile(hooksFile: string): string | undefined {
+  const possibleFileTypes = ['.js', '.ts', '.mjs'];
+  return possibleFileTypes
+    .map((type) => `${hooksFile}${type}`)
+    .find((file) => fs.existsSync(file));
+}
+
+/**
+ * Reads the template, replaces the dsn placeholder with the actual dsn and writes the file to @param hooksFileDest
+ */
+async function createNewHooksFile(
+  hooksFileDest: string,
+  hooktype: 'client' | 'server',
+  dsn: string,
+): Promise<void> {
+  const filledTemplate =
+    hooktype === 'client'
+      ? getClientHooksTemplate(dsn)
+      : getServerHooksTemplate(dsn);
+
+  await fs.promises.mkdir(path.dirname(hooksFileDest), { recursive: true });
+  await fs.promises.writeFile(hooksFileDest, filledTemplate);
+
+  clack.log.success(`Created ${hooksFileDest}`);
+}
+
+/**
+ * Merges the users' hooks file with Sentry-related code.
+ *
+ * Both hooks:
+ * - add import * as Sentry
+ * - add Sentry.init
+ * - add handleError hook wrapper
+ *
+ * Additionally in  Server hook:
+ * - add handle hook handler
+ */
+async function mergeHooksFile(
+  hooksFile: string,
+  hookType: 'client' | 'server',
+  dsn: string,
+): Promise<void> {
+  const originalHooksMod = await loadFile(hooksFile);
+  if (hasSentryContent(path.basename(hooksFile), originalHooksMod.$code)) {
+    // We don't want to mess with files that already have Sentry content.
+    // Let's just bail out at this point.
+    return;
+  }
+
+  originalHooksMod.imports.$add({
+    from: '@sentry/sveltekit',
+    imported: '*',
+    local: 'Sentry',
+  });
+
+  if (hookType === 'client') {
+    insertClientInitCall(dsn, originalHooksMod);
+  } else {
+    insertServerInitCall(dsn, originalHooksMod);
+  }
+
+  wrapHandleError(originalHooksMod);
+
+  if (hookType === 'server') {
+    wrapHandle(originalHooksMod);
+  }
+
+  const modifiedCode = originalHooksMod.generate().code;
+
+  await fs.promises.writeFile(hooksFile, modifiedCode);
+
+  clack.log.success(`Added Sentry code to ${hooksFile}`);
+}
+
+function insertClientInitCall(
+  dsn: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  originalHooksMod: ProxifiedModule<any>,
+): void {
+  const initCallComment = `
+    // If you don't want to use Session Replay, remove the \`Replay\` integration, 
+    // \`replaysSessionSampleRate\` and \`replaysOnErrorSampleRate\` options.`;
+
+  // This assignment of any values is fine because we're just creating a function call in magicast
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const initCall = builders.functionCall('Sentry.init', {
+    dsn,
+    tracesSampleRate: 1.0,
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+    integrations: [builders.newExpression('Sentry.Replay')],
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const initCallWithComment = builders.raw(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    `${initCallComment}\n${generateCode(initCall).code}`,
+  );
+
+  const originalHooksModAST = originalHooksMod.$ast as Program;
+
+  const initCallInsertionIndex = getInitCallInsertionIndex(originalHooksModAST);
+
+  originalHooksModAST.body.splice(
+    initCallInsertionIndex,
+    0,
+    // @ts-ignore - string works here because the AST is proxified by magicast
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    generateCode(initCallWithComment).code,
+  );
+}
+
+function insertServerInitCall(
+  dsn: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  originalHooksMod: ProxifiedModule<any>,
+): void {
+  // This assignment of any values is fine because we're just creating a function call in magicast
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const initCall = builders.functionCall('Sentry.init', {
+    dsn,
+    tracesSampleRate: 1.0,
+  });
+
+  const originalHooksModAST = originalHooksMod.$ast as Program;
+
+  const initCallInsertionIndex = getInitCallInsertionIndex(originalHooksModAST);
+
+  originalHooksModAST.body.splice(
+    initCallInsertionIndex,
+    0,
+    // @ts-ignore - string works here because the AST is proxified by magicast
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    generateCode(initCall).code,
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function wrapHandleError(mod: ProxifiedModule<any>): void {
+  const modAst = mod.exports.$ast as Program;
+  const namedExports = modAst.body.filter(
+    (node) => node.type === 'ExportNamedDeclaration',
+  ) as ExportNamedDeclaration[];
+
+  let foundHandleError = false;
+
+  namedExports.forEach((modExport) => {
+    const declaration = modExport.declaration;
+    if (!declaration) {
+      return;
+    }
+    if (declaration.type === 'FunctionDeclaration') {
+      if (!declaration.id || declaration.id.name !== 'handleError') {
+        return;
+      }
+      foundHandleError = true;
+      const userCode = generateCode(declaration).code;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      mod.exports.handleError = builders.raw(
+        `Sentry.handleErrorWithSentry(${userCode.replace(
+          'handleError',
+          '_handleError',
+        )})`,
+      );
+      // because magicast doesn't overwrite the original function export, we need to remove it manually
+      modAst.body = modAst.body.filter((node) => node !== modExport);
+    } else if (declaration.type === 'VariableDeclaration') {
+      const declarations = declaration.declarations;
+      declarations.forEach((declaration) => {
+        // @ts-ignore - id should always have a name in this case
+        if (!declaration.id || declaration.id.name !== 'handleError') {
+          return;
+        }
+        foundHandleError = true;
+        const userCode = declaration.init;
+        const stringifiedUserCode = userCode ? generateCode(userCode).code : '';
+        // @ts-ignore - we can just place a string here, magicast will convert it to a node
+        declaration.init = `Sentry.handleErrorWithSentry(${stringifiedUserCode})`;
+      });
+    }
+  });
+
+  if (!foundHandleError) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    mod.exports.handleError = builders.functionCall(
+      'Sentry.handleErrorWithSentry',
+    );
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function wrapHandle(mod: ProxifiedModule<any>): void {
+  const modAst = mod.exports.$ast as Program;
+  const namedExports = modAst.body.filter(
+    (node) => node.type === 'ExportNamedDeclaration',
+  ) as ExportNamedDeclaration[];
+
+  let foundHandle = false;
+
+  namedExports.forEach((modExport) => {
+    const declaration = modExport.declaration;
+    if (!declaration) {
+      return;
+    }
+    if (declaration.type === 'FunctionDeclaration') {
+      if (!declaration.id || declaration.id.name !== 'handle') {
+        return;
+      }
+      foundHandle = true;
+      const userCode = generateCode(declaration).code;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      mod.exports.handle = builders.raw(
+        `sequence(Sentry.sentryHandle(), ${userCode.replace(
+          'handle',
+          '_handle',
+        )})`,
+      );
+      // because of an issue with magicast, we need to remove the original export
+      modAst.body = modAst.body.filter((node) => node !== modExport);
+    } else if (declaration.type === 'VariableDeclaration') {
+      const declarations = declaration.declarations;
+      declarations.forEach((declaration) => {
+        // @ts-ignore - id should always have a name in this case
+        if (!declaration.id || declaration.id.name !== 'handle') {
+          return;
+        }
+        const userCode = declaration.init;
+        const stringifiedUserCode = userCode ? generateCode(userCode).code : '';
+        // @ts-ignore - we can just place a string here, magicast will convert it to a node
+        declaration.init = `sequence(Sentry.sentryHandle(), ${stringifiedUserCode})`;
+        foundHandle = true;
+      });
+    }
+  });
+
+  if (!foundHandle) {
+    // can't use builders.functionCall here because it doesn't yet
+    // support member expressions (Sentry.sentryHandle()) in args
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    mod.exports.handle = builders.raw('sequence(Sentry.sentryHandle())');
+  }
+
+  try {
+    mod.imports.$add({
+      from: '@sveltejs/kit/hooks',
+      imported: 'sequence',
+      local: 'sequence',
+    });
+  } catch (_) {
+    // It's possible sequence is already imported. in this case, magicast throws but that's fine.
+  }
+}
+
+/** Checks if the Sentry SvelteKit SDK is already mentioned in the file */
+function hasSentryContent(fileName: string, fileContent: string): boolean {
+  if (fileContent.includes('@sentry/sveltekit')) {
+    clack.log.warn(
+      `File ${chalk.cyan(path.basename(fileName))} already contains Sentry code.
+Skipping adding Sentry functionality to ${chalk.cyan(
+        path.basename(fileName),
+      )}.`,
+    );
+    return true;
+  }
+  return false;
+}
+
+export async function loadSvelteConfig(): Promise<PartialSvelteConfig> {
+  const configFilePath = path.join(process.cwd(), SVELTE_CONFIG_FILE);
+
+  try {
+    if (!fs.existsSync(configFilePath)) {
+      return {};
+    }
+
+    const configUrl = url.pathToFileURL(configFilePath).href;
+    const svelteConfigModule = (await import(configUrl)) as {
+      default: PartialSvelteConfig;
+    };
+
+    return svelteConfigModule?.default || {};
+  } catch (e: unknown) {
+    clack.log.error(`Couldn't load ${SVELTE_CONFIG_FILE}.
+Please make sure, you're running this wizard with Node 16 or newer`);
+    clack.log.info(
+      chalk.dim(
+        typeof e === 'object' && e != null && 'toString' in e
+          ? e.toString()
+          : typeof e === 'string'
+          ? e
+          : 'Unknown error',
+      ),
+    );
+
+    return {};
+  }
+}
+
+async function modifyViteConfig(viteConfigPath: string): Promise<void> {
+  const viteConfigContent = (
+    await fs.promises.readFile(viteConfigPath, 'utf-8')
+  ).toString();
+
+  if (hasSentryContent(viteConfigPath, viteConfigContent)) {
+    return;
+  }
+
+  const viteModule = parseModule(viteConfigContent);
+
+  addVitePlugin(viteModule, {
+    imported: 'sentrySvelteKit',
+    from: '@sentry/sveltekit',
+    constructor: 'sentrySvelteKit',
+    index: 0,
+  });
+
+  const code = generateCode(viteModule.$ast).code;
+  await fs.promises.writeFile(viteConfigPath, code);
+}
+
+/**
+ * We want to insert the init call on top of the file but after all import statements
+ */
+function getInitCallInsertionIndex(originalHooksModAST: Program): number {
+  // We need to deep-copy here because reverse mutates in place
+  const copiedBodyNodes = [...originalHooksModAST.body];
+  const lastImportDeclaration = copiedBodyNodes
+    .reverse()
+    .find((node) => node.type === 'ImportDeclaration');
+
+  const initCallInsertionIndex = lastImportDeclaration
+    ? originalHooksModAST.body.indexOf(lastImportDeclaration) + 1
+    : 0;
+  return initCallInsertionIndex;
+}

package/src/sveltekit/sentry-cli-setup.ts

@@ -0,0 +1,27 @@
+import { Args } from '../../lib/Constants';
+import { SentryCli } from '../../lib/Helper/SentryCli';
+import { SentryProjectData } from '../utils/clack-utils';
+
+export async function setupCLIConfig(
+  authToken: string,
+  selectedProject: SentryProjectData,
+  sentryUrl: string,
+): Promise<void> {
+  const cli = new SentryCli({ url: sentryUrl } as Args);
+
+  const answers = {
+    config: {
+      organization: {
+        slug: selectedProject.organization.slug,
+      },
+      project: {
+        slug: selectedProject.slug,
+      },
+      auth: {
+        token: authToken,
+      },
+    },
+  };
+  const props = cli.convertAnswersToProperties(answers);
+  await cli.createSentryCliConfig(props);
+}

package/src/sveltekit/sveltekit-wizard.ts

@@ -0,0 +1,116 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+
+import {
+  abortIfCancelled,
+  askForSelfHosted,
+  askForWizardLogin,
+  confirmContinueEvenThoughNoGitRepo,
+  ensurePackageIsInstalled,
+  getPackageDotJson,
+  hasPackageInstalled,
+  installPackage,
+  printWelcome,
+  SentryProjectData,
+} from '../utils/clack-utils';
+import { createExamplePage } from './sdk-example';
+import { createOrMergeSvelteKitFiles, loadSvelteConfig } from './sdk-setup';
+
+import { setupCLIConfig } from './sentry-cli-setup';
+
+interface SvelteKitWizardOptions {
+  promoCode?: string;
+}
+
+export async function runSvelteKitWizard(
+  options: SvelteKitWizardOptions,
+): Promise<void> {
+  printWelcome({
+    wizardName: 'Sentry SvelteKit Wizard',
+    promoCode: options.promoCode,
+  });
+
+  await confirmContinueEvenThoughNoGitRepo();
+
+  const packageJson = await getPackageDotJson();
+  await ensurePackageIsInstalled(packageJson, '@sveltejs/kit', 'Sveltekit');
+
+  const { url: sentryUrl, selfHosted } = await askForSelfHosted();
+
+  const { projects, apiKeys } = await askForWizardLogin({
+    promoCode: options.promoCode,
+    url: sentryUrl,
+  });
+
+  const selectedProject: SentryProjectData | symbol = await clack.select({
+    message: 'Select your Sentry project.',
+    options: projects.map((project) => {
+      return {
+        value: project,
+        label: `${project.organization.slug}/${project.slug}`,
+      };
+    }),
+  });
+
+  abortIfCancelled(selectedProject);
+
+  await installPackage({
+    packageName: '@sentry/sveltekit',
+    alreadyInstalled: hasPackageInstalled('@sentry/sveltekit', packageJson),
+  });
+
+  await setupCLIConfig(apiKeys.token, selectedProject, sentryUrl);
+
+  const dsn = selectedProject.keys[0].dsn.public;
+
+  const svelteConfig = await loadSvelteConfig();
+
+  try {
+    await createOrMergeSvelteKitFiles(dsn, svelteConfig);
+  } catch (e: unknown) {
+    clack.log.error('Error while setting up the SvelteKit SDK:');
+    clack.log.info(
+      chalk.dim(
+        typeof e === 'object' && e != null && 'toString' in e
+          ? e.toString()
+          : typeof e === 'string'
+          ? e
+          : 'Unknown error',
+      ),
+    );
+    return;
+  }
+
+  try {
+    await 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(
+      chalk.dim(
+        typeof e === 'object' && e != null && 'toString' in e
+          ? e.toString()
+          : typeof e === 'string'
+          ? e
+          : 'Unknown error',
+      ),
+    );
+    return;
+  }
+
+  clack.outro(`
+${chalk.green('Successfully installed the Sentry SvelteKit SDK!')}
+
+${chalk.cyan(
+  'You can validate your setup by starting your dev environment (`npm run dev`) and visiting "/sentry-example".',
+)}
+
+Check out the SDK documentation for further configuration:
+https://docs.sentry.io/platforms/javascript/guides/sveltekit/
+  `);
+}

package/src/templates/nextjs-templates.ts

@@ -59,7 +59,7 @@ export function getNextjsConfigCjsAppendix(
 ): string {
   return `
 
-// Inected Content via Sentry Wizard Below
+// Injected content via Sentry wizard below
 
 const { withSentryConfig } = require("@sentry/nextjs");
 
@@ -104,7 +104,7 @@ export function getSentryConfigContents(
   } 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.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/`;
   }