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.

[jpmunz]

Mentioning open-telemetry/opentelemetry-js-contrib#2359 here so that the PRs get linked

[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