@sentry/wizard 3.19.0 → 3.20.1

package/src/remix/codemods/express-server.ts

@@ -0,0 +1,197 @@
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+import * as recast from 'recast';
+import { visit } from 'ast-types';
+import {
+  ASTNode,
+  ProxifiedImportItem,
+  generateCode,
+  loadFile,
+  writeFile,
+  // @ts-expect-error - magicast is ESM and TS complains about that. It works though
+} from 'magicast';
+import type { Program } from '@babel/types';
+import * as fs from 'fs';
+
+import { getInitCallInsertionIndex, hasSentryContent } from '../utils';
+import { findFile } from '../../utils/ast-utils';
+
+// Find `loadViteServerBuild` or `unstable_loadViteServerBuild` call inside an arrow function
+// and replace it with await loadViteServerBuild.
+// For context, see: https://github.com/getsentry/sentry-javascript/issues/9500
+export function updateViteBuildParameter(node: ASTNode) {
+  const hasViteConfig = findFile('vite.config');
+
+  if (!hasViteConfig) {
+    return;
+  }
+
+  visit(node, {
+    visitArrowFunctionExpression(path) {
+      if (
+        path.value.body.type === 'CallExpression' &&
+        path.value.body.callee.type === 'Identifier' &&
+        (path.value.body.callee.name === 'unstable_loadViteServerBuild' ||
+          path.value.body.callee.name === 'loadViteServerBuild')
+      ) {
+        // Replace the arrow function with a call to await loadViteServerBuild
+        path.replace(recast.types.builders.awaitExpression(path.value.body));
+      }
+
+      this.traverse(path);
+    },
+  });
+}
+
+// Try to find the Express server implementation that contains `createRequestHandler` from `@remix-run/express`
+export async function findCustomExpressServerImplementation() {
+  const possiblePaths = [
+    'server',
+    'server/index',
+    'app/server',
+    'app/server/index',
+  ];
+
+  for (const filePath of possiblePaths) {
+    const filename = findFile(filePath);
+
+    if (!filename) {
+      continue;
+    }
+
+    const fileStat = fs.statSync(filename);
+
+    if (!fileStat.isFile()) {
+      continue;
+    }
+
+    const fileMod = await loadFile(filename);
+    const createRequestHandlerImport = fileMod.imports.$items.find(
+      (imp) =>
+        imp.from === '@remix-run/express' &&
+        imp.imported === 'createRequestHandler',
+    );
+
+    if (createRequestHandlerImport) {
+      return filename;
+    }
+  }
+
+  return null;
+}
+
+// Wrap createRequestHandler with `wrapExpressCreateRequestHandler` from `@sentry/remix`
+export async function instrumentExpressCreateRequestHandler(
+  expressServerPath: string,
+): Promise<boolean> {
+  const originalExpressServerMod = await loadFile(expressServerPath);
+
+  if (
+    hasSentryContent(
+      generateCode(originalExpressServerMod.$ast).code,
+      originalExpressServerMod.$code,
+    )
+  ) {
+    clack.log.warn(
+      `Express server in ${chalk.cyan(
+        expressServerPath,
+      )} already has Sentry instrumentation. Skipping.`,
+    );
+
+    return false;
+  }
+
+  originalExpressServerMod.imports.$add({
+    from: '@sentry/remix',
+    imported: 'wrapExpressCreateRequestHandler',
+    local: 'wrapExpressCreateRequestHandler',
+  });
+
+  const createRequestHandlerImport =
+    originalExpressServerMod.imports.$items.find(
+      (imp) =>
+        imp.from === '@remix-run/express' &&
+        imp.imported === 'createRequestHandler',
+    );
+
+  visit(originalExpressServerMod.$ast, {
+    visitIdentifier(path) {
+      if (
+        path.value.name === 'createRequestHandler' &&
+        path.parentPath.value.type === 'CallExpression'
+      ) {
+        path.value.name = 'sentryCreateRequestHandler';
+      }
+
+      this.traverse(path);
+    },
+  });
+
+  // Insert the const declaration right after the imports
+  // Where we want to insert the const declaration is the same as where we would want to insert the init call.
+  const insertionIndex = getInitCallInsertionIndex(
+    originalExpressServerMod.$ast as Program,
+  );
+
+  const createRequestHandlerConst = wrapCreateRequestHandlerWithSentry(
+    createRequestHandlerImport,
+  );
+
+  if (!createRequestHandlerConst) {
+    // Todo: throw error
+  }
+
+  (originalExpressServerMod.$ast as Program).body.splice(
+    insertionIndex,
+    0,
+    // @ts-expect-error - string works here because the AST is proxified by magicast
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    createRequestHandlerConst,
+  );
+
+  // Update the Vite build parameter to await loadViteServerBuild if everything goes well.
+  // This should be the last thing we do.
+  updateViteBuildParameter(originalExpressServerMod.$ast);
+
+  try {
+    await writeFile(originalExpressServerMod.$ast, expressServerPath);
+
+    clack.log.info(
+      `Successfully instrumented Express server in ${chalk.cyan(
+        expressServerPath,
+      )}.`,
+    );
+  } catch (e) {
+    clack.log.warn(
+      `Could not write to Express server in ${chalk.cyan(expressServerPath)}.`,
+    );
+
+    throw e;
+  }
+
+  return true;
+}
+
+// Wrap `createRequestHandler` with `wrapExpressCreateRequestHandler` and set const name to `sentryCreateRequestHandler`
+export function wrapCreateRequestHandlerWithSentry(
+  createRequestHandlerImport: ProxifiedImportItem | undefined,
+) {
+  if (!createRequestHandlerImport) {
+    return;
+  }
+
+  const createRequestHandler = createRequestHandlerImport.local;
+
+  const wrapCreateRequestHandler = recast.types.builders.callExpression(
+    recast.types.builders.identifier('wrapExpressCreateRequestHandler'),
+    [recast.types.builders.identifier(createRequestHandler)],
+  );
+
+  return recast.types.builders.variableDeclaration('const', [
+    recast.types.builders.variableDeclarator(
+      recast.types.builders.identifier('sentryCreateRequestHandler'),
+      wrapCreateRequestHandler,
+    ),
+  ]);
+}

