[PLAT-11399] Bugsnag CLI iOS x React Native CLI

packages/react-native-cli/src/commands/AutomateSymbolicationCommand.ts

@@ -26,45 +26,29 @@ const HERMES_INSTRUCTIONS = `You are running a version of React Native that we c
 
 `
 
-const BUGSNAG_CLI_INSTRUCTIONS = `bugsnag:upload-android task added to your package.json - run this task to upload Android source maps after a build.
+const BUGSNAG_CLI_INSTRUCTIONS = `The following tasks have been added to your package.json and can be run after a build to upload source maps to BugSnag:
+
+    bugsnag:create-build        - Creates a new build
+    bugsnag:upload-android      - Uploads Android source maps
+    bugsnag:upload-rn-android   - Uploads React Native Android source maps
+    bugsnag:upload-dsym         - Uploads iOS dSYMs
+    bugsnag:upload-rn-ios       - Uploads React Native iOS source maps
+    bugsnag:upload              - Runs all of the above tasks
 
     See https://docs.bugsnag.com/platforms/react-native/react-native/showing-full-stacktraces for details.
 
 `
 
 export default async function run (projectRoot: string, urls: OnPremiseUrls): Promise<boolean> {
   try {
-    const { iosIntegration } = await prompts({
-      type: 'confirm',
-      name: 'iosIntegration',
-      message: 'Do you want to automatically upload JavaScript source maps as part of the Xcode build?',
-      initial: true
-    }, { onCancel })
-
-    if (iosIntegration) {
-      logger.info('Modifying the Xcode project')
-      await updateXcodeProject(projectRoot, urls[UrlType.UPLOAD], logger)
-    }
-
-    await prompts({
-      type: 'text',
-      name: 'dsymUploadInstructions',
-      message: DSYM_INSTRUCTIONS,
-      initial: 'Hit enter to continue …'
-    }, { onCancel })
-
-    const { androidIntegration } = await prompts({
+    const { bugsnagCliIntegration } = await prompts({
       type: 'confirm',
-      name: 'androidIntegration',
+      name: 'bugsnagCliIntegration',
       message: 'Do you want to install the BugSnag CLI to allow you to upload JavaScript source maps?',
       initial: true
     }, { onCancel })
 
-    if (iosIntegration) {
-      await installJavaScriptPackage(projectRoot)
-    }
-
-    if (androidIntegration) {
+    if (bugsnagCliIntegration) {
       await installBugsnagCliPackage(projectRoot, urls)
       const reactNativeVersion = await detectInstalledVersion('react-native', projectRoot)
 
@@ -79,23 +63,33 @@ export default async function run (projectRoot: string, urls: OnPremiseUrls): Pr
         }
       }
 
-      const { packageJsonIntegration } = await prompts({
-        type: 'confirm',
-        name: 'packageJsonIntegration',
-        message: 'Do you want to add an NPM task to your package.json that you can run to upload Android source maps?',
-        initial: true
-      }, { onCancel })
-
-      if (packageJsonIntegration) {
-        await writeToPackageJson(join(projectRoot, 'package.json'), urls[UrlType.UPLOAD], urls[UrlType.BUILD])
-      }
+      await writeToPackageJson(join(projectRoot, 'package.json'), urls[UrlType.UPLOAD], urls[UrlType.BUILD])
 
       await prompts({
         type: 'text',
         name: 'bugsnagCliInstructions',
         message: BUGSNAG_CLI_INSTRUCTIONS,
         initial: 'Hit enter to continue …'
       }, { onCancel })
+
+      const { iosIntegration } = await prompts({
+        type: 'confirm',
+        name: 'iosIntegration',
+        message: 'Do you want to update your Xcode build phase to output JavaScript source maps?',
+        initial: true
+      }, { onCancel })
+
+      if (iosIntegration) {
+        logger.info('Modifying the Xcode project')
+        await updateXcodeProject(projectRoot, urls[UrlType.UPLOAD], reactNativeVersion as string, logger)
+
+        await prompts({
+          type: 'text',
+          name: 'dsymUploadInstructions',
+          message: DSYM_INSTRUCTIONS,
+          initial: 'Hit enter to continue …'
+        }, { onCancel })
+      }
     }
 
     return true
@@ -139,30 +133,6 @@ async function installBugsnagCliPackage (projectRoot: string, urls: OnPremiseUrl
   logger.success('@bugsnag/cli dependency is installed')
 }
 
-async function installJavaScriptPackage (projectRoot: string): Promise<void> {
-  const alreadyInstalled = await detectInstalled('@bugsnag/source-maps', projectRoot)
-
-  if (alreadyInstalled) {
-    logger.warn('@bugsnag/source-maps is already installed, skipping')
-    return
-  }
-
-  logger.info('Adding @bugsnag/source-maps dependency')
-
-  const packageManager = await guessPackageManager(projectRoot)
-
-  const { version } = await prompts({
-    type: 'text',
-    name: 'version',
-    message: 'If you want the latest version of @bugsnag/source-maps hit enter, otherwise type the version you want',
-    initial: 'latest'
-  }, { onCancel })
-
-  await install(packageManager, '@bugsnag/source-maps', version, true, projectRoot)
-
-  logger.success('@bugsnag/source-maps dependency is installed')
-}
-
 async function writeToPackageJson (packageJsonPath: string, uploadUrl?: string, buildUrl?: string): Promise<void> {
   try {
     const data = await fs.readFile(packageJsonPath, 'utf8')
@@ -171,21 +141,31 @@ async function writeToPackageJson (packageJsonPath: string, uploadUrl?: string,
     // Default to two spaces if indent cannot be detected
     const existingIndent = detectIndent(data).indent || '  '
 
-    let uploadCommand = 'bugsnag-cli upload react-native-android'
-    let buildCommand = 'bugsnag-cli create-build'
+    let createBuildCommand = 'bugsnag-cli create-build'
+    let rnAndroidUploadCommand = 'bugsnag-cli upload react-native-android'
+    let androidUploadCommand = 'bugsnag-cli upload android android/'
+    let rnIosUploadCommand = 'bugsnag-cli upload react-native-ios'
+    let dsymUploadCommand = 'bugsnag-cli upload dsym ios/'
 
     if (uploadUrl) {
-      uploadCommand += ` --upload-api-root-url=${uploadUrl}`
+      rnAndroidUploadCommand += ` --upload-api-root-url=${uploadUrl}`
+      androidUploadCommand += ` --upload-api-root-url=${uploadUrl}`
+      rnIosUploadCommand += ` --upload-api-root-url=${uploadUrl}`
+      dsymUploadCommand += ` --upload-api-root-url=${uploadUrl}`
     }
 
     if (buildUrl) {
-      buildCommand += ` --build-api-root-url=${buildUrl}`
+      createBuildCommand += ` --build-api-root-url=${buildUrl}`
     }
 
     packageJson.scripts = {
       ...packageJson.scripts,
-      'bugsnag:create-build': buildCommand,
-      'bugsnag:upload-android': uploadCommand
+      'bugsnag:create-build': createBuildCommand,
+      'bugsnag:upload-android': androidUploadCommand,
+      'bugsnag:upload-rn-android': rnAndroidUploadCommand,
+      'bugsnag:upload-dsym': dsymUploadCommand,
+      'bugsnag:upload-rn-ios': rnIosUploadCommand,
+      'bugsnag:upload': androidUploadCommand + ' && ' + rnAndroidUploadCommand + ' && ' + dsymUploadCommand + ' && ' + rnIosUploadCommand
     }
 
     const updatedPackageJson = JSON.stringify(packageJson, null, existingIndent)

packages/react-native-cli/src/lib/Xcode.ts

@@ -1,19 +1,18 @@
 import { Logger } from '../Logger'
 import { promises as fs } from 'fs'
 import path from 'path'
-import xcode, { Project } from 'xcode'
+import xcode from 'xcode'
+import semver from 'semver'
 
 const DOCS_LINK = 'https://docs.bugsnag.com/platforms/react-native/react-native/showing-full-stacktraces/#ios'
 const UNLOCATED_PROJ_MSG = `The Xcode project was not in the expected location and so couldn't be updated automatically.
 
