feat(overlay): Structured Logging support

[Shubhdeep12]

Before opening this PR:

• [x] I added a Changeset Entry with pnpm changeset:add
• [x] I referenced issues that this PR addresses

#756

• [x] To accept Log Envelopes
• [x] To list all logs
• [x] To display details of a single log and a link back to the trace.
• [x] Log type envelopes should be displayed in the Envelopes tab.

Misc. fixes

• [x] Updated @sentry/core and @sentry/react and @sentry/browser to 9.22.0
• [x] Removed @sentry/types as this is DEPRECATED
• [x] Scroll issue in Spotlight's console integration tab fixed
• [x] Envelopes list - always depends on event_id in envelope header. event_id in the envelope header is not a required field. Added __spotlight_envelope_id for every envelope to have a unique envelope id for spotlight purposes (need to be reviewed).

https://github.com/user-attachments/assets/10fb564c-039c-49f2-a500-21a73661bf72

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
spotlightjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 2, 2025 9:26pm

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 35.02304% with 282 lines in your changes missing coverage. Please review.

Project coverage is 34.14%. Comparing base (908c449) to head (8dcd280). Report is 1 commits behind head on main.

:white_check_mark: All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...rc/integrations/sentry/components/log/LogsList.tsx	17.88%	124 Missing :warning:
...c/integrations/sentry/components/log/LogDetail.tsx	10.52%	68 Missing :warning:
...rc/integrations/sentry/store/slices/eventsSlice.ts	40.00%	21 Missing :warning:
...try/components/insights/envelopes/EnvelopeList.tsx	5.55%	17 Missing :warning:
...lay/src/integrations/sentry/data/useSentryLogs.tsx	33.33%	16 Missing :warning:
...s/overlay/src/integrations/sentry/tabs/LogsTab.tsx	35.71%	9 Missing :warning:
...y/src/integrations/sentry/components/log/index.tsx	27.27%	8 Missing :warning:
.../components/insights/envelopes/EnvelopeDetails.tsx	0.00%	3 Missing :warning:
...ns/sentry/components/traces/TraceDetails/index.tsx	25.00%	3 Missing :warning:
packages/overlay/src/integrations/sentry/index.ts	25.00%	3 Missing :warning:
... and 5 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #808      +/-   ##
==========================================
+ Coverage   34.12%   34.14%   +0.02%     
==========================================
  Files         107      113       +6     
  Lines        7083     7485     +402     
  Branches      125      131       +6     
==========================================
+ Hits         2417     2556     +139     
- Misses       4666     4929     +263     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Shubhdeep12]

hey @BYK @betegon

following changes are added in the PR:

1. Fixed the useSentryLogs hook to return the logs for a specific trace.
2. Added a Logs tab under each trace as well. Taking sentry.io dashboard as reference.

[betegon]

@BYK wouldn't this PR also close #643 ?

[BYK]

@betegon

@BYK wouldn't this PR also close https://github.com/getsentry/spotlight/issues/643 ?

Not really unfortunately. The SDKs own logging (enabled via debug:true) are exempt from structured logging. We need them to capture these too when spotlight:true and debug:true I guess. We may also want to look into "client reports" where the SDKs report when an event is discarded due to size etc.

[Shubhdeep12]

Updated description and recording @BYK