How do you use the tracing feature in your browser apps?

[flaksp]

Hello.

I started investigating how Sentry Tracing works to measure performance of my app. And at first it seems not very comfortable to use. And the documentations looks very poor.

For example, I have a click event on some button. Should I start tracing on lower abstraction layer (browser event layer), or on upper layers: application and domain? If I start it on an event layer, how do I forward Span to application and domain layers (to create nested Spans)? The only way to do that is always passing some Sentry context to all functions I call which looks terrible. Do your traced functions start with const span = parentSpan.startChild() and end with span.finish() or you organise it differently?

I really want to know your recipes: where do you use tracing and where you don't? And how you organise it inside your code? Do you have any utilities and helpers? For example, do you measure every user interaction (every browser event) or you measure only domain-specific operations?

I've never worked with tracing, especially in JS, so I don't know recipes yet. Hope someone can share some wisdom 🙃

[AbhiPrasad]

Hey @flaksp - we're working on automatically tracing user interactions right now. Please see: #6210

In the meantime based on https://docs.sentry.io/platforms/javascript/performance/instrumentation/custom-instrumentation/, I would use the scope to keep a reference to a span.

Sentry.configureScope(scope => scope.setSpan(span));

You can then later grab that span to finish or use

Sentry.getScope().getSpan();

This allows you to store the span somewhere without passing in Sentry context everywhere.

You can also make a helper with this.

const wrapWithSpan() {
  // you can also generate a transaction if parent span does not exist
  const parentSpan = Sentry.getScope().getSpan();
  const span = parentSpan.startChild(...);
  try {
    return callback();
  } finally {
    span.finish();
  }
}