@sentry/wizard 3.9.1 → 3.10.0

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;

package/src/sourcemaps/tools/remix.ts

@@ -0,0 +1,90 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import * as clack from '@clack/prompts';
+import chalk from 'chalk';
+import { runRemixWizard } from '../../remix/remix-wizard';
+import { traceStep } from '../../telemetry';
+import { abortIfCancelled } from '../../utils/clack-utils';
+import { WizardOptions } from '../../utils/types';
+import { SourceMapUploadToolConfigurationOptions } from './types';
+
+import * as Sentry from '@sentry/node';
+
+export const configureRemixSourceMapsUpload = async (
+  options: SourceMapUploadToolConfigurationOptions,
+  wizardOptions: WizardOptions,
+) => {
+  clack.log
+    .info(`Source Maps upload for Remix is configured automatically by default if you run the Sentry Wizard for Remix.
+But don't worry, we can redirect you to the wizard now!
+In case you already tried the wizard, we can also show you how to configure your ${chalk.cyan(
+    'remix.config.js',
+  )} file manually instead.`);
+
+  const shouldRedirect: boolean = await abortIfCancelled(
+    clack.select({
+      message: 'Do you want to run the Sentry Wizard for Remix now?',
+      options: [
+        {
+          label: 'Yes, run the wizard!',
+          value: true,
+          hint: 'The wizard can also configure your SDK setup',
+        },
+        {
+          label: 'No, show me how to configure it manually',
+          value: false,
+        },
+      ],
+    }),
+  );
+
+  Sentry.setTag('redirect-remix-wizard', shouldRedirect);
+
+  if (shouldRedirect) {
+    await traceStep('run-remix-wizard', () => runRemixWizard(wizardOptions));
+    clack.intro('Sentry Source Maps Upload Configuration Wizard');
+    clack.log.info(
+      "Welcome back to the Source Maps wizard - we're almost done ;)",
+    );
+  } else {
+    clack.log.step(
+      `Build your app with ${chalk.cyan(
+        'remix build --sourcemap',
+      )}, then upload your source maps using ${chalk.cyan(
+        'sentry-upload-sourcemaps',
+      )} cli tool.`,
+    );
+
+    clack.log.step(
+      `You can add ${chalk.cyan(
+        'sentry-upload-sourcemaps',
+      )} to your build script in ${chalk.cyan('package.json')} like this:`,
+    );
+
+    // Intentially logging directly to console here so that the code can be copied/pasted directly
+    // eslint-disable-next-line no-console
+    console.log(codeSnippet);
+
+    clack.log.step(`or run it manually after building your app.
+
+To see all available options for ${chalk.cyan(
+      'sentry-upload-sourcemaps',
+    )}, run ${chalk.cyan('sentry-upload-sourcemaps --help')}
+`);
+
+    await abortIfCancelled(
+      clack.select({
+        message: 'Did you finish configuring your build and prod scripts?',
+        options: [{ label: 'Yes, continue!', value: true }],
+        initialValue: true,
+      }),
+    );
+  }
+};
+
+const codeSnippet = chalk.gray(`
+"scripts": {
+  ${chalk.greenBright(
+    '"build": "remix build --sourcemap && sentry-upload-sourcemaps"',
+  )};
+}
+`);

package/src/sourcemaps/tools/sentry-cli.ts

@@ -211,8 +211,9 @@ async function addSentryCommandToBuildCommand(
   // Often, 'build' is the prod build command, so we favour it.
   // If it's not there, commands that include 'build' might be the prod build command.
   let buildCommand =
-    packageDotJson.scripts.build ||
-    allNpmScripts.find((s) => s.toLocaleLowerCase().includes('build'));
+    typeof packageDotJson.scripts.build === 'string'
+      ? 'build'
+      : allNpmScripts.find((s) => s.toLocaleLowerCase().includes('build'));
 
   const isProdBuildCommand =
     !!buildCommand &&
@@ -252,7 +253,8 @@ Please add it manually to your prod build command.`,
 
   packageDotJson.scripts[
     buildCommand
-  ] = `${buildCommand} && ${pacMan} run ${SENTRY_NPM_SCRIPT_NAME}`;
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+  ] = `${packageDotJson.scripts[buildCommand]} && ${pacMan} run ${SENTRY_NPM_SCRIPT_NAME}`;
 
   await fs.promises.writeFile(
     path.join(process.cwd(), 'package.json'),

package/src/sourcemaps/utils/detect-tool.ts

@@ -10,7 +10,8 @@ export type SupportedTools =
   | 'sentry-cli'
   | 'create-react-app'
   | 'angular'
-  | 'nextjs';
+  | 'nextjs'
+  | 'remix';
 
 // A map of package names pointing to the tool slug.
 // The order is important, because we want to detect the most specific tool first.
@@ -25,6 +26,7 @@ export const TOOL_PACKAGE_MAP: Record<string, SupportedTools> = {
   esbuild: 'esbuild',
   rollup: 'rollup',
   typescript: 'tsc',
+  remix: 'remix',
 };
 
 export async function detectUsedTool(): Promise<SupportedTools> {

package/src/utils/clack-utils.ts

@@ -66,6 +66,7 @@ export function printWelcome(options: {
   wizardName: string;
   promoCode?: string;
   message?: string;
+  telemetryEnabled?: boolean;
 }): void {
   let wizardPackage: { version?: string } = {};
 
@@ -96,6 +97,10 @@ export function printWelcome(options: {
     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\`.`;
+  }
+
   clack.note(welcomeText);
 }
 
@@ -132,7 +137,11 @@ export async function askToInstallSentryCLI(): Promise<boolean> {
 export async function askForWizardLogin(options: {
   url: string;
   promoCode?: string;
-  platform?: 'javascript-nextjs' | 'javascript-sveltekit' | 'apple-ios';
+  platform?:
+    | 'javascript-nextjs'
+    | 'javascript-remix'
+    | 'javascript-sveltekit'
+    | 'apple-ios';
 }): Promise<WizardProjectData> {
   Sentry.setTag('has-promo-code', !!options.promoCode);
 
@@ -408,7 +417,48 @@ export async function askForSelfHosted(urlFromArgs?: string): Promise<{
   return { url: validUrl, selfHosted: true };
 }
 
-export async function addSentryCliRc(authToken: string): Promise<void> {
+async function addOrgAndProjectToSentryCliRc(
+  org: string,
+  project: string,
+): Promise<void> {
+  const clircContents = fs.readFileSync(
+    path.join(process.cwd(), SENTRY_CLI_RC_FILE),
+    'utf8',
+  );
+
+  const likelyAlreadyHasOrgAndProject = !!(
+    clircContents.includes('[defaults]') &&
+    clircContents.match(/org=./g) &&
+    clircContents.match(/project=./g)
+  );
+
+  if (likelyAlreadyHasOrgAndProject) {
+    clack.log.warn(
+      `${chalk.bold(
+        SENTRY_CLI_RC_FILE,
+      )} already has org and project. Will not add them.`,
+    );
+  } else {
+    try {
+      await fs.promises.appendFile(
+        path.join(process.cwd(), SENTRY_CLI_RC_FILE),
+        `\n[defaults]\norg=${org}\nproject=${project}\n`,
+      );
+    } catch (e) {
+      clack.log.warn(
+        `${chalk.bold(
+          SENTRY_CLI_RC_FILE,
+        )} could not be updated with org and project.`,
+      );
+    }
+  }
+}
+
+export async function addSentryCliRc(
+  authToken: string,
+  orgSlug?: string,
+  projectSlug?: string,
+): Promise<void> {
   const clircExists = fs.existsSync(
     path.join(process.cwd(), SENTRY_CLI_RC_FILE),
   );
@@ -469,6 +519,10 @@ export async function addSentryCliRc(authToken: string): Promise<void> {
     }
   }
 
+  if (orgSlug && projectSlug) {
+    await addOrgAndProjectToSentryCliRc(orgSlug, projectSlug);
+  }
+
   await addAuthTokenFileToGitIgnore(SENTRY_CLI_RC_FILE);
 }