feat(browser): Extract and send frontend component name when available#9855
Closed
feat(browser): Extract and send frontend component name when available#9855
Conversation
…crumbs separately
Contributor
size-limit report 📦
|
0Calories
commented
Dec 15, 2023
| */ | ||
| export function getComponentName(elem: unknown): string | null { | ||
| let currentElem = elem as SimpleNode; | ||
| const MAX_TRAVERSE_HEIGHT = 5; |
Contributor
Author
There was a problem hiding this comment.
5 might be a bit too high, but I'm unsure. We could lower this threshold to start out and gradually increase it if necessary, or keep it at 5
Contributor
|
Could we split this PR up?
|
anonrig
approved these changes
Dec 18, 2023
| componentName = _isEvent(event) ? getComponentName(event.target) : getComponentName(event); | ||
| } catch (e) { | ||
| target = '<unknown>'; | ||
| componentName = null; |
This was referenced Dec 19, 2023
0Calories
added a commit
that referenced
this pull request
Dec 21, 2023
One of the PRs scoped from #9855 Sends component names on the databag of interaction spans
0Calories
added a commit
that referenced
this pull request
Dec 21, 2023
One of the PRs scoped from #9855 Sends component names on Replay UI breadcrumbs so they can be ingested and indexed. This will allow for searching for Replays by component name in the future. --------- Co-authored-by: Yagiz Nizipli <yagiz@nizipli.com>
0Calories
added a commit
that referenced
this pull request
Dec 21, 2023
One of the PRs scoped from #9855 Sends component names on UI event breadcrumbs --------- Co-authored-by: Abhijeet Prasad <aprasad@sentry.io>
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.
Iterates on #9496
This is similar to the previous linked PR, but addresses some issues / concerns that were encountered when experimenting with it. Here's what's new this time around:
data-sentry-componentattribute instead ofdata-component_htmlElementAsStringto check if thedata-sentry-componentattribute is present on the DOM and use it. This way,htmlTreeAsStringwill include the React component when building the string. Example:body > div > MyTestComponentgetComponentNameto find a representative component for a DOM element. It will traverse up the tree up to a max of 5 ancestors to find a component name, as it is possible that the event is captured on a nested element instead of the component itselfcomponentNameto thedataattribute for DOM breadcrumbs, instead of replacing the string in themessageui.component_nameto thedataattribute in interaction and React spansdata-sentry-componenttodata.node.attributeson Replay UI breadcrumbs