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/