@sentry/wizard 3.9.2 → 3.10.0

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

package/src/remix/sdk-setup.ts

@@ -0,0 +1,300 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+import type { Program } from '@babel/types';
+
+// @ts-expect-error - magicast is ESM and TS complains about that. It works though
+import type { ProxifiedModule } from 'magicast';
+
+import * as fs from 'fs';
+import * as path from 'path';
+import * as url from 'url';
+
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+import { parse } from 'semver';
+
+// @ts-expect-error - magicast is ESM and TS complains about that. It works though
+import { builders, generateCode, loadFile, writeFile } from 'magicast';
+import { PackageDotJson, getPackageVersion } from '../utils/package-json';
+import { getInitCallInsertionIndex, hasSentryContent } from './utils';
+import { instrumentRootRouteV1 } from './codemods/root-v1';
+import { instrumentRootRouteV2 } from './codemods/root-v2';
+import { instrumentHandleError } from './codemods/handle-error';
+
+export type PartialRemixConfig = {
+  unstable_dev?: boolean;
+  future?: {
+    v2_dev?: boolean;
+    v2_errorBoundary?: boolean;
+    v2_headers?: boolean;
+    v2_meta?: boolean;
+    v2_normalizeFormMethod?: boolean;
+    v2_routeConvention?: boolean;
+  };
+};
+
+const REMIX_CONFIG_FILE = 'remix.config.js';
+
+function insertClientInitCall(
+  dsn: string,
+  originalHooksMod: ProxifiedModule<any>,
+): void {
+  const initCall = builders.functionCall('Sentry.init', {
+    dsn,
+    tracesSampleRate: 1.0,
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+    integrations: [
+      builders.newExpression('Sentry.BrowserTracing', {
+        routingInstrumentation: builders.functionCall(
+          'Sentry.remixRouterInstrumentation',
+          builders.raw('useEffect'),
+          builders.raw('useLocation'),
+          builders.raw('useMatches'),
+        ),
+      }),
+      builders.newExpression('Sentry.Replay'),
+    ],
+  });
+
+  const originalHooksModAST = originalHooksMod.$ast as Program;
+  const initCallInsertionIndex = getInitCallInsertionIndex(originalHooksModAST);
+
+  originalHooksModAST.body.splice(
+    initCallInsertionIndex,
+    0,
+    // @ts-expect-error - string works here because the AST is proxified by magicast
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    generateCode(initCall).code,
+  );
+}
+
+function insertServerInitCall(
+  dsn: string,
+  originalHooksMod: ProxifiedModule<any>,
+) {
+  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-expect-error - string works here because the AST is proxified by magicast
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    generateCode(initCall).code,
+  );
+}
+
+export function isRemixV2(
+  remixConfig: PartialRemixConfig,
+  packageJson: PackageDotJson,
+): boolean {
+  const remixVersion = getPackageVersion('@remix-run/react', packageJson);
+  const remixVersionMajor = remixVersion && parse(remixVersion)?.major;
+  const isV2Remix = remixVersionMajor && remixVersionMajor >= 2;
+
+  return isV2Remix || remixConfig?.future?.v2_errorBoundary || false;
+}
+
+export async function loadRemixConfig(): Promise<PartialRemixConfig> {
+  const configFilePath = path.join(process.cwd(), REMIX_CONFIG_FILE);
+
+  try {
+    if (!fs.existsSync(configFilePath)) {
+      return {};
+    }
+
+    const configUrl = url.pathToFileURL(configFilePath).href;
+    const remixConfigModule = (await import(configUrl)) as {
+      default: PartialRemixConfig;
+    };
+
+    return remixConfigModule?.default || {};
+  } catch (e: unknown) {
+    clack.log.error(`Couldn't load ${REMIX_CONFIG_FILE}.`);
+    clack.log.info(
+      chalk.dim(
+        typeof e === 'object' && e != null && 'toString' in e
+          ? e.toString()
+          : typeof e === 'string'
+          ? e
+          : 'Unknown error',
+      ),
+    );
+
+    return {};
+  }
+}
+
+export async function instrumentRootRoute(
+  isV2?: boolean,
+  isTS?: boolean,
+): Promise<void> {
+  const rootFilename = `root.${isTS ? 'tsx' : 'jsx'}`;
+
+  if (isV2) {
+    await instrumentRootRouteV2(rootFilename);
+  } else {
+    await instrumentRootRouteV1(rootFilename);
+  }
+
+  clack.log.success(
+    `Successfully instrumented root route ${chalk.cyan(rootFilename)}.`,
+  );
+  /* eslint-enable @typescript-eslint/no-unsafe-member-access */
+}
+
+export async function updateBuildScript(): Promise<void> {
+  /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+  // Add sourcemaps option to build script
+  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  const packageJsonString = (
+    await fs.promises.readFile(packageJsonPath)
+  ).toString();
+  const packageJson = JSON.parse(packageJsonString);
+
+  if (!packageJson.scripts) {
+    packageJson.scripts = {};
+  }
+
+  if (!packageJson.scripts.build) {
+    packageJson.scripts.build =
+      'remix build --sourcemap && sentry-upload-sourcemaps';
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  } else if (packageJson.scripts.build.includes('remix build')) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    packageJson.scripts.build = packageJson.scripts.build.replace(
+      'remix build',
+      'remix build --sourcemap && sentry-upload-sourcemaps',
+    );
+  }
+
+  await fs.promises.writeFile(
+    packageJsonPath,
+    JSON.stringify(packageJson, null, 2),
+  );
+
+  clack.log.success(
+    `Successfully updated ${chalk.cyan('build')} script in ${chalk.cyan(
+      'package.json',
+    )} to generate and upload sourcemaps.`,
+  );
+  /* eslint-enable @typescript-eslint/no-unsafe-member-access */
+}
+
+export async function initializeSentryOnEntryClient(
+  dsn: string,
+  isTS: boolean,
+): Promise<void> {
+  const clientEntryFilename = `entry.client.${isTS ? 'tsx' : 'jsx'}`;
+
+  const originalEntryClient = path.join(
+    process.cwd(),
+    'app',
+    clientEntryFilename,
+  );
+
+  const originalEntryClientMod = await loadFile(originalEntryClient);
+
+  if (hasSentryContent(originalEntryClient, originalEntryClientMod.$code)) {
+    return;
+  }
+
+  originalEntryClientMod.imports.$add({
+    from: '@sentry/remix',
+    imported: '*',
+    local: 'Sentry',
+  });
+
+  originalEntryClientMod.imports.$add({
+    from: 'react',
+    imported: 'useEffect',
+    local: 'useEffect',
+  });
+
+  originalEntryClientMod.imports.$add({
+    from: '@remix-run/react',
+    imported: 'useLocation',
+    local: 'useLocation',
+  });
+
+  originalEntryClientMod.imports.$add({
+    from: '@remix-run/react',
+    imported: 'useMatches',
+    local: 'useMatches',
+  });
+
+  insertClientInitCall(dsn, originalEntryClientMod);
+
+  await writeFile(
+    originalEntryClientMod.$ast,
+    path.join(process.cwd(), 'app', clientEntryFilename),
+  );
+
+  clack.log.success(
+    `Successfully initialized Sentry on client entry point ${chalk.cyan(
+      clientEntryFilename,
+    )}`,
+  );
+}
+
+export async function initializeSentryOnEntryServer(
+  dsn: string,
+  isV2: boolean,
+  isTS: boolean,
+): Promise<void> {
+  const serverEntryFilename = `entry.server.${isTS ? 'tsx' : 'jsx'}`;
+
+  const originalEntryServer = path.join(
+    process.cwd(),
+    'app',
+    serverEntryFilename,
+  );
+
+  const originalEntryServerMod = await loadFile(originalEntryServer);
+
+  if (hasSentryContent(originalEntryServer, originalEntryServerMod.$code)) {
+    return;
+  }
+
+  originalEntryServerMod.imports.$add({
+    from: '@sentry/remix',
+    imported: '*',
+    local: 'Sentry',
+  });
+
+  insertServerInitCall(dsn, originalEntryServerMod);
+
+  if (isV2) {
+    const handleErrorInstrumented = instrumentHandleError(
+      originalEntryServerMod,
+      serverEntryFilename,
+    );
+
+    if (handleErrorInstrumented) {
+      clack.log.success(
+        `Instrumented ${chalk.cyan('handleError')} in ${chalk.cyan(
+          `${serverEntryFilename}`,
+        )}`,
+      );
+    }
+  }
+
+  await writeFile(
+    originalEntryServerMod.$ast,
+    path.join(process.cwd(), 'app', serverEntryFilename),
+  );
+
+  clack.log.success(
+    `Successfully initialized Sentry on server entry point ${chalk.cyan(
+      serverEntryFilename,
+    )}.`,
+  );
+}

