[Feature] User readable dom element selectors in breadcrumbs

[HazAT]

Right now it's hard to identify elements a user clicked on when trying to follow breadcrumb trails see:

Because the way we serialize dom elements doesn't work well with autogenerated class names.
It would be cool if users could define an attribute name we prefer when serializing dom elements.

So how it could work is that we extend BreadcrumbsOptions so
dom: boolean | { serializeAttribute: string } and take this attribute instead of the classname / id
https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/integrations/breadcrumbs.ts#L163

Ref:
https://forum.sentry.io/t/dom-interactions-selectors/3592
https://forum.sentry.io/t/ui-click-dom-events-with-a-custom-sentry-html-tag/1084

The trail to follow how to implement:
https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/integrations/breadcrumbs.ts#L163
->

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

Line 9 in d1d6c41

export function htmlTreeAsString(elem: unknown): string {

->

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

Line 57 in d1d6c41

function _htmlElementAsString(el: unknown): string {

[kamilogorek]

#3015 (comment)
#2259 (comment)
#3011 (comment)
#1467 (comment)

[matejminar]

Btw I always wondered why don’t we show the text content of the clicked thing - Open in Discover vs .css-166friy.e1b8u3ky1. Is there some technical limitation?

Might not play nicely with multi-lang apps but still could be more useful.

We even can have this as an option (useContentText: boolean).

[NoriSte]

It all started from a tweet of mine, my bad that I searched through Google and not through the Github issues!

Thanks @HazAT for raising the issue, and thanks @kamilogorek for the helpful links!! ❤️