@sentry/wizard 3.16.4 → 3.17.0

package/src/react-native/metro.ts

@@ -0,0 +1,409 @@
+// @ts-ignore - clack is ESM and TS complains about that. It works though
+import * as clack from '@clack/prompts';
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import { ProxifiedModule, parseModule, writeFile } from 'magicast';
+import * as fs from 'fs';
+import * as Sentry from '@sentry/node';
+
+import {
+  getLastRequireIndex,
+  hasSentryContent,
+  removeRequire,
+} from '../utils/ast-utils';
+import {
+  abortIfCancelled,
+  makeCodeSnippet,
+  showCopyPasteInstructions,
+} from '../utils/clack-utils';
+
+import * as recast from 'recast';
+import x = recast.types;
+import t = x.namedTypes;
+import chalk from 'chalk';
+
+const b = recast.types.builders;
+
+const metroConfigPath = 'metro.config.js';
+
+export async function patchMetroConfig() {
+  const mod = await parseMetroConfig();
+
+  const showInstructions = () =>
+    showCopyPasteInstructions(metroConfigPath, getMetroConfigSnippet(true));
+
+  if (hasSentryContent(mod.$ast as t.Program)) {
+    const shouldContinue = await confirmPathMetroConfig();
+    if (!shouldContinue) {
+      return await showInstructions();
+    }
+  }
+
+  const configObj = getMetroConfigObject(mod.$ast as t.Program);
+  if (!configObj) {
+    clack.log.warn(
+      'Could not find Metro config object, please follow the manual steps.',
+    );
+    return showInstructions();
+  }
+
+  const addedSentrySerializer = addSentrySerializerToMetroConfig(configObj);
+  if (!addedSentrySerializer) {
+    clack.log.warn(
+      'Could not add Sentry serializer to Metro config, please follow the manual steps.',
+    );
+    return await showInstructions();
+  }
+
+  const addedSentrySerializerImport = addSentrySerializerRequireToMetroConfig(
+    mod.$ast as t.Program,
+  );
+  if (!addedSentrySerializerImport) {
+    clack.log.warn(
+      'Could not add Sentry serializer import to Metro config, please follow the manual steps.',
+    );
+    return await showInstructions();
+  }
+
+  clack.log.success(
+    `Added Sentry Metro plugin to ${chalk.cyan(metroConfigPath)}.`,
+  );
+
+  const saved = await writeMetroConfig(mod);
+  if (saved) {
+    clack.log.success(
+      chalk.green(`${chalk.cyan(metroConfigPath)} changes saved.`),
+    );
+  } else {
+    clack.log.warn(
+      `Could not save changes to ${chalk.cyan(
+        metroConfigPath,
+      )}, please follow the manual steps.`,
+    );
+    return await showInstructions();
+  }
+}
+
+export async function unPatchMetroConfig() {
+  const mod = await parseMetroConfig();
+
+  const removedAtLeastOneRequire = removeSentryRequire(mod.$ast as t.Program);
+  const removedSerializerConfig = removeSentrySerializerFromMetroConfig(
+    mod.$ast as t.Program,
+  );
+
+  if (removedAtLeastOneRequire || removedSerializerConfig) {
+    const saved = await writeMetroConfig(mod);
+    if (saved) {
+      clack.log.success(
+        `Removed Sentry Metro plugin from ${chalk.cyan(metroConfigPath)}.`,
+      );
+    }
+  } else {
+    clack.log.warn(
+      `No Sentry Metro plugin found in ${chalk.cyan(metroConfigPath)}.`,
+    );
+  }
+}
+
+export function removeSentrySerializerFromMetroConfig(
+  program: t.Program,
+): boolean {
+  const configObject = getMetroConfigObject(program);
+  if (!configObject) {
+    return false;
+  }
+
+  const serializerProp = getSerializerProp(configObject);
+  if ('invalid' === serializerProp || 'undefined' === serializerProp) {
+    return false;
+  }
+
+  const customSerializerProp = getCustomSerializerProp(serializerProp);
+  if (
+    'invalid' === customSerializerProp ||
+    'undefined' === customSerializerProp
+  ) {
+    return false;
+  }
+
+  if (
+    serializerProp.value.type === 'ObjectExpression' &&
+    customSerializerProp.value.type === 'CallExpression' &&
+    customSerializerProp.value.callee.type === 'Identifier' &&
+    customSerializerProp.value.callee.name === 'createSentryMetroSerializer'
+  ) {
+    if (customSerializerProp.value.arguments.length === 0) {
+      // FROM serializer: { customSerializer: createSentryMetroSerializer() }
+      // TO serializer: {}
+      let removed = false;
+      serializerProp.value.properties = serializerProp.value.properties.filter(
+        (p) => {
+          if (
+            p.type === 'ObjectProperty' &&
+            p.key.type === 'Identifier' &&
+            p.key.name === 'customSerializer'
+          ) {
+            removed = true;
+            return false;
+          }
+          return true;
+        },
+      );
+
+      if (removed) {
+        return true;
+      }
+    } else {
+      if (customSerializerProp.value.arguments[0].type !== 'SpreadElement') {
+        // FROM serializer: { customSerializer: createSentryMetroSerializer(wrapperSerializer) }
+        // TO serializer: { customSerializer: wrapperSerializer }
+        customSerializerProp.value = customSerializerProp.value.arguments[0];
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+export function removeSentryRequire(program: t.Program): boolean {
+  return removeRequire(program, '@sentry');
+}
+
+async function parseMetroConfig(): Promise<ProxifiedModule> {
+  const metroConfigContent = (
+    await fs.promises.readFile(metroConfigPath)
+  ).toString();
+
+  return parseModule(metroConfigContent);
+}
+
+async function writeMetroConfig(mod: ProxifiedModule): Promise<boolean> {
+  try {
+    await writeFile(mod.$ast, metroConfigPath);
+  } catch (e) {
+    clack.log.error(
+      `Failed to write to ${chalk.cyan(metroConfigPath)}: ${JSON.stringify(e)}`,
+    );
+    return false;
+  }
+  return true;
+}
+
+export function addSentrySerializerToMetroConfig(
+  configObj: t.ObjectExpression,
+): boolean {
+  const serializerProp = getSerializerProp(configObj);
+  if ('invalid' === serializerProp) {
+    return false;
+  }
+
+  // case 1: serializer property doesn't exist yet, so we can just add it
+  if ('undefined' === serializerProp) {
+    configObj.properties.push(
+      b.objectProperty(
+        b.identifier('serializer'),
+        b.objectExpression([
+          b.objectProperty(
+            b.identifier('customSerializer'),
+            b.callExpression(b.identifier('createSentryMetroSerializer'), []),
+          ),
+        ]),
+      ),
+    );
+    return true;
+  }
+
+  const customSerializerProp = getCustomSerializerProp(serializerProp);
+  // case 2: serializer.customSerializer property doesn't exist yet, so we just add it
+  if (
+    'undefined' === customSerializerProp &&
+    serializerProp.value.type === 'ObjectExpression'
+  ) {
+    serializerProp.value.properties.push(
+      b.objectProperty(
+        b.identifier('customSerializer'),
+        b.callExpression(b.identifier('createSentryMetroSerializer'), []),
+      ),
+    );
+    return true;
+  }
+
+  return false;
+}
+
+function getCustomSerializerProp(
+  prop: t.ObjectProperty,
+): t.ObjectProperty | 'undefined' | 'invalid' {
+  const customSerializerProp =
+    prop.value.type === 'ObjectExpression' &&
+    prop.value.properties.find(
+      (p: t.ObjectProperty) =>
+        p.key.type === 'Identifier' && p.key.name === 'customSerializer',
+    );
+
+  if (!customSerializerProp) {
+    return 'undefined';
+  }
+
+  if (customSerializerProp.type === 'ObjectProperty') {
+    return customSerializerProp;
+  }
+
+  return 'invalid';
+}
+
+function getSerializerProp(
+  obj: t.ObjectExpression,
+): t.ObjectProperty | 'undefined' | 'invalid' {
+  const serializerProp = obj.properties.find(
+    (p: t.ObjectProperty) =>
+      p.key.type === 'Identifier' && p.key.name === 'serializer',
+  );
+
+  if (!serializerProp) {
+    return 'undefined';
+  }
+
+  if (serializerProp.type === 'ObjectProperty') {
+    return serializerProp;
+  }
+
+  return 'invalid';
+}
+
+export function addSentrySerializerRequireToMetroConfig(
+  program: t.Program,
+): boolean {
+  const lastRequireIndex = getLastRequireIndex(program);
+  const sentrySerializerRequire = createSentrySerializerRequire();
+  const sentryImportIndex = lastRequireIndex + 1;
+  if (sentryImportIndex < program.body.length) {
+    // insert after last require
+    program.body.splice(lastRequireIndex + 1, 0, sentrySerializerRequire);
+  } else {
+    // insert at the end
+    program.body.push(sentrySerializerRequire);
+  }
+  return true;
+}
+
+/**
+ * Creates const {createSentryMetroSerializer} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');
+ */
+function createSentrySerializerRequire() {
+  return b.variableDeclaration('const', [
+    b.variableDeclarator(
+      b.objectPattern([
+        b.objectProperty.from({
+          key: b.identifier('createSentryMetroSerializer'),
+          value: b.identifier('createSentryMetroSerializer'),
+          shorthand: true,
+        }),
+      ]),
+      b.callExpression(b.identifier('require'), [
+        b.literal('@sentry/react-native/dist/js/tools/sentryMetroSerializer'),
+      ]),
+    ),
+  ]);
+}
+
+async function confirmPathMetroConfig() {
+  const shouldContinue = await abortIfCancelled(
+    clack.select({
+      message: `Metro Config already contains Sentry-related code. Should the wizard modify it anyway?`,
+      options: [
+        {
+          label: 'Yes, add the Sentry Metro plugin',
+          value: true,
+        },
+        {
+          label: 'No, show me instructions to manually add the plugin',
+          value: false,
+        },
+      ],
+      initialValue: true,
+    }),
+  );
+
+  if (!shouldContinue) {
+    Sentry.setTag('ast-mod-fail-reason', 'has-sentry-content');
+  }
+
+  return shouldContinue;
+}
+
+/**
+ * Returns value from `module.exports = value` or `const config = value`
+ */
+export function getMetroConfigObject(
+  program: t.Program,
+): t.ObjectExpression | undefined {
+  // check config variable
+  const configVariable = program.body.find((s) => {
+    if (
+      s.type === 'VariableDeclaration' &&
+      s.declarations.length === 1 &&
+      s.declarations[0].type === 'VariableDeclarator' &&
+      s.declarations[0].id.type === 'Identifier' &&
+      s.declarations[0].id.name === 'config'
+    ) {
+      return true;
+    }
+    return false;
+  }) as t.VariableDeclaration | undefined;
+
+  if (
+    configVariable?.declarations[0].type === 'VariableDeclarator' &&
+    configVariable?.declarations[0].init?.type === 'ObjectExpression'
+  ) {
+    Sentry.setTag('metro-config', 'config-variable');
+    return configVariable.declarations[0].init;
+  }
+
+  // check module.exports
+  const moduleExports = program.body.find((s) => {
+    if (
+      s.type === 'ExpressionStatement' &&
+      s.expression.type === 'AssignmentExpression' &&
+      s.expression.left.type === 'MemberExpression' &&
+      s.expression.left.object.type === 'Identifier' &&
+      s.expression.left.object.name === 'module' &&
+      s.expression.left.property.type === 'Identifier' &&
+      s.expression.left.property.name === 'exports'
+    ) {
+      return true;
+    }
+    return false;
+  }) as t.ExpressionStatement | undefined;
+
+  if (
+    (moduleExports?.expression as t.AssignmentExpression).right.type ===
+    'ObjectExpression'
+  ) {
+    Sentry.setTag('metro-config', 'module-exports');
+    return (moduleExports?.expression as t.AssignmentExpression)
+      .right as t.ObjectExpression;
+  }
+
+  Sentry.setTag('metro-config', 'not-found');
+  return undefined;
+}
+
+function getMetroConfigSnippet(colors: boolean) {
+  return makeCodeSnippet(colors, (unchanged, plus, _) =>
+    unchanged(`const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');";
+${plus(
+  "const {createSentryMetroSerializer} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');",
+)}
+
+const config = {
+  ${plus(`serializer: {
+    customSerializer: createSentryMetroSerializer(),
+  },`)}
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+`),
+  );
+}

package/src/react-native/react-native-wizard.ts

@@ -7,6 +7,7 @@ import * as path from 'path';
 import * as process from 'process';
 import {
   CliSetupConfigContent,
+  abortIfCancelled,
   addSentryCliConfig,
   confirmContinueIfNoOrDirtyGitRepo,
   confirmContinueIfPackageVersionNotSupported,
@@ -26,8 +27,11 @@ import {
   findBundlePhase,
   patchBundlePhase,
   findDebugFilesUploadPhase,
-  addDebugFilesUploadPhase,
+  addDebugFilesUploadPhaseWithCli,
   writeXcodeProject,
+  addSentryWithCliToBundleShellScript,
+  addSentryWithBundledScriptsToBundleShellScript,
+  addDebugFilesUploadPhaseWithBundledScripts,
 } from './xcode';
 import {
   doesAppBuildGradleIncludeRNSentryGradlePlugin,
@@ -37,7 +41,6 @@ import {
 import { runReactNativeUninstall } from './uninstall';
 import { APP_BUILD_GRADLE, XCODE_PROJECT, getFirstMatchedPath } from './glob';
 import { ReactNativeWizardOptions } from './options';
-import { SentryProjectData } from '../utils/types';
 import {
   addSentryInitWithSdkImport,
   doesJsCodeIncludeSdkSentryImport,
@@ -45,6 +48,9 @@ import {
 } from './javascript';
 import { traceStep, withTelemetry } from '../telemetry';
 import * as Sentry from '@sentry/node';
+import { fulfillsVersionRange } from '../utils/semver';
+import { getIssueStreamUrl } from '../utils/url';
+import { patchMetroConfig } from './metro';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const xcode = require('xcode');
@@ -56,6 +62,13 @@ export const RN_HUMAN_NAME = 'React Native';
 
 export const SUPPORTED_RN_RANGE = '>=0.69.0';
 
+// The following SDK version ship with bundled Xcode scripts
+// which simplifies the Xcode Build Phases setup.
+export const SDK_XCODE_SCRIPTS_SUPPORTED_SDK_RANGE = '>=5.11.0';
+
+// The following SDK version ship with Sentry Metro plugin
+export const SDK_SENTRY_METRO_PLUGIN_SUPPORTED_SDK_RANGE = '>=5.11.0';
+
 export type RNCliSetupConfigContent = Pick<
   Required<CliSetupConfigContent>,
   'authToken' | 'org' | 'project' | 'url'
@@ -107,6 +120,7 @@ export async function runReactNativeWizardWithTelemetry(
     await getOrAskForProjectData(options, 'react-native');
   const orgSlug = selectedProject.organization.slug;
   const projectSlug = selectedProject.slug;
+  const projectId = selectedProject.id;
   const cliConfig: RNCliSetupConfigContent = {
     authToken,
     org: orgSlug,
@@ -118,14 +132,24 @@ export async function runReactNativeWizardWithTelemetry(
     packageName: RN_SDK_PACKAGE,
     alreadyInstalled: hasPackageInstalled(RN_SDK_PACKAGE, packageJson),
   });
+  const sdkVersion = getPackageVersion(
+    RN_SDK_PACKAGE,
+    await getPackageDotJson(),
+  );
 
   await traceStep('patch-js', () =>
     addSentryInit({ dsn: selectedProject.keys[0].dsn.public }),
   );
 
+  await traceStep('patch-metro-config', () =>
+    addSentryToMetroConfig({ sdkVersion }),
+  );
+
   if (fs.existsSync('ios')) {
     Sentry.setTag('patch-ios', true);
-    await traceStep('patch-xcode-files', () => patchXcodeFiles(cliConfig));
+    await traceStep('patch-xcode-files', () =>
+      patchXcodeFiles(cliConfig, { sdkVersion }),
+    );
   }
 
   if (fs.existsSync('android')) {
@@ -134,7 +158,9 @@ export async function runReactNativeWizardWithTelemetry(
   }
 
   const confirmedFirstException = await confirmFirstSentryException(
-    selectedProject,
+    sentryUrl,
+    orgSlug,
+    projectId,
   );
   Sentry.setTag('user-confirmed-first-error', confirmedFirstException);
 
@@ -155,6 +181,25 @@ export async function runReactNativeWizardWithTelemetry(
   }
 }
 
+async function addSentryToMetroConfig({
+  sdkVersion,
+}: {
+  sdkVersion: string | undefined;
+}) {
+  if (
+    !sdkVersion ||
+    !fulfillsVersionRange({
+      version: sdkVersion,
+      acceptableVersions: SDK_SENTRY_METRO_PLUGIN_SUPPORTED_SDK_RANGE,
+      canBeLatest: true,
+    })
+  ) {
+    return;
+  }
+
+  await patchMetroConfig();
+}
+
 async function addSentryInit({ dsn }: { dsn: string }) {
   const prefixGlob = '{.,./src}';
   const suffixGlob = '@(j|t|cj|mj)s?(x)';
@@ -207,8 +252,12 @@ async function addSentryInit({ dsn }: { dsn: string }) {
   );
 }
 
-async function confirmFirstSentryException(project: SentryProjectData) {
-  const projectsIssuesUrl = `${project.organization.links.organizationUrl}/issues/?project=${project.id}`;
+async function confirmFirstSentryException(
+  url: string,
+  orgSlug: string,
+  projectId: string,
+) {
+  const issuesStreamUrl = getIssueStreamUrl({ url, orgSlug, projectId });
 
   clack.log
     .step(`To make sure everything is set up correctly, put the following code snippet into your application.
@@ -216,7 +265,7 @@ The snippet will create a button that, when tapped, sends a test event to Sentry
 
 After that check your project issues:
 
-${chalk.cyan(projectsIssuesUrl)}`);
+${chalk.cyan(issuesStreamUrl)}`);
 
   // We want the code snippet to be easily copy-pasteable, without any clack artifacts
   // eslint-disable-next-line no-console
@@ -233,7 +282,12 @@ ${chalk.cyan(projectsIssuesUrl)}`);
   return firstErrorConfirmed;
 }
 
-async function patchXcodeFiles(config: RNCliSetupConfigContent) {
+async function patchXcodeFiles(
+  config: RNCliSetupConfigContent,
+  context: {
+    sdkVersion: string | undefined;
+  },
+) {
   await addSentryCliConfig(config, {
     ...propertiesCliSetupConfig,
     name: 'source maps and iOS debug files',
@@ -241,9 +295,8 @@ async function patchXcodeFiles(config: RNCliSetupConfigContent) {
     gitignore: false,
   });
 
-  if (platform() === 'darwin') {
+  if (platform() === 'darwin' && (await confirmPodInstall())) {
     await traceStep('pod-install', () => podInstall('ios'));
-    Sentry.setTag('pods-installed', true);
   }
 
   const xcodeProjectPath = traceStep('find-xcode-project', () =>
@@ -281,7 +334,21 @@ async function patchXcodeFiles(config: RNCliSetupConfigContent) {
       'xcode-bundle-phase-status',
       bundlePhase ? 'found' : 'not-found',
     );
-    patchBundlePhase(bundlePhase);
+    if (
+      context.sdkVersion &&
+      fulfillsVersionRange({
+        version: context.sdkVersion,
+        acceptableVersions: SDK_XCODE_SCRIPTS_SUPPORTED_SDK_RANGE,
+        canBeLatest: true,
+      })
+    ) {
+      patchBundlePhase(
+        bundlePhase,
+        addSentryWithBundledScriptsToBundleShellScript,
+      );
+    } else {
+      patchBundlePhase(bundlePhase, addSentryWithCliToBundleShellScript);
+    }
     Sentry.setTag('xcode-bundle-phase-status', 'patched');
   });
 
@@ -292,7 +359,22 @@ async function patchXcodeFiles(config: RNCliSetupConfigContent) {
       'xcode-debug-files-upload-phase-status',
       debugFilesUploadPhaseExists ? 'already-exists' : undefined,
     );
-    addDebugFilesUploadPhase(xcodeProject, { debugFilesUploadPhaseExists });
+    if (
+      context.sdkVersion &&
+      fulfillsVersionRange({
+        version: context.sdkVersion,
+        acceptableVersions: SDK_XCODE_SCRIPTS_SUPPORTED_SDK_RANGE,
+        canBeLatest: true,
+      })
+    ) {
+      addDebugFilesUploadPhaseWithBundledScripts(xcodeProject, {
+        debugFilesUploadPhaseExists,
+      });
+    } else {
+      addDebugFilesUploadPhaseWithCli(xcodeProject, {
+        debugFilesUploadPhaseExists,
+      });
+    }
     Sentry.setTag('xcode-debug-files-upload-phase-status', 'added');
   });
 
@@ -367,3 +449,24 @@ async function patchAndroidFiles(config: RNCliSetupConfigContent) {
     chalk.green(`Android ${chalk.cyan('app/build.gradle')} saved.`),
   );
 }
+
+async function confirmPodInstall(): Promise<boolean> {
+  return traceStep('confirm-pod-install', async () => {
+    const continueWithPodInstall = await abortIfCancelled(
+      clack.select({
+        message: 'Do you want to run `pod install` now?',
+        options: [
+          {
+            value: true,
+            label: 'Yes',
+            hint: 'Recommended for smaller projects, this might take several minutes',
+          },
+          { value: false, label: `No, I'll do it later` },
+        ],
+        initialValue: true,
+      }),
+    );
+    Sentry.setTag('continue-with-pod-install', continueWithPodInstall);
+    return continueWithPodInstall;
+  });
+}

package/src/react-native/uninstall.ts

@@ -21,6 +21,7 @@ import {
   writeAppBuildGradle,
 } from './gradle';
 import { ReactNativeWizardOptions } from './options';
+import { unPatchMetroConfig } from './metro';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const xcode = require('xcode');
@@ -36,6 +37,8 @@ export async function runReactNativeUninstall(
 
   await confirmContinueIfNoOrDirtyGitRepo();
 
+  await unPatchMetroConfig();
+
   unPatchXcodeFiles();
 
   unPatchAndroidFiles();