@sentry/wizard 3.9.1 → 3.10.0

package/lib/Steps/Integrations/Remix.ts

@@ -0,0 +1,32 @@
+import type { Answers } from 'inquirer';
+
+import type { Args } from '../../Constants';
+import { BaseIntegration } from './BaseIntegration';
+import { runRemixWizard } from '../../../src/remix/remix-wizard';
+
+/**
+ * This class just redirects to the new `remix-wizard.ts` flow.
+ */
+export class Remix extends BaseIntegration {
+  public constructor(protected _argv: Args) {
+    super(_argv);
+  }
+
+  public async emit(_answers: Answers): Promise<Answers> {
+    await runRemixWizard({
+      promoCode: this._argv.promoCode,
+      url: this._argv.url,
+      telemetryEnabled: !this._argv.disableTelemetry,
+    });
+    return {};
+  }
+
+  public async shouldConfigure(_answers: Answers): Promise<Answers> {
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    if (this._shouldConfigure) {
+      return this._shouldConfigure;
+    }
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    return this.shouldConfigure;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/wizard",
-  "version": "3.9.1",
+  "version": "3.10.0",
   "homepage": "https://github.com/getsentry/sentry-wizard",
   "repository": "https://github.com/getsentry/sentry-wizard",
   "description": "Sentry wizard helping you to configure your project",

package/src/remix/codemods/handle-error.ts

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+// @ts-expect-error - magicast is ESM and TS complains about that. It works though
+import type { ProxifiedModule } from 'magicast';
+import type { Program } from '@babel/types';
+
+import * as recast from 'recast';
+
+import { HANDLE_ERROR_TEMPLATE_V2 } from '../templates';
+import { getInitCallInsertionIndex, hasSentryContent } from '../utils';
+
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+
+// @ts-expect-error - magicast is ESM and TS complains about that. It works though
+import { generateCode } from 'magicast';
+
+export function instrumentHandleError(
+  originalEntryServerMod: ProxifiedModule<any>,
+  serverEntryFilename: string,
+): boolean {
+  const originalEntryServerModAST = originalEntryServerMod.$ast as Program;
+
+  const handleErrorFunction = originalEntryServerModAST.body.find(
+    (node) =>
+      node.type === 'ExportNamedDeclaration' &&
+      node.declaration?.type === 'FunctionDeclaration' &&
+      node.declaration.id?.name === 'handleError',
+  );
+
+  if (!handleErrorFunction) {
+    clack.log.warn(
+      `Could not find function ${chalk.cyan('handleError')} in ${chalk.cyan(
+        serverEntryFilename,
+      )}. Creating one for you.`,
+    );
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const implementation = recast.parse(HANDLE_ERROR_TEMPLATE_V2).program
+      .body[0];
+
+    originalEntryServerModAST.body.splice(
+      getInitCallInsertionIndex(originalEntryServerModAST),
+      0,
+      // @ts-expect-error - string works here because the AST is proxified by magicast
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      recast.types.builders.exportNamedDeclaration(implementation),
+    );
+  } else if (
+    hasSentryContent(
+      generateCode(handleErrorFunction).code,
+      originalEntryServerMod.$code,
+    )
+  ) {
+    return false;
+  } else {
+    // @ts-expect-error - string works here because the AST is proxified by magicast
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+    handleErrorFunction.declaration.body.body.unshift(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      recast.parse(HANDLE_ERROR_TEMPLATE_V2).program.body[0].body.body[0],
+    );
+  }
+
+  return true;
+}

package/src/remix/codemods/root-v1.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+import * as recast from 'recast';
+import * as path from 'path';
+
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+
+// @ts-expect-error - magicast is ESM and TS complains about that. It works though
+import { builders, generateCode, loadFile, writeFile } from 'magicast';
+
+export async function instrumentRootRouteV1(
+  rootFileName: string,
+): Promise<void> {
+  try {
+    const rootRouteAst = await loadFile(
+      path.join(process.cwd(), 'app', rootFileName),
+    );
+
+    rootRouteAst.imports.$add({
+      from: '@sentry/remix',
+      imported: 'withSentry',
+      local: 'withSentry',
+    });
+
+    recast.visit(rootRouteAst.$ast, {
+      visitExportDefaultDeclaration(path) {
+        /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+        if (path.value.declaration.type === 'FunctionDeclaration') {
+          // Move the function declaration just before the default export
+          path.insertBefore(path.value.declaration);
+
+          // Get the name of the function to be wrapped
+          const functionName: string = path.value.declaration.id.name as string;
+
+          // Create the wrapped function call
+          const functionCall = recast.types.builders.callExpression(
+            recast.types.builders.identifier('withSentry'),
+            [recast.types.builders.identifier(functionName)],
+          );
+
+          // Replace the default export with the wrapped function call
+          path.value.declaration = functionCall;
+        } else if (path.value.declaration.type === 'Identifier') {
+          const rootRouteExport = rootRouteAst.exports.default;
+
+          const expressionToWrap = generateCode(
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            rootRouteExport.$ast,
+          ).code;
+
+          rootRouteAst.exports.default = builders.raw(
+            `withSentry(${expressionToWrap})`,
+          );
+        } else {
+          clack.log.warn(
+            chalk.yellow(
+              `Couldn't instrument ${chalk.bold(
+                rootFileName,
+              )} automatically. Wrap your default export with: ${chalk.dim(
+                'withSentry()',
+              )}\n`,
+            ),
+          );
+        }
+
+        this.traverse(path);
+        /* eslint-enable @typescript-eslint/no-unsafe-member-access */
+      },
+    });
+
+    await writeFile(
+      rootRouteAst.$ast,
+      path.join(process.cwd(), 'app', rootFileName),
+    );
+  } catch (e: unknown) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    clack.log.warn(
+      chalk.yellow(
+        `Something went wrong writing to ${chalk.bold(rootFileName)}`,
+      ),
+    );
+    clack.log.info(
+      `Please put the following code snippet into ${chalk.bold(
+        rootFileName,
+      )}: ${chalk.dim('You probably have to clean it up a bit.')}\n`,
+    );
+  }
+}

package/src/remix/codemods/root-v2.ts

@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+import * as recast from 'recast';
+import * as path from 'path';
+
+import type { ExportNamedDeclaration, Program } from '@babel/types';
+
+// @ts-expect-error - magicast is ESM and TS complains about that. It works though
+import { loadFile, writeFile } from 'magicast';
+
+import { ERROR_BOUNDARY_TEMPLATE_V2 } from '../templates';
+
+export async function instrumentRootRouteV2(
+  rootFileName: string,
+): Promise<void> {
+  const rootRouteAst = await loadFile(
+    path.join(process.cwd(), 'app', rootFileName),
+  );
+
+  const exportsAst = rootRouteAst.exports.$ast as Program;
+
+  const namedExports = exportsAst.body.filter(
+    (node) => node.type === 'ExportNamedDeclaration',
+  ) as ExportNamedDeclaration[];
+
+  let foundErrorBoundary = false;
+
+  namedExports.forEach((namedExport) => {
+    const declaration = namedExport.declaration;
+
+    if (!declaration) {
+      return;
+    }
+
+    if (declaration.type === 'FunctionDeclaration') {
+      if (declaration.id?.name === 'ErrorBoundary') {
+        foundErrorBoundary = true;
+      }
+    } else if (declaration.type === 'VariableDeclaration') {
+      const declarations = declaration.declarations;
+
+      declarations.forEach((declaration) => {
+        // @ts-expect-error - id should always have a name in this case
+        if (declaration.id?.name === 'ErrorBoundary') {
+          foundErrorBoundary = true;
+        }
+      });
+    }
+  });
+
+  if (!foundErrorBoundary) {
+    rootRouteAst.imports.$add({
+      from: '@sentry/remix',
+      imported: 'captureRemixErrorBoundaryError',
+      local: 'captureRemixErrorBoundaryError',
+    });
+
+    rootRouteAst.imports.$add({
+      from: '@remix-run/react',
+      imported: 'useRouteError',
+      local: 'useRouteError',
+    });
+
+    recast.visit(rootRouteAst.$ast, {
+      visitExportDefaultDeclaration(path) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        const implementation = recast.parse(ERROR_BOUNDARY_TEMPLATE_V2).program
+          .body[0];
+
+        path.insertBefore(
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          recast.types.builders.exportDeclaration(false, implementation),
+        );
+
+        this.traverse(path);
+      },
+    });
+  }
+
+  await writeFile(
+    rootRouteAst.$ast,
+    path.join(process.cwd(), 'app', rootFileName),
+  );
+}

