diff --git a/docs/platforms/javascript/common/apis.mdx b/docs/platforms/javascript/common/apis.mdx index 1358e506b0023..0c22a8482fc8b 100644 --- a/docs/platforms/javascript/common/apis.mdx +++ b/docs/platforms/javascript/common/apis.mdx @@ -636,6 +636,43 @@ See Tracing Instrumentation + + Sets the passed span as the active span on the current scope. + You most likely don't need this functionality and should [use `startSpan`](#startSpan) + instead. + However, in some situations, you might prefer a span being active outside of a callback. + In this case, the combination of [`startInactiveSpan`](#startInactiveSpan) with this function + allows you to start a span, hold a reference to it and keep it active until you end it, without + the active duration being bound to the callback (as opposed to [`startSpanManual`](#startSpanManual)). + + + + ```javascript + let checkoutSpan; + + on('startCheckout', () => { + checkoutSpan = Sentry.startInactiveSpan({name: 'checkout-flow'}); + Sentry.setActiveSpanInBrowser(checkoutSpan); + }) + + doSomeWork(); + + on('endCheckout', () => { + // Ending the span automatically removes it as the active span on the scope + checkoutSpan.end(); + }) + ``` + + +See Tracing Instrumentation for more information on how to work with spans. + + + + + + ### Setting an inactive span active (browser only) + + _Available Since: `10.15.0`_ + + In browser environments, you might run into use cases, where the callback-based span APIs are not sufficient. + In such cases (see example below), you can use `startInactiveSpan` to start an initially inactive span and then + set it active until you manually end the span. + + ```javascript + let checkoutSpan; + + on('startCheckout', () => { + checkoutSpan = Sentry.startInactiveSpan({name: 'checkout-flow'}); + Sentry.setActiveSpanInBrowser(checkoutSpan); + }) + + doSomeWork(); + + on('endCheckout', () => { + // Ending the span automatically removes it as the active span + checkoutSpan.end(); + }) + ``` + + Using `startInactiveSpan` in combination with `setActiveSpanInBrowser` allows you to create an inactive span that can be made active until you manually end it. In contrast, [`startSpanManual`](#starting-an-active-span-with-manual-end-startspanmanual) allows you to end the span manually at any point, but it only remains active within the callback. + + + + Note that `setActiveSpanInBrowser` is only available in browser environments! If you're running code in the server + (for example for server-side rendering), make sure to guard this call to only run in the browser. + + + + + ## Starting Spans as Children of a Specific Span By default, any span that is started will be the child of the currently active span. If you want to have a different behavior, you can force spans to be the children of a specific span with the `parentSpan` option: