Add a React Native example app to the demo

[jpmunz]

Changes

Hello! I thought it would be valuable to include a React Native example app in this demo to show how mobile apps could be instrumented using the existing JS OTEL packages. I also thought this could serve as a bit of a TODO list showing some of the rough edges / missing functionality that current React Native developers would face when trying to instrument and hopefully keep updating this as those gaps are filled

A note on the size of the diff: unfortunately there's a ton of boilerplate files that are required for just spinning up a blank new app that make this harder to review. I have these on a separate commit but don't have permission to push that up as a branch, if someone could do that this PR could then be pointed to it and only show the files that are relevant to the demo similar to what you'd see on cde1345. Otherwise using the file filters to hide things like the .png, .xml, etc. will help narrow down to the relevant changes

Some notes on the overall approach here curious to hear thoughts or disagreement:

• There's copy and pasting from src/frontend since that is also using React. However there were enough tweaks needed to make it work with React Native that it didn't seem straightforward to try and have these two apps share common files and also I think useful for demo purposes to have each be self-contained
• I haven't yet but I'm tempted to commit protos/demo.ts and pb/demo.proto just for this component, it's a bit weird since they are generated files but since this app isn't run inside Docker users will have to generate those files themselves which adds a bit of friction for running the demo committed now
• I only implemented a subset of the functionality demonstrated in the web app with this PR in the interest of hopefully getting something initial in place and tackling the rest later
• I haven't done the docs changes yet, would that be adding a new page under https://opentelemetry.io/docs/demo/services/ ? I can tackle that next if this addition overall seems reasonable

Using the demo:

Merge Requirements

For new features contributions, please make sure you have completed the following
essential items:

• CHANGELOG.md updated to document new feature additions
• Appropriate documentation updates in the docs
• Appropriate Helm chart updates in the helm-charts

Maintainers will not merge until the above have been completed. If you're unsure
which docs need to be changed ping the
@open-telemetry/demo-approvers.

[julianocosta89]

@jpmunz this looks great!

We had some similar work presented at a previous SIG meeting some time ago by @breedx-splk 's team.
Were you involved on that?

Are you able to join a OTel Demo SIG meeting to present this to everyone?

Also, adding a README on how to run the service would help a lot.

Regarding the doc page, yes, that would be under demo/services, but it may take a while to review this PR as it is a 25K lines of code addition.

[breedx-splk]

We had some similar work presented at a previous SIG meeting some time ago by @breedx-splk 's team. Were you involved on that?

I don't believe that they were...but this is super interesting. React native on mobile is asked about quite a lot -- so having this available in/through the android app would also be amazing and helpful. It would allow us to demonstrate the client-side RUM interop (currently nonexistent!) and compare/contrast features.

Logged this issue to track: open-telemetry/opentelemetry-android#696

[puckpuck]

I haven't yet but I'm tempted to commit protos/demo.ts and pb/demo.proto just for this component, it's a bit weird since they are generated files but since this app isn't run inside Docker users will have to generate those files themselves which adds a bit of friction for running the demo

You can move forward with committing the generated proto files. We recently launched an effort to do the same for all other services in the Demo.

[jpmunz]

We had some similar work presented at a previous SIG meeting some time ago by @breedx-splk 's team. Were you involved on that?
Are you able to join a OTel Demo SIG meeting to present this to everyone?

@julianocosta89 I was not involved in that previous meeting but I'm happy to join the next one (Nov 27th?) and present there!

Also, adding a README on how to run the service would help a lot.

I had included https://github.com/open-telemetry/opentelemetry-demo/blob/3404e12a242936bab02ad3a4d5e093fdb59839d1/src/reactnativeapp/README.md, did that include what you had in mind or was there something else I could add?

[jpmunz]

I don't believe that they were...but this is super interesting. React native on mobile is asked about quite a lot -- so having this available in/through the android app would also be amazing and helpful. It would allow us to demonstrate the client-side RUM interop (currently nonexistent!) and compare/contrast features.

Logged this issue to track: open-telemetry/opentelemetry-android#696

@breedx-splk that's great would be cool if the UI here could be re-used to demo the Android SDK. Another possible avenue that I'll put out there could be using RN Native Modules to wrap the Android (and potentially Swift) OTEL SDKs in a thin JS package. That might be less flexible but could be appealing to devs who didn't want to deal with the setup on the native side and just wanted to add a JS package that handled it for them

