Overlay crashes when you click on spans in a trace that contains capture_message

[natikgadzhi]

Environment

• @spotlightjs/overlay@0.0.16
• Rails 7.0.3 🤦🏼
• Sidecar 0.0.11

Steps to Reproduce

1. Opening a demo app (should I push this up?)
2. Hit a URL that will Sentry.capture_message somewhere in there
3. Open Spotlight
4. Clicking on the page's trace
5. Clicking into a specific span

Here's the video of what I'm doing

Plot twist: it seems like it's related to #145 https://www.loom.com/share/c636a54fe36f453daa6bca6d097c82a3 Only the traces with capture_message in them crash. Errored traces or successful traces that don't send messages to Sentry work fine.

Expected Result

I expect a popover panel with the span data.

Actual Result

The Overlay app crashes and is removed from DOM.

[HazAT]

Can you add SPOTLIGHT_CAPTURE=1 to the process you start the sidecar with and attach the stored file here so we can repro and fix it?
https://spotlightjs.com/contribute/development/

[Shubhdeep12]

Hi @HazAT, I also encountered this issue.
For my app using @sentry/nextjs sdk

I tried to capture the message and got them logged as errors in the spotlight

Reason - because for events other than type as "transaction" we are listing them under errors.
And, there is no 'exception' in the message event.

Solution -
This error is caused because of this line -

spotlight/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx

Line 45 in 36e0372

const errors = dataCache.getEventsByTrace(span.trace_id).filter(e => e.type !== 'transaction');

On SpanDetails page, we list down errors and instead of checking whether these errors have an exception object or not, we are calling ErrorTitle below.

This can be resolved by replacing the line to this -
const errors = dataCache.getEventsByTrace(span.trace_id).filter(e => e.type !== 'transaction' && 'exception' in e);

But we need to check the condition of considering an event as an error across spotlight.

Attached spotlight capture files for reference-
Capture Message.txt
Capture Message in a transaction.txt

[Shubhdeep12]

Same issue when the user wants to capture custom events.
using Sentry.captureEvent({....