@sentry/wizard 3.9.2 → 3.11.0

package/src/remix/remix-wizard.ts

@@ -0,0 +1,132 @@
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+import chalk from 'chalk';
+
+import {
+  addSentryCliConfig,
+  confirmContinueEvenThoughNoGitRepo,
+  ensurePackageIsInstalled,
+  getOrAskForProjectData,
+  getPackageDotJson,
+  installPackage,
+  isUsingTypeScript,
+  printWelcome,
+  sourceMapsCliSetupConfig,
+} 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 { selectedProject, authToken } = await getOrAskForProjectData(
+    options,
+    'javascript-remix',
+  );
+
+  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 addSentryCliConfig(
+    authToken,
+    sourceMapsCliSetupConfig,
+    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

@@ -4,9 +4,9 @@ import chalk from 'chalk';
 import * as Sentry from '@sentry/node';
 
 import {
+  abort,
   abortIfCancelled,
   confirmContinueEvenThoughNoGitRepo,
-  detectPackageManager,
   SENTRY_DOT_ENV_FILE,
   printWelcome,
   SENTRY_CLI_RC_FILE,
@@ -29,6 +29,8 @@ 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';
+import { detectPackageManger } from '../utils/package-manager';
 
 export async function runSourcemapsWizard(
   options: WizardOptions,
@@ -88,6 +90,14 @@ You can turn this off by running the wizard with the '--disable-telemetry' flag.
 
   Sentry.setTag('selected-tool', selectedTool);
 
+  if (selectedTool === 'no-tool') {
+    clack.log.info(
+      "No Problem! But in this case, there's nothing to configure :)",
+    );
+    await abort('Exiting, have a great day!', 0);
+    return;
+  }
+
   await traceStep('tool-setup', () =>
     startToolSetupFlow(
       selectedTool,
@@ -114,7 +124,7 @@ You can turn this off by running the wizard with the '--disable-telemetry' flag.
 }
 
 async function askForUsedBundlerTool(): Promise<SupportedTools> {
-  const selectedTool: SupportedTools | symbol = await abortIfCancelled(
+  const selectedTool = await abortIfCancelled(
     clack.select({
       message: 'Which framework, bundler or build tool are you using?',
       options: [
@@ -133,6 +143,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',
@@ -159,10 +174,15 @@ async function askForUsedBundlerTool(): Promise<SupportedTools> {
           hint: 'Configure source maps when using tsc as build tool',
         },
         {
-          label: 'None of the above',
+          label: 'I use another tool',
           value: 'sentry-cli',
           hint: 'This will configure source maps upload for you using sentry-cli',
         },
+        {
+          label: "I don't minify, transpile or bundle my code",
+          value: 'no-tool',
+          hint: 'This will exit the wizard',
+        },
       ],
       initialValue: await detectUsedTool(),
     }),
@@ -204,6 +224,9 @@ async function startToolSetupFlow(
     case 'nextjs':
       await configureNextJsSourceMapsUpload(options, wizardOptions);
       break;
+    case 'remix':
+      await configureRemixSourceMapsUpload(options, wizardOptions);
+      break;
     default:
       await configureSentryCLI(options);
       break;
@@ -308,8 +331,8 @@ SENTRY_AUTH_TOKEN=${authToken}
 }
 
 function printOutro(url: string, orgSlug: string, projectId: string) {
-  const pacMan = detectPackageManager() || 'npm';
-  const buildCommand = `'${pacMan}${pacMan === 'npm' ? ' run' : ''} build'`;
+  const packageManager = detectPackageManger();
+  const buildCommand = packageManager?.buildCommand ?? 'npm run build';
 
   const urlObject = new URL(url);
   urlObject.host = `${orgSlug}.${urlObject.host}`;

package/src/sourcemaps/tools/nextjs.ts

@@ -3,7 +3,7 @@ import * as clack from '@clack/prompts';
 import chalk from 'chalk';
 import { runNextjsWizard } from '../../nextjs/nextjs-wizard';
 import { traceStep } from '../../telemetry';
-import { abortIfCancelled, addSentryCliRc } from '../../utils/clack-utils';
+import { abortIfCancelled, addSentryCliConfig } from '../../utils/clack-utils';
 import { WizardOptions } from '../../utils/types';
 
 import { SourceMapUploadToolConfigurationOptions } from './types';
@@ -99,7 +99,7 @@ In case you already tried the wizard, we can also show you how to configure your
     );
 
     await traceStep('nextjs-manual-sentryclirc', () =>
-      addSentryCliRc(options.authToken),
+      addSentryCliConfig(options.authToken),
     );
   }
 

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