[julianocosta89]

We had some similar work presented at a previous SIG meeting some time ago by @breedx-splk 's team. Were you involved on that?
Are you able to join a OTel Demo SIG meeting to present this to everyone?

@julianocosta89 I was not involved in that previous meeting but I'm happy to join the next one (Nov 27th?) and present there!

Yes! Nov 27th, but I'll try to put some time into reviewing the PR till there.

Also, adding a README on how to run the service would help a lot.

I had included https://github.com/open-telemetry/opentelemetry-demo/blob/3404e12a242936bab02ad3a4d5e093fdb59839d1/src/reactnativeapp/README.md, did that include what you had in mind or was there something else I could add?

This is perfect, I just missed it 😅

[breedx-splk]

using RN Native Modules to wrap the Android (and potentially Swift) OTEL SDKs in a thin JS package

Yeah I think we will need both native with RN inside and potentially this long term. There will always be devs that just write pure native Android, and we need to make sure we support them first.

[julianocosta89]

@jpmunz could you add some instructions on how to get this PR up and running to someone that has 0 knowledge on reactive native and mobile development?

Following the README didn't work for me, it seems that I'm missing 1 million tools to be able to run it.
Can I run it without the Android Emulator?

Also, the ios version, I'm getting this error:

> [email protected] ios
> expo run:ios

env: load .env
env: export EXPO_PUBLIC_FRONTEND_PROXY_PORT
(node:8570) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
  CocoaPods CLI not found in your PATH, installing it now.
› Attempting to install CocoaPods CLI with Gem
Successfully installed cocoapods-1.16.2
1 gem installed
› Successfully installed CocoaPods CLI with Gem
✔ Installed CocoaPods CLI.
⚠️  Something went wrong running `pod install` in the `ios` directory.
Command `pod install` failed.
└─ Cause: spawn pod ENOENT

Not sure if that is something related to permissions. As I said, I have 0 knowledge on mobile development 😢

[jpmunz]

@jpmunz could you add some instructions on how to get this PR up and running to someone that has 0 knowledge on reactive native and mobile development?

Following the README didn't work for me, it seems that I'm missing 1 million tools to be able to run it. Can I run it without the Android Emulator?

Also, the ios version, I'm getting this error:

> [email protected] ios
> expo run:ios

env: load .env
env: export EXPO_PUBLIC_FRONTEND_PROXY_PORT
(node:8570) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
  CocoaPods CLI not found in your PATH, installing it now.
› Attempting to install CocoaPods CLI with Gem
Successfully installed cocoapods-1.16.2
1 gem installed
› Successfully installed CocoaPods CLI with Gem
✔ Installed CocoaPods CLI.
⚠️  Something went wrong running `pod install` in the `ios` directory.
Command `pod install` failed.
└─ Cause: spawn pod ENOENT

Not sure if that is something related to permissions. As I said, I have 0 knowledge on mobile development 😢

hey @julianocosta89, in the README I had included a link to https://reactnative.dev/docs/set-up-your-environment for first time setup which I was hoping would cover things in a bit more depth, were there particular bits of information you think would be better to mention explicitly in the README?

You could run on a physical Android or iOS device which might save some setup steps over launching an emulator though that would still require building the app on one of the platforms

For that particular error you could try running cd src/reactnativeapp/ios/ and pod install directly (expo tries doing this for you with the run:ios command) which might give a bit more insight into what is going wrong

[julianocosta89]

Ok, it seems that I was able to run it.
Now I'm getting a different error:

No bundle URL present.

Make sure you're running a packager server or have included a .jsbundle file in your application bundle.

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
__debug_main_executable_dylib_entry_point
start_sim
0x0
0x0

[jpmunz]

Ok, it seems that I was able to run it. Now I'm getting a different error:

@julianocosta89 hmm so in that case it seems to have built the app correctly but can't load the JS bundle, in debug builds the bundle is grabbed from a local server instead of being packaged with the app. This local server should have been started automatically as part of npm run android but you can try spinning it up separately with npm start. Maybe also double-check the output from npm run android to see that the dev server was started correctly (maybe the port it tried using was occupied), it should look like:

Hitting "Reload" on that error screen might also sometimes do the trick if the server is up but it wasn't able to connect with it right away

[julianocosta89]

