Transaction Dashboard: Call stack trace tab by quietbits · Pull Request #1821 · stellar/laboratory

quietbits · 2026-01-21T19:57:19Z

Call stack trace view for transaction diagnostic events.
- You can test by using any recent transaction ID on any network, then use the test sections to select the data source to view. This is for testing only and will be removed before the PR is merged.

Reusing some styles and pieces from PrettyJson because the use case here is slightly different (everything needs to work inline).
Params collapsing: we’re using the max params count (4), which is the only performant way to handle it. We can’t dynamically set them to fit on a single line because that would create too many size listeners on the page, making everything feel sluggish. This is not ideal, because for long params they would still wrap to the second line, but this is a compromise we need to make to keep the page snappy.

stellar-jenkins · 2026-01-21T20:01:31Z

Preview is available here:
http://laboratory-pr1821.previews.kube001.services.stellar-ops.com/

Copilot

Pull request overview

This PR adds a new "Call Stack Trace" tab to the Transaction Dashboard that displays diagnostic events from Stellar transaction execution in a hierarchical, interactive view. The feature allows users to inspect contract function calls, events, parameters, and return values in chronological order with support for nested calls and error highlighting.

Changes:

Added new CallStackTrace component with collapsible view toggle and error state handling
Updated type definitions to support flexible diagnostic event formats
Added tab8, tab9, tab10 support to TabView component for future extensibility
Updated network limit configuration data for mainnet, testnet, and futurenet

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/types/types.ts	Updated diagnosticEventsJson type to support DiagnosticEventJson array, AnyObject, or undefined
src/helpers/getTxResourceBreakdown.ts	Added type assertion for diagnostic event data access
src/constants/networkLimits.ts	Updated live_soroban_state_size_window values for all networks
src/components/TabView/index.tsx	Extended TabView to support up to 10 tabs
src/app/(sidebar)/transaction-dashboard/styles.scss	Added comprehensive styling for CallStackTrace component
src/app/(sidebar)/transaction-dashboard/page.tsx	Integrated CallStackTrace tab into transaction dashboard
src/app/(sidebar)/transaction-dashboard/components/CallStackTrace.tsx	New component for displaying call stack trace with test data

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-21T20:02:39Z

src/app/(sidebar)/transaction-dashboard/components/CallStackTrace.tsx

+  const [testDataId, setTestDataId] = useState<string>("");
+
+  const TEST_DATA: { [key: string]: DiagnosticEventJson[] } = {
+    soroSwap: TEMP_SS,
+    kale: TEMP_KALE,
+    longParams: TEMP_LONG_PARAMS,
+    someFailed: TEMP_MIXED,
+    allFailed: TEMP_FAILED,
+  };
+
+  const data = diagnosticEvents
+    ? formatDiagnosticEvents(TEST_DATA[testDataId] || diagnosticEvents)


Test data state and logic must be removed before merging. The testDataId state, TEST_DATA object, and the logic that overrides diagnosticEvents with test data (line 53) are for testing purposes only and should not be present in production code.

src/app/(sidebar)/transaction-dashboard/styles.scss

src/app/(sidebar)/transaction-dashboard/components/CallStackTrace.tsx

Copilot · 2026-01-21T20:02:41Z

src/app/(sidebar)/transaction-dashboard/components/CallStackTrace.tsx

+      {/* TODO: remove before merge */}
+      <div
+        style={{
+          border: "2px solid #c00",
+          display: "flex",
+          gap: "8px",
+          flexWrap: "wrap",
+          padding: 10,
+          alignItems: "center",
+          fontWeight: "bold",
+          color: "#c00",
+        }}
+      >
+        <span>FOR TESTING:</span>
+
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() => setTestDataId("soroSwap")}
+          disabled={testDataId === "soroSwap"}
+        >
+          SoroSwap
+        </Button>
+
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() => setTestDataId("kale")}
+          disabled={testDataId === "kale"}
+        >
+          Kale
+        </Button>
+
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() => setTestDataId("longParams")}
+          disabled={testDataId === "longParams"}
+        >
+          Long params
+        </Button>
+
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() => setTestDataId("someFailed")}
+          disabled={testDataId === "someFailed"}
+        >
+          Some failed
+        </Button>
+
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() => setTestDataId("allFailed")}
+          disabled={testDataId === "allFailed"}
+        >
+          All failed
+        </Button>
+
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() => setTestDataId("")}
+          disabled={testDataId === ""}
+        >
+          Clear
+        </Button>
+      </div>