package/src/remix/templates.ts

@@ -0,0 +1,15 @@
+export const ERROR_BOUNDARY_TEMPLATE_V2 = `const ErrorBoundary = () => {
+  const error = useRouteError();
+  captureRemixErrorBoundaryError(error);
+  return <div>Something went wrong</div>;
+};
+`;
+
+export const HANDLE_ERROR_TEMPLATE_V2 = `function handleError(error) {
+  if (error instanceof Error) {
+    Sentry.captureRemixErrorBoundaryError(error);
+  } else {
+    Sentry.captureException(error);
+  }
+}
+`;

package/src/remix/utils.ts

@@ -0,0 +1,41 @@
+import type { Program } from '@babel/types';
+
+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';
+
+// Copied from sveltekit wizard
+export function hasSentryContent(
+  fileName: string,
+  fileContent: string,
+): boolean {
+  const includesContent = fileContent.includes('@sentry/remix');
+
+  if (includesContent) {
+    clack.log.warn(
+      `File ${chalk.cyan(path.basename(fileName))} already contains Sentry code.
+Skipping adding Sentry functionality to ${chalk.cyan(
+        path.basename(fileName),
+      )}.`,
+    );
+  }
+
+  return includesContent;
+}
+
+/**
+ * We want to insert the init call on top of the file but after all import statements
+ */
+export function getInitCallInsertionIndex(
+  originalHooksModAST: Program,
+): number {
+  for (let x = originalHooksModAST.body.length - 1; x >= 0; x--) {
+    if (originalHooksModAST.body[x].type === 'ImportDeclaration') {
+      return x + 1;
+    }
+  }
+
+  return 0;
+}

