getsentry / getsentry/sentry

[DevToolbar] Create a setting to enable highlighting React Components

Open
#75,958 0 comments 0 reactions 0 assignees View on GitHub
Feature
Dominant language
Python
Stars
44.8k
Forks
4.9k
Avg merge
22h 21m
Merged PRs (30d)
586

Description

I saw this page: https://bit.dev/ and, when i was looking at it anyway, they had some kind of dev mode enabled that lets to see what component is in use and link back to the docs for it on hover.

| Regular | Hover |
| --- | --- |
| ![Image](https://github.com/user-attachments/assets/e28abdc9-2b63-4cb7-8294-217d217f8d7c) | ![Image](https://github.com/user-attachments/assets/53cd65fc-a96e-4b3c-a108-f5e012a56109)

We could do this for react components, using data from [annotated react components](https://www.npmjs.com/package/@sentry/webpack-plugin#reactcomponentannotation)

This type of thing dovetails with the reage&dead click highlighting, but the way to integrate the two isn't clear to me now.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.