@sentry/wizard 3.24.1 → 3.25.0

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

@@ -3,8 +3,7 @@
 import clack from '@clack/prompts';
 import chalk from 'chalk';
 import * as fs from 'fs';
-import * as path from 'path';
-import * as process from 'process';
+
 import {
   CliSetupConfigContent,
   abortIfCancelled,
@@ -17,7 +16,6 @@ import {
   installPackage,
   printWelcome,
   propertiesCliSetupConfig,
-  showCopyPasteInstructions,
 } from '../utils/clack-utils';
 import { getPackageVersion, hasPackageInstalled } from '../utils/package-json';
 import { podInstall } from '../apple/cocoapod';
@@ -41,11 +39,7 @@ import {
 import { runReactNativeUninstall } from './uninstall';
 import { APP_BUILD_GRADLE, XCODE_PROJECT, getFirstMatchedPath } from './glob';
 import { ReactNativeWizardOptions } from './options';
-import {
-  addSentryInitWithSdkImport,
-  doesJsCodeIncludeSdkSentryImport,
-  getSentryInitColoredCodeSnippet,
-} from './javascript';
+import { addSentryInit } from './javascript';
 import { traceStep, withTelemetry } from '../telemetry';
 import * as Sentry from '@sentry/node';
 import { fulfillsVersionRange } from '../utils/semver';
@@ -54,6 +48,9 @@ import {
   patchMetroConfigWithSentrySerializer,
   patchMetroWithSentryConfig,
 } from './metro';
+import { patchExpoAppConfig, printSentryExpoMigrationOutro } from './expo';
+import { addSentryToExpoMetroConfig } from './expo-metro';
+import { addExpoEnvLocal } from './expo-env-file';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const xcode = require('xcode');
@@ -64,14 +61,24 @@ export const RN_PACKAGE = 'react-native';
 export const RN_HUMAN_NAME = 'React Native';
 
 export const SUPPORTED_RN_RANGE = '>=0.69.0';
+export const SUPPORTED_EXPO_RANGE = '>=50.0.0';
 
-// The following SDK version ship with bundled Xcode scripts
-// which simplifies the Xcode Build Phases setup.
+/**
+ * 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
+/**
+ * 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 ship with bundled Expo plugin
+ */
+export const SDK_EXPO_SUPPORTED_SDK_RANGE = `>=5.16.0`;
+
 // The following SDK version shipped `withSentryConfig`
 export const SDK_SENTRY_METRO_WITH_SENTRY_CONFIG_SUPPORTED_SDK_RANGE =
   '>=5.17.0';
@@ -110,6 +117,13 @@ export async function runReactNativeWizardWithTelemetry(
   await confirmContinueIfNoOrDirtyGitRepo();
 
   const packageJson = await getPackageDotJson();
+  const hasInstalled = (dep: string) => hasPackageInstalled(dep, packageJson);
+
+  if (hasInstalled('sentry-expo')) {
+    Sentry.setTag('has-sentry-expo-installed', true);
+    printSentryExpoMigrationOutro();
+    return;
+  }
 
   await ensurePackageIsInstalled(packageJson, RN_PACKAGE, RN_HUMAN_NAME);
 
@@ -120,6 +134,38 @@ export async function runReactNativeWizardWithTelemetry(
       packageVersion: rnVersion,
       packageId: RN_PACKAGE,
       acceptableVersions: SUPPORTED_RN_RANGE,
+      note: `Please upgrade to ${SUPPORTED_RN_RANGE} if you wish to use the Sentry Wizard.
+Or setup using ${chalk.cyan(
+        'https://docs.sentry.io/platforms/react-native/manual-setup/manual-setup/',
+      )}`,
+    });
+  }
+
+  await installPackage({
+    packageName: RN_SDK_PACKAGE,
+    alreadyInstalled: hasPackageInstalled(RN_SDK_PACKAGE, packageJson),
+  });
+  const sdkVersion = getPackageVersion(
+    RN_SDK_PACKAGE,
+    await getPackageDotJson(),
+  );
+
+  const expoVersion = getPackageVersion('expo', packageJson);
+  const isExpo = !!expoVersion;
+  if (expoVersion && sdkVersion) {
+    await confirmContinueIfPackageVersionNotSupported({
+      packageName: 'Sentry React Native SDK',
+      packageVersion: sdkVersion,
+      packageId: RN_SDK_PACKAGE,
+      acceptableVersions: SDK_EXPO_SUPPORTED_SDK_RANGE,
+      note: `Please upgrade to ${SDK_EXPO_SUPPORTED_SDK_RANGE} to continue with the wizard in this Expo project.`,
+    });
+    await confirmContinueIfPackageVersionNotSupported({
+      packageName: 'Expo SDK',
+      packageVersion: expoVersion,
+      packageId: 'expo',
+      acceptableVersions: SUPPORTED_EXPO_RANGE,
+      note: `Please upgrade to ${SUPPORTED_EXPO_RANGE} to continue with the wizard in this Expo project.`,
     });
   }
 
@@ -135,22 +181,24 @@ export async function runReactNativeWizardWithTelemetry(
     url: sentryUrl,
   };
 
-  await installPackage({
-    packageName: RN_SDK_PACKAGE,
-    alreadyInstalled: hasPackageInstalled(RN_SDK_PACKAGE, packageJson),
-  });
-  const sdkVersion = getPackageVersion(
-    RN_SDK_PACKAGE,
-    await getPackageDotJson(),
-  );
-
-  await traceStep('patch-js', () =>
+  await traceStep('patch-app-js', () =>
     addSentryInit({ dsn: selectedProject.keys[0].dsn.public }),
   );
 
-  await traceStep('patch-metro-config', () =>
-    addSentryToMetroConfig({ sdkVersion }),
-  );
+  if (isExpo) {
+    await traceStep('patch-expo-app-config', () =>
+      patchExpoAppConfig(cliConfig),
+    );
+    await traceStep('add-expo-env-local', () => addExpoEnvLocal(cliConfig));
+  }
+
+  if (isExpo) {
+    await traceStep('patch-metro-config', addSentryToExpoMetroConfig);
+  } else {
+    await traceStep('patch-metro-config', () =>
+      addSentryToMetroConfig({ sdkVersion }),
+    );
+  }
 
   if (fs.existsSync('ios')) {
     Sentry.setTag('patch-ios', true);
@@ -217,58 +265,6 @@ function addSentryToMetroConfig({
   }
 }
 
-async function addSentryInit({ dsn }: { dsn: string }) {
-  const prefixGlob = '{.,./src}';
-  const suffixGlob = '@(j|t|cj|mj)s?(x)';
-  const universalGlob = `App.${suffixGlob}`;
-  const jsFileGlob = `${prefixGlob}/+(${universalGlob})`;
-  const jsPath = traceStep('find-app-js-file', () =>
-    getFirstMatchedPath(jsFileGlob),
-  );
-  Sentry.setTag('app-js-file-status', jsPath ? 'found' : 'not-found');
-  if (!jsPath) {
-    clack.log.warn(
-      `Could not find main App file using ${chalk.cyan(jsFileGlob)}.`,
-    );
-    await showCopyPasteInstructions(
-      'App.js',
-      getSentryInitColoredCodeSnippet(dsn),
-      'This ensures the Sentry SDK is ready to capture errors.',
-    );
-    return;
-  }
-  const jsRelativePath = path.relative(process.cwd(), jsPath);
-
-  const js = fs.readFileSync(jsPath, 'utf-8');
-  const includesSentry = doesJsCodeIncludeSdkSentryImport(js, {
-    sdkPackageName: RN_SDK_PACKAGE,
-  });
-  if (includesSentry) {
-    Sentry.setTag('app-js-file-status', 'already-includes-sentry');
-    clack.log.warn(
-      `${chalk.cyan(
-        jsRelativePath,
-      )} already includes Sentry. We wont't add it again.`,
-    );
-    return;
-  }
-
-  traceStep('add-sentry-init', () => {
-    const newContent = addSentryInitWithSdkImport(js, { dsn });
-
-    clack.log.success(
-      `Added ${chalk.cyan('Sentry.init')} to ${chalk.cyan(jsRelativePath)}.`,
-    );
-
-    fs.writeFileSync(jsPath, newContent, 'utf-8');
-  });
-
-  Sentry.setTag('app-js-file-status', 'added-sentry-init');
-  clack.log.success(
-    chalk.green(`${chalk.cyan(jsRelativePath)} changes saved.`),
-  );
-}
-
 async function confirmFirstSentryException(
   url: string,
   orgSlug: string,

package/src/react-native/xcode.ts

@@ -128,11 +128,27 @@ export function doesBundlePhaseIncludeSentry(buildPhase: BuildPhase) {
 export function addSentryWithBundledScriptsToBundleShellScript(
   script: string,
 ): string {
-  return script.replace(
-    '$REACT_NATIVE_XCODE',
-    // eslint-disable-next-line no-useless-escape
-    '\\"/bin/sh ../node_modules/@sentry/react-native/scripts/sentry-xcode.sh $REACT_NATIVE_XCODE\\"',
-  );
+  const isLikelyPlainReactNativeScript = script.includes('$REACT_NATIVE_XCODE');
+  if (isLikelyPlainReactNativeScript) {
+    return script.replace(
+      '$REACT_NATIVE_XCODE',
+      // eslint-disable-next-line no-useless-escape
+      '\\"/bin/sh ../node_modules/@sentry/react-native/scripts/sentry-xcode.sh $REACT_NATIVE_XCODE\\"',
+    );
+  }
+
+  const isLikelyExpoScript = script.includes('expo');
+  if (isLikelyExpoScript) {
+    const SENTRY_REACT_NATIVE_XCODE_PATH =
+      "`\"$NODE_BINARY\" --print \"require('path').dirname(require.resolve('@sentry/react-native/package.json')) + '/scripts/sentry-xcode.sh'\"`";
+    return script.replace(
+      /^.*?(packager|scripts)\/react-native-xcode\.sh\s*(\\'\\\\")?/m,
+      // eslint-disable-next-line no-useless-escape
+      (match: string) => `/bin/sh ${SENTRY_REACT_NATIVE_XCODE_PATH} ${match}`,
+    );
+  }
+
+  return script;
 }
 
 export function addSentryWithCliToBundleShellScript(script: string): string {

package/src/utils/clack-utils.ts

@@ -295,11 +295,13 @@ export async function confirmContinueIfPackageVersionNotSupported({
   packageName,
   packageVersion,
   acceptableVersions,
+  note,
 }: {
   packageId: string;
   packageName: string;
   packageVersion: string;
   acceptableVersions: string;
+  note?: string;
 }): Promise<void> {
   return traceStep(`check-package-version`, async () => {
     Sentry.setTag(`${packageName.toLowerCase()}-version`, packageVersion);
@@ -321,10 +323,8 @@ export async function confirmContinueIfPackageVersionNotSupported({
     );
 
     clack.note(
-      `Please upgrade to ${acceptableVersions} if you wish to use the Sentry Wizard.
-Or setup using ${chalk.cyan(
-        'https://docs.sentry.io/platforms/react-native/manual-setup/manual-setup/',
-      )}`,
+      note ??
+        `Please upgrade to ${acceptableVersions} if you wish to use the Sentry Wizard.`,
     );
     const continueWithUnsupportedVersion = await abortIfCancelled(
       clack.confirm({

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

@@ -0,0 +1,81 @@
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import { generateCode, parseModule } from 'magicast';
+import { patchMetroInMemory } from '../../src/react-native/expo-metro';
+
+describe('expo-metro config', () => {
+  test('patches minimal expo config', () => {
+    const mod = parseModule(`
+const { getDefaultConfig } = require("expo/metro-config");
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+config.resolver.assetExts.push(
+  // Adds support for .db files for SQLite databases
+  'db'
+);
+
+module.exports = config;
+      `);
+
+    const result = patchMetroInMemory(mod);
+    expect(result).toBe(true);
+    expect(generateCode(mod.$ast).code).toBe(
+      `
+const {
+  getSentryExpoConfig
+} = require("@sentry/react-native/metro");
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getSentryExpoConfig(__dirname);
+
+config.resolver.assetExts.push(
+  // Adds support for .db files for SQLite databases
+  'db'
+);
+
+module.exports = config;
+`.trim(),
+    );
+  });
+
+  test('keeps expo metro config if other imports are present', () => {
+    const mod = parseModule(`
+const { getDefaultConfig, otherExport } = require("expo/metro-config");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = config;
+      `);
+
+    const result = patchMetroInMemory(mod);
+    expect(result).toBe(true);
+    expect(generateCode(mod.$ast).code).toBe(
+      `
+const { getDefaultConfig, otherExport } = require("expo/metro-config");
+
+const {
+  getSentryExpoConfig
+} = require("@sentry/react-native/metro");
+
+const config = getSentryExpoConfig(__dirname);
+
+module.exports = config;
+`.trim(),
+    );
+  });
+
+  test('does not modify when sentry already present', () => {
+    const mod = parseModule(`
+const { getSentryExpoConfig } = require("@sentry/react-native/metro");
+`);
+
+    const result = patchMetroInMemory(mod);
+    expect(result).toBe(false);
+    expect(generateCode(mod.$ast).code).toBe(
+      `
+const { getSentryExpoConfig } = require("@sentry/react-native/metro");
+`.trim(),
+    );
+  });
+});

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

@@ -0,0 +1,86 @@
+import { addWithSentryToAppConfigJson } from '../../src/react-native/expo';
+import { RNCliSetupConfigContent } from '../../src/react-native/react-native-wizard';
+
+describe('expo', () => {
+  const MOCK_CONFIG: RNCliSetupConfigContent = {
+    url: 'https://sentry.mock/',
+    org: 'sentry-mock',
+    project: 'project-mock',
+    authToken: 'authToken-mock',
+  };
+
+  describe('addWithSentryToAppConfigJson', () => {
+    test('do not add if sentry-expo present', () => {
+      const appConfigJson = `{
+        "expo": {
+          "plugins": ["sentry-expo"]
+        }
+      }`;
+      expect(
+        addWithSentryToAppConfigJson(appConfigJson, MOCK_CONFIG),
+      ).toBeNull();
+    });
+
+    test('do not add if sentry-react-native/expo present', () => {
+      const appConfigJson = `{
+        "expo": {
+          "plugins": ["@sentry/react-native/expo"]
+        }
+      }`;
+      expect(
+        addWithSentryToAppConfigJson(appConfigJson, MOCK_CONFIG),
+      ).toBeNull();
+    });
+
+    test.each([
+      [
+        `{
+          "expo": {
+            "plugins": "should be an array, but it is not"
+          }
+        }`,
+      ],
+      [
+        `{
+          "expo": ["should be an object, but it is not"]
+        }`,
+      ],
+    ])('do not add if plugins is not an array', (appConfigJson) => {
+      expect(
+        addWithSentryToAppConfigJson(appConfigJson, MOCK_CONFIG),
+      ).toBeNull();
+    });
+
+    test.each([
+      [
+        `{
+          "expo": {
+            "plugins": []
+          }
+        }`,
+      ],
+      [`{}`],
+      [
+        `{
+          "expo": {}
+        }`,
+      ],
+    ])('add sentry react native expo plugin configuration', (appConfigJson) => {
+      const result = addWithSentryToAppConfigJson(appConfigJson, MOCK_CONFIG);
+      expect(JSON.parse(result ?? '{}')).toStrictEqual({
+        expo: {
+          plugins: [
+            [
+              '@sentry/react-native/expo',
+              {
+                url: 'https://sentry.mock/',
+                organization: 'sentry-mock',
+                project: 'project-mock',
+              },
+            ],
+          ],
+        },
+      });
+    });
+  });
+});

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

@@ -57,6 +57,96 @@ REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
         expectedOutput,
       );
     });
+
+    it('adds sentry cli to expo bundle build phase', () => {
+      const input = `
+if [[ -f "$PODS_ROOT/../.xcode.env" ]]; then
+  source "$PODS_ROOT/../.xcode.env"
+fi
+if [[ -f "$PODS_ROOT/../.xcode.env.local" ]]; then
+  source "$PODS_ROOT/../.xcode.env.local"
+fi
+
+# The project root by default is one level up from the ios directory
+export PROJECT_ROOT="$PROJECT_DIR"/..
+
+if [[ "$CONFIGURATION" = *Debug* ]]; then
+  export SKIP_BUNDLING=1
+fi
+if [[ -z "$ENTRY_FILE" ]]; then
+  # Set the entry JS file using the bundler's entry resolution.
+  export ENTRY_FILE="$("$NODE_BINARY" -e "require('expo/scripts/resolveAppEntry')" "$PROJECT_ROOT" ios absolute | tail -n 1)"
+fi
+
+if [[ -z "$CLI_PATH" ]]; then
+  # Use Expo CLI
+  export CLI_PATH="$("$NODE_BINARY" --print "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })")"
+fi
+if [[ -z "$BUNDLE_COMMAND" ]]; then
+  # Default Expo CLI command for bundling
+  export BUNDLE_COMMAND="export:embed"
+fi
+
+# Source .xcode.env.updates if it exists to allow
+# SKIP_BUNDLING to be unset if needed
+if [[ -f "$PODS_ROOT/../.xcode.env.updates" ]]; then
+  source "$PODS_ROOT/../.xcode.env.updates"
+fi
+# Source local changes to allow overrides
+# if needed
+if [[ -f "$PODS_ROOT/../.xcode.env.local" ]]; then
+  source "$PODS_ROOT/../.xcode.env.local"
+fi
+
+\`"$NODE_BINARY" --print "require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'"\`
+`;
+
+      const expectedOutput = `
+if [[ -f "$PODS_ROOT/../.xcode.env" ]]; then
+  source "$PODS_ROOT/../.xcode.env"
+fi
+if [[ -f "$PODS_ROOT/../.xcode.env.local" ]]; then
+  source "$PODS_ROOT/../.xcode.env.local"
+fi
+
+# The project root by default is one level up from the ios directory
+export PROJECT_ROOT="$PROJECT_DIR"/..
+
+if [[ "$CONFIGURATION" = *Debug* ]]; then
+  export SKIP_BUNDLING=1
+fi
+if [[ -z "$ENTRY_FILE" ]]; then
+  # Set the entry JS file using the bundler's entry resolution.
+  export ENTRY_FILE="$("$NODE_BINARY" -e "require('expo/scripts/resolveAppEntry')" "$PROJECT_ROOT" ios absolute | tail -n 1)"
+fi
+
+if [[ -z "$CLI_PATH" ]]; then
+  # Use Expo CLI
+  export CLI_PATH="$("$NODE_BINARY" --print "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })")"
+fi
+if [[ -z "$BUNDLE_COMMAND" ]]; then
+  # Default Expo CLI command for bundling
+  export BUNDLE_COMMAND="export:embed"
+fi
+
+# Source .xcode.env.updates if it exists to allow
+# SKIP_BUNDLING to be unset if needed
+if [[ -f "$PODS_ROOT/../.xcode.env.updates" ]]; then
+  source "$PODS_ROOT/../.xcode.env.updates"
+fi
+# Source local changes to allow overrides
+# if needed
+if [[ -f "$PODS_ROOT/../.xcode.env.local" ]]; then
+  source "$PODS_ROOT/../.xcode.env.local"
+fi
+
+/bin/sh \`"$NODE_BINARY" --print "require('path').dirname(require.resolve('@sentry/react-native/package.json')) + '/scripts/sentry-xcode.sh'"\` \`"$NODE_BINARY" --print "require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'"\`
+`;
+
+      expect(addSentryWithBundledScriptsToBundleShellScript(input)).toBe(
+        expectedOutput,
+      );
+    });
   });
 
   describe('removeSentryFromBundleShellScript', () => {