@jpmunz running npm start before worked!
I wasn't able to run npm run ios though. I had to open Xcode and hit play, but maybe that's because I'm a newbie here 😅

[jpmunz]

@jpmunz running npm start before worked! I wasn't able to run npm run ios though. I had to open Xcode and hit play, but maybe that's because I'm a newbie here 😅

ah nice, glad it worked!

ya running it through Xcode can be helpful if there's a problem as it'll give more readable output than the CLI but then need to run the dev server separately (or do a release build). I also tend to run rm -rf ~/Library/Developer/Xcode/DerivedData every now and then as that seems to sometimes resolve unclear errors where Xcode has gotten confused by previous builds

[puckpuck]

Do we need the ios/reactnativeapp.xcodeproj/project.pbxproj and ios/Podfile.lock files part of this commit?

After resetting my environment and cloning this PR's branch, when I run this for iOS, those 2 files get updated. Should these 2 files be in .gitignore?

[julianocosta89]

Hey @jpmunz, I went through all files and added a couple of nit.
Regarding the README I'm starting to wonder if we can't just go with the XCode steps. I've tried all suggested steps, and all of them failed.
Just the last suggestion (open XCode and hit play) worked fine. I'm worried about having multiple users trying to run the app and getting a failure, and opening issues in the demo repo.

hey @julianocosta89 yep that makes sense, I updated the readme here 711dcb0 let me know if it addresses your concerns. I kept the npm run ios command as an option but I put the XCode steps as the first ones given

I've tested with a clean workspace and I actually need to first run the npm run ios, even though it fails, because that installs the Pods.
Without them, XCode just fail to build.

[julianocosta89]

One more item is that I may want to rename the component/service and folder. We are currently embarking on an effort to have consistent naming across all components in the demo. We want to enforce using a dash (-) in the component name where a space would be. Knowing this, is react native one or two words, and should we keep the app suffix or use mobile or nothing instead?

• reactnative-app
• react-native-app
• reactnative-mobile
• react-native-mobile
• reactnative
• react-native

@julianocosta89 do you have thoughts on this?

I'd go vote for react-native-app or astronomy-shop-app.

[jpmunz]

One more item is that I may want to rename the component/service and folder. We are currently embarking on an effort to have consistent naming across all components in the demo. We want to enforce using a dash (-) in the component name where a space would be. Knowing this, is react native one or two words, and should we keep the app suffix or use mobile or nothing instead?

• reactnative-app
• react-native-app
• reactnative-mobile
• react-native-mobile
• reactnative
• react-native

@julianocosta89 do you have thoughts on this?

I'd go vote for react-native-app or astronomy-shop-app.

Updated to react-native-app: 7b29f63

Docs repo change: open-telemetry/opentelemetry.io@61d5208

[jpmunz]

Hey @jpmunz, I went through all files and added a couple of nit.
Regarding the README I'm starting to wonder if we can't just go with the XCode steps. I've tried all suggested steps, and all of them failed.
Just the last suggestion (open XCode and hit play) worked fine. I'm worried about having multiple users trying to run the app and getting a failure, and opening issues in the demo repo.

hey @julianocosta89 yep that makes sense, I updated the readme here 711dcb0 let me know if it addresses your concerns. I kept the npm run ios command as an option but I put the XCode steps as the first ones given

I've tested with a clean workspace and I actually need to first run the npm run ios, even though it fails, because that installs the Pods. Without them, XCode just fail to build.

ah that's right, updated instructions here: 76e5cbe

[jpmunz]

Do we need the ios/reactnativeapp.xcodeproj/project.pbxproj and ios/Podfile.lock files part of this commit?

After resetting my environment and cloning this PR's branch, when I run this for iOS, those 2 files get updated. Should these 2 files be in .gitignore?

hey @puckpuck normally both these files are committed to version control, could you paste the diff you get after running these commands? I could take a look and try and see where the differences are coming from, there may be some tooling discrepancy which we may also have to lockdown

[puckpuck]

I'm not sure if the rename broke it, but I can no longer build the app in XCode. I have tried to remove all Derived Data, and refresh the pod cache with a reinstall and still get the same error on Build

[julianocosta89]

Add 3 comments, but to me it is ready to go!

[julianocosta89]

hey @puckpuck normally both these files are committed to version control, could you paste the diff you get after running these commands?

I got the following:

