feat(replay): Use data sentry element as fallback for the component name

[c298lee]

Adds element name as fallback. If component name exists, use that, else if element name exists use that, else use selector name. The element name and component name mirrors that of React components vs elements

Example with Replay Play/Pause Button:

Name Type	HTML Tree
Component Name	none > none > ReplayControls > ButtonBar > none
Element Name	FullViewport > none > ButtonGrid > ButtonGrid > ReplayPlayPauseButton
Element + Component fallback	FullViewPort > none > ButtonGrid > ButtonGrid > ReplayPlayPauseButton
Component + Element fallback	FullViewPort > none > ReplayControls > ButtonBar > ReplayPlayPauseButton

More elements have an data-sentry-element attribute than data-sentry-component attribute, so adding in the element name means more elements in the tree will have a descriptive name. Furthermore, the component name usually provides more context (eg. ReplayControls vs ButtonGrid) so it should take precedence over the element name

Relates to getsentry/sentry#64673

[github-actions]

size-limit report 📦

Path	Size
@sentry/browser (incl. Tracing, Replay, Feedback)	76.3 KB (+0.06% 🔺)
@sentry/browser (incl. Tracing, Replay)	67.57 KB (+0.07% 🔺)
@sentry/browser (incl. Tracing, Replay with Canvas)	71.39 KB (+0.06% 🔺)
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	61.13 KB (+0.07% 🔺)
@sentry/browser (incl. Tracing)	32.21 KB (+0.07% 🔺)
@sentry/browser (incl. browserTracingIntegration)	32.21 KB (+0.07% 🔺)
@sentry/browser (incl. feedbackIntegration)	31.32 KB (+0.07% 🔺)
@sentry/browser (incl. feedbackModalIntegration)	31.45 KB (+0.07% 🔺)
@sentry/browser (incl. feedbackScreenshotIntegration)	31.45 KB (+0.06% 🔺)
@sentry/browser (incl. sendFeedback)	27.38 KB (+0.07% 🔺)
@sentry/browser	22.54 KB (+0.1% 🔺)
CDN Bundle (incl. Tracing, Replay, Feedback)	71.31 KB (+0.06% 🔺)
CDN Bundle (incl. Tracing, Replay)	66.03 KB (+0.07% 🔺)
CDN Bundle (incl. Tracing)	32.32 KB (+0.06% 🔺)
CDN Bundle	23.76 KB (+0.07% 🔺)
CDN Bundle (incl. Tracing, Replay) - uncompressed	205.8 KB (+0.11% 🔺)
CDN Bundle (incl. Tracing) - uncompressed	96.4 KB (+0.13% 🔺)
CDN Bundle - uncompressed	70.17 KB (+0.18% 🔺)
@sentry/react (incl. Tracing, Replay)	67.56 KB (+0.06% 🔺)
@sentry/react	22.58 KB (+0.09% 🔺)

[billyvg]

• Does the backend index data-sentry-element as well?
• Any concerns with the confusion around what a component vs element is? (tbh I don't quite understand the difference. it doesn't seem like it should be Emotion specific cc @0Calories)

[c298lee]

• Does the backend index data-sentry-element as well?

We would need to index data-sentry-element on the backend as well, this will be added in a followup PR. This is needed for the click to search functionality in breadcrumbs

• Any concerns with the confusion around what a component vs element is? (tbh I don't quite understand the difference. it doesn't seem like it should be Emotion specific cc @0Calories)

The plugin applies a data-sentry-component attribute from the function name and a data-sentry-element attribute from a styled component name. We would like to surface both of those under the component name with data-sentry-component taking precedence, so in the UI there shouldn't be any confusion because there will only be component. Having data-sentry-element as fallback was implemented in the initial PR for React Component Names, but it got lost when the PR was split up, so we're adding it back in now.

@0Calories please correct me if anything I mentioned is wrong or if I'm missing any info!

[0Calories]

@c298lee I'd recommend against sending it as data-sentry-element and indexing it separately, unless you have a specific usecase for annotated elements over components. I'd say just grab the element name and send it as a component to the backend

@billyvg Regarding the topic of what specifically data-sentry-element is, the logic is taken directly from Fullstory's plugin. It's not specific to Emotion, but rather styled components. So if you have a styled div element, it would be annotated as data-sentry-element.

See the article here for more

[0Calories]

LGTM! Just have one nit, but feel free to ignore it if too troublesome

[billyvg]

OK, did some reading, the element and components mirrors that of React components vs elements, and is not tied to styled components or emotion at all.

I took a look at what this look like on Sentry ($$('[data-sentry-source-file]').map(el => [el.dataset.sentrySourceFile, el.dataset.sentryComponent, el.dataset.sentryElement]).reduce((acc, [f, c, e]) => { if (!acc[f]) { acc[f] = []; } acc[f].push([c, e]); return acc }, {}); if you want to look yourself)

If we have a component A that renders components B, C, and D:

function B() { return <div /> }
const C = styled('span')``;
const D = styled('p')``;

function A() {
  return (
    <B>
      <C/>
      <D/>
    </B>
  );
}

A is the component, which returns the elements, B, C, D. Since the DOM element inside of B (the div) is the root DOM element of A and B, it will have both a data-sentry-component and data-sentry-element. C and D will only have element.