-Update the "Bundle React Native Code And Images" build phase with the following environment variables:
-export EXTRA_PACKAGER_ARGS="--sourcemap-output $TMPDIR/$(md5 -qs "$CONFIGURATION_BUILD_DIR")-main.jsbundle.map""
+Please see ${DOCS_LINK} for more information`
 
-See ${DOCS_LINK} for more information`
+const EXTRA_INPUT_FILES = ['"$(SRCROOT)/.xcode.env.local"', '"$(SRCROOT)/.xcode.env"']
+const EXTRA_PACKAGER_ARGS = 'export SOURCE_MAP_PATH=$(pwd)/build/sourcemaps\nif [ ! -d "$SOURCE_MAP_PATH" ]; then\n\tmkdir -p "$SOURCE_MAP_PATH";\nfi\nexport EXTRA_PACKAGER_ARGS="--sourcemap-output $(pwd)/build/sourcemaps/main.jsbundle.map"'
 
-const EXTRA_PACKAGER_ARGS = 'export EXTRA_PACKAGER_ARGS="--sourcemap-output $TMPDIR/$(md5 -qs "$CONFIGURATION_BUILD_DIR")-main.jsbundle.map"'
-
-export async function updateXcodeProject (projectRoot: string, endpoint: string|undefined, logger: Logger) {
+export async function updateXcodeProject (projectRoot: string, endpoint: string|undefined, reactNativeVersion: string|undefined, logger: Logger) {
   const iosDir = path.join(projectRoot, 'ios')
   const xcodeprojDir = (await fs.readdir(iosDir)).find(p => p.endsWith('.xcodeproj'))
 
@@ -35,20 +34,18 @@ export async function updateXcodeProject (projectRoot: string, endpoint: string|
   const buildPhaseMap = proj?.hash?.project?.objects?.PBXShellScriptBuildPhase || []
   logger.info('Ensuring React Native build phase outputs source maps')
 
-  const didUpdate = await updateBuildReactNativeTask(buildPhaseMap, logger)
-  logger.info('Adding build phase to upload source maps to Bugsnag')
-
-  const didAdd = await addUploadSourceMapsTask(proj, buildPhaseMap, endpoint, logger)
-  const didChange = didUpdate || didAdd
+  const didUpdate = await updateBuildReactNativeTask(buildPhaseMap, iosDir, reactNativeVersion, logger)
 
-  if (!didChange) return
+  if (!didUpdate) return
 
   await fs.writeFile(pbxProjPath, proj.writeSync(), 'utf8')
   logger.success('Written changes to Xcode project')
 }
 
-async function updateBuildReactNativeTask (buildPhaseMap: Record<string, Record<string, unknown>>, logger: Logger): Promise<boolean> {
+async function updateBuildReactNativeTask (buildPhaseMap: Record<string, Record<string, unknown>>, iosDir: string, reactNativeVersion: string | undefined, logger: Logger): Promise<boolean> {
   let didAnythingUpdate = false
+  let didThisUpdate
+
   for (const shellBuildPhaseKey in buildPhaseMap) {
     const phase = buildPhaseMap[shellBuildPhaseKey]
     // The shell script can vary slightly... Vanilla RN projects contain
@@ -57,53 +54,77 @@ async function updateBuildReactNativeTask (buildPhaseMap: Record<string, Record<
     //   `node --print "require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'"`
     // so we need a little leniency
     if (typeof phase.shellScript === 'string' && phase.shellScript.includes('/react-native-xcode.sh')) {
-      let didThisUpdate
-      [phase.shellScript, didThisUpdate] = addExtraPackagerArgs(shellBuildPhaseKey, phase.shellScript, logger)
-      if (didThisUpdate) {
-        didAnythingUpdate = true
+      if (reactNativeVersion) {
+        // If we're dealing with RN >= 0.69.0 setup the .xcode.env file to export the source maps to our happy path
+        if (semver.gte(reactNativeVersion, '0.69.0')) {
+          [phase.inputPaths, didThisUpdate] = addExtraInputFiles(shellBuildPhaseKey, phase.inputPaths as string[], logger)
+          if (didThisUpdate) {
+            didAnythingUpdate = true
+          }
+        } else {
+          // If we're dealing with RN < 0.69.0 add the extra pacakge arguments to the xcode build phase as use of the .xcode.env file is not supported.
+          [phase.shellScript, didThisUpdate] = addExtraPackagerArgs(shellBuildPhaseKey, phase.shellScript, logger)
+          if (didThisUpdate) {
+            didAnythingUpdate = true
+          }
+        }
       }
     }
   }
-  return didAnythingUpdate
-}
 
-async function addUploadSourceMapsTask (
-  proj: Project,
-  buildPhaseMap: Record<string, Record<string, unknown>>,
-  endpoint: string|undefined,
-  logger: Logger
-): Promise<boolean> {
-  for (const shellBuildPhaseKey in buildPhaseMap) {
-    const phase = buildPhaseMap[shellBuildPhaseKey]
-    if (typeof phase.shellScript === 'string' && phase.shellScript.includes('bugsnag-react-native-xcode.sh')) {
-      logger.warn('An "Upload source maps to Bugsnag" build phase already exists')
-      return false
-    }
-  }
+  await updateXcodeEnv(iosDir, logger)
 
-  let shellScript = 'SOURCE_MAP="$TMPDIR/$(md5 -qs "$CONFIGURATION_BUILD_DIR")-main.jsbundle.map" ../node_modules/@bugsnag/react-native/bugsnag-react-native-xcode.sh'
+  return didAnythingUpdate
+}
 
-  if (endpoint) {
-    shellScript = `export ENDPOINT='${endpoint}'\\n${shellScript}`
+function addExtraInputFiles (phaseId: string, existingInputFiles: string[], logger: Logger): [string[], boolean] {
+  if (arrayContainsElements(existingInputFiles, EXTRA_INPUT_FILES)) {
+    logger.info(`The "Bundle React Native Code and Images" build phase (${phaseId}) already includes the required arguments`)
+    return [existingInputFiles, false]
   }
+  return [EXTRA_INPUT_FILES.concat(existingInputFiles), true]
+}
 
-  proj.addBuildPhase(
-    [],
-    'PBXShellScriptBuildPhase',
-    'Upload source maps to Bugsnag',
-    null,
-    { shellPath: '/bin/sh', shellScript }
-  )
-
-  return true
+function arrayContainsElements (mainArray: any[], subArray: any[]): boolean {
+  return subArray.every(element => mainArray.some(mainElement => mainElement === element))
 }
 
 function addExtraPackagerArgs (phaseId: string, existingShellScript: string, logger: Logger): [string, boolean] {
   const parsedExistingShellScript = JSON.parse(existingShellScript) as string
   if (parsedExistingShellScript.includes(EXTRA_PACKAGER_ARGS)) {
-    logger.warn(`The "Bundle React Native Code and Images" build phase (${phaseId}) already includes the required arguments`)
+    logger.info(`The "Bundle React Native Code and Images" build phase (${phaseId}) already includes the required arguments`)
     return [existingShellScript, false]
   }
   const scriptLines = parsedExistingShellScript.split('\n')
   return [JSON.stringify([EXTRA_PACKAGER_ARGS].concat(scriptLines).join('\n')), true]
 }
+
+async function updateXcodeEnv (iosDir: string, logger: Logger): Promise<boolean> {
+  const searchString = 'SOURCEMAP_FILE='
+  const envFilePath = path.join(iosDir, '.xcode.env')
+
+  try {
+    await fs.readFile(envFilePath)
+
+    const xcodeEnvData = await fs.readFile(envFilePath, 'utf8')
+
+    if (xcodeEnvData?.includes(searchString)) {
+      logger.warn(`The .xcode.env file already contains a section for "${searchString}"`)
+      return false
+    } else {
+      const newData = `${xcodeEnvData}\n\n# React Native Source Map File\nexport SOURCE_MAP_PATH=$(pwd)/build/sourcemaps\nif [ ! -d "$SOURCE_MAP_PATH" ]; then\n\tmkdir -p "$SOURCE_MAP_PATH";\nfi\nexport ${searchString}$(pwd)/build/sourcemaps/main.jsbundle.map`
+      await fs.writeFile(envFilePath, newData, 'utf8')
+      return true
+    }
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      const newData = `export NODE_BINARY=$(command -v node)\n\n# React Native Source Map File\nexport SOURCE_MAP_PATH=$(pwd)/build/sourcemaps\nif [ ! -d "$SOURCE_MAP_PATH" ]; then\n\tmkdir -p "$SOURCE_MAP_PATH";\nfi\nexport ${searchString}$(pwd)/build/sourcemaps/main.jsbundle.map`
+
+      await fs.writeFile(envFilePath, newData, 'utf8')
+      return true
+    } else {
+      console.error(`Error updating .xcode.env file: ${error.message}`)
+      return false
+    }
+  }
+}