feat(browser): Add View Hierarchy integration by timfish · Pull Request #14981 · getsentry/sentry-javascript

timfish · 2025-01-11T18:57:45Z

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 · 2025-01-11T19:28:04Z

❌ 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 · 2025-01-14T03:21:48Z

woah

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

timfish · 2025-01-14T10:38:48Z

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 · 2026-02-11T15:14:01Z

Codecov Results 📊

Generated by Codecov Action

github-actions · 2026-02-11T15:16:05Z

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,792	-	8,837	-1%
GET With Sentry	1,682	19%	1,654	+2%
GET With Sentry (error only)	6,175	70%	6,073	+2%
POST Baseline	1,194	-	1,202	-1%
POST With Sentry	593	50%	591	+0%
POST With Sentry (error only)	1,071	90%	1,051	+2%
MYSQL Baseline	3,223	-	3,229	-0%
MYSQL With Sentry	471	15%	487	-3%
MYSQL With Sentry (error only)	2,636	82%	2,640	-0%

View base workflow run

github-actions · 2026-02-26T23:28:28Z

size-limit report 📦

⚠️ Warning: Base artifact is not the latest one, because the latest workflow run is not done yet. This may lead to incorrect results. Try to re-run all tests to get up to date results.

Path	Size	% Change	Change
@sentry/browser	25.69 kB	-	-
@sentry/browser - with treeshaking flags	24.17 kB	-	-
@sentry/browser (incl. Tracing)	42.17 kB	-	-
@sentry/browser (incl. Tracing, Profiling)	46.79 kB	-	-
@sentry/browser (incl. Tracing, Replay)	80.98 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	70.6 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	85.7 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	97.97 kB	-	-
@sentry/browser (incl. Feedback)	42.48 kB	-	-
@sentry/browser (incl. sendFeedback)	30.35 kB	-	-
@sentry/browser (incl. FeedbackAsync)	35.4 kB	-	-
@sentry/browser (incl. Metrics)	26.96 kB	-	-
@sentry/browser (incl. Logs)	27.1 kB	-	-
@sentry/browser (incl. Metrics & Logs)	27.78 kB	-	-
@sentry/react	27.45 kB	-	-
@sentry/react (incl. Tracing)	44.52 kB	-	-
@sentry/vue	30.13 kB	-	-
@sentry/vue (incl. Tracing)	44.08 kB	-	-
@sentry/svelte	25.7 kB	-	-
CDN Bundle	28.39 kB	-	-
CDN Bundle (incl. Tracing)	43.2 kB	-	-
CDN Bundle (incl. Logs, Metrics)	29.76 kB	-	-
CDN Bundle (incl. Tracing, Logs, Metrics)	44.25 kB	-	-
CDN Bundle (incl. Replay, Logs, Metrics)	68.56 kB	-	-
CDN Bundle (incl. Tracing, Replay)	80.08 kB	-	-
CDN Bundle (incl. Tracing, Replay, Logs, Metrics)	81.16 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	85.62 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics)	86.67 kB	-	-
CDN Bundle - uncompressed	82.93 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	128.07 kB	-	-
CDN Bundle (incl. Logs, Metrics) - uncompressed	87.07 kB	-	-
CDN Bundle (incl. Tracing, Logs, Metrics) - uncompressed	131.48 kB	-	-
CDN Bundle (incl. Replay, Logs, Metrics) - uncompressed	210.06 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	244.95 kB	-	-
CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed	248.34 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	257.86 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) - uncompressed	261.25 kB	-	-
@sentry/nextjs (client)	46.93 kB	-	-
@sentry/sveltekit (client)	42.67 kB	-	-
@sentry/node-core	56.51 kB	+0.02%	+11 B 🔺
@sentry/node	173.6 kB	+0.01%	+12 B 🔺
@sentry/node - without tracing	96.54 kB	+0.01%	+5 B 🔺
@sentry/aws-serverless	113.54 kB	+0.01%	+9 B 🔺

View base workflow run

github-actions · 2026-03-21T14:04:35Z

This pull request has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you apply the label PR: no-auto-close I will leave it alone ... forever!

github-actions · 2026-03-28T14:08:05Z

Closing due to inactivity after stale warning. Comment or reopen when ready to continue, and use PR: no-auto-close to opt out of automatic closure.

github-actions · 2026-03-28T14:31:40Z

Semver Impact of This PR

🟡 Minor (new features)

