feat: Add serializeAttribute option to breadcrumbs / dom.

[onurtemizkan]

Resolves: #3604

Added serializeAttribute option to Breadcrumbs / dom integration, to allow users to define an element attribute to be serialized in breadcrumbs instead of ids or class names.

[github-actions]

size-limit report

Path	Size
@sentry/browser - CDN Bundle (gzipped)	20.83 KB (+0.27% 🔺)
@sentry/browser - Webpack	22.05 KB (+0.25% 🔺)
@sentry/react - Webpack	22.09 KB (+0.25% 🔺)
@sentry/browser + @sentry/tracing - CDN Bundle (gzipped)	28.23 KB (+0.21% 🔺)

[HazAT]

Solid 🥇
Let's not forget to update docs to add this new option.

[HazAT]

@onurtemizkan before we merge, can we make sure we go through all linked comments/issues of the referenced Issues to make sure we don't miss something.
Also, lets figure out if we potentially close those as well then.

[onurtemizkan]

@HazAT, there are also requests to be able to add extra attributes to allowedAttrs, allowing to keep class names or ids while having custom attributes to show. But since we are enforcing a maximum length to generated tree strings and having both class/id and an attribute doesn't add much information IMO, that might not be very usable at the end. What do you think?

[CopyJosh]

Would anyone be open to the possibility of serializeAttribute being an array instead? This would allow for recognizing multiple attributes that are possibly not available on all elements.

For example,

{ 
  serializeAttribute: [
    'data-testid', // all our good devs using react-testing library
    'aria-label', // attempt to fallback on something recognizable
  ],
}
...

then something like,

const keyAttrValue = Array.isArray(keyAttr) && keyAttr.length 
  ? elem.getAttribute(keyAttr.find(attr => elem.hasAttribute(attr)))
  : null;

[kamilogorek]

I think we could make it work. Could you please open a new issue referencing this one? Thanks

[wadefleming-nz]

Solid 🥇 Let's not forget to update docs to add this new option.

I cannot find any docs on this option. How/where do I set it? Is it done via Sentry.init ?

[kamilogorek]

https://docs.sentry.io/platforms/javascript/configuration/integrations/breadcrumbs/#dom

Sentry.init({
  dsn: "https://[email protected]/0",

  integrations: [
    Sentry.breadcrumbsIntegration({
      dom: {
        serializeAttribute: ['your', 'list', 'goes', 'here']
      }
    })
  ]
})

[wadefleming-nz]

https://docs.sentry.io/platforms/javascript/configuration/integrations/breadcrumbs/#dom

Thanks very much, not sure why I couldn't find that, maybe I had a d as in serializedAttribute when I searched.