package/src/remix/remix-wizard.ts

@@ -0,0 +1,137 @@
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+
+import {
+  addSentryCliRc,
+  askForProjectSelection,
+  askForSelfHosted,
+  askForWizardLogin,
+  confirmContinueEvenThoughNoGitRepo,
+  ensurePackageIsInstalled,
+  getPackageDotJson,
+  installPackage,
+  isUsingTypeScript,
+  printWelcome,
+} from '../utils/clack-utils';
+import { hasPackageInstalled } from '../utils/package-json';
+import { WizardOptions } from '../utils/types';
+import {
+  initializeSentryOnEntryClient,
+  initializeSentryOnEntryServer,
+  updateBuildScript,
+  instrumentRootRoute,
+  isRemixV2,
+  loadRemixConfig,
+} from './sdk-setup';
+import { debug } from '../utils/debug';
+import { traceStep, withTelemetry } from '../telemetry';
+
+export async function runRemixWizard(options: WizardOptions): Promise<void> {
+  return withTelemetry(
+    {
+      enabled: options.telemetryEnabled,
+      integration: 'remix',
+    },
+    () => runRemixWizardWithTelemetry(options),
+  );
+}
+
+async function runRemixWizardWithTelemetry(
+  options: WizardOptions,
+): Promise<void> {
+  printWelcome({
+    wizardName: 'Sentry Remix Wizard',
+    promoCode: options.promoCode,
+    telemetryEnabled: options.telemetryEnabled,
+  });
+
+  await confirmContinueEvenThoughNoGitRepo();
+
+  const remixConfig = await loadRemixConfig();
+  const packageJson = await getPackageDotJson();
+
+  // We expect `@remix-run/dev` to be installed for every Remix project
+  await ensurePackageIsInstalled(packageJson, '@remix-run/dev', 'Remix');
+
+  const { url: sentryUrl } = await askForSelfHosted(options.url);
+
+  const { projects, apiKeys } = await askForWizardLogin({
+    promoCode: options.promoCode,
+    url: sentryUrl,
+    platform: 'javascript-remix',
+  });
+
+  const selectedProject = await askForProjectSelection(projects);
+
+  await traceStep('Install Sentry SDK', () =>
+    installPackage({
+      packageName: '@sentry/remix',
+      alreadyInstalled: hasPackageInstalled('@sentry/remix', packageJson),
+    }),
+  );
+
+  const dsn = selectedProject.keys[0].dsn.public;
+
+  const isTS = isUsingTypeScript();
+  const isV2 = isRemixV2(remixConfig, packageJson);
+
+  await addSentryCliRc(
+    apiKeys.token,
+    selectedProject.organization.slug,
+    selectedProject.name,
+  );
+
+  await traceStep('Update build script for sourcemap uploads', async () => {
+    try {
+      await updateBuildScript();
+    } catch (e) {
+      clack.log
+        .warn(`Could not update build script to generate and upload sourcemaps.
+  Please update your build script manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps/`);
+      debug(e);
+    }
+  });
+
+  await traceStep('Instrument root route', async () => {
+    try {
+      await instrumentRootRoute(isV2, isTS);
+    } catch (e) {
+      clack.log.warn(`Could not instrument root route.
+  Please do it manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/`);
+      debug(e);
+    }
+  });
+
+  await traceStep('Initialize Sentry on client entry', async () => {
+    try {
+      await initializeSentryOnEntryClient(dsn, isTS);
+    } catch (e) {
+      clack.log.warn(`Could not initialize Sentry on client entry.
+  Please do it manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/`);
+      debug(e);
+    }
+  });
+
+  await traceStep('Initialize Sentry on server entry', async () => {
+    try {
+      await initializeSentryOnEntryServer(dsn, isTS, isV2);
+    } catch (e) {
+      clack.log.warn(`Could not initialize Sentry on server entry.
+  Please do it manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/`);
+      debug(e);
+    }
+  });
+
+  clack.outro(`
+${chalk.green(
+  'Sentry has been successfully configured for your Remix project.',
+)}
+
+${chalk.cyan('You can now deploy your project to see Sentry in action.')}
+
+${chalk.cyan(
+  `To learn more about how to use Sentry with Remix, visit our documentation:
+https://docs.sentry.io/platforms/javascript/guides/remix/`,
+)}`);
+}