Changes to "Bundle React Native code and images" phase of pbxproj cause build to fail

[ecexplorer]

Describe what happened Include any error message or stack trace if available. Using this script, I was able to see updates across Android, iOS, and package.json which would try to attempt uploading symbols to Datadog during the build process. As I go to test the changes made to the project.pbxproj file, I notice:

• The file now references my local path to node & npm (will break when attempted from anything but my local environment)
• I can no longer build, with the changes to the "Bundle React Native code and images" phase breaking that step for the build. I did try reverting just this portion, but still cannot get the new "Upload dSYMs to Datadog" step to work.

Steps to reproduce the issue: 📝

• Take template RN project (following getting started steps in RN documentation)
• Install Datadog for React Native
• Validate app runs
• Run wizard script as documented in README
• Attempt to build

Expected behaviour: 📝 App continues to build

Actual behaviour: 📝 App fails to build

Additional context

• Node version 14.19.3

• react-native version 0.68.6

• @datadog/react-native-wizard version 0.0.6

• @datadog/mobile-react-native version 1.3.1

• an explanation of what might cause the bug and/or how it can be fixed I expect the Datadog needs access to NPM/Node, I'll see if I can fix that "Upload dSYMs to Datadog" step and report back on this issue if I find the right way to do it through relative path, XCode tools, etc. Our team is using NVM, but from what I can tell, the bin that it does point to on my local machine is version from NVM used for our project. I'll report back on any other findings.

[louiszawadzki]

Hi @ecexplorer, thanks for reaching out!

Indeed we need to access npm (or yarn) and node to run the command that uploads the sourcemaps to Datadog, so the failure might be because of the environment.

To help us troubleshoot, could you add the following information:

• the script of your "Bundle React Native code and images" XCode Build Phase?
• the errors from your build , both with and without the bundle command changes

To see the error in details, you can run the build from XCode, then access the build log from the report navigator:

I'll then be able look into ways to make it possible for you to upload sourcemaps automatically.

Thanks a lot!

[louiszawadzki]

Hi,

We've found a better way to execute the datadog-ci cli from XCode that is much more robust. Can you try to change your build phases to the following:

Bundle javascript code and images

export NODE_BINARY=node
export SOURCEMAP_FILE=$DERIVED_FILE_DIR/main.jsbundle.map

../node_modules/.bin/datadog-ci react-native xcode ../node_modules/react-native/scripts/react-native-xcode.sh --config="../datadog-ci.json"

Upload dSYMs to Datadog

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

Note that the --config="../datadog-ci.json" is only if you pass the Datadog API key through this file.

Let me know if this work better, I'll make the PR to change the wizard :)

[louiszawadzki]

Hi,

I've gone through more testing and actually updated the snippets above. I'm going to release a new version of datadog-ci to make the commands shorter (this ones will still work after the update) and update the wizard to generate this command now.

[ecexplorer]

I'm still playing with this to see if I can find a working combo, but just trying to run the wizard outright still causes issues for me building in the XCode IDE.

I can say that it works just fine if I build from CLI (react-native run-ios), but attempting to build from the XCode IDE still results in the failure "env: node: No such file or directory" (coming from the modified "Bundle React Native code and images" script)

I've seen others run into this before where XCode "presents" a different node environment in the IDE than if it's terminal-originated. Attempting to open XCode from the terminal (sometimes a fix) didn't make a difference.

[louiszawadzki]

Hi @ecexplorer,

Could you attach some more information to help us troubleshoot?

• a screenshot or copy/paste of your "Bundle javascript code and images" XCode Build phase
• whether you use a node version manager, and if so, which one and which version?
• the return value of which node when it's run from a terminal

Also we've released version 0.1.0 of the wizard that should solve these kind of issues, maybe you'll have to run npx datadog-react-native-wizard@latest (notice the @latest) to force npm to bypass cache to use the latest version.

Before you run it, you need to remove your changes made to project.pbxproj. Or you can use the following snippets, and upgrade @datadog/datadog-ci to 2.5.0:

Bundle javascript code and images

export NODE_BINARY=node
export SOURCEMAP_FILE=$DERIVED_FILE_DIR/main.jsbundle.map

../node_modules/.bin/datadog-ci react-native xcode

Upload dSYMs to Datadog

../node_modules/.bin/datadog-ci dsyms upload $DWARF_DSYM_FOLDER_PATH

[ecexplorer]

@louiszawadzki Thanks for the help! Responses below inline

a screenshot or copy/paste of your "Bundle javascript code and images" XCode Build phase

export NODE_BINARY=node
export SOURCEMAP_FILE=$DERIVED_FILE_DIR/main.jsbundle.map
../node_modules/.bin/datadog-ci react-native xcode

whether you use a node version manager, and if so, which one and which version?

Yes (also on M1 silicon if it were somehow to make a difference) NVM v0.39.2 Node v14.19.3 NPM v6.14.17

the return value of which node when it's run from a terminal

/Users/mwood/.nvm/versions/node/v14.19.3/bin/node

Also we've released version 0.1.0...

This was the version I tried from a "clean slate". I can verify datadog-ci version and scripts matching the above exactly.

Thanks again for taking a look. I think you're dead-on with using NVM causing issues relative to ways that the XCode IDE sources node. I don't have any issues building w/o the change, but I've seen where others run into issues. I have made sure to fully clean out XCode caches, etc and I'm certain there's not an issue there. Again, if I do the build from the terminal, it works as-expected.

EDIT: Just wanted to add that this is an XCode IDE-only problem. I don't have any issues building iOS in CLI or Android (both in Android Studio and via CLI)

[louiszawadzki]

Hi @ecexplorer,

I researched this more in depth, and there are a few options for you. Basically, we need to tell XCode where to find your node executable, which isn't node since you use nvm.

For RN < 0.69: If you are working on RN projects that all use the same node version, I would recommend running ln -s $(which node) /usr/local/bin/node. This will link your node installation to a location in your $PATH and do the trick. Make sure to run the command from a location where you use the correct node version (you can run which node and check the result before). However, if you change the node version you use, you will have to run the command again.

You can also modify your build phase every time you want to build from your laptop by changing the export NODE_BINARY=node line and replacing node by the location given by which node, but that will require you to revert this change after each build.

Finally, if you want something a bit cleaner, you can either migrate to RN 0.69, or only migrate their approach that uses .xcode.env files to set variables.

For RN >= 0.69:

The new build phase template adds .xcode.env and .xcode.env.local as build phase input files. You can put the export NODE_BINARY=#result of which node line in the .xcode.env.local file that should be gitignored. If you want to know more about this change, I would suggest to read this SO answer.