@sentry/wizard 3.16.5 → 3.18.0

package/src/react-native/xcode.ts

@@ -21,7 +21,10 @@ export function getValidExistingBuildPhases(xcodeProject: any): BuildPhaseMap {
   return map;
 }
 
-export function patchBundlePhase(bundlePhase: BuildPhase | undefined) {
+export function patchBundlePhase(
+  bundlePhase: BuildPhase | undefined,
+  patch: (script: string) => string,
+) {
   if (!bundlePhase) {
     clack.log.warn(
       `Could not find ${chalk.cyan(
@@ -42,9 +45,7 @@ export function patchBundlePhase(bundlePhase: BuildPhase | undefined) {
   }
 
   const script: string = JSON.parse(bundlePhase.shellScript);
-  bundlePhase.shellScript = JSON.stringify(
-    addSentryToBundleShellScript(script),
-  );
+  bundlePhase.shellScript = JSON.stringify(patch(script));
   clack.log.success(
     `Patched Build phase ${chalk.cyan('Bundle React Native code and images')}.`,
   );
@@ -60,7 +61,10 @@ export function unPatchBundlePhase(bundlePhase: BuildPhase | undefined) {
     return;
   }
 
-  if (!bundlePhase.shellScript.match(/sentry-cli\s+react-native\s+xcode/i)) {
+  if (
+    !bundlePhase.shellScript.match(/sentry-cli\s+react-native\s+xcode/i) &&
+    !bundlePhase.shellScript.includes('sentry-xcode.sh')
+  ) {
     clack.log.success(
       `Build phase ${chalk.cyan(
         'Bundle React Native code and images',
@@ -97,6 +101,12 @@ export function removeSentryFromBundleShellScript(script: string): string {
         /\.\.\/node_modules\/@sentry\/cli\/bin\/sentry-cli\s+react-native\s+xcode\s+\$REACT_NATIVE_XCODE/i,
         '$REACT_NATIVE_XCODE',
       )
+      .replace(
+        //  eslint-disable-next-line no-useless-escape
+        /\"\/bin\/sh.*?sentry-xcode.sh\s+\$REACT_NATIVE_XCODE/i,
+        // eslint-disable-next-line no-useless-escape
+        '"$REACT_NATIVE_XCODE',
+      )
   );
 }
 
@@ -107,10 +117,25 @@ export function findBundlePhase(buildPhases: BuildPhaseMap) {
 }
 
 export function doesBundlePhaseIncludeSentry(buildPhase: BuildPhase) {
-  return !!buildPhase.shellScript.match(/sentry-cli\s+react-native\s+xcode/i);
+  const containsSentryCliRNCommand = !!buildPhase.shellScript.match(
+    /sentry-cli\s+react-native\s+xcode/i,
+  );
+  const containsBundledScript =
+    buildPhase.shellScript.includes('sentry-xcode.sh');
+  return containsSentryCliRNCommand || containsBundledScript;
+}
+
+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\\"',
+  );
 }
 
-export function addSentryToBundleShellScript(script: string): string {
+export function addSentryWithCliToBundleShellScript(script: string): string {
   return (
     'export SENTRY_PROPERTIES=sentry.properties\n' +
     'export EXTRA_PACKAGER_ARGS="--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map"\n' +
@@ -124,7 +149,36 @@ export function addSentryToBundleShellScript(script: string): string {
   );
 }
 
-export function addDebugFilesUploadPhase(
+export function addDebugFilesUploadPhaseWithBundledScripts(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  xcodeProject: any,
+  { debugFilesUploadPhaseExists }: { debugFilesUploadPhaseExists: boolean },
+) {
+  if (debugFilesUploadPhaseExists) {
+    clack.log.warn(
+      `Build phase ${chalk.cyan(
+        'Upload Debug Symbols to Sentry',
+      )} already exists.`,
+    );
+    return;
+  }
+
+  xcodeProject.addBuildPhase(
+    [],
+    'PBXShellScriptBuildPhase',
+    'Upload Debug Symbols to Sentry',
+    null,
+    {
+      shellPath: '/bin/sh',
+      shellScript: `/bin/sh ../node_modules/@sentry/react-native/scripts/sentry-xcode-debug-files.sh`,
+    },
+  );
+  clack.log.success(
+    `Added Build phase ${chalk.cyan('Upload Debug Symbols to Sentry')}.`,
+  );
+}
+
+export function addDebugFilesUploadPhaseWithCli(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   xcodeProject: any,
   { debugFilesUploadPhaseExists }: { debugFilesUploadPhaseExists: boolean },
@@ -204,13 +258,17 @@ export function unPatchDebugFilesUploadPhase(
 export function findDebugFilesUploadPhase(
   buildPhasesMap: Record<string, BuildPhase>,
 ): [key: string, buildPhase: BuildPhase] | undefined {
-  return Object.entries(buildPhasesMap).find(
-    ([_, buildPhase]) =>
+  return Object.entries(buildPhasesMap).find(([_, buildPhase]) => {
+    const containsCliDebugUpload =
       typeof buildPhase !== 'string' &&
       !!buildPhase.shellScript.match(
         /sentry-cli\s+(upload-dsym|debug-files upload)\b/,
-      ),
-  );
+      );
+    const containsBundledDebugUpload =
+      typeof buildPhase !== 'string' &&
+      buildPhase.shellScript.includes('sentry-xcode-debug-files.sh');
+    return containsCliDebugUpload || containsBundledDebugUpload;
+  });
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/remix/remix-wizard.ts

@@ -22,11 +22,14 @@ import {
   instrumentRootRoute,
   isRemixV2,
   loadRemixConfig,
+  runRemixReveal,
 } from './sdk-setup';
 import { debug } from '../utils/debug';
 import { traceStep, withTelemetry } from '../telemetry';
 import { isHydrogenApp } from './utils';
 import { DEFAULT_URL } from '../../lib/Constants';
+import { findFile } from '../utils/ast-utils';
+import { configureVitePlugin } from '../sourcemaps/tools/vite';
 
 export async function runRemixWizard(options: WizardOptions): Promise<void> {
   return withTelemetry(
@@ -55,7 +58,7 @@ async function runRemixWizardWithTelemetry(
   // We expect `@remix-run/dev` to be installed for every Remix project
   await ensurePackageIsInstalled(packageJson, '@remix-run/dev', 'Remix');
 
-  const { selectedProject, authToken, sentryUrl } =
+  const { selectedProject, authToken, sentryUrl, selfHosted } =
     await getOrAskForProjectData(options, 'javascript-remix');
 
   await installPackage({
@@ -67,24 +70,47 @@ async function runRemixWizardWithTelemetry(
 
   const isTS = isUsingTypeScript();
   const isV2 = isRemixV2(remixConfig, packageJson);
+  const viteConfig = findFile('vite.config');
 
   await addSentryCliConfig({ authToken }, rcCliSetupConfig);
 
-  await traceStep('Update build script for sourcemap uploads', async () => {
-    try {
-      await updateBuildScript({
-        org: selectedProject.organization.slug,
-        project: selectedProject.slug,
-        url: sentryUrl === DEFAULT_URL ? undefined : sentryUrl,
-        isHydrogen: isHydrogenApp(packageJson),
-      });
-    } catch (e) {
-      clack.log
-        .warn(`Could not update build script to generate and upload sourcemaps.
+  if (viteConfig) {
+    await traceStep(
+      'Update vite configuration for sourcemap uploads',
+      async () => {
+        try {
+          await configureVitePlugin({
+            orgSlug: selectedProject.organization.slug,
+            projectSlug: selectedProject.slug,
+            url: sentryUrl,
+            selfHosted,
+            authToken,
+          });
+        } catch (e) {
+          clack.log
+            .warn(`Could not update vite configuration to generate and upload sourcemaps.
+    Please update your vite configuration manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps/`);
+          debug(e);
+        }
+      },
+    );
+  } else {
+    await traceStep('Update build script for sourcemap uploads', async () => {
+      try {
+        await updateBuildScript({
+          org: selectedProject.organization.slug,
+          project: selectedProject.slug,
+          url: sentryUrl === DEFAULT_URL ? undefined : sentryUrl,
+          isHydrogen: isHydrogenApp(packageJson),
+        });
+      } 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);
-    }
-  });
+        debug(e);
+      }
+    });
+  }
 
   await traceStep('Instrument root route', async () => {
     try {
@@ -96,6 +122,16 @@ async function runRemixWizardWithTelemetry(
     }
   });
 
+  traceStep('Reveal missing entry files', () => {
+    try {
+      runRemixReveal(isTS);
+    } catch (e) {
+      clack.log.warn(`Could not run 'npx remix reveal'.
+  Please create your entry files manually`);
+      debug(e);
+    }
+  });
+
   await traceStep('Initialize Sentry on client entry', async () => {
     try {
       await initializeSentryOnEntryClient(dsn, isTS);

package/src/remix/sdk-setup.ts

@@ -8,6 +8,7 @@ import type { ProxifiedModule } from 'magicast';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as url from 'url';
+import * as childProcess from 'child_process';
 
 // @ts-expect-error - clack is ESM and TS complains about that. It works though
 import clack from '@clack/prompts';
@@ -36,6 +37,32 @@ export type PartialRemixConfig = {
 };
 
 const REMIX_CONFIG_FILE = 'remix.config.js';
+const REMIX_REVEAL_COMMAND = 'npx remix reveal';
+
+export function runRemixReveal(isTS: boolean): void {
+  // Check if entry files already exist
+  const clientEntryFilename = `entry.client.${isTS ? 'tsx' : 'jsx'}`;
+  const serverEntryFilename = `entry.server.${isTS ? 'tsx' : 'jsx'}`;
+
+  const clientEntryPath = path.join(process.cwd(), 'app', clientEntryFilename);
+  const serverEntryPath = path.join(process.cwd(), 'app', serverEntryFilename);
+
+  if (fs.existsSync(clientEntryPath) && fs.existsSync(serverEntryPath)) {
+    clack.log.info(
+      `Found entry files ${chalk.cyan(clientEntryFilename)} and ${chalk.cyan(
+        serverEntryFilename,
+      )}.`,
+    );
+  } else {
+    clack.log.info(
+      `Couldn't find entry files in your project. Trying to run ${chalk.cyan(
+        REMIX_REVEAL_COMMAND,
+      )}...`,
+    );
+
+    clack.log.info(childProcess.execSync(REMIX_REVEAL_COMMAND).toString());
+  }
+}
 
 function insertClientInitCall(
   dsn: string,
@@ -192,6 +219,10 @@ export async function updateBuildScript(args: {
       buildCommand,
       instrumentedBuildCommand,
     );
+  } else {
+    throw new Error(
+      "`build` script doesn't contain a known build command. Please update it manually.",
+    );
   }
 
   await fs.promises.writeFile(

package/src/utils/ast-utils.ts

@@ -216,3 +216,55 @@ export function printJsonC(ast: t.Program): string {
   const js = recast.print(ast).code;
   return js.substring(1, js.length - 1);
 }
+
+/**
+ * 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
+ */
+export function getLastRequireIndex(program: t.Program): number {
+  let lastRequireIdex = 0;
+  program.body.forEach((s, i) => {
+    if (
+      s.type === 'VariableDeclaration' &&
+      s.declarations[0].type === 'VariableDeclarator' &&
+      s.declarations[0].init !== null &&
+      typeof s.declarations[0].init !== 'undefined' &&
+      s.declarations[0].init.type === 'CallExpression' &&
+      s.declarations[0].init.callee.type === 'Identifier' &&
+      s.declarations[0].init.callee.name === 'require'
+    ) {
+      lastRequireIdex = i;
+    }
+  });
+  return lastRequireIdex;
+}
+
+/**
+ * Walks the statements and removes require statements which first argument includes the predicate.
+ * Only removes top level require statements like `const foo = require('bar');`
+ *
+ * @returns True if any require statement was removed.
+ */
+export function removeRequire(program: t.Program, predicate: string): boolean {
+  let removedAtLeastOne = false;
+  program.body = program.body.filter((s) => {
+    if (
+      s.type === 'VariableDeclaration' &&
+      s.declarations[0].type === 'VariableDeclarator' &&
+      s.declarations[0].init !== null &&
+      typeof s.declarations[0].init !== 'undefined' &&
+      s.declarations[0].init.type === 'CallExpression' &&
+      s.declarations[0].init.callee.type === 'Identifier' &&
+      s.declarations[0].init.callee.name === 'require' &&
+      s.declarations[0].init.arguments[0].type === 'StringLiteral' &&
+      s.declarations[0].init.arguments[0].value.includes(predicate)
+    ) {
+      removedAtLeastOne = true;
+      return false;
+    }
+    return true;
+  });
+  return removedAtLeastOne;
+}

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

@@ -0,0 +1,283 @@
+// @ts-ignore - magicast is ESM and TS complains about that. It works though
+import { generateCode, type ProxifiedModule, parseModule } from 'magicast';
+
+import * as recast from 'recast';
+import x = recast.types;
+import t = x.namedTypes;
+
+import {
+  addSentrySerializerRequireToMetroConfig,
+  addSentrySerializerToMetroConfig,
+  getMetroConfigObject,
+  removeSentryRequire,
+  removeSentrySerializerFromMetroConfig,
+} from '../../src/react-native/metro';
+
+describe('patch metro config - sentry serializer', () => {
+  describe('addSentrySerializerToMetroConfig', () => {
+    it('add to empty config', () => {
+      const mod = parseModule(`module.exports = {
+        other: 'config'
+      }`);
+      const configObject = getModuleExportsObject(mod);
+      const result = addSentrySerializerToMetroConfig(configObject);
+      expect(result).toBe(true);
+      expect(generateCode(mod.$ast).code).toBe(`module.exports = {
+  other: 'config',
+
+  serializer: {
+    customSerializer: createSentryMetroSerializer()
+  }
+}`);
+    });
+
+    it('add to existing serializer config', () => {
+      const mod = parseModule(`module.exports = {
+  other: 'config',
+  serializer: {
+    other: 'config'
+  }
+}`);
+      const configObject = getModuleExportsObject(mod);
+      const result = addSentrySerializerToMetroConfig(configObject);
+      expect(result).toBe(true);
+      expect(generateCode(mod.$ast).code).toBe(`module.exports = {
+  other: 'config',
+  serializer: {
+    other: 'config',
+    customSerializer: createSentryMetroSerializer()
+  }
+}`);
+    });
+
+    it('not add to existing customSerializer config', () => {
+      const mod = parseModule(`module.exports = {
+  other: 'config',
+  serializer: {
+    other: 'config',
+    customSerializer: 'existing-serializer'
+  }
+}`);
+      const configObject = getModuleExportsObject(mod);
+      const result = addSentrySerializerToMetroConfig(configObject);
+      expect(result).toBe(false);
+      expect(generateCode(mod.$ast).code).toBe(`module.exports = {
+  other: 'config',
+  serializer: {
+    other: 'config',
+    customSerializer: 'existing-serializer'
+  }
+}`);
+    });
+  });
+
+  describe('addSentrySerializerImportToMetroConfig', () => {
+    it('add import', () => {
+      const mod =
+        parseModule(`const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+module.exports = {
+  other: 'config'
+}`);
+      const result = addSentrySerializerRequireToMetroConfig(
+        mod.$ast as t.Program,
+      );
+      expect(result).toBe(true);
+      expect(generateCode(mod.$ast).code)
+        .toBe(`const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const {
+  createSentryMetroSerializer
+} = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer");
+
+module.exports = {
+  other: 'config'
+}`);
+    });
+  });
+
+  describe('getMetroConfigObject', () => {
+    it('get config object from variable called config', () => {
+      const mod = parseModule(`var config = { some: 'config' };`);
+      const configObject = getMetroConfigObject(mod.$ast as t.Program);
+      expect(
+        ((configObject?.properties[0] as t.ObjectProperty).key as t.Identifier)
+          .name,
+      ).toBe('some');
+      expect(
+        (
+          (configObject?.properties[0] as t.ObjectProperty)
+            .value as t.StringLiteral
+        ).value,
+      ).toBe('config');
+    });
+
+    it('get config object from const called config', () => {
+      const mod = parseModule(`const config = { some: 'config' };`);
+      const configObject = getMetroConfigObject(mod.$ast as t.Program);
+      expect(
+        ((configObject?.properties[0] as t.ObjectProperty).key as t.Identifier)
+          .name,
+      ).toBe('some');
+      expect(
+        (
+          (configObject?.properties[0] as t.ObjectProperty)
+            .value as t.StringLiteral
+        ).value,
+      ).toBe('config');
+    });
+
+    it('get config oject from let called config', () => {
+      const mod = parseModule(`let config = { some: 'config' };`);
+      const configObject = getMetroConfigObject(mod.$ast as t.Program);
+      expect(
+        ((configObject?.properties[0] as t.ObjectProperty).key as t.Identifier)
+          .name,
+      ).toBe('some');
+      expect(
+        (
+          (configObject?.properties[0] as t.ObjectProperty)
+            .value as t.StringLiteral
+        ).value,
+      ).toBe('config');
+    });
+
+    it('get config object from module.exports', () => {
+      const mod = parseModule(`module.exports = { some: 'config' };`);
+      const configObject = getMetroConfigObject(mod.$ast as t.Program);
+      expect(
+        ((configObject?.properties[0] as t.ObjectProperty).key as t.Identifier)
+          .name,
+      ).toBe('some');
+      expect(
+        (
+          (configObject?.properties[0] as t.ObjectProperty)
+            .value as t.StringLiteral
+        ).value,
+      ).toBe('config');
+    });
+  });
+
+  describe('remove @sentry require', () => {
+    it('nothing to remove', () => {
+      const mod = parseModule(`let config = { some: 'config' };`);
+      const result = removeSentryRequire(mod.$ast as t.Program);
+      expect(result).toBe(false);
+      expect(generateCode(mod.$ast).code).toBe(
+        `let config = { some: 'config' };`,
+      );
+    });
+
+    it('remove metro serializer import', () => {
+      const mod = parseModule(`const {
+  createSentryMetroSerializer,
+} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');
+let config = { some: 'config' };`);
+      const result = removeSentryRequire(mod.$ast as t.Program);
+      expect(result).toBe(true);
+      expect(generateCode(mod.$ast).code).toBe(
+        `let config = { some: 'config' };`,
+      );
+    });
+
+    it('remove all sentry imports', () => {
+      const mod = parseModule(`const {
+  createSentryMetroSerializer,
+} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');
+var Sentry = require('@sentry/react-native');
+let SentryIntegrations = require('@sentry/integrations');
+
+let config = { some: 'config' };`);
+      const result = removeSentryRequire(mod.$ast as t.Program);
+      expect(result).toBe(true);
+      expect(generateCode(mod.$ast).code).toBe(
+        `let config = { some: 'config' };`,
+      );
+    });
+  });
+
+  describe('remove sentryMetroSerializer', () => {
+    it('no custom serializer to remove', () => {
+      const mod = parseModule(`let config = { some: 'config' };`);
+      const result = removeSentrySerializerFromMetroConfig(
+        mod.$ast as t.Program,
+      );
+      expect(result).toBe(false);
+      expect(generateCode(mod.$ast).code).toBe(
+        `let config = { some: 'config' };`,
+      );
+    });
+
+    it('no Sentry custom serializer to remove', () => {
+      const mod = parseModule(`let config = {
+  serializer: {
+    customSerializer: 'existing-serializer',
+    other: 'config',
+  },
+  other: 'config',
+};`);
+      const result = removeSentrySerializerFromMetroConfig(
+        mod.$ast as t.Program,
+      );
+      expect(result).toBe(false);
+      expect(generateCode(mod.$ast).code).toBe(`let config = {
+  serializer: {
+    customSerializer: 'existing-serializer',
+    other: 'config',
+  },
+  other: 'config',
+};`);
+    });
+
+    it('Sentry serializer to remove', () => {
+      const mod = parseModule(`let config = {
+  serializer: {
+    customSerializer: createSentryMetroSerializer(),
+    other: 'config',
+  },
+  other: 'config',
+};`);
+      const result = removeSentrySerializerFromMetroConfig(
+        mod.$ast as t.Program,
+      );
+      expect(result).toBe(true);
+      expect(generateCode(mod.$ast).code).toBe(`let config = {
+  serializer: {
+    other: 'config'
+  },
+  other: 'config',
+};`);
+    });
+
+    it('Sentry serializer to remove with wrapped serializer', () => {
+      const mod = parseModule(`let config = {
+  serializer: {
+    customSerializer: createSentryMetroSerializer(wrappedSerializer()),
+    other: 'config',
+  },
+  other: 'config',
+};`);
+      const result = removeSentrySerializerFromMetroConfig(
+        mod.$ast as t.Program,
+      );
+      expect(result).toBe(true);
+      expect(generateCode(mod.$ast).code).toBe(`let config = {
+  serializer: {
+    customSerializer: wrappedSerializer(),
+    other: 'config',
+  },
+  other: 'config',
+};`);
+    });
+  });
+});
+
+function getModuleExportsObject(
+  mod: ProxifiedModule,
+  index = 0,
+): t.ObjectExpression {
+  return (
+    ((mod.$ast as t.Program).body[index] as t.ExpressionStatement)
+      .expression as t.AssignmentExpression
+  ).right as t.ObjectExpression;
+}