Are you using React and having a hard time deciphering CSS selectors? We added an option in our bundler plugins to annotate your output DOM with their respective frontend component names, so that you can see those names instead.

Here are the steps to get this installed:

1. Upgrade your SDK to 7.91.0
2. Install Sentry's bundler plugin for the bundler used by your project. Please note that this option currently isn't supported for esbuild.
3. Add reactComponentAnnotation: { enabled: true } to the Sentry bundler plugin in your bundler's config

For more information on how this works, see our documentation.

The component names will be used in breadcrumbs, spans, dead clicks, and rage clicks across Performance, Session Replay and Issues. If you have any feedback or encounter issues setting this up, please open a GitHub ticket.