feat(browser): Add View Hierarchy integration#14981
Merged
Conversation
❌ 1 Tests Failed:
View the top 1 failed tests by shortest run time
To view more test analytics, go to the Test Analytics Dashboard |
Contributor
|
woah what does it look like with minified class names? (and you don't have react component annotations or similar?) |
Collaborator
Author
|
By default it's capturing Here is the full event: |
Contributor
Codecov Results 📊Generated by Codecov Action |
Contributor
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.
|
Contributor
size-limit report 📦
|
Contributor
|
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 |
Contributor
|
Closing due to inactivity after stale warning. Comment or reopen when ready to continue, and use |
Contributor
Semver Impact of This PR🟡 Minor (new features) 📋 Changelog PreviewThis is how your changes will appear in the changelog. New Features ✨Cloudflare
Core
Deps
Other
Bug Fixes 🐛Deno
Other
Internal Changes 🔧Ci
Deps
Other
🤖 This preview updates automatically when you update the PR. |
Member
|
@timfish anything that we still need to change here to get this out of draft? |
Collaborator
Author
|
I need to add an integration test and maybe some bike shedding on the export name. I think "view hierarchy" isn't that descriptive of what it does and just describes our internal naming! |
Member
|
I think "View Hierarchy" already has precedence since the mobile SDKs already ship it like this (e.g. React Native) and it's what the feature is called in the Sentry UI. Do you have other ideas? I could see going with something more DOM or component-related but from my PoV, View Hierarchy is also fine. |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Lms24
reviewed
Apr 7, 2026
| return { | ||
| name: 'ViewHierarchy', | ||
| processEvent: (event, hint) => { | ||
| if (options.shouldAttach?.(event, hint) === false) { |
Member
There was a problem hiding this comment.
m: Let's only run this event processor for error events. I checked and view hierarchy is only shown on issue detail pages. Mobile SDKs also only add view hierarchy attachments to errors.
Lms24
approved these changes
Apr 7, 2026
…wser-view-hierarchy
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Test uses unreliable deprecated envelope helper
- Replaced deprecated getMultipleSentryEnvelopeRequests and envelopeParser with waitForErrorRequest and properFullEnvelopeRequestParser for reliable test execution.
Or push these changes by commenting:
@cursor push 5816421e75
Preview (5816421e75)
diff --git a/dev-packages/browser-integration-tests/suites/integrations/viewHierarchy/test.ts b/dev-packages/browser-integration-tests/suites/integrations/viewHierarchy/test.ts
--- a/dev-packages/browser-integration-tests/suites/integrations/viewHierarchy/test.ts
+++ b/dev-packages/browser-integration-tests/suites/integrations/viewHierarchy/test.ts
@@ -1,7 +1,7 @@
import { expect } from '@playwright/test';
import type { ViewHierarchyData } from '@sentry/core';
import { sentryTest } from '../../../utils/fixtures';
-import { getMultipleSentryEnvelopeRequests, envelopeParser } from '../../../utils/helpers';
+import { properFullEnvelopeRequestParser, waitForErrorRequest } from '../../../utils/helpers';
sentryTest('Captures view hierarchy as attachment', async ({ getLocalTestUrl, page }) => {
const bundle = process.env.PW_BUNDLE;
@@ -11,19 +11,22 @@
const url = await getLocalTestUrl({ testDir: __dirname });
- const [, events] = await Promise.all([
- page.goto(url),
- getMultipleSentryEnvelopeRequests<ViewHierarchyData>(
- page,
- 1,
- {},
- req => envelopeParser(req)?.[4] as ViewHierarchyData,
- ),
- ]);
+ const req = await Promise.all([page.goto(url), waitForErrorRequest(page)]).then(([, req]) => req);
- expect(events).toHaveLength(1);
- const event: ViewHierarchyData = events[0];
+ const envelope = properFullEnvelopeRequestParser(req);
+ const items = envelope[1];
+ expect(items).toHaveLength(2);
+
+ const attachmentHeader = items[1][0];
+ expect(attachmentHeader.type).toBe('attachment');
+ expect(attachmentHeader.filename).toBe('view-hierarchy.json');
+
+ const attachmentData = items[1][1];
+ const event: ViewHierarchyData = JSON.parse(
+ typeof attachmentData === 'string' ? attachmentData : new TextDecoder().decode(attachmentData as Uint8Array),
+ );
+
expect(event.rendering_system).toBe('DOM');
expect(event.positioning).toBe('absolute');
expect(event.windows).toHaveLength(2);This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 6649760. Configure here.
dev-packages/browser-integration-tests/suites/integrations/viewHierarchy/test.ts
Show resolved
Hide resolved
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
By default it captures the entire DOM, but it is configurable:
Capture only React components (uses attributes added by Sentry bundler plugins):
Capture only Web Components: