Error encountered while running automate dSYMs upload on iOS builds step

djinely commented 8 months ago

Describe what happened running npx datadog-react-native-wizard got this error:

❌ Error encountered while running get sourcemaps upload variables step.
There already is a datadog-ci.json configuration file
Make sure it contains your Datadog API key under apiKey.
Your can also pass the API key as a DATADOG_API_KEY environment variable in your builds.

⚙️  Running task: add required dependencies.
⚙️  Running task: automate sourcemaps upload on iOS builds.
⚙️  Running task: automate sourcemaps upload on Android builds.
⚙️  Running task: automate dSYMs upload on iOS builds.
TypeError: Cannot read properties of undefined (reading 'project')
    at pbxProject.pbxFileReferenceSection (/Users/davidjinely/.npm/_npx/1ce2456bfb52c5c3/node_modules/xcode/lib/pbxProject.js:967:22)
    at pbxProject.addBuildPhase (/Users/davidjinely/.npm/_npx/1ce2456bfb52c5c3/node_modules/xcode/lib/pbxProject.js:874:37)
    at pbxProject.<anonymous> (/Users/davidjinely/.npm/_npx/1ce2456bfb52c5c3/node_modules/datadog-react-native-wizard/dist/commands/setup/add-xcode-dsyms-build-phase/inject-dsyms-build-phase.js:22:26)
    at pbxProject.emit (node:events:513:28)
    at pbxProject.<anonymous> (/Users/davidjinely/.npm/_npx/1ce2456bfb52c5c3/node_modules/xcode/lib/pbxProject.js:45:18)
    at ChildProcess.emit (node:events:513:28)
    at emit (node:internal/child_process:946:14)
    at processTicksAndRejections (node:internal/process/task_queues:84:21)
❌ Error encountered while running automate dSYMs upload on iOS builds step.
We could not setup a new build phase in XCode to automatically upload dSYMs files after each iOS build.
If you want to symbolicate native crashes, add a New Run Script Phase inside your project build phases and add the following script to it:

/opt/homebrew/bin/node /opt/homebrew/bin/yarn datadog-ci dsyms upload $DWARF_DSYM_FOLDER_PATH
Expected "/*" but "}" found.

Steps to reproduce the issue: 📝

Expected behaviour: 📝

Actual behaviour: 📝

Additional context

Node version: 16.19.0 / 18.13.0
react-native version: 0.70.8
@datadog/react-native-wizard version: 0.3.0
@datadog/mobile-react-native version: 2.0.1
an explanation of what might cause the bug and/or how it can be fixed

louiszawadzki commented 8 months ago

Hi @djinely, thanks for reaching out!

This error means that your project.pbxproj file was in an incorrect state when trying to run this step. Usually the reason for this is that a previous step altered it in a wrong way.

Could you share what changes you see in git in this file after running the wizard (git diff ios/**/project.pbxproj)?

Thanks a lot!

djinely commented 8 months ago

Hi @louiszawadzki and thanks for the quick reply. Attached a screenshot and also text version if it makes it easier to work with.

shellScript = "export SENTRY_PROPERTIES=sentry.properties\nexport EXTRA_PACKAGER_ARGS=\"--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map\"\nif [[ -f \"$PODS_ROOT/../.xcode.env\" ]]; then\n source \"$PODS_ROOT/../.xcode.env\"\nfi\nif [[ -f \"$PODS_ROOT/../.xcode.env.local\" ]]; then\n source \"$PODS_ROOT/../.xcode.env.local\"\nfi\n\n# The project root by default is one level up from the ios directory\nexport PROJECT_ROOT=\"$PROJECT_DIR\"/..\n\nif [[ \"$CONFIGURATION\" = *Debug* ]]; then\n export SKIP_BUNDLING=1\nfi\nif [[ -z \"$ENTRY_FILE\" ]]; then\n # Set the entry JS file using the bundler's entry resolution.\n export ENTRY_FILE=\"$(\"$NODE_BINARY\" -e \"require('expo/scripts/resolveAppEntry')\" $PROJECT_ROOT ios relative | tail -n 1)\"\nfi\n\nnode --print \"require.resolve('@sentry/cli/package.json').slice(0, -13) + '/bin/sentry-cli'\"react-native xcode --force-foreground\"$NODE_BINARY\" --print \"require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'\"\n\n";

shellScript = "export SENTRY_PROPERTIES=sentry.properties\nexport EXTRA_PACKAGER_ARGS=\"--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map\"\nif [[ -f \"$PODS_ROOT/../.xcode.env\" ]]; then\n source \"$PODS_ROOT/../.xcode.env\"\nfi\nif [[ -f \"$PODS_ROOT/../.xcode.env.local\" ]]; then\n source \"$PODS_ROOT/../.xcode.env.local\"\nfi\n\n# The project root by default is one level up from the ios directory\nexport PROJECT_ROOT=\"$PROJECT_DIR\"/..\n\nif [[ \"$CONFIGURATION\" = *Debug* ]]; then\n export SKIP_BUNDLING=1\nfi\nif [[ -z \"$ENTRY_FILE\" ]]; then\n # Set the entry JS file using the bundler's entry resolution.\n export ENTRY_FILE=\"$(\"$NODE_BINARY\" -e \"require('expo/scripts/resolveAppEntry')\" $PROJECT_ROOT ios relative | tail -n 1)\"\nfi\n\nnode --print \"require.resolve('@sentry/cli/package.json').slice(0, -13) + '/bin/sentry-cli'\"react-native xcode --force-foreground\"$NODE_BINARY\" --print \"require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'\"\n\n";REACT_NATIVE_XCODE=\"./datadog-sourcemaps.sh\"\nexport SOURCEMAP_FILE=$DERIVED_FILE_DIR/main.jsbundle.map\nundefinedREACT_NATIVE_XCODE=\"./datadog-sourcemaps.sh\"\nexport SOURCEMAP_FILE=$DERIVED_FILE_DIR/main.jsbundle.map\nundefinedREACT_NATIVE_XCODE=\"./datadog-sourcemaps.sh\"\nexport SOURCEMAP_FILE=$DERIVED_FILE_DIR/main.jsbundle.map\nundefined

louiszawadzki commented 8 months ago

Hi @djinely, thanks for your quick answer.

From your feedback I understand your app is an expo project that you have ejected, is this correct? If you haven't ejected your expo app, you can still use Datadog with the expo dev client and expo-datadog: https://docs.datadoghq.com/real_user_monitoring/mobile_and_tv_monitoring/setup/expo/

If you've already ejected, I will guide you through automating symbols files upload to Datadog as unfortunately the wizard does not support this scenario yet.

Add dependencies

You need to add @datadog/datadog-ci to your dev dependencies:

yarn add -D @datadog/datadog-ci

or

npm install --save-dev @datadog/datadog-ci

iOS Sourcemaps

As you already upload symbols to Sentry, the easiest way to upload sourcemaps on iOS to Datadog is to run the RN bundle script twice. To do so:

open your project on Xcode (run xed -b ios from your app directory)
Select your project on the left bar, then the target with your project name. Select the "Build Phases" tab and expand "Bundle React Native code and images":

At the very end of the script, add the 2 following lines:

export SOURCEMAP_FILE=$DERIVED_FILE_DIR/main.jsbundle.map
../node_modules/.bin/datadog-ci react-native xcode `"$NODE_BINARY" --print "require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'"`

At this point you should check that your app is still building on iOS before moving on to the next steps.

Android sourcemaps

In your android/app/build.gradle file, add the following after the apply from: "../../node_modules/react-native/react.gradle" line:

apply from: "../../node_modules/@datadog/mobile-react-native/datadog-sourcemaps.gradle"

iOS dSYMS

In your Xcode build phases, click on the "+" to create a "New Run Script Phase":

You can rename the phase "Upload dSYMs to Datadog" and set the following code as the script:

set -e
../node_modules/.bin/datadog-ci dsyms upload $DWARF_DSYM_FOLDER_PATH --config="../datadog-ci.json"

Android proguard mapping files

Proguard obfuscation is not enabled by default on RN projects. To check if this is the case and to upload your mapping file you can refer to our official documentation.

Adding credentials

For the upload to work, you need to provide your Datadog API key. Create a datadog-ci.json file at the root of your project containing the API key:

{
    "apiKey": "<YOUR_DATADOG_API_KEY>"
}

You can also specify the Datadog site (such as datadoghq.eu) as a DATADOG_SITE environment variable, or as a datadogSite key in your datadog-ci.json file.

Let me know if that works for you! I will also add a task for the wizard to be able to skip some tasks in case of failure :)

djinely commented 8 months ago

@louiszawadzki we haven't ejected Expo. I followed the expo-datadog and added it as a plugin accordingly. I also initialized a build to see if it's uploading the source maps. Are those being uploaded on any type of build? only distribution builds? Is there anyway to confirm uploads on dashboard?

Thanks again for the quick reply. I think the content of your reply will be very useful as part of your documentation/readme.

louiszawadzki commented 8 months ago

Hi @djinely, if you haven't ejected Expo you should NOT use datadog-react-native-wizard.

The expo-datadog config plugin is already taking care of automating the upload of mapping files when the ios/ and android/ folders of your app are generated by Expo during the build.

You can refer to our documentation for testing that the mapping files upload works.

DataDog / datadog-react-native-wizard