@sentry/wizard 3.22.3 → 3.23.0

package/src/react-native/metro.ts

@@ -25,11 +25,100 @@ const b = recast.types.builders;
 
 const metroConfigPath = 'metro.config.js';
 
-export async function patchMetroConfig() {
+export async function patchMetroWithSentryConfig() {
   const mod = await parseMetroConfig();
 
   const showInstructions = () =>
-    showCopyPasteInstructions(metroConfigPath, getMetroConfigSnippet(true));
+    showCopyPasteInstructions(
+      metroConfigPath,
+      getMetroWithSentryConfigSnippet(true),
+    );
+
+  const success = await patchMetroWithSentryConfigInMemory(
+    mod,
+    showInstructions,
+  );
+  if (!success) {
+    return;
+  }
+
+  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 patchMetroWithSentryConfigInMemory(
+  mod: ProxifiedModule,
+  showInstructions: () => Promise<void>,
+): Promise<boolean> {
+  if (hasSentryContent(mod.$ast as t.Program)) {
+    const shouldContinue = await confirmPathMetroConfig();
+    if (!shouldContinue) {
+      await showInstructions();
+      return false;
+    }
+  }
+
+  const configExpression = getModuleExportsAssignmentRight(
+    mod.$ast as t.Program,
+  );
+  if (!configExpression) {
+    clack.log.warn(
+      'Could not find Metro config, please follow the manual steps.',
+    );
+    await showInstructions();
+    return false;
+  }
+
+  const wrappedConfig = wrapWithSentryConfig(configExpression);
+
+  const replacedModuleExportsRight = replaceModuleExportsRight(
+    mod.$ast as t.Program,
+    wrappedConfig,
+  );
+  if (!replacedModuleExportsRight) {
+    clack.log.warn(
+      'Could not automatically wrap the config export, please follow the manual steps.',
+    );
+    await showInstructions();
+    return false;
+  }
+
+  const addedSentryMetroImport = addSentryMetroRequireToMetroConfig(
+    mod.$ast as t.Program,
+  );
+  if (!addedSentryMetroImport) {
+    clack.log.warn(
+      'Could not add `@sentry/react-native/metro` import to Metro config, please follow the manual steps.',
+    );
+    await showInstructions();
+    return false;
+  }
+
+  clack.log.success(
+    `Added Sentry Metro plugin to ${chalk.cyan(metroConfigPath)}.`,
+  );
+  return true;
+}
+
+export async function patchMetroConfigWithSentrySerializer() {
+  const mod = await parseMetroConfig();
+
+  const showInstructions = () =>
+    showCopyPasteInstructions(
+      metroConfigPath,
+      getMetroSentrySerializerSnippet(true),
+    );
 
   if (hasSentryContent(mod.$ast as t.Program)) {
     const shouldContinue = await confirmPathMetroConfig();
@@ -282,12 +371,51 @@ export function addSentrySerializerRequireToMetroConfig(
     // insert after last require
     program.body.splice(lastRequireIndex + 1, 0, sentrySerializerRequire);
   } else {
-    // insert at the end
-    program.body.push(sentrySerializerRequire);
+    // insert at the beginning
+    program.body.unshift(sentrySerializerRequire);
+  }
+  return true;
+}
+
+export function addSentryMetroRequireToMetroConfig(
+  program: t.Program,
+): boolean {
+  const lastRequireIndex = getLastRequireIndex(program);
+  const sentryMetroRequire = createSentryMetroRequire();
+  const sentryImportIndex = lastRequireIndex + 1;
+  if (sentryImportIndex < program.body.length) {
+    // insert after last require
+    program.body.splice(lastRequireIndex + 1, 0, sentryMetroRequire);
+  } else {
+    // insert at the beginning
+    program.body.unshift(sentryMetroRequire);
   }
   return true;
 }
 
+function wrapWithSentryConfig(
+  configObj: t.Identifier | t.CallExpression | t.ObjectExpression,
+): t.CallExpression {
+  return b.callExpression(b.identifier('withSentryConfig'), [configObj]);
+}
+
+function replaceModuleExportsRight(
+  program: t.Program,
+  wrappedConfig: t.CallExpression,
+): boolean {
+  const moduleExports = getModuleExports(program);
+  if (!moduleExports) {
+    return false;
+  }
+
+  if (moduleExports.expression.type === 'AssignmentExpression') {
+    moduleExports.expression.right = wrappedConfig;
+    return true;
+  }
+
+  return false;
+}
+
 /**
  * Creates const {createSentryMetroSerializer} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');
  */
@@ -308,6 +436,26 @@ function createSentrySerializerRequire() {
   ]);
 }
 
+/**
+ * Creates const {withSentryConfig} = require('@sentry/react-native/metro');
+ */
+function createSentryMetroRequire() {
+  return b.variableDeclaration('const', [
+    b.variableDeclarator(
+      b.objectPattern([
+        b.objectProperty.from({
+          key: b.identifier('withSentryConfig'),
+          value: b.identifier('withSentryConfig'),
+          shorthand: true,
+        }),
+      ]),
+      b.callExpression(b.identifier('require'), [
+        b.literal('@sentry/react-native/metro'),
+      ]),
+    ),
+  ]);
+}
+
 async function confirmPathMetroConfig() {
   const shouldContinue = await abortIfCancelled(
     clack.select({
@@ -361,8 +509,48 @@ export function getMetroConfigObject(
     return configVariable.declarations[0].init;
   }
 
+  return getModuleExportsObject(program);
+}
+
+function getModuleExportsObject(
+  program: t.Program,
+): t.ObjectExpression | undefined {
+  // check module.exports
+  const moduleExports = getModuleExportsAssignmentRight(program);
+
+  if (moduleExports?.type === 'ObjectExpression') {
+    return moduleExports;
+  }
+
+  Sentry.setTag('metro-config', 'not-found');
+  return undefined;
+}
+
+export function getModuleExportsAssignmentRight(
+  program: t.Program,
+): t.Identifier | t.CallExpression | t.ObjectExpression | undefined {
   // check module.exports
-  const moduleExports = program.body.find((s) => {
+  const moduleExports = getModuleExports(program);
+
+  if (
+    moduleExports?.expression.type === 'AssignmentExpression' &&
+    (moduleExports.expression.right.type === 'ObjectExpression' ||
+      moduleExports.expression.right.type === 'CallExpression' ||
+      moduleExports.expression.right.type === 'Identifier')
+  ) {
+    Sentry.setTag('metro-config', 'module-exports');
+    return moduleExports?.expression.right;
+  }
+
+  Sentry.setTag('metro-config', 'not-found');
+  return undefined;
+}
+
+function getModuleExports(
+  program: t.Program,
+): t.ExpressionStatement | undefined {
+  // find module.exports
+  return program.body.find((s) => {
     if (
       s.type === 'ExpressionStatement' &&
       s.expression.type === 'AssignmentExpression' &&
@@ -376,21 +564,9 @@ export function getMetroConfigObject(
     }
     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) {
+function getMetroSentrySerializerSnippet(colors: boolean) {
   return makeCodeSnippet(colors, (unchanged, plus, _) =>
     unchanged(`const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');";
 ${plus(
@@ -407,3 +583,17 @@ module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 `),
   );
 }
+
+function getMetroWithSentryConfigSnippet(colors: boolean) {
+  return makeCodeSnippet(colors, (unchanged, plus, _) =>
+    unchanged(`const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');";
+${plus("const {withSentryConfig} = require('@sentry/react-native/metro');")}
+
+const config = {};
+
+module.exports = ${plus(
+      'withSentryConfig(',
+    )}mergeConfig(getDefaultConfig(__dirname), config)${plus(')')};
+`),
+  );
+}

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

@@ -50,7 +50,10 @@ 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';
+import {
+  patchMetroConfigWithSentrySerializer,
+  patchMetroWithSentryConfig,
+} from './metro';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const xcode = require('xcode');
@@ -69,6 +72,10 @@ 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';
 
+// The following SDK version shipped `withSentryConfig`
+export const SDK_SENTRY_METRO_WITH_SENTRY_CONFIG_SUPPORTED_SDK_RANGE =
+  '>=5.17.0';
+
 export type RNCliSetupConfigContent = Pick<
   Required<CliSetupConfigContent>,
   'authToken' | 'org' | 'project' | 'url'
@@ -181,23 +188,33 @@ export async function runReactNativeWizardWithTelemetry(
   }
 }
 
-async function addSentryToMetroConfig({
+function addSentryToMetroConfig({
   sdkVersion,
 }: {
   sdkVersion: string | undefined;
 }) {
   if (
-    !sdkVersion ||
-    !fulfillsVersionRange({
+    sdkVersion &&
+    fulfillsVersionRange({
       version: sdkVersion,
-      acceptableVersions: SDK_SENTRY_METRO_PLUGIN_SUPPORTED_SDK_RANGE,
+      acceptableVersions:
+        SDK_SENTRY_METRO_WITH_SENTRY_CONFIG_SUPPORTED_SDK_RANGE,
       canBeLatest: true,
     })
   ) {
-    return;
+    return patchMetroWithSentryConfig();
   }
 
-  await patchMetroConfig();
+  if (
+    sdkVersion &&
+    fulfillsVersionRange({
+      version: sdkVersion,
+      acceptableVersions: SDK_SENTRY_METRO_PLUGIN_SUPPORTED_SDK_RANGE,
+      canBeLatest: true,
+    })
+  ) {
+    return patchMetroConfigWithSentrySerializer();
+  }
 }
 
 async function addSentryInit({ dsn }: { dsn: string }) {

package/src/utils/ast-utils.ts

@@ -221,10 +221,10 @@ export function printJsonC(ast: t.Program): string {
  * Walks the program body and returns index of the last variable assignment initialized by require statement.
  * Only counts top level require statements.
  *
- * @returns index of the last `const foo = require('bar');` statement
+ * @returns index of the last `const foo = require('bar');` statement or -1 if none was found.
  */
 export function getLastRequireIndex(program: t.Program): number {
-  let lastRequireIdex = 0;
+  let lastRequireIdex = -1;
   program.body.forEach((s, i) => {
     if (
       s.type === 'VariableDeclaration' &&

package/test/react-native/javascript.test.ts

@@ -31,6 +31,9 @@ import * as Sentry from '@sentry/react-native';
 
 Sentry.init({
   dsn: 'dsn',
+
+  // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+  // enableSpotlight: __DEV__,
 });
 
 const App = () => {

package/test/react-native/metro.test.ts

@@ -9,11 +9,124 @@ import {
   addSentrySerializerRequireToMetroConfig,
   addSentrySerializerToMetroConfig,
   getMetroConfigObject,
+  patchMetroWithSentryConfigInMemory,
   removeSentryRequire,
   removeSentrySerializerFromMetroConfig,
 } from '../../src/react-native/metro';
 
 describe('patch metro config - sentry serializer', () => {
+  describe('patchMetroWithSentryConfigInMemory', () => {
+    it('patches react native 0.72 default metro config', async () => {
+      const mod =
+        parseModule(`const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);`);
+
+      const result = await patchMetroWithSentryConfigInMemory(mod, async () => {
+        /* noop */
+      });
+      expect(result).toBe(true);
+      expect(generateCode(mod.$ast).code)
+        .toBe(`const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+
+const {
+ withSentryConfig
+} = require("@sentry/react-native/metro");
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {};
+
+module.exports = withSentryConfig(mergeConfig(getDefaultConfig(__dirname), config));`);
+    });
+
+    it('patches react native 0.65 default metro config', async () => {
+      const mod = parseModule(`/**
+* Metro configuration for React Native
+* https://github.com/facebook/react-native
+*
+* @format
+*/
+
+module.exports = {
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};`);
+
+      const result = await patchMetroWithSentryConfigInMemory(mod, async () => {
+        /* noop */
+      });
+      expect(result).toBe(true);
+      expect(generateCode(mod.$ast).code).toBe(`const {
+  withSentryConfig
+} = require("@sentry/react-native/metro");
+
+/**
+* Metro configuration for React Native
+* https://github.com/facebook/react-native
+*
+* @format
+*/
+
+module.exports = withSentryConfig({
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+});`);
+    });
+
+    it('patches react native metro config exported variable', async () => {
+      const mod = parseModule(`const testConfig = {};
+
+module.exports = testConfig;`);
+
+      const result = await patchMetroWithSentryConfigInMemory(mod, async () => {
+        /* noop */
+      });
+      expect(result).toBe(true);
+      expect(generateCode(mod.$ast).code).toBe(`const {
+  withSentryConfig
+} = require("@sentry/react-native/metro");
+
+const testConfig = {};
+
+module.exports = withSentryConfig(testConfig);`);
+    });
+
+    it('does not patch react native metro config exported as factory function', async () => {
+      const mod = parseModule(`module.exports = () => ({});`);
+
+      const result = await patchMetroWithSentryConfigInMemory(mod, async () => {
+        /* noop */
+      });
+      expect(result).toBe(false);
+      expect(generateCode(mod.$ast).code).toBe(`module.exports = () => ({});`);
+    });
+  });
+
   describe('addSentrySerializerToMetroConfig', () => {
     it('add to empty config', () => {
       const mod = parseModule(`module.exports = {