From db33095ecb68f72d6bfdf2bc1b5a890deac46306 Mon Sep 17 00:00:00 2001
From: butschster <butschster@gmail.com>
Date: Tue, 12 May 2026 18:35:03 +0400
Subject: [PATCH 1/2] fix: Sentry event page display bugs from issue #321

Trace context no longer renders a 'View full trace' link when no
transaction was captured (which 404'd against /api/sentry/traces/{id}).
Stack-frame chevrons that animate with no source context now render
the frame's vars as a fallback list instead of an empty body. Empty
Runtime/OS/SDK context boxes and blank tag pills are hidden rather
than shown as empty placeholders. The event page header now formats
the Sentry timestamp as epoch seconds (was rendering year 1970). The
sidebar dot indicator no longer depends on the event-count visibility
setting.
---
 .../sentry-exception-frame.stories.ts         | 35 ++++++++++
 .../sentry-exception-frame.vue                | 55 ++++++++++++++--
 .../sentry-page-tags.stories.ts               | 27 ++++++++
 .../ui/sentry-page-tags/sentry-page-tags.vue  | 66 +++++++++++--------
 .../ui/sentry-page/sentry-page.stories.ts     | 52 +++++++++++++++
 .../sentry/ui/sentry-page/sentry-page.vue     |  7 +-
 .../trace-context-block.stories.ts            | 15 +++++
 .../trace-context-block.vue                   | 14 +++-
 .../ui/layout-sidebar/layout-sidebar.vue      |  5 +-
 9 files changed, 242 insertions(+), 34 deletions(-)

diff --git a/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.stories.ts b/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.stories.ts
index c4611c9a..955ba930 100644
--- a/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.stories.ts
+++ b/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.stories.ts
@@ -17,3 +17,38 @@ export const Frame: StoryObj<typeof SentryExceptionFrame> = {
     frame: normalizeSentryEvent(sentrySpiralMock).payload?.exception?.values?.[0]?.stacktrace?.frames?.[1],
   }
 };
+
+// A frame that has variables but no source context (no context_line /
+// pre_context / post_context). Before the fix, expanding such a frame
+// produced an empty body — the vars are now rendered as a fallback list.
+export const VarsOnlyNoSource: StoryObj<typeof SentryExceptionFrame> = {
+  args: {
+    isOpen: true,
+    frame: {
+      filename: 'vendor/lib/internal.php',
+      function: 'callUserFunction',
+      lineno: 42,
+      in_app: false,
+      vars: {
+        userId: 17,
+        attempts: 3,
+        config: { retries: 5, timeout: 1000 },
+        token: null,
+      },
+    } as never,
+  },
+};
+
+// A frame with no body and no vars must still render a single line with no
+// expandable body (chevron hidden).
+export const Bare: StoryObj<typeof SentryExceptionFrame> = {
+  args: {
+    isOpen: false,
+    frame: {
+      filename: '[internal]',
+      function: 'spl_autoload_call',
+      lineno: 0,
+      in_app: false,
+    } as never,
+  },
+};
diff --git a/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.vue b/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.vue
index d5c8c5c9..343be22d 100644
--- a/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.vue
+++ b/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.vue
@@ -21,12 +21,26 @@ const { buildLink } = useIdeLink()
 
 const ideLink = computed(() => buildLink(props.frame.filename ?? 'unknown', props.frame.lineno))
 
-const hasBody = computed(() =>
-  Boolean(props.frame.context_line || props.frame.post_context || props.frame.pre_context)
-)
+const hasBody = computed(() => {
+  const f = props.frame
+  return Boolean(
+    f.context_line ||
+      (Array.isArray(f.post_context) && f.post_context.length > 0) ||
+      (Array.isArray(f.pre_context) && f.pre_context.length > 0)
+  )
+})
 
 const hasVars = computed(() => props.frame.vars && Object.keys(props.frame.vars).length > 0)
 