package/src/sourcemaps/sourcemaps-wizard.ts

@@ -29,6 +29,7 @@ import { checkIfMoreSuitableWizardExistsAndAskForRedirect } from './utils/other-
 import { configureAngularSourcemapGenerationFlow } from './tools/angular';
 import { detectUsedTool, SupportedTools } from './utils/detect-tool';
 import { configureNextJsSourceMapsUpload } from './tools/nextjs';
+import { configureRemixSourceMapsUpload } from './tools/remix';
 
 export async function runSourcemapsWizard(
   options: WizardOptions,
@@ -133,6 +134,11 @@ async function askForUsedBundlerTool(): Promise<SupportedTools> {
           value: 'nextjs',
           hint: 'Select this option if you want to set up source maps in a NextJS project.',
         },
+        {
+          label: 'Remix',
+          value: 'remix',
+          hint: 'Select this option if you want to set up source maps in a Remix project.',
+        },
         {
           label: 'Webpack',
           value: 'webpack',
@@ -204,6 +210,9 @@ async function startToolSetupFlow(
     case 'nextjs':
       await configureNextJsSourceMapsUpload(options, wizardOptions);
       break;
+    case 'remix':
+      await configureRemixSourceMapsUpload(options, wizardOptions);
+      break;
     default:
       await configureSentryCLI(options);
       break;