diff --git a/src/react-native-app/ios/Podfile.lock b/src/react-native-app/ios/Podfile.lock
index 2188143..792a960 100644
--- a/src/react-native-app/ios/Podfile.lock
+++ b/src/react-native-app/ios/Podfile.lock
@@ -1602,8 +1602,8 @@ SPEC CHECKSUMS:
   RNReanimated: 35f9ac9c3ac42d0497ebd1cce5c39d7687a8493e
   RNScreens: b32a9ff15bea7fcdbe5dff6477bc503f792b1208
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 2f71ecf38d934aecb366e686278102a51679c308
+  Yoga: ae3c32c514802d30f687a04a6a35b348506d411f
 
 PODFILE CHECKSUM: 43d62c9a2cdb594df87b33661537b45c69daf63f
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2

[jpmunz]

hey @puckpuck normally both these files are committed to version control, could you paste the diff you get after running these commands?

I got the following:

diff --git a/src/react-native-app/ios/Podfile.lock b/src/react-native-app/ios/Podfile.lock
index 2188143..792a960 100644
--- a/src/react-native-app/ios/Podfile.lock
+++ b/src/react-native-app/ios/Podfile.lock
@@ -1602,8 +1602,8 @@ SPEC CHECKSUMS:
   RNReanimated: 35f9ac9c3ac42d0497ebd1cce5c39d7687a8493e
   RNScreens: b32a9ff15bea7fcdbe5dff6477bc503f792b1208
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 2f71ecf38d934aecb366e686278102a51679c308
+  Yoga: ae3c32c514802d30f687a04a6a35b348506d411f
 
 PODFILE CHECKSUM: 43d62c9a2cdb594df87b33661537b45c69daf63f
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2

ah ya we're not pinning the cocoapods version, I made an update here that hopefully locks that down: 1e7f121

I added a note to the README unfortunately it adds a few more steps to the setup on iOS so I worded it as something optional, let me know what you think

[jpmunz]

I'm not sure if the rename broke it, but I can no longer build the app in XCode. I have tried to remove all Derived Data, and refresh the pod cache with a reinstall and still get the same error on Build

@puckpuck unfortunately I wasn't able to reproduce this, googling around a bit it seems like it could be an issue with the .xcodeproj file. Just to confirm when you open the project in XCode that you are opening reactnativeapp.xcworkspace as oppose to reactnativeapp.xcodeproj?

You had mentioned above seeing some local changes to reactnativeapp.xcodeproj were they still present? If you stash them do you get the same error?

[puckpuck]

@puckpuck unfortunately I wasn't able to reproduce this, googling around a bit it seems like it could be an issue with the .xcodeproj file. Just to confirm when you open the project in XCode that you are opening reactnativeapp.xcworkspace as oppose to reactnativeapp.xcodeproj?

You had mentioned above seeing some local changes to reactnativeapp.xcodeproj were they still present? If you stash them do you get the same error?

Yes, my issue was xcodeproj vs xcworkspace.

[puckpuck]

I'm good with this. I want to make some changes to the Readme. We could have better structure and move some of the content into different sections, but I prefer we merge this first.

Thank you again, @jpmunz, for this fantastic PR! 🤩

[julianocosta89]

@jpmunz would you be able to solve the merge conflicts?

This should be good to go!
Really appreciate your patience in guiding me through here, and all the back and forth 🙏🏽

[jpmunz]

@julianocosta89 @puckpuck thank you both for your encouragement and taking the time to dive into and review this very large PR!

[jpmunz]

@jpmunz would you be able to solve the merge conflicts?

This should be good to go! Really appreciate your patience in guiding me through here, and all the back and forth 🙏🏽

@julianocosta89 merge conflicts should be resolved now

looks like markdownlinkcheck did fail, though might be a file unrelated to this diff?

ERROR: 1 dead links found!
[✖] https://www.appdynamics.com/blog/cloud/how-to-observe-opentelemetry-demo-app-in-appdynamics-cloud/ → Status: 404
(node:283) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

[julianocosta89]

@jpmunz it looks like there still conflict 🥲
I think it was my fault, I've just merged another PR.

If you could resolve it, I can get it merged right away

[julianocosta89]

Don't worry about the broken link. It is not related to your PR

[jpmunz]

@jpmunz it looks like there still conflict 🥲 I think it was my fault, I've just merged another PR.

If you could resolve it, I can get it merged right away

@julianocosta89 np, updated!