Test data and debugging UI must be removed before merging. This includes:

The entire test data section (lines 361-429) with the red border and test buttons

The TEMP_ constant imports (lines 20-24)

The TEST_DATA object and testDataId state (lines 42-50)

The logic that uses TEST_DATA to override diagnosticEvents (line 53)

These test utilities should not be present in production code.

Copilot · 2026-01-21T20:02:41Z

src/app/(sidebar)/transaction-dashboard/components/CallStackTrace.tsx

+  TEMP_FAILED,
+  TEMP_KALE,
+  TEMP_LONG_PARAMS,
+  TEMP_MIXED,
+  TEMP_SS,


Test data imports must be removed before merging. These TEMP_ constants (lines 20-24) are imported for testing purposes only and should not be present in production code. They are used in the test data section that needs to be removed.

stellar-jenkins · 2026-01-21T20:22:45Z

Preview is available here:
http://laboratory-pr1821.previews.kube001.services.stellar-ops.com/

stellar-jenkins · 2026-01-21T21:54:13Z

Preview is available here:
http://laboratory-pr1821.previews.kube001.services.stellar-ops.com/

jeesunikim · 2026-01-26T23:37:06Z

src/helpers/formatDiagnosticEvents.ts

+  | { type: "map"; value: FormattedMapEntry[] }
+  | { type: "literal"; value: string }
+  | { type: "ellipsis"; value: string }
+  | { type: undefined; value: unknown };


we can have an undefined formatted event data?

It's used in formatEventData function when we can't find the type. Should we set a different value? We can't make it optional, because the type prop is required.

// line 245 return { value: data, type: undefined };

src/app/(sidebar)/transaction-dashboard/styles.scss

jeesunikim · 2026-01-27T00:05:01Z

I noticed that contract_id of fn_return doesn't appear in the UI. Showing which contract executed the function is informative. Any thoughts on this? I added a message in slack. The hash for this is 8d97067ae3595c100cd977a68f6980b0a43b4865e9b912ceac82d3b9c6528e1e on TESTNET

leighmcculloch · 2026-01-27T00:50:28Z

One piece of feedback is that when I loaded up the page, the first place I went was the transaction subsection to look for the dashboard. But then after clicking around for a bit I realised that the dashboard was a separate page outside that section.

leighmcculloch · 2026-01-27T00:50:56Z

The label for the transaction hash is Transaction Info, could we name it Transaction Hash?

leighmcculloch · 2026-01-27T00:54:41Z

Couple things of note looking at the event view:

It's not obvious that the first few items are topics. Could we introduce the word "topics" somewhere into that UI so that a developer looking at code and seeing "topics" and "data" will look at this and see a 1-1 vocab.
The topic that shows "USDC" G... obfuscates that the string is not just the "USDC" or that the quotes aren't part of the string. I like that it linkifies the address. I'm wondering, given it is an asset address, maybe we could link directly to the asset page on stellar.expert, and retain the USDC:G... form and truncate that full form differently rather than separating the asset code from the issuer and truncating the issuer separately. Wdyt?

leighmcculloch · 2026-01-27T00:59:47Z

The state change view is AMAZING.

leighmcculloch · 2026-01-27T01:03:01Z

The events view looks really nice.

One thing where my eyes start to lose focus and I get confused is where there are contract events at one level, and events at a sub-fn level in close proximity. They are not the easiest to differiate. I think because we're relying purely on narrow indenting to create the tree effect, it starts to lose effect once things get deeper.

From a design perspective do you think having connecting lines for sections or something like that would help for more complex graphs?

leighmcculloch · 2026-01-27T01:04:02Z

Do auth signatures also appear here, or on another tab when an auth signature (not tx signature) is present?

leighmcculloch · 2026-01-27T01:05:07Z

The fee breakdown is really nice. I love that it parallels the language used in the stellar-cli too and there's a consistency here that's so helpful for developers.

