Sentry-javascript: Add text to elements in breadcrumbs ui.click

So, this is something I'd like to do, but I'm concerned about bloating our DOM serializing function to the point that it begins to add noticeable overhead to click handlers.

But, I will explore.

One easy alternative could be to just do

target = elem.outerHTML;

that will output the element clicked exactly as is. You'll loose the tree structure - but in my personal experience that doesn't help as much as seeing the full, actual element that I'm used to seeing in my code all the time and therefore more quickly can recognize.

That would solve https://github.com/getsentry/raven-js/issues/576 as well

@soroushhakami – we started with outerHTML first but deprecated it for this utility method.

The reason we didn't go with outerHTML (as @mitsuhiko commented on):

• the CSS selector format can show more information with less characters
• outerHTML can include noisy temporary data, e.g.
  
  
  
  • long data-reactid strings (in React 0.14 and earlier)
  
  
  • dynamically generated title attributes intended for tooltips
  
  
• we would get a lot of empty elements, depending on how the addEventListener target is configured
• we had buttons w/ the same class / content, that are only contextualized via ancestor information

Basically, outerHTML seems nice when you show a bunch of hypothetical examples where it looks nice, but our experience of running it live for a few weeks was that it was insufficient.

Ah I see, makes sense, thanks for the explanation! 👍

I've added ID tags to all my buttons. Surprised that they don't show up in the breadcrumbs. Even if it was a custom tag, I'd be happy with it. But ID tag seems to be ideal due to its uniqueness.

@nblasgen – if you can provide a failing test case, I'd be glad to look at what's up.

But right now the code is supposed to capture IDs, and there is a test that verifies this.

+1 for showing ID's, or a custom tag like data-sentry-id="Some text here"

I'll close this one for now, as we're aware of this missing piece and we'll be revisiting how this thing is working in the next major version.

Ref: https://github.com/getsentry/raven-js/issues/783
Ref: https://github.com/getsentry/raven-js/issues/576

Just wanted to add - I'm using react & styled-components so my class names are automatically generated, would be great to have some more context (without having to manually captureBreadcrumb):

@kamilogorek any updates on this?

Is there a possibility to fine-tune click "message"?

Maybe, more data can be passed into breadcrumbCallback for people to pick what they need without sending it to sentry by default? Maybe even a whole dom element?

@TuxujPes it'll be possible in the next major release, however not in this one, as it requires some public API changes that we can only introduce in major releases.

@kamilogorek that sounds great. Any estimations on major release date?

Somewhere near the end of Q3 (excuse me such a long response time, was on vacations).

+1 for showing ID's, or a custom tag like data-sentry-id="Some text here"

They could analyze if there is this information and take it along. If it exists, leave the selectors with a button for more information.

@hiagodotme @TuxujPes @adamreisnz this feature is already available in new SDK - https://docs.sentry.io/learn/filtering/?platform=javascript#before-breadcrumb

FYI: just don't forget that using new SDK brings you +50Kb for the bundle size #1552

@1999 it add's 12.7kB when compared to raven-js, don't use non-gzipped sizes for comparison, as it's not relevant.
Also v5 (https://github.com/getsentry/sentry-javascript/pull/1919) is going to be <15kB, so you won't have to worry about your payload increase.

@kamilogorek I'm a bit afraid of PRs with more than 200 changes files, this seems more like a completely new SDK rather than a new version. Also, what's the ETA release date of it?