feat(browser): Add View Hierarchy integration

[timfish]

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,911	-	11,267	-21%
GET With Sentry	1,642	18%	1,921	-15%
GET With Sentry (error only)	6,137	69%	7,561	-19%
POST Baseline	1,169	-	1,153	+1%
POST With Sentry	561	48%	570	-2%
POST With Sentry (error only)	1,033	88%	1,033	-
MYSQL Baseline	3,138	-	3,871	-19%
MYSQL With Sentry	276	9%	458	-40%
MYSQL With Sentry (error only)	2,536	81%	3,161	-20%

View base workflow run

[github-actions]

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	25.62 kB	-	-
@sentry/browser - with treeshaking flags	24.12 kB	-	-
@sentry/browser (incl. Tracing)	42.42 kB	-	-
@sentry/browser (incl. Tracing, Profiling)	47.09 kB	-	-
@sentry/browser (incl. Tracing, Replay)	81.24 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	70.86 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	85.94 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	98.2 kB	-	-
@sentry/browser (incl. Feedback)	42.43 kB	-	-
@sentry/browser (incl. sendFeedback)	30.29 kB	-	-
@sentry/browser (incl. FeedbackAsync)	35.34 kB	-	-
@sentry/browser (incl. Metrics)	26.79 kB	-	-
@sentry/browser (incl. Logs)	26.93 kB	-	-
@sentry/browser (incl. Metrics & Logs)	27.61 kB	-	-
@sentry/react	27.37 kB	-	-
@sentry/react (incl. Tracing)	44.76 kB	-	-
@sentry/vue	30.07 kB	-	-
@sentry/vue (incl. Tracing)	44.29 kB	-	-
@sentry/svelte	25.64 kB	-	-
CDN Bundle	28.16 kB	-	-
CDN Bundle (incl. Tracing)	43.25 kB	-	-
CDN Bundle (incl. Logs, Metrics)	29 kB	-	-
CDN Bundle (incl. Tracing, Logs, Metrics)	44.09 kB	-	-
CDN Bundle (incl. Replay, Logs, Metrics)	68.08 kB	-	-
CDN Bundle (incl. Tracing, Replay)	80.13 kB	-	-
CDN Bundle (incl. Tracing, Replay, Logs, Metrics)	80.99 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	85.64 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics)	86.53 kB	-	-
CDN Bundle - uncompressed	82.34 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	128.06 kB	-	-
CDN Bundle (incl. Logs, Metrics) - uncompressed	85.18 kB	-	-
CDN Bundle (incl. Tracing, Logs, Metrics) - uncompressed	130.89 kB	-	-
CDN Bundle (incl. Replay, Logs, Metrics) - uncompressed	208.84 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	244.94 kB	-	-
CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed	247.76 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	257.85 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) - uncompressed	260.66 kB	-	-
@sentry/nextjs (client)	47.17 kB	-	-
@sentry/sveltekit (client)	42.88 kB	-	-
@sentry/node-core	52.18 kB	+0.02%	+10 B 🔺
@sentry/node	174.48 kB	+0.01%	+5 B 🔺
@sentry/node - without tracing	97.33 kB	+0.01%	+8 B 🔺
@sentry/aws-serverless	113.13 kB	+0.01%	+8 B 🔺

View base workflow run