Add react component names to normal click breadcrumbs

[lforst]

Description

We should add react component names from the reactComponentAnnotation plugin to normal click breadcrumbs.

https://youtu.be/dWSiYtRODmM?si=XgGIRgtNTY2MSqJS&t=1120

[timfish]

It looks like this should already be working:

sentry-javascript/packages/browser/src/integrations/breadcrumbs.ts

Lines 155 to 159 in a3bbb52

	const event = handlerData.event as Event | Node;
	const element = _isEvent(event) ? event.target : event;
	target = htmlTreeAsString(element, { keyAttrs, maxStringLength });
	componentName = getComponentName(element);

And there are tests for it!

sentry-javascript/dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/dom/click/test.ts

Lines 86 to 91 in 6f56d06

	{
	timestamp: expect.any(Number),
	category: 'ui.click',
	message: 'body > AnnotatedButton',
	data: { 'ui.component_name': 'AnnotatedButton' },
	},

[lforst]

Ah nice! It probably didn't show the component name in the video because it's not an actual component in the example page. My bad!