📋 Changelog Preview

This is how your changes will appear in the changelog.
Entries from this PR are highlighted with a left border (blockquote style).

New Features ✨

Browser

Add View Hierarchy integration by timfish in #14981

Replace element timing spans with metrics by logaretm in #19869

Deps

Bump babel-loader from 10.0.0 to 10.1.1 by dependabot in #19997
Bump handlebars from 4.7.7 to 4.7.9 by dependabot in #20008

Nuxt

Add middleware instrumentation compatibility for Nuxt 5 by s1gr1d in #19968
Support parametrized SSR routes in Nuxt 5 by s1gr1d in #19977

Other

(bun) Add bunRuntimeMetricsIntegration by chargome in #19979
(core) Support embedding APIs in google-genai by nicohrubec in #19797
(node) Add nodeRuntimeMetricsIntegration by chargome in #19923

Bug Fixes 🐛

(e2e) Pin @opentelemetry/api to 1.9.0 in ts3.8 test app by logaretm in #19992
(node) Ensure startNewTrace propagates traceId in OTel environments by logaretm in #19963
(nuxt) Use virtual module for Nuxt pages data (SSR route parametrization) by s1gr1d in #20020
(opentelemetry) Convert seconds timestamps in span.end() to milliseconds by logaretm in #19958

Documentation 📚

(release) Update publishing-a-release.md by nicohrubec in #19982

Internal Changes 🔧

Core

Introduce instrumented method registry for AI integrations by nicohrubec in #19981
Consolidate getOperationName into one shared utility by nicohrubec in #19971

Deps

Bump amqplib from 0.10.7 to 0.10.9 by dependabot in #20000
Bump actions/upload-artifact from 6 to 7 by dependabot in #19569
Bump srvx from 0.11.12 to 0.11.13 by dependabot in #20001
Bump @apollo/server from 5.4.0 to 5.5.0 by dependabot in #20007

Deps Dev

Remove esbuild override in astro-5-cf-workers E2E test by isaacs in #20024
Bump node-forge from 1.3.2 to 1.4.0 by dependabot in #20012
Bump yaml from 2.8.2 to 2.8.3 by dependabot in #19985

Other

(deno) Expand Deno E2E test coverage by chargome in #19957
(e2e) Add e2e tests for nodeRuntimeMetricsIntegration by chargome in #19989

_{🤖 This preview updates automatically when you update the PR.}

timfish added 2 commits January 11, 2025 19:26

feat(browser): Add browser View Hierarchy integration

1c0b9ce

Merge branch 'develop' into timfish/feat/browser-view-hierarchy

df78783

Merge branch 'develop' into timfish/feat/browser-view-hierarchy

83c103a

mydea mentioned this pull request Mar 28, 2025

Pr 14981 #15895

Closed

2 tasks

timfish added 2 commits February 11, 2026 15:10

Merge branch 'develop' into timfish/feat/browser-view-hierarchy

013d473

Changes after rcf merge

16d9153

timfish added 2 commits February 26, 2026 23:00

Merge branch 'develop' into timfish/feat/browser-view-hierarchy

d6ad717

more

899e5c0

github-actions bot added the PR: stale label Mar 21, 2026

github-actions bot closed this Mar 28, 2026

timfish reopened this Mar 28, 2026

timfish removed the PR: stale label Mar 28, 2026

Uh oh!

Conversation

timfish commented Jan 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 1 Tests Failed:

Uh oh!

AbhiPrasad commented Jan 14, 2025

Uh oh!

timfish commented Jan 14, 2025

Uh oh!

github-actions bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Results 📊

Uh oh!

github-actions bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

node-overhead report 🧳

Uh oh!

github-actions bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

github-actions bot commented Mar 21, 2026

Uh oh!

github-actions bot commented Mar 28, 2026

Uh oh!

github-actions bot commented Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Semver Impact of This PR

New Features ✨

Browser

Deps

Nuxt

Other

Bug Fixes 🐛

Documentation 📚

Internal Changes 🔧

Core

Deps

Deps Dev

Other

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

timfish commented Jan 11, 2025 •

edited

Loading

codecov bot commented Jan 11, 2025 •

edited

Loading

github-actions bot commented Feb 11, 2026 •

edited

Loading

github-actions bot commented Feb 11, 2026 •

edited

Loading

github-actions bot commented Feb 26, 2026 •

edited

Loading

github-actions bot commented Mar 28, 2026 •

edited

Loading