+const varEntries = computed(() =>
+  props.frame.vars
+    ? Object.entries(props.frame.vars).map(([name, value]) => ({
+        name,
+        value: formatVarValue(value)
+      }))
+    : []
+)
+
 // Floating tooltip state
 const tooltip = reactive({
   visible: false,
@@ -198,7 +212,7 @@ const toggleOpen = () => {
     </div>
 
     <div
-      v-if="isFrameOpen && hasBody"
+      v-if="isFrameOpen && (hasBody || hasVars)"
       class="frame__body"
     >
       <template v-if="frame.pre_context">
@@ -256,6 +270,25 @@ const toggleOpen = () => {
           >{{ seg.text }}</span><template v-else>{{ seg.text }}</template></template></pre>
         </div>
       </template>
+
+      <!-- Vars fallback: shown when the frame has no source context lines.
+           When source IS available, vars are highlighted inline above. -->
+      <dl
+        v-if="hasVars && !hasBody"
+        class="frame__vars"
+      >
+        <template
+          v-for="entry in varEntries"
+          :key="entry.name"
+        >
+          <dt class="frame__var-name">
+            {{ entry.name }}
+          </dt>
+          <dd class="frame__var-value">
+            <pre>{{ entry.value }}</pre>
+          </dd>
+        </template>
+      </dl>
     </div>
 
     <!-- Fixed-position tooltip (teleported outside overflow) -->
@@ -356,6 +389,20 @@ const toggleOpen = () => {
     @apply bg-amber-500/20;
   }
 }
+
+/* Vars fallback list (shown when frame has no source context) */
+.frame__vars {
+  @apply grid gap-x-3 gap-y-1 p-2 text-gray-200;
+  grid-template-columns: max-content 1fr;
+}
+
+.frame__var-name {
+  @apply text-amber-300 font-mono text-2xs self-start whitespace-nowrap;
+}
+
+.frame__var-value pre {
+  @apply text-2xs whitespace-pre-wrap break-words;
+}
 </style>
 
 <!-- Global styles for teleported tooltip -->
diff --git a/src/entities/sentry/ui/sentry-page-tags/sentry-page-tags.stories.ts b/src/entities/sentry/ui/sentry-page-tags/sentry-page-tags.stories.ts
index 22303133..98091370 100644
--- a/src/entities/sentry/ui/sentry-page-tags/sentry-page-tags.stories.ts
+++ b/src/entities/sentry/ui/sentry-page-tags/sentry-page-tags.stories.ts
@@ -21,3 +21,30 @@ export const Spiral: StoryObj<typeof SentryPageTags> = {
     payload: normalizeSentryEvent(sentrySpiralMock).payload,
   }
 };
+
+// A payload that omits runtime / os / sdk and logger / server_name. The
+// section should hide its empty context boxes and empty tag pills entirely
+// rather than render placeholder rows with blank values.
+export const MinimalNoContexts: StoryObj<typeof SentryPageTags> = {
+  args: {
+    payload: {
+      event_id: 'mini-1',
+      environment: 'production',
+      platform: 'php',
+      // No logger, server_name, contexts, sdk — everything else stripped.
+    } as never,
+  },
+};
+
+// A payload with only logger + env populated. Verifies that those tags appear
+// without the runtime/os/server pills.
+export const EnvAndLoggerOnly: StoryObj<typeof SentryPageTags> = {
+  args: {
+    payload: {
+      event_id: 'env-only-1',
+      environment: 'staging',
+      logger: 'app.errors',
+      platform: 'php',
+    } as never,
+  },
+};
diff --git a/src/entities/sentry/ui/sentry-page-tags/sentry-page-tags.vue b/src/entities/sentry/ui/sentry-page-tags/sentry-page-tags.vue
index f3375e8a..a0a01040 100644
--- a/src/entities/sentry/ui/sentry-page-tags/sentry-page-tags.vue
+++ b/src/entities/sentry/ui/sentry-page-tags/sentry-page-tags.vue
@@ -21,37 +21,46 @@ const contextsOS = computed(() => {
   return { name, version }
 })
 
-const boxes = computed(() => [
-  {
-    title: 'Runtime',
-    name: contextsRuntime.value.name,
-    version: contextsRuntime.value.version
-  },
-  {
-    title: 'OS',
-    name: contextsOS.value.name,
-    version: contextsOS.value.version
-  },
-  {
-    title: 'SDK',
-    name: props.payload.sdk?.name,
-    version: props.payload.sdk?.version
-  }
-])
-
-const tags = computed(() => [
-  { name: 'env', value: props.payload.environment },
-  { name: 'logger', value: props.payload.logger },
-  { name: 'os', value: `${contextsOS.value.name} ${contextsOS.value.version}` },
-  { name: 'runtime', value: `${contextsRuntime.value.name} ${contextsRuntime.value.version}` },
-  { name: 'server', value: props.payload.server_name }
-])
+const boxes = computed(() =>
+  [
+    {
+      title: 'Runtime',
+      name: contextsRuntime.value.name,
+      version: contextsRuntime.value.version
+    },
+    {
+      title: 'OS',
+      name: contextsOS.value.name,
+      version: contextsOS.value.version
+    },
+    {
+      title: 'SDK',
+      name: props.payload.sdk?.name ?? '',
+      version: props.payload.sdk?.version ?? ''
+    }
+  ].filter((b) => b.name || b.version)
+)
+
+const tags = computed(() => {
+  const os = `${contextsOS.value.name} ${contextsOS.value.version}`.trim()
+  const runtime = `${contextsRuntime.value.name} ${contextsRuntime.value.version}`.trim()
+  return [
+    { name: 'env', value: props.payload.environment },
+    { name: 'logger', value: props.payload.logger },
+    { name: 'os', value: os },
+    { name: 'runtime', value: runtime },
+    { name: 'server', value: props.payload.server_name }
+  ].filter((t) => t.value)
+})
 </script>
 
 <template>
   <section class="tags-section">
     <!-- Context boxes -->
-    <div class="tags-section__boxes">
+    <div
+      v-if="boxes.length"
+      class="tags-section__boxes"
+    >
       <div
         v-for="box in boxes"
         :key="box.title"
@@ -59,7 +68,10 @@ const tags = computed(() => [
       >
         <span class="tags-section__box-label">{{ box.title }}</span>
         <span class="tags-section__box-name">{{ box.name }}</span>
-        <span class="tags-section__box-version">{{ box.version }}</span>
+        <span
+          v-if="box.version"
+          class="tags-section__box-version"
+        >{{ box.version }}</span>
       </div>
     </div>
 
diff --git a/src/entities/sentry/ui/sentry-page/sentry-page.stories.ts b/src/entities/sentry/ui/sentry-page/sentry-page.stories.ts
index 361d9fac..35af51ba 100644
--- a/src/entities/sentry/ui/sentry-page/sentry-page.stories.ts
+++ b/src/entities/sentry/ui/sentry-page/sentry-page.stories.ts
@@ -71,3 +71,55 @@ export const PagePythonLog: StoryObj<typeof SentryPage> = {
     event: normalizeSentryEvent(sentryPythonLogMock as unknown as ServerEvent<Sentry>), // TODO: fix ServerEvent<Sentry>
   }
 };
+
+// A minimal Sentry SDK v4 payload: an error event with contexts.trace.trace_id
+// but no transaction was captured, and no runtime/os/sdk/logger metadata.
+// Before the fixes this rendered:
+//   - "View full trace →" link that 404'd
+//   - empty Runtime / OS / SDK context boxes
+//   - timestamp in year 1970 (moment treated seconds as ms)
+export const PageMinimalErrorNoTrace: StoryObj<typeof SentryPage> = {
+  args: {
+    event: normalizeSentryEvent({
+      uuid: 'mini-1',
+      type: 'sentry',
+      project: null,
+      timestamp: 1774960590,
+      payload: {
+        event_id: 'mini-1',
+        timestamp: 1774960590.323397,
+        platform: 'php',
+        level: 'error',
+        environment: 'staging',
+        transaction: 'POST /api/orders',
+        contexts: {
+          trace: {
+            trace_id: 'aabbccdd11223344eeff00112233',
+            span_id: 'spanid01',
+          },
+        },
+        exception: {
+          values: [
+            {
+              type: 'RuntimeException',
+              value: 'Order processing failed',
+              stacktrace: {
+                frames: [
+                  {
+                    filename: 'app/Orders/Processor.php',
+                    function: 'process',
+                    lineno: 42,
+                    in_app: true,
+                    context_line: '    $this->charge($order);',
+                    pre_context: ['public function process(Order $order)', '{'],
+                    post_context: ['    $order->markPaid();', '}'],
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    } as unknown as ServerEvent<Sentry>),
+  }
+};
diff --git a/src/entities/sentry/ui/sentry-page/sentry-page.vue b/src/entities/sentry/ui/sentry-page/sentry-page.vue
index 6232c424..1cc2afc7 100644
--- a/src/entities/sentry/ui/sentry-page/sentry-page.vue
+++ b/src/entities/sentry/ui/sentry-page/sentry-page.vue
@@ -21,7 +21,12 @@ type Props = {
 
 const props = defineProps<Props>()
 
-const formattedTimestamp = computed(() => moment(props.event.payload.timestamp).toLocaleString())
+const formattedTimestamp = computed(() => {
+  const ts = props.event.payload.timestamp
+  if (typeof ts === 'number') return moment.unix(ts).toLocaleString()
+  if (ts) return moment(ts).toLocaleString()
+  return ''
+})
 
 const mainException = computed(() => props.event.payload?.exception?.values?.[0])
 const exceptionsLength = computed(() => props.event?.payload?.exception?.values?.length || 0)
diff --git a/src/entities/sentry/ui/trace-context-block/trace-context-block.stories.ts b/src/entities/sentry/ui/trace-context-block/trace-context-block.stories.ts
index d7a83dd9..fa94e685 100644
--- a/src/entities/sentry/ui/trace-context-block/trace-context-block.stories.ts
+++ b/src/entities/sentry/ui/trace-context-block/trace-context-block.stories.ts
@@ -33,6 +33,21 @@ export const NoSpans: StoryObj<typeof TraceContextBlock> = {
   },
 };
 
+// Error event with a trace_id but no captured transaction. The "View full
+// trace" link must be hidden because /sentry/traces/{traceId} would 404.
+export const ErrorOnlyNoTransaction: StoryObj<typeof TraceContextBlock> = {
+  args: {
+    traceSummary: {
+      trace_id: 'aabbccdd11223344eeff00112233',
+      transaction_name: '',
+      op: '',
+      duration_ms: 0,
+      span_count: 0,
+      preview_spans: [],
+    },
+  },
+};
+
 export const Null: StoryObj<typeof TraceContextBlock> = {
   args: {
     traceSummary: null,
diff --git a/src/entities/sentry/ui/trace-context-block/trace-context-block.vue b/src/entities/sentry/ui/trace-context-block/trace-context-block.vue
index d6cee7f0..05d9bca7 100644
--- a/src/entities/sentry/ui/trace-context-block/trace-context-block.vue
+++ b/src/entities/sentry/ui/trace-context-block/trace-context-block.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { RouteName } from '@/shared/types'
 import type { SentryTraceSummary } from '../../types'
 import { MiniWaterfall } from '../mini-waterfall'
@@ -7,9 +8,19 @@ type Props = {
   traceSummary: SentryTraceSummary | null
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 
 const shortId = (id: string) => (id ? id.substring(0, 12) + '...' : '')
+
+// The "View full trace" page only exists when a Sentry transaction was
+// captured alongside the error. For plain error events we just have the
+// trace_id in `contexts.trace` — clicking through would 404 against
+// /api/sentry/traces/{traceId}.
+const hasFullTrace = computed(() => {
+  const s = props.traceSummary
+  if (!s) return false
+  return (s.span_count ?? 0) > 0 || (s.preview_spans?.length ?? 0) > 0
+})
 </script>
 
 <template>
@@ -48,6 +59,7 @@ const shortId = (id: string) => (id ? id.substring(0, 12) + '...' : '')
     />
 
     <RouterLink
+      v-if="hasFullTrace"
       :to="{ name: RouteName.SentryTraceDetail, params: { traceId: traceSummary.trace_id } }"
       class="trace-ctx__link"
     >
diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
index efebb5a3..c654313a 100644
--- a/src/widgets/ui/layout-sidebar/layout-sidebar.vue
+++ b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
@@ -138,7 +138,10 @@ const makeShortTitle = (title: string) => (title || '').substring(0, 2)
 const generateRadialGradient = (input: string) =>
   `linear-gradient(to right, ${textToColors(input || '').join(', ')})`
 
-const hasEvents = (type: EventType) => isVisibleEventCounts.value && getItemsCount.value(type) > 0
+// The colored dot is the at-a-glance indicator that events of this type
+// exist. The numeric count badge (gated by isVisibleEventCounts) is separate
+// — turning counts off should not also hide the indicator.
+const hasEvents = (type: EventType) => getItemsCount.value(type) > 0
 </script>
 
 <template>

From 87847a8695d335885d55bb09d18573fb3d2f458e Mon Sep 17 00:00:00 2001
From: butschster <butschster@gmail.com>
Date: Wed, 13 May 2026 08:52:19 +0400
Subject: [PATCH 2/2] fix: probe trace endpoint so 'View full trace' link shows
 when transaction exists

The trace context block was rendered with a synthetic summary that had
zero spans, so the link-visibility guard hid 'View full trace' even when
a transaction was captured for that trace_id. Fetch /api/sentry/traces/
{traceId} on mount: populate the real span_count / duration_ms / preview
spans when present (link renders), keep the synthetic minimal summary on
404 (link stays hidden, no broken navigation).
---
 .../sentry/ui/sentry-page/sentry-page.vue     | 96 ++++++++++++++++---
 1 file changed, 85 insertions(+), 11 deletions(-)

diff --git a/src/entities/sentry/ui/sentry-page/sentry-page.vue b/src/entities/sentry/ui/sentry-page/sentry-page.vue
index 1cc2afc7..10022ec9 100644
--- a/src/entities/sentry/ui/sentry-page/sentry-page.vue
+++ b/src/entities/sentry/ui/sentry-page/sentry-page.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import moment from 'moment'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { NormalizedEvent } from '@/shared/types'
 import { EventDetailLayout, PageTabs, PageTab } from '@/shared/ui'
-import type { Sentry } from '../../types'
+import { useSentryRequests } from '../../lib/use-sentry-requests'
+import type { Sentry, SentryTraceSummary } from '../../types'
 import { SentryException } from '../sentry-exception'
 import { SentryPageApp } from '../sentry-page-app'
 import { SentryPageBreadcrumbs } from '../sentry-page-breadcrumbs'
@@ -79,6 +80,86 @@ const scrollToException = (idx: number) => {
     el.scrollIntoView({ behavior: 'smooth', block: 'start' })
   }
 }
+
+// Trace summary for the "Trace context" block.
+//
+// The canonical event payload carries `contexts.trace.trace_id` but no
+// information about whether a transaction was captured for that trace. We
+// probe /api/sentry/traces/{traceId} on mount: when it returns we get real
+// span counts/durations and the "View full trace" link can render; when it
+// 404s we keep a minimal synthetic summary and the link stays hidden (the
+// detail page would 404 anyway).
+const traceId = computed(() => {
+  const id = props.event.payload.contexts?.trace?.trace_id
+  return typeof id === 'string' ? id : ''
+})
+
+const traceOp = computed(() => {
+  const op = props.event.payload.contexts?.trace?.op
+  return typeof op === 'string' ? op : ''
+})
+
+// SentrySpanPreview narrows peer_type to a fixed set of categories. Map
+// anything else from the API response to null so the type checker is happy.
+const normalizePeerType = (
+  v: string | null | undefined
+): 'db' | 'http' | 'cache' | 'queue' | null => {
+  if (v === 'db' || v === 'http' || v === 'cache' || v === 'queue') return v
+  return null
+}
+
+const buildSyntheticSummary = (): SentryTraceSummary => ({
+  trace_id: traceId.value,
+  transaction_name: props.event.payload.transaction ?? '',
+  op: traceOp.value,
+  duration_ms: 0,
+  span_count: 0,
+  preview_spans: []
+})
+
+const traceSummary = ref<SentryTraceSummary | null>(null)
+const { getTraceDetail } = useSentryRequests()
+
+const loadTraceSummary = async (id: string) => {
+  if (!id) {
+    traceSummary.value = null
+    return
+  }
+  // Default to the synthetic summary so the block still shows the trace id
+  // even if the probe fails.
+  traceSummary.value = buildSyntheticSummary()
+  try {
+    const detail = await getTraceDetail(id)
+    const spans = detail.spans ?? []
+    traceSummary.value = {
+      trace_id: detail.trace_id,
+      transaction_name:
+        detail.transaction?.transaction_name ?? props.event.payload.transaction ?? '',
+      op: detail.transaction?.op ?? traceOp.value,
+      duration_ms: detail.transaction?.duration_ms ?? 0,
+      span_count: spans.length,
+      preview_spans: spans.slice(0, 5).map((s) => ({
+        span_id: s.span_id,
+        op: s.op ?? '',
+        description: s.description ?? '',
+        start_offset_ms: s.start_offset_ms ?? 0,
+        duration_ms: s.duration_ms ?? 0,
+        peer_type: normalizePeerType(s.peer_type),
+        is_error: s.is_error ?? false
+      }))
+    }
+  } catch {
+    // 404 / network error → synthetic summary already in place, link hidden.
+  }
+}
+
+watch(
+  traceId,
+  (id) => {
+    loadTraceSummary(id)
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
@@ -235,15 +316,8 @@ const scrollToException = (idx: number) => {
           <SentryPageTags :payload="event.payload" />
 
           <TraceContextBlock
-            v-if="hasTraceContext && event.payload.contexts?.trace"
-            :trace-summary="{
-              trace_id: String(event.payload.contexts!.trace!.trace_id || ''),
-              transaction_name: String(event.payload.transaction || ''),
-              op: String(event.payload.contexts!.trace!.op || ''),
-              duration_ms: 0,
-              span_count: 0,
-              preview_spans: []
-            }"
+            v-if="hasTraceContext && traceSummary"
+            :trace-summary="traceSummary"
           />
 
           <SentryPageApp