package/src/remix/remix-wizard.ts

@@ -23,6 +23,7 @@ import {
   isRemixV2,
   loadRemixConfig,
   runRemixReveal,
+  instrumentExpressServer,
 } from './sdk-setup';
 import { debug } from '../utils/debug';
 import { traceStep, withTelemetry } from '../telemetry';
@@ -152,6 +153,25 @@ async function runRemixWizardWithTelemetry(
     }
   });
 
+  await traceStep('Instrument custom Express server', async () => {
+    try {
+      const hasExpressAdapter = hasPackageInstalled(
+        '@remix-run/express',
+        packageJson,
+      );
+
+      if (!hasExpressAdapter) {
+        return;
+      }
+
+      await instrumentExpressServer();
+    } catch (e) {
+      clack.log.warn(`Could not instrument custom Express server.
+  Please do it manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup/#custom-express-server`);
+      debug(e);
+    }
+  });
+
   clack.outro(`
 ${chalk.green(
   'Sentry has been successfully configured for your Remix project.',

package/src/remix/sdk-setup.ts

@@ -22,6 +22,10 @@ import { getInitCallInsertionIndex, hasSentryContent } from './utils';
 import { instrumentRootRouteV1 } from './codemods/root-v1';
 import { instrumentRootRouteV2 } from './codemods/root-v2';
 import { instrumentHandleError } from './codemods/handle-error';
+import {
+  findCustomExpressServerImplementation,
+  instrumentExpressCreateRequestHandler,
+} from './codemods/express-server';
 import { getPackageDotJson } from '../utils/clack-utils';
 
 export type PartialRemixConfig = {
@@ -347,3 +351,16 @@ export async function initializeSentryOnEntryServer(
     )}.`,
   );
 }
+
+export async function instrumentExpressServer() {
+  const expressServerPath = await findCustomExpressServerImplementation();
+
+  if (!expressServerPath) {
+    clack.log.warn(
+      `Could not find custom Express server implementation. Please instrument it manually.`,
+    );
+    return;
+  }
+
+  await instrumentExpressCreateRequestHandler(expressServerPath);
+}

package/src/sveltekit/sveltekit-wizard.ts

