fix: show spans referencing the current span (#2828) - #2868
Conversation
🦋 Changeset detectedLatest commit: 6a73354 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@Vansh98789 is attempting to deploy a commit to the HyperDX Team on Vercel. A member of the Team first needs to authorize it. |
Greptile SummaryThis follow-up wires the waterfall’s full trace rows into the span detail panel and projects the fields needed to discover reverse span links. It also adds release metadata and tests for the reverse-link extraction helper.
Confidence Score: 4/5The PR should not merge until the Referenced By visibility check uses the same validation contract as its renderer. Malformed span-link entries can make the new accordion appear even though its renderer rejects every matching entry and displays an empty result. Files Needing Attention: packages/app/src/components/DBRowOverviewPanel.tsx, packages/app/src/components/SpansReverseLinksSubpanel.tsx
|
| Filename | Overview |
|---|---|
| packages/app/src/components/DBTraceWaterfallChart.tsx | Projects reverse-link source fields and exposes the fetched trace rows to the parent panel. |
| packages/app/src/components/DBTracePanel.tsx | Stores waterfall trace rows and passes them into the selected span overview. |
| packages/app/src/components/DBRowOverviewPanel.tsx | Adds the Referenced By accordion, but its visibility predicate is less strict than the renderer’s validation. |
| packages/app/src/components/SpansReverseLinksSubpanel.tsx | Extracts referencing spans through the existing span-link validator and reuses the forward-link renderer. |
| packages/app/src/components/tests/SpansReverseLinksSubpanel.test.tsx | Covers basic extraction and missing-link cases but not malformed links that expose the visibility mismatch. |
| .changeset/reverse-span-links.md | Records the user-visible reverse-span-link feature as an application patch. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart LR
Q[Waterfall trace query] --> R[Full trace rows]
R --> P[DBTracePanel state]
P --> O[RowOverviewPanel]
O --> V{Matching reverse link?}
V -->|Yes| A[Referenced By accordion]
A --> S[SpansReverseLinksSubpanel]
S --> N[Open referencing span]
Reviews (7): Last reviewed commit: "fix: select TraceId/SpanKind/SpanLinks i..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| </Accordion.Panel> | ||
| </Accordion.Item> | ||
| )} | ||
| {hasReverseSpanLinks && ( | ||
| <Accordion.Item value="reverseSpanLinks"> | ||
| <Accordion.Control> | ||
| <Text size="sm" ps="md"> | ||
| Referenced By | ||
| </Text> | ||
| </Accordion.Control> | ||
| <Accordion.Panel> | ||
| <Box px="md"> | ||
| <SpansReverseLinksSubpanel | ||
| rows={data?.data} | ||
| currentSpanId={firstRow?.SpanId as string | undefined} | ||
| onOpenTrace={onOpenLinkedTrace} | ||
| /> | ||
| </Box> |
There was a problem hiding this comment.
This adds the user-visible Referenced By panel to the published application package without a corresponding .changeset/ entry, so the release metadata omits this behavior change.
Context Used: CLAUDE.md (source)
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Hi @pulpdrew |
|
Thanks for the PR @Vansh98789. There are some issues with the approach:
Also, even with all the blockers fixed, the approach can't address the issue it's linked to. The scan only looks at rows within the currently loaded trace, but the producer→consumer pattern described in #2828 typically crosses trace boundaries: the consumer starts its own trace and links back to the producer's span. |
…ing, dedupe fetch
|
Thanks for the detailed review @karl-power. Fixed all three:
On the cross-trace point - agreed that's the fuller version of what #2828 asks for. Want me to scope this PR to same-trace only for now and file a follow-up for cross-trace, or would you rather I take that on here? |
| const sl = row.__hdx_span_links; | ||
| if (!Array.isArray(sl)) continue; | ||
| for (const link of sl) { | ||
| if ( | ||
| link && | ||
| typeof link === 'object' && | ||
| 'SpanId' in link && | ||
| link.SpanId === currentSpanId | ||
| ) { | ||
| return true; | ||
| } | ||
| } |
There was a problem hiding this comment.
When a trace row has the selected SpanId but lacks a string TraceId or an Attributes value, hasReverseSpanLinks displays the Referenced By accordion even though getValidSpanLinks rejects that entry, causing the expanded panel to report that no spans reference the selected span.
| const sl = row.__hdx_span_links; | |
| if (!Array.isArray(sl)) continue; | |
| for (const link of sl) { | |
| if ( | |
| link && | |
| typeof link === 'object' && | |
| 'SpanId' in link && | |
| link.SpanId === currentSpanId | |
| ) { | |
| return true; | |
| } | |
| } | |
| const validLinks = getValidSpanLinks(row.__hdx_span_links); | |
| if (validLinks.some(link => link.SpanId === currentSpanId)) { | |
| return true; | |
| } |
Knowledge Base Used: App Components and Charts
Yes please. In practice, a span link is more likely to point to a span of another trace as it exists to model a relationship that doesn't work for same-trace spans. |
2 participants
Fix #2828 — Add Reverse Span Links ("Referenced By")
Summary
When inspecting a span in the trace span detail panel, users can see spans it links to through Span Links, but there was no way to see which other spans link back to it.
This made it difficult to trace producer → consumer relationships and follow-up span relationships.
This change adds a Referenced By section to show all spans that link to the currently selected span.
Approach
The fix is split into three changes:
1. New file —
SpansReverseLinksSubpanel.tsxExports
getReverseSpanLinks(rows, currentSpanId), a pure function that iterates over all rows in the same trace.Extracts
__hdx_span_linksfrom each row.Uses the existing
getValidSpanLinkshelper to parse and validate span links, gracefully handling malformed or missing data.When a valid link's
SpanIdmatchescurrentSpanId, the source row is recorded as a reverse link.Each reverse link is enriched with:
TraceIdSpanIdSpanNameServiceNameSpanKindExports
SpansReverseLinksSubpanel, a React component that:Wraps the reverse-link calculation in
useMemo.Shows "No spans reference this span" when there are no matching links.
Reuses the existing
SpanLinksSubpanelfor rendering.Keeps the existing card layout and
onOpenTraceclick behavior.2. Modified —
DBRowOverviewPanel.tsxAdded
hasReverseSpanLinksusinguseMemo.It scans
data.datafor rows whose span links contain the currentSpanId.Short-circuits when:
No
SpanIdis available.data.datais not an array.Added a new Referenced By accordion section:
Accordion.Item value="reverseSpanLinks"Positioned immediately after the existing Span Links section.
The section is conditionally rendered only when reverse links exist.
Uses the same two-space inset and
onOpenLinkedTracecallback as the existing forward-links section.Because the accordion supports multiple open panels, Span Links and Referenced By can be expanded simultaneously for easy comparison.
3. Test file —
SpansReverseLinksSubpanel.test.tsxTests focus on the
getReverseSpanLinkspure function rather than the React component, keeping the tests fast and focused.Covered cases:
null/undefinedrows → returns[]undefinedcurrentSpanId→ returns[]No spans link to the given
SpanId→ returns[]Multiple spans link to the same
SpanId→ returns all matching spans with the correct attributesSpans with missing
__hdx_span_links→ skipped gracefullyWhy This Works
Reuses the existing
getValidSpanLinksvalidation logic, avoiding duplication.Reuses the existing
SpanLinksSubpanelrendering, so there is no new UI pattern to maintain.The required data is already loaded in memory through
data.datafromuseRowData, so scanning for reverse links does not introduce an additional network request.The accordion remains collapsed/hidden when there are no reverse links, keeping the span detail panel uncluttered.
Users can compare forward and reverse relationships by opening Span Links and Referenced By at the same time.
Screenshots / Video
Before | After -- | -- The Referenced By section did not exist. | A new Referenced By accordion section shows spans referencing the current span.How to Test on Vercel Preview
Preview route:
/traces/[id]Steps
Open a trace containing spans with
__hdx_span_linkspointing to other spans.Select a span that is referenced by one or more other spans.
In the span detail panel, scroll to the Referenced By accordion section.
Verify that it lists all spans whose span links include the current span's
SpanId.Click a reverse-link entry.
Confirm that it navigates to the referencing span's panel.
References
Linear Issue: [Feature Request] Show span links from the producer side too #2828