feat: wrap method, profiler with App start and Stall tracking

[jennmueng]

📢 Type of change

• Bugfix
• New feature
• Enhancement
• Refactoring

📜 Description

Adds a new Sentry.wrap method that wraps the app with a React Profiler to profile the app start, and a touch event boundary. Currently, we wrap the root component with just a ReactNativeProfiler and a TouchEventBoundary. We will be able to instrument more things in the future (such as possibly auto-detect routing instrumentation, transactions triggered by touch events, etc).

Now, the app start finishes when the root component finishes mounting. If Sentry.wrap isn't used, then the app start will fall back to the Javascript global scope initialization timestamp.

Other Changes

• Bumps sentry-javascript dependencies to 6.12.0-beta.2.
• Refactors the stall tracking integration to now be part of the ReactNativeTracing package for consistency.
• Condenses the option flags for auto performance into enableAutoPerformanceTracking, which will be enabled by default. This means that you will need to just provide a sample rate to start using auto performance.
• Individual enableAppStartTracking, enableNativeFramesTracking, and enableStallTracking flags available as options to ReactNativeTracing.

💡 Motivation and Context

Part of #1701

💚 How did you test it?

Wrote, updated unit tests and tested on both iOS and Android sample apps.

📝 Checklist

• I reviewed submitted code
• I added tests to verify changes
• All tests passing
• No breaking changes

[github-actions]

	Fails
🚫	Please consider adding a changelog entry for the next release.

	Messages
📖	Do not forget to update Sentry-docs with your feature once the pull request gets approved.

Instructions and example for changelog

Please add an entry to CHANGELOG.md to the "Unreleased" section under the following heading:

1. feat: For new user-visible functionality.
2. fix: For user-visible bug fixes.
3. ref: For features, refactors and bug fixes in internal operations.

To the changelog entry, please add a link to this PR (consider a more descriptive message):

- wrap method, profiler with App start and Stall tracking. (1728)

If none of the above apply, you can opt out by adding #skip-changelog to the PR description.

Generated by 🚫 dangerJS against 270f30c

[AbhiPrasad]

Let’s not bump to the beta please.

[bruno-garcia]

We won't if you release it before Tuesday next week :)

[AbhiPrasad]

We'll make it happen :)

[bruno-garcia]

Thanks!
We can merge this and ship another beta still today if there's time.

Next week bump deps to GA and GA this too

[AbhiPrasad]

Can we not do the App wrapping after we init the sdk? This way we can catch errors that occur before we wrap the app?

[bruno-garcia]

We won't if you release it before Tuesday next week :)

[AbhiPrasad]

Yeah I would separate out the sdk init with the app wrapping.

[AbhiPrasad]

We'll make it happen :)

[jennmueng]

Can we not do the App wrapping after we init the sdk? This way we can catch errors that occur before we wrap the app?

@AbhiPrasad Init is called right away before we even return the wrapped App:

sentry-react-native/src/js/sdk.tsx

Lines 119 to 146 in 1dcae6c

	export function initWith<P>(
	RootComponent: React.ComponentType<P>,
	passedOptions: ReactNativeWrapperOptions
	): React.ComponentType<P> {
	const options = _init(passedOptions);
	const tracingIntegration = getCurrentHub().getIntegration(ReactNativeTracing);
	if (tracingIntegration) {
	tracingIntegration.useAppStartWithProfiler = true;
	}
	const profilerProps = {
	...options.profilerProps,
	name: RootComponent.displayName ?? "Root",
	};
	const RootApp: React.FC<P> = (appProps) => {
	return (
	<TouchEventBoundary {...options.touchEventBoundaryProps}>
	<ReactNativeProfiler {...profilerProps}>
	<RootComponent {...appProps} />
	</ReactNativeProfiler>
	</TouchEventBoundary>
	);
	};
	return RootApp;
	}

[jennmueng]

@AbhiPrasad I see what you mean now, because this usually wraps the exports this might miss any crashes caused by things you call before the wrapping happens. Let's see how splitting it up goes.

[bruno-garcia]

wrap is tested via the e2e, right?

[AbhiPrasad]

Sweet let’s ship it