Merge pull request #1 from crtdll/patch-1

Added stracktrace->vars support

Author: edde746

frontend/src/components/events/StacktraceViewer.tsx

@@ -3,6 +3,8 @@ import IconChevronDown from "~icons/lucide/chevron-down";
 import IconChevronRight from "~icons/lucide/chevron-right";
 import Button from "~/components/ui/Button";
 
+type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
+
 export interface StackFrame {
   filename?: string;
   function?: string;
@@ -28,6 +30,7 @@ export interface StackFrame {
   };
   addr_mode?: string;
   trust?: string;
+  vars?: Record<string, JsonValue>;
 }
 
 export interface DebugImage {
@@ -66,6 +69,13 @@ function findImage(
   return null;
 }
 
+function formatVarValue(value: JsonValue): string {
+  if (typeof value === "string")
+    return value;
+
+  return JSON.stringify(value, null, 2);
+}
+
 export function getFrameName(frame: StackFrame): string {
   return frame.function ?? frame.instruction_addr ?? "<anonymous>";
 }
@@ -148,7 +158,8 @@ export default function StacktraceViewer(props: StacktraceViewerProps) {
                 img?.arch
               );
             };
-            const isExpandable = () => hasContext() || hasDebugInfo();
+            const hasVars = () => !!frame.vars && Object.keys(frame.vars).length > 0;
+            const isExpandable = () => hasContext() || hasDebugInfo() || hasVars();
             const frameName = () => getFrameName(frame);
             const frameLocation = () => getFrameLocation(frame);
 
@@ -274,6 +285,20 @@ export default function StacktraceViewer(props: StacktraceViewerProps) {
                     </Show>
                   </dl>
                 </Show>
+                <Show when={isExpanded() && hasVars()}>
+                  <dl class="stacktrace__vars">
+                    <For each={Object.entries(frame.vars!)}>
+                      {([name, value]) => (
+                        <>
+                          <dt>{name}</dt>
+                          <dd>
+                            <pre>{formatVarValue(value)}</pre>
+                          </dd>
+                        </>
+                      )}
+                    </For>
+                  </dl>
+                </Show>
               </div>
             );
           }}

frontend/src/styles/globals.css

@@ -1159,6 +1159,36 @@ label.field-label--sm {
   font-size: 12px;
 }
 
+.stacktrace__vars {
+  margin: 0 16px 8px;
+  padding: 8px 12px;
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-1);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 16px;
+  row-gap: 4px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.stacktrace__vars dt {
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
+.stacktrace__vars dd {
+  margin: 0;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.stacktrace__vars code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
 /* ===================================================================
    BREADCRUMBS TIMELINE
    =================================================================== */