feat: Added Search support in Trace details by Shubhdeep12 · Pull Request #730 · getsentry/spotlight

Shubhdeep12 · 2025-03-07T07:26:31Z

Before opening this PR:

I added a Changeset Entry with pnpm changeset:add
I referenced issues that this PR addresses
Added back Search input
used context for search query(related Added Search in Trace detail #424 (comment))
- we can extend this and make a context only for trace detail.
added a hook for search input

vercel · 2025-03-07T07:26:35Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
spotlightjs	⬜️ Skipped (Inspect)			Mar 8, 2025 2:03am

codecov · 2025-03-07T07:27:51Z

Codecov Report

Attention: Patch coverage is 21.49533% with 84 lines in your changes missing coverage. Please review.

Project coverage is 31.86%. Comparing base (97dfa76) to head (5c4c3d3).
Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
...e/traces/TraceDetails/components/TraceTreeview.tsx	14.28%	30 Missing ⚠️
...ay/src/integrations/sentry/hooks/useSearchInput.ts	9.37%	29 Missing ⚠️
.../src/integrations/sentry/context/SearchContext.tsx	54.54%	10 Missing ⚠️
...erlay/src/integrations/sentry/hooks/useDebounce.ts	0.00%	10 Missing ⚠️
...entry/components/explore/traces/spans/SpanItem.tsx	37.50%	5 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #730      +/-   ##
==========================================
- Coverage   31.96%   31.86%   -0.11%     
==========================================
  Files          92       95       +3     
  Lines        5834     5951     +117     
  Branches      118      118              
==========================================
+ Hits         1865     1896      +31     
- Misses       3969     4055      +86

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

BYK

I wanna follow up with some UX improvements:

Should make the search bar sticky at the top for long/deep trees.
We should have an actual filtering functionality, not just highlight
We may wanna look into creating a query language of sorts or at least chaining filters with negation etc.

All that said, I think this is a great start and addition. Thanks and thanks for the speedy patch!

packages/overlay/src/integrations/sentry/hooks/useSearchInput.ts

BYK · 2025-03-07T20:09:21Z

packages/overlay/src/integrations/sentry/hooks/useSearchInput.ts

+  useEffect(() => {
+    debouncedSearch(inputValue);
+  }, [inputValue, debouncedSearch]);


Maybe useCallback here? Not exactly sure what we are after to be honest

This is just calling the debounced function every time inputvalue changes.

packages/overlay/src/integrations/sentry/hooks/useSearchInput.ts

Co-authored-by: Burak Yigit Kaya <byk@sentry.io>

Shubhdeep12 · 2025-03-08T16:50:52Z

I wanna follow up with some UX improvements:

Should make the search bar sticky at the top for long/deep trees.

We should have an actual filtering functionality, not just highlight

We may wanna look into creating a query language of sorts or at least chaining filters with negation etc.

All that said, I think this is a great start and addition. Thanks and thanks for the speedy patch!

added these in a new issue.
Closing this PR for now.

Thanks for the review.

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or [setup this action to publish automatically](https://github.com/changesets/action#with-publishing). If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @spotlightjs/astro@3.1.0 ### Minor Changes - Make event id a link to raw envelope on envelope details page ([#729](#729)) ### Patch Changes - Fix envelope sorting and local classification ([#727](#727)) - Fix UI issues when we get a bare span envelope ([#726](#726)) - Fix span details modal resetting trace view tree state on close (for reals this time) ([#728](#728)) - Fixes detection of Sentry SDK frames in Vite projects ([#718](#718)) - Updated dependencies \[[`9ca9ed1b97119757d8b1ec6de24d781aefe8b76c`](9ca9ed1), [`c39cfb3622fe19ccc5df822d30d16298f254cb17`](c39cfb3), [`f731d9171ead5aea21152f1d3bfa89e473a7272c`](f731d91), [`97dfa768846c76da47521f551b1bb45c683a23d9`](97dfa76), [`79506149f545487e67cdff7eab7393c619c8afd9`](7950614)]: - @spotlightjs/spotlight@2.12.0 ## @spotlightjs/electron@1.6.0 ### Minor Changes - Make event id a link to raw envelope on envelope details page ([#729](#729)) ### Patch Changes - Fix envelope sorting and local classification ([#727](#727)) - Fix UI issues when we get a bare span envelope ([#726](#726)) - Fix span details modal resetting trace view tree state on close (for reals this time) ([#728](#728)) - Fixes detection of Sentry SDK frames in Vite projects ([#718](#718)) - Updated dependencies \[[`9ca9ed1b97119757d8b1ec6de24d781aefe8b76c`](9ca9ed1), [`c39cfb3622fe19ccc5df822d30d16298f254cb17`](c39cfb3), [`f731d9171ead5aea21152f1d3bfa89e473a7272c`](f731d91), [`97dfa768846c76da47521f551b1bb45c683a23d9`](97dfa76), [`448062fd45799832fc3240656d543696d438d5ab`](448062f), [`79506149f545487e67cdff7eab7393c619c8afd9`](7950614)]: - @spotlightjs/overlay@2.13.0 ## @spotlightjs/overlay@2.13.0 ### Minor Changes - Make event id a link to raw envelope on envelope details page ([#729](#729)) - Added Search support in Trace details ([#730](#730)) ### Patch Changes - Fix envelope sorting and local classification ([#727](#727)) - Fix UI issues when we get a bare span envelope ([#726](#726)) - Fix span details modal resetting trace view tree state on close (for reals this time) ([#728](#728)) - Fixes detection of Sentry SDK frames in Vite projects ([#718](#718)) ## @spotlightjs/spotlight@2.12.0 ### Minor Changes - Make event id a link to raw envelope on envelope details page ([#729](#729)) ### Patch Changes - Fix envelope sorting and local classification ([#727](#727)) - Fix UI issues when we get a bare span envelope ([#726](#726)) - Fix span details modal resetting trace view tree state on close (for reals this time) ([#728](#728)) - Fixes detection of Sentry SDK frames in Vite projects ([#718](#718)) - Updated dependencies \[[`9ca9ed1b97119757d8b1ec6de24d781aefe8b76c`](9ca9ed1), [`c39cfb3622fe19ccc5df822d30d16298f254cb17`](c39cfb3), [`f731d9171ead5aea21152f1d3bfa89e473a7272c`](f731d91), [`97dfa768846c76da47521f551b1bb45c683a23d9`](97dfa76), [`448062fd45799832fc3240656d543696d438d5ab`](448062f), [`79506149f545487e67cdff7eab7393c619c8afd9`](7950614)]: - @spotlightjs/overlay@2.13.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Before opening this PR: - [x] I added a [Changeset Entry](https://spotlightjs.com/contribute/changesets/) with `pnpm changeset:add` - [ ] I referenced issues that this PR addresses - Added back Search input - used context for search query(related #424 (comment)) - we can extend this and make a context only for trace detail. - added a hook for search input --------- Co-authored-by: Burak Yigit Kaya <byk@sentry.io>

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or [setup this action to publish automatically](https://github.com/changesets/action#with-publishing). If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @spotlightjs/astro@3.1.0 ### Minor Changes - Make event id a link to raw envelope on envelope details page ([#729](#729)) ### Patch Changes - Fix envelope sorting and local classification ([#727](#727)) - Fix UI issues when we get a bare span envelope ([#726](#726)) - Fix span details modal resetting trace view tree state on close (for reals this time) ([#728](#728)) - Fixes detection of Sentry SDK frames in Vite projects ([#718](#718)) - Updated dependencies \[[`9ca9ed1b97119757d8b1ec6de24d781aefe8b76c`](9ca9ed1), [`c39cfb3622fe19ccc5df822d30d16298f254cb17`](c39cfb3), [`f731d9171ead5aea21152f1d3bfa89e473a7272c`](f731d91), [`97dfa768846c76da47521f551b1bb45c683a23d9`](97dfa76), [`79506149f545487e67cdff7eab7393c619c8afd9`](7950614)]: - @spotlightjs/spotlight@2.12.0 ## @spotlightjs/electron@1.6.0 ### Minor Changes - Make event id a link to raw envelope on envelope details page ([#729](#729)) ### Patch Changes - Fix envelope sorting and local classification ([#727](#727)) - Fix UI issues when we get a bare span envelope ([#726](#726)) - Fix span details modal resetting trace view tree state on close (for reals this time) ([#728](#728)) - Fixes detection of Sentry SDK frames in Vite projects ([#718](#718)) - Updated dependencies \[[`9ca9ed1b97119757d8b1ec6de24d781aefe8b76c`](9ca9ed1), [`c39cfb3622fe19ccc5df822d30d16298f254cb17`](c39cfb3), [`f731d9171ead5aea21152f1d3bfa89e473a7272c`](f731d91), [`97dfa768846c76da47521f551b1bb45c683a23d9`](97dfa76), [`448062fd45799832fc3240656d543696d438d5ab`](448062f), [`79506149f545487e67cdff7eab7393c619c8afd9`](7950614)]: - @spotlightjs/overlay@2.13.0 ## @spotlightjs/overlay@2.13.0 ### Minor Changes - Make event id a link to raw envelope on envelope details page ([#729](#729)) - Added Search support in Trace details ([#730](#730)) ### Patch Changes - Fix envelope sorting and local classification ([#727](#727)) - Fix UI issues when we get a bare span envelope ([#726](#726)) - Fix span details modal resetting trace view tree state on close (for reals this time) ([#728](#728)) - Fixes detection of Sentry SDK frames in Vite projects ([#718](#718)) ## @spotlightjs/spotlight@2.12.0 ### Minor Changes - Make event id a link to raw envelope on envelope details page ([#729](#729)) ### Patch Changes - Fix envelope sorting and local classification ([#727](#727)) - Fix UI issues when we get a bare span envelope ([#726](#726)) - Fix span details modal resetting trace view tree state on close (for reals this time) ([#728](#728)) - Fixes detection of Sentry SDK frames in Vite projects ([#718](#718)) - Updated dependencies \[[`9ca9ed1b97119757d8b1ec6de24d781aefe8b76c`](9ca9ed1), [`c39cfb3622fe19ccc5df822d30d16298f254cb17`](c39cfb3), [`f731d9171ead5aea21152f1d3bfa89e473a7272c`](f731d91), [`97dfa768846c76da47521f551b1bb45c683a23d9`](97dfa76), [`448062fd45799832fc3240656d543696d438d5ab`](448062f), [`79506149f545487e67cdff7eab7393c619c8afd9`](7950614)]: - @spotlightjs/overlay@2.13.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Added Search support in Trace details

57a209e

Shubhdeep12 requested a review from BYK March 7, 2025 07:26

vercel bot deployed to Preview March 7, 2025 07:27 View deployment

BYK approved these changes Mar 7, 2025

View reviewed changes

Update packages/overlay/src/integrations/sentry/hooks/useSearchInput.ts

5c4c3d3

Co-authored-by: Burak Yigit Kaya <byk@sentry.io>

vercel bot temporarily deployed to Preview March 8, 2025 02:03 Inactive

Shubhdeep12 mentioned this pull request Mar 8, 2025

UX improvements in Search #731

Closed

3 tasks

Shubhdeep12 merged commit 448062f into main Mar 8, 2025
15 of 17 checks passed

Shubhdeep12 deleted the feat/search-support branch March 8, 2025 16:50

sentry-release-bot bot mentioned this pull request Mar 13, 2025

meta(changelog): Update package versions #733

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Added Search support in Trace details#730

feat: Added Search support in Trace details#730
Shubhdeep12 merged 2 commits intomainfrom
feat/search-support

Shubhdeep12 commented Mar 7, 2025 •

edited

Loading

Uh oh!

vercel bot commented Mar 7, 2025 •

edited

Loading

Uh oh!

codecov bot commented Mar 7, 2025 •

edited

Loading

Uh oh!

BYK left a comment

Uh oh!

Uh oh!

BYK Mar 7, 2025

Uh oh!

Shubhdeep12 Mar 8, 2025 •

edited

Loading

Uh oh!

Uh oh!

Shubhdeep12 commented Mar 8, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Shubhdeep12 commented Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

BYK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

BYK Mar 7, 2025

Choose a reason for hiding this comment

Uh oh!

Shubhdeep12 Mar 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Shubhdeep12 commented Mar 8, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Shubhdeep12 commented Mar 7, 2025 •

edited

Loading

vercel bot commented Mar 7, 2025 •

edited

Loading

codecov bot commented Mar 7, 2025 •

edited

Loading

Shubhdeep12 Mar 8, 2025 •

edited

Loading