Add tracing extensions (stall instrumentation) to v8 APIs

[realkosty]

React Native It appears that stall tracking is only available when using deprecated startTransaction API. New customer who is onboarding would like to get stall tracking but hesitant to use the old API because of the concern that it may soon be deprecated and they would have to re-do all of their custom instrumentation.

https://github.com/getsentry/sentry-react-native/blob/91c93bdb212fd59fcadfe15af76462b8cf3cbb15/src/js/tracing/addTracingExtensions.ts#L28

┆Issue is synchronized with this Jira Improvement by Unito

[krystofwoldrich]

Let's test this with samples/react-native and ManualTrackerScreen. (If the manual tracker doesn't use the new apis lets updated.)

[lucas-zimerman]

It seems like the Stall integration is working only with the deprecated StartTransaction, when trying the new method of StartSpan it doesn't seem to work (maybe missing an event listener?)

With StartTransaction I am not sure where on the new UI that I can find the stall frames but it seems to be logged on the JSON files: https://sentry-sdks.sentry.io/performance/trace/036e440ee3d540b3bfe3517eabea6843/?field=title&field=event.type&field=project&field=user.display&field=timestamp&field=replayId&id=21705&name=&node=txn-64c5a82fbf7d4c02a05e073c33289bdc&project=5428561&query=&queryDataset=discover&sort=-timestamp&source=discover&statsPeriod=1h&timestamp=1718333510&yAxis=count%28%29

Using Sentry.StartSpan https://sentry-sdks.sentry.io/performance/trace/0585d289c5c54e8485261c4b8e7569e0/?field=title&field=event.type&field=project&field=user.display&field=timestamp&field=replayId&fov=0%2C68761.45288085938&id=21705&name=&node=txn-13a984bdc0d54dfb86f5d075e9c167ac&project=5428561&query=&queryDataset=discover&sort=-timestamp&source=discover&statsPeriod=1h&timestamp=1718334144&yAxis=count%28%29

NOTES: Not sure where the stall frames are on the new UI (you can find it on the JSON files). The website for testing the ManualTrackerScreen seems to be down, so I Altered the code slightly to load a large file from the internet.

        const response = await fetch('https://examplefile.com/file-download/102', {
          method: 'GET',
        });


        const json = await Sentry.startSpan({ name: 'Parse Response' }, async () => {
          const arrayBuffer = await response.arrayBuffer();
          const byteArray = new Uint8Array(arrayBuffer);
        });```

[krystofwoldrich]

Based on the last comment from @lucas-zimerman this the stall are attached to the active/root span.