feat(browser): add interactionClassName for tracing interaction

[hckhanh]

Hi Sentry team, As I mentioned in #7513 I wonder if this is a good idea if we have a class name to detect whether the click interaction should be traced or not.

interaction transaction will be recorded for the element has specific class name, Ex:

Sentry.init({
  // ...
  integrations: [
    new BrowserTracing({
      _experiments: {
        enableInteractions: true,
        interactionClassName: 'trace-this'
      },
    }),
  ],
})

function App() {
  return (
    <button className="trace-this">Trace this button</button>
  )
}

[Lms24]

Hi @hckhanh thanks for opening this PR!

I haven't been involved much in interaction transactions but I generally like the idea of having a simple way of deciding which elements should start a transaction and which shouldn't.

We do a similar thing for Session Replay, where users can apply classes or attributes to mask certain elements.

I'm gonna tag @k-fish as he and the performance team are experimenting with this feature for opinions.

If we go forward with this, we might provide a sensible default class name so that users don't have to define one on their own.

[0Calories]

Hi @hckhanh 👋

For interaction transactions, I'd like to err towards the side of automatic tracing, since I don't think it would be a good experience for most users to have to configure a list of accepted class names. It would be better if we could have a list of classes that are excluded, or have a predefined exclusion class which you can put on your elements if you don't want them to be able to trigger interactions.

Keep in mind that this is an experimental feature and still very early in development, so I don't recommend using it just yet 😄. I will be introducing guard rails in the future that will prevent useless interaction transactions from being sent and eating up transaction quota, and there will also be more configuration options available.

If you still want to try out this feature but only have it work for specific classNames, here's what I recommend instead:

When you initialize Sentry in your code, configure a tracesSampler function, and in here you can determine whether the transaction should be sent or not. On these UI transactions, we store interaction spans, which contain the DOM element in the span's description (see #7331). In the tracesSampler function, you can filter for the interaction span and see if its description contains one of your whitelisted classNames and return 1 (or a lower rate if you'd prefer) in those cases, and 0 for everything else. That should be enough to cover your usecase here!

[hckhanh]

When you initialize Sentry in your code, configure a tracesSampler function, and in here you can determine whether the transaction should be sent or not. On these UI transactions, we store interaction spans, which contain the DOM element in the span's description (see #7331). In the tracesSampler function, you can filter for the interaction span and see if its description contains one of your whitelisted classNames and return 1 (or a lower rate if you'd prefer) in those cases, and 0 for everything else. That should be enough to cover your usecase here!

Hi @0Calories, that is what i need for. Tracking user interactions is really meaningful for SPA apps.

[AbhiPrasad]

Given this is being already addressed going to close this PR for now. @hckhanh thanks again for opening a PR, please reach out if you have any other feedback!

[hckhanh]

hi @0Calories, I cannot see any description field that content the DOM information of the span. Can you check for me?

[0Calories]

Hi @hckhanh , you're right sorry about that! It seems you can't access span data from tracesSampler, you can try beforeSendTransaction instead. You'll have access to the full event object in this callback, including the spans.

Unfortunately you won't be able to set a sampling rate here, but you can return null in the callback to prevent the transaction from being sent if it doesn't match your criteria.

Here's a recent example of me using it which should help you find what you're looking for:
getsentry/sentry#46340