size-limit report 📦

• 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)

• 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!

@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

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.