@@ -8,6 +8,7 @@ import {
   abort,
   abortIfCancelled,
   addSentryCliConfig,
+  askShouldCreateExamplePage,
   confirmContinueIfNoOrDirtyGitRepo,
   ensurePackageIsInstalled,
   getOrAskForProjectData,
@@ -21,6 +22,7 @@ import { createExamplePage } from './sdk-example';
 import { createOrMergeSvelteKitFiles, loadSvelteConfig } from './sdk-setup';
 import { traceStep, withTelemetry } from '../telemetry';
 import { getKitVersionBucket, getSvelteVersionBucket } from './utils';
+import { NPM, detectPackageManger } from '../utils/package-manager';
 
 export async function runSvelteKitWizard(
   options: WizardOptions,
@@ -128,41 +130,55 @@ export async function runSvelteKitWizardWithTelemetry(
     return;
   }
 
-  try {
-    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(
-      chalk.dim(
-        typeof e === 'object' && e != null && 'toString' in e
-          ? e.toString()
-          : typeof e === 'string'
-          ? e
-          : 'Unknown error',
-      ),
-    );
-    Sentry.captureException(
-      'Error while creating an example Svelte page to test Sentry',
-    );
-    await abort('Exiting Wizard');
-    return;
+  const shouldCreateExamplePage = await askShouldCreateExamplePage(
+    '/sentry-example',
+  );
+
+  if (shouldCreateExamplePage) {
+    try {
+      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(
+        chalk.dim(
+          typeof e === 'object' && e != null && 'toString' in e
+            ? e.toString()
+            : typeof e === 'string'
+            ? e
+            : 'Unknown error',
+        ),
+      );
+      Sentry.captureException(
+        'Error while creating an example Svelte page to test Sentry',
+      );
+      await abort('Exiting Wizard');
+      return;
+    }
   }
 
-  clack.outro(`
-${chalk.green('Successfully installed the Sentry SvelteKit SDK!')}
+  clack.outro(buildOutroMessage(shouldCreateExamplePage));
+}
+
+function buildOutroMessage(shouldCreateExamplePage: boolean): string {
+  const packageManager = detectPackageManger() || NPM;
+
+  let msg = chalk.green('\nSuccessfully installed the Sentry SvelteKit SDK!');
+
+  if (shouldCreateExamplePage) {
+    msg += `\n\nYou can validate your setup by starting your dev environment (${chalk.cyan(
+      `\`${packageManager.runScriptCommand} dev\``,
+    )}) and visiting ${chalk.cyan('"/sentry-example"')}.`;
+  }
 
-${chalk.cyan(
-  'You can validate your setup by starting your dev environment (`npm run dev`) and visiting "/sentry-example".',
-)}
+  msg += `\n\nCheck out the SDK documentation for further configuration:
+https://docs.sentry.io/platforms/javascript/guides/sveltekit/`;
 
-Check out the SDK documentation for further configuration:
-https://docs.sentry.io/platforms/javascript/guides/sveltekit/
-  `);
+  return msg;
 }

package/src/sveltekit/templates.ts

@@ -62,23 +62,16 @@ Feel free to delete this file and the entire sentry route.
 <script>
   import * as Sentry from '@sentry/sveltekit';
 
-  async function getSentryData() {
-    const transaction = Sentry.startTransaction({
-      name: 'Example Frontend Transaction'
-    });
-
-    Sentry.configureScope((scope) => {
-      scope.setSpan(transaction);
-    });
-
-    try {
+  function getSentryData() {
+    Sentry.startSpan({
+      name: 'Example Frontend Span',
+      op: 'test',
+    }, async () => {
       const res = await fetch('/sentry-example');
       if (!res.ok) {
         throw new Error('Sentry Example Frontend Error');
       }
-    } finally {
-      transaction.finish();
-    }
+    });
   }
 </script>
 

package/src/utils/clack-utils.ts

@@ -1126,7 +1126,7 @@ type CodeSnippetFormatter = (
  * 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.
+ * It exposes takes the helper functions for marking code as unchanged, new or removed.
  * These functions no-op if no special formatting should be applied
  * and otherwise apply the appropriate formatting/coloring.
  * (@see {@link CodeSnippetFormatter})
@@ -1161,7 +1161,7 @@ export function makeCodeSnippet(
  * @param moreInformation (optional) the message to be printed after the file was created
  * For example, this can be a link to more information about configuring the tool.
  *
- * @returns true on sucess, false otherwise
+ * @returns true on success, false otherwise
  */
 export async function createNewConfigFile(
   filepath: string,
@@ -1194,3 +1194,24 @@ export async function createNewConfigFile(
 
   return false;
 }
+
+export async function askShouldCreateExamplePage(
+  customRoute?: string,
+): Promise<boolean> {
+  const route = chalk.cyan(customRoute ?? '/sentry-example-page');
+  return traceStep('ask-create-example-page', () =>
+    abortIfCancelled(
+      clack.select({
+        message: `Do you want to create an example page ("${route}") to test your Sentry setup?`,
+        options: [
+          {
+            value: true,
+            label: 'Yes',
+            hint: 'Recommended - Check your git status before committing!',
+          },
+          { value: false, label: 'No' },
+        ],
+      }),
+    ),
+  );
+}