feat(browser): Add View Hierarchy integration

[timfish]

This issue needs resolving before the wireframe is drawn correctly outside of flutter projects:

• View Hierarchy absolute positioning should be dependent on rendering_system rather than project.platform sentry#83291

By default it captures the entire DOM, but it is configurable:

Capture only React components (uses attributes added by Sentry bundler plugins):

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: '__DSN__',
  integrations: [Sentry.viewHierarchyIntegration({
    onElement: ({componentName}) => componentName ? {} : 'children'
  })],
});

Capture only Web Components:

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: '__DSN__',
  integrations: [Sentry.viewHierarchyIntegration({
    onElement: ({tagName}) => tagName.includes('-') ? {} : 'children'
  })],
});

[codecov]

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
628	1	627	299

View the top 1 failed tests by shortest run time

client-app-routing-instrumentation.test.ts Creates a navigation transaction for app router routes

Stack Traces | 30s run time

client-app-routing-instrumentation.test.ts:19:5 Creates a navigation transaction for app router routes

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

[AbhiPrasad]

woah

what does it look like with minified class names? (and you don't have react component annotations or similar?)

[timfish]

By default it's capturing getComponentName(element) || element.tagName.toLowerCase(). So the above example actually has no React components on the page, it's simply displaying HTML elements and the tag names with a hyphen (-) are Web Components.

Here is the full event:
https://sentry-sdks.sentry.io/issues/6212345017/events/c6fa1362bdf5410487cf8461d6168583/

[github-actions]

Codecov Results 📊

---

Generated by Codecov Action

[github-actions]

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

Scenario	Requests/s	% of Baseline	Prev. Requests/s	Change %
GET Baseline	8,327	-	8,752	-5%
GET With Sentry	1,335	16%	1,595	-16%
GET With Sentry (error only)	5,648	68%	6,046	-7%
POST Baseline	1,045	-	1,180	-11%
POST With Sentry	493	47%	565	-13%
POST With Sentry (error only)	900	86%	1,045	-14%
MYSQL Baseline	3,027	-	3,300	-8%
MYSQL With Sentry	284	9%	430	-34%
MYSQL With Sentry (error only)	2,447	81%	2,671	-8%

View base workflow run