feat(instrumentation-react-native-navigation): Adding new instrumentation library to track navigation changes for React Native apps

[facostaembrace]

Which problem is this PR solving?

A couple of months ago, my team (Embrace) and I were looking for an instrumentation library that creates telemetry data for React Native applications. However, we noticed there was nothing available that adhered to open source standards. We also noticed people in Stack Overflow was asking about something similar.
This instrumentation library exposes two components that can be implemented at the root of React Native applications to create telemetry data that tracks navigation changes for the most popular navigation approaches in this environment.
Instrumentation request here.

#1089

Short description of the changes

• Introduce a new instrumentation library to kick off a React Native ecosystem.
• Exposes two components: <NativeNavigationTracker /> that creates spans and track navigation changes for wix/react-native-navigation library, and <NavigationTracker /> that is meant to be used when the application handles the navigation using @react-navigation/native or expo-router.
• Both components have the ability of adding a minimum set of configurations.
• Both components receives a custom provider, but if it is not passed it can also create telemetry data using the global one.
• Configuration for both allows to add static attributes for spans.

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: facostaembrace / name: Florencia Acosta (0a6b4a0, fc36c13, 4f0c944, e50ee23, 8716b2a, d8830b3, 7042067, 907a0d5, 883296f, ab87452, a7265bf, f6a696e, 560152a, 4104534, f3ae613, 4c06c41, 0beb3a3, 36d0e1d, fa5aae4, a671951, 8ce7abb, 54b1463, d22d280, eea8205, 0586cc0, d75cb7f, c47c8c1, 989db3e, 9227be9, 51ad05f, 6847592, be802f6, da4d57f, 201d182, 559eae1, 197db51)

[facostaembrace]

Fyi: still pending to submit the Instrumentation request that introduces this initiative.
Update: done (request here)

Dismissing stale request for changes, PR is ready for review

[jpmunz]

was curious about the large diff here, is it all just coming from devDependencies added in plugins/node/instrumentation-react-native-navigation/package.json?

[facostaembrace]

it seems like that, it's was all autogenerated. Started by a fresh state (by just running npm ci at the beginning of the implementation) + adding the devDependencies for the @opentelemenetry/instrumentation-react-native-navigation (and running the proper npm i) results in this big diff here

[jpmunz]

I seemed to have hit a typing error when following this example:
"NavigationContainerRefWithCurrent<RootParamList> is not assignable to type LegacyRef<INavigationContainer> | undefined"

I was able to ignore and it seemed to function fine but wasn't sure if that was a known issue is something particular to my setup?

[facostaembrace]

good catch! fixed

[jpmunz]

there is technically a third "inactive" state that's possible on iOS which may be worth calling out here, see: https://reactnative.dev/docs/appstate#app-states

[jpmunz]

curious if other instrumentations require similar configurable logging, may be useful to pull out into a resuable helper

[facostaembrace]

I think it's a great idea, I would vote for revisit this initiative after this PR is merged to try to isolate this as a test helper

[jpmunz]

Suggested change

	// it should set the view name in case it's useful have this as attr
	// it should set the view name in case it's useful to have this as an attr

[jpmunz]

seems like this file was accidentally updated

[facostaembrace]

true. reverting. thanks for catching this

[codecov]

Codecov Report

Attention: Patch coverage is 93.49112% with 11 lines in your changes missing coverage. Please review.

Project coverage is 90.81%. Comparing base (d0fb135) to head (201d182).

Files with missing lines	Patch %	Lines
...ct-native-navigation/src/utils/hooks/useConsole.ts	55.55%	8 Missing ⚠️
...n-react-native-navigation/src/utils/spanFactory.ts	94.44%	2 Missing ⚠️
...native-navigation/src/hooks/useAppStateListener.ts	94.11%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main    #2359    +/-   ##
========================================
  Coverage   90.80%   90.81%            
========================================
  Files         169      176     +7     
  Lines        8018     8187   +169     
  Branches     1632     1667    +35     
========================================
+ Hits         7281     7435   +154     
- Misses        737      752    +15     

Files with missing lines	Coverage Δ
...navigation/src/hooks/useNativeNavigationTracker.ts	100.00% <100.00%> (ø)
...ative-navigation/src/hooks/useNavigationTracker.ts	100.00% <100.00%> (ø)
...ct-native-navigation/src/utils/hooks/useSpanRef.ts	100.00% <100.00%> (ø)
...-native-navigation/src/utils/hooks/useTracerRef.ts	100.00% <100.00%> (ø)
...native-navigation/src/hooks/useAppStateListener.ts	94.11% <94.11%> (ø)
...n-react-native-navigation/src/utils/spanFactory.ts	94.44% <94.44%> (ø)
...ct-native-navigation/src/utils/hooks/useConsole.ts	55.55% <55.55%> (ø)

... and 1 file with indirect coverage changes

---- 🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[kndri]

So @facostaembrace - do you need another maintainer here to get this reviewed? If so I volunteer to help maintain this with you.

[facostaembrace]

So @facostaembrace - do you need another maintainer here to get this reviewed? If so I volunteer to help maintain this with you.

Hi @kndri ! I think I already have maintainers for this new package but all help is well received!
What I need now is an admin approving the workflows for running once again and then hitting the merge button.
But for sure you can take a look and provide feedback if you want!

Thanks for the interest!!

[JamieDanielson]

We'd like to help keep this moving forward, and want to give you more leeway especially as this is 0.1.0 and it will be valuable to get feedback on how this works. This is the top requested feature in js-contrib.

@facostaembrace @jpmunz we'd like to add you to a triagers team and set a specific path in the CODEOWNERS path for you. We are working on this for other packages as well to ensure folks are pinged and assigned appropriately, as well as given the power to approve PRs (with the green check). To do this we need you to join the OpenTelemetry org.

I am working on some updated guidelines to add to the repo, but in the meantime please follow these guidelines in the community repo for member requirements.

[facostaembrace]

@JamieDanielson I see in the Issue's template that I should mention two sponsors that "meet the sponsor requirements listed in the community membership guidelines". Am right assuming I can tag you + one person from the regular JS SIG meeting? (we can also discuss about this during tomorrow's meeting). Thanks!