feat(core): Introduce Sentry.startActiveSpan and Sentry.startSpan

[AbhiPrasad]

ref #8724

This PR introduces two new methods to the JavaScript SDK's public API. Sentry.startActiveSpan and Sentry.startSpan, detailed in the RFC about the new performance API.

Sentry.startActiveSpan automatically wraps a callback with a span and makes that span the active span for the execution context of the callback. The callback can be async or sync, and can return arbitrary values.

Sentry.startSpan just creates a span, but does not wrap it in a callback. It needs to be explicitly set on the scope just like Sentry.startTransaction.

const result = Sentry.startActiveSpan({ name: importantThing }, async () => {
  await someWork();
  return Sentry.startActiveSpan({ op: 'db', name: 'query-stuff' }, () => expensiveQuery());
});
// result === expensiveQuery() 

Under the hood these methods will create a transaction or span depending on if there is already an active span on the scope.

[github-actions]

size-limit report 📦

Path	Size
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)	75.12 KB (+0.36% 🔺)
@sentry/browser (incl. Tracing) - Webpack (gzipped)	31.14 KB (+0.09% 🔺)
@sentry/browser - Webpack (gzipped)	21.82 KB (+0.03% 🔺)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)	69.73 KB (+0.27% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)	28.18 KB (+0.1% 🔺)
@sentry/browser - ES6 CDN Bundle (gzipped)	20.18 KB (+0.05% 🔺)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)	219.89 KB (+0.38% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)	84.78 KB (+0.13% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)	59.86 KB (+0.04% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)	31.04 KB (+0.09% 🔺)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)	65.3 KB (+0.39% 🔺)
@sentry/react - Webpack (gzipped)	21.85 KB (+0.03% 🔺)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)	92.94 KB (+0.31% 🔺)
@sentry/nextjs Client - Webpack (gzipped)	50.66 KB (+0.11% 🔺)

[mydea]

l: The naming is a bit confusing IMHO, as it appears as if this would just get the currently active span, but actually we create a new active span? What about e.g. createNewSpan or createChildSpan or something like this?

[AbhiPrasad]

great point - renamed

[mydea]

l: Should we keep the trace tests around? 🤔 not sure, maybe it's fine to remove them as well 🤷

[AbhiPrasad]

I replaced the trace tests with startActiveSpan. I'll be removing trace afterwards considering it was an internal API.