* Adjust Tabs styling * Call stack trace tabs text

stellar-jenkins · 2026-01-27T02:33:13Z

Preview is available here:
http://laboratory-pr1821.previews.kube001.services.stellar-ops.com/

janewang · 2026-01-27T02:44:40Z

@leighmcculloch I'm going to move some of your comments into tickets so that this PR can be cleaned up and merge.
#1835

@quietbits Could we link contract ID internally to Lab's contract explorer with contract ID already prepopulated?

stellar-jenkins · 2026-02-04T19:57:08Z

Preview is available here:
http://laboratory-pr1821.previews.kube001.services.stellar-ops.com/

jeesunikim · 2026-02-05T00:24:13Z

src/helpers/formatDiagnosticEvents.ts

+
+  return {
+    callStack,
+    coreMetrics,


coreMetrics isn't being used in CallStackTrace. Does this need to be returned?

jeesunikim · 2026-02-05T00:24:43Z

src/helpers/formatDiagnosticEvents.ts

+    };
+  }
+
+  const { callStack, coreMetrics } = processEvents(dEvents);


same here with coreMetrics. Where does this being used?

jeesunikim · 2026-02-05T01:59:30Z

for all failed state, the first one isn't rendering in red

jeesunikim · 2026-02-05T03:28:22Z

on some failed, the last failure state isn't highlighted

quietbits added 6 commits January 21, 2026 13:41

Transaction Dashboard: Call stack trace tab

7cc413c

Resolved merge conflicts

0bc062f

Resolved conflicts + tweaks

71a74fb

Cleanup

397060a

More cleanup

f59da37

Adjust mobile view

f6fb643

Copilot AI review requested due to automatic review settings January 21, 2026 19:57

github-project-automation bot added this to DevX Jan 21, 2026

github-project-automation bot moved this to Backlog (Not Ready) in DevX Jan 21, 2026

Copilot started reviewing on behalf of quietbits January 21, 2026 19:58 View session

Copilot AI reviewed Jan 21, 2026

View reviewed changes

Address Copilot feedback

43f4987

quietbits linked an issue Jan 21, 2026 that may be closed by this pull request

Create visual rendering of diagnostic events #1317

Open

More cleanup

c4aba1f

quietbits requested a review from jeesunikim January 21, 2026 22:11

jeesunikim reviewed Jan 26, 2026

View reviewed changes

src/app/(sidebar)/transaction-dashboard/styles.scss Show resolved Hide resolved

Adjust Tabs styling (#1829)

a1311f6

* Adjust Tabs styling * Call stack trace tabs text

quietbits added 4 commits February 4, 2026 09:45

Handle vec and map param types

8f1f62d

Resolve merge conflicts

1aab2c5

Simplify ellipsis

6b36276

Fix ellipsis bracket spacing

803e03d

jeesunikim mentioned this pull request Feb 5, 2026

Enable auth signatures in Transaction Dashboard #1848

Closed

jeesunikim reviewed Feb 5, 2026

View reviewed changes

Conversation

quietbits commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stellar-jenkins commented Jan 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

stellar-jenkins commented Jan 21, 2026

Uh oh!

stellar-jenkins commented Jan 21, 2026

Uh oh!

jeesunikim Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

quietbits Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jeesunikim commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

leighmcculloch commented Jan 27, 2026

Uh oh!

leighmcculloch commented Jan 27, 2026

Uh oh!

leighmcculloch commented Jan 27, 2026

Uh oh!

leighmcculloch commented Jan 27, 2026

Uh oh!

leighmcculloch commented Jan 27, 2026

Uh oh!

leighmcculloch commented Jan 27, 2026

Uh oh!

leighmcculloch commented Jan 27, 2026

Uh oh!

stellar-jenkins commented Jan 27, 2026

Uh oh!

janewang commented Jan 27, 2026

Uh oh!

stellar-jenkins commented Feb 4, 2026

Uh oh!

jeesunikim Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

jeesunikim Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

jeesunikim commented Feb 5, 2026

Uh oh!

jeesunikim commented Feb 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

quietbits commented Jan 21, 2026 •

edited

Loading

jeesunikim commented Jan 27, 2026 •

edited

Loading