Breadcrumbs of category `ui.click` trigger without user interaction on page load

[adriaanmeuris]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• Provide a link to the affected event from your Sentry account

Package + Version

• @sentry/browser

Version:

5.15.0

Description

I'd like to use beforeBreadcrumb to capture ui.click breadcrumbs and change the breadcrumb message to something useful by looking at the target from hint.event.

I noticed that there are some breadcrumbs triggering on page load, and sometimes just randomly without any user interaction. Also, sometimes hint.event is a String.

How can we be sure that breadcrumbs of category ui.click only trigger when an actual click event is triggering by end users?

Repro

1. Fork this Sandbox: https://codesandbox.io/s/sleepy-grass-7d2tw
2. Add your Sentry DSN in the file sentry.js
3. Reload and you'll see faulty (?) breadcrumbs (number 1 and 2):

[kamilogorek]

How can we be sure that breadcrumbs of category ui.click only trigger when an actual click event is triggering by end users?

We capture all events triggered on DOM elements. In this case, Vue is doing it for you (you can confirm that when you remove both @click.prevent clauses).
What I'd try first, is check for hint.event instanceof Event. In most cases it means that event was triggered natively by user.

[adriaanmeuris]

Thanks for clarifying - is there any way I can completely skip this instrumentation?

sentry-javascript/packages/utils/src/instrument.ts

Line 326 in dd7bf92

global.document.addEventListener('click', domEventHandler('click', triggerHandlers.bind(null, 'dom')), false);

The reason I'm asking, is because the beforeBreadcrumb handler triggers when new elements with click-handlers are added to the DOM after an async call (e.g. loading content from an API).

This happens even when the user does not click on that element, which kind of defeats the whole idea of having ui.click breadcrumbs as there was no user interaction on that element 🙂

I'd be happy to add a instanceof Event check, but I'd rather disable the breadcrumbs integration entirely and make a custom implementation for Vue in this case.

I've set up a repro to simulate this behaviour: https://codesandbox.io/s/fragrant-grass-hpqce

1. Fork this sandbox
2. Enter your DSN in sentry.js
3. Click Load content
4. beforeBreadcrumb triggers for the button with a click-handler inside the loaded content, even though it's not clicked:

[kamilogorek]

Thanks for clarifying - is there any way I can completely skip this instrumentation?

Sentry.init({
  // ...
  integrations: [new Sentry.Integrations.Breadcrumbs({ dom: false })]
});

This happens even when the user does not click on that element, which kind of defeats the whole idea of having ui.click breadcrumbs as there was no user interaction on that element 🙂

Agree, however, we don't trigger it ourselves, and none of the other frameworks does that as well.

[adriaanmeuris]

Great, thanks for clarifying!