@sentry/tracing

Important Changes

• New Performance APIs

  • feat: Update span performance API names

  • feat(core): Introduce startSpanManual

This release introduces a new set of top level APIs for the Performance Monitoring SDKs. These aim to simplify creating spans and reduce the boilerplate needed for performance instrumentation. The three new methods introduced are Sentry.startSpan, Sentry.startInactiveSpan, and Sentry.startSpanManual. These methods are available in the browser and node SDKs.

Sentry.startSpan wraps a callback in a span. The span is automatically finished when the callback returns. This is the recommended way to create spans.

// Start a span that tracks the duration of expensiveFunction
const result = Sentry.startSpan({ name: 'important function' }, () => {
  return expensiveFunction();
});

// You can also mutate the span wrapping the callback to set data or status
Sentry.startSpan({ name: 'important function' }, (span) => {
  // span is undefined if performance monitoring is turned off or if
  // the span was not sampled. This is done to reduce overhead.
  span?.setData('version', '1.0.0');
  return expensiveFunction();
});

If you don't want the span to finish when the callback returns, use Sentry.startSpanManual to control when the span is finished. This is useful for event emitters or similar.

// Start a span that tracks the duration of middleware
function middleware(_req, res, next) {
  return Sentry.startSpanManual({ name: 'middleware' }, (span, finish) => {
    res.once('finish', () => {
      span?.setHttpStatus(res.status);
      finish();
    });
    return next();
  });
}

Sentry.startSpan and Sentry.startSpanManual create a span and make it active for the duration of the callback. Any spans created while this active span is running will be added as a child span to it. If you want to create a span without making it active, use Sentry.startInactiveSpan. This is useful for creating parallel spans that are not related to each other.

const span1 = Sentry.startInactiveSpan({ name: 'span1' });

someWork();

const span2 = Sentry.startInactiveSpan({ name: 'span2' });

moreWork();

const span3 = Sentry.startInactiveSpan({ name: 'span3' });

evenMoreWork();

span1?.finish();
span2?.finish();
span3?.finish();

Other Changes

• core: Export BeforeFinishCallback type

• integration: Ensure LinkedErrors integration runs before all event processors

• node-experimental: Keep breadcrumbs on transaction

• redux: Add 'attachReduxState' option

• remix: Accept org, project and url as args to upload script

• utils: Prevent iterating over VueViewModel

• utils: uuidv4 fix for cloudflare

• core: Always use event message and exception values for ignoreErrors

• nextjs: Add new potential location for Next.js request AsyncLocalStorage

• node-experimental: Ensure we only create HTTP spans when outgoing

• node-experimental: Ignore OPTIONS & HEAD requests

• node-experimental: Ignore outgoing Sentry requests

• node-experimental: Require parent span for pg spans

• node-experimental: Use Sentry logger as Otel logger

• node-otel: Refactor OTEL span reference cleanup

• react: Switch to props in useRoutes

• remix: Add glob to Remix SDK dependencies.

• replay: Ensure handleRecordingEmit aborts when event is not added

• replay: Fully stop & restart session when it expires

Work in this release contributed by @Duncanxyz and @malay44. Thank you for your contributions!

Bundle size