There’s never a good time for errors or performance degradations to show up, but during periods of peak traffic like the holidays, it’s especially critical to get immediate answers about what's failing and how to fix it.
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:
Github
Slack
Javascript
Python
React
Laravel
Next.js
reactComponentAnnotation: { enabled: true } to the Sentry bundler plugin in your bundler's configFor 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.