diff --git a/packages/core/tracing/sandbox/fixtures/trace-batches.json b/packages/core/tracing/sandbox/fixtures/trace-batches.json
index 722786b1b9..a42495b470 100644
--- a/packages/core/tracing/sandbox/fixtures/trace-batches.json
+++ b/packages/core/tracing/sandbox/fixtures/trace-batches.json
@@ -1 +1 @@
-{"batches":[{"resource":{"attributes":[{"key":"service.instance.id","value":{"stringValue":"199dac6f-0d39-4297-8de8-01d32ce8130f"}},{"key":"service.version","value":{"stringValue":"3.9.0.0"}},{"key":"session.id","value":{"stringValue":"01937749-5e3e-7cc8-92bc-7544bbcd19f5"}},{"key":"service.name","value":{"stringValue":"kong"}}]},"scopeSpans":[{"scope":{"name":"kong-internal","version":"0.1.0"},"spans":[{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"hqW7KerPPTQ=","parentSpanId":"j7D3aE2ZGRQ=","name":"kong.read_client_http_headers","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1732873124311000064","endTimeUnixNano":"1732873124311535360","attributes":[{"key":"raw_header_size_total","value":{"doubleValue":2091}},{"key":"raw_header_count","value":{"doubleValue":17}}],"status":{}},{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"VDq+fjFk4qE=","parentSpanId":"j7D3aE2ZGRQ=","name":"kong.phase.rewrite","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1732873124311537920","endTimeUnixNano":"1732873124311559168","status":{}},{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"kxftSoSftmM=","parentSpanId":"j7D3aE2ZGRQ=","name":"kong.phase.access","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1732873124311576576","endTimeUnixNano":"1732873124311775488","status":{}},{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"2CY0hRrZh7I=","parentSpanId":"kxftSoSftmM=","name":"kong.router","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1732873124311582208","endTimeUnixNano":"1732873124311599360","status":{}},{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"wtSZA1EJows=","parentSpanId":"kxftSoSftmM=","name":"kong.dns","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1732873124311753472","endTimeUnixNano":"1732873124311771904","attributes":[{"key":"proxy.kong.dns.record.domain","value":{"stringValue":"httpbin.org"}},{"key":"proxy.kong.dns.record.ip","value":{"stringValue":"18.213.123.165"}},{"key":"proxy.kong.dns.record.port","value":{"doubleValue":443}},{"key":"proxy.kong.dns.tries","value":{"arrayValue":{"values":[{"kvlistValue":{"values":[{"key":"msg","value":{"arrayValue":{"values":[{"stringValue":"cache-hit"}]}}},{"key":"qname","value":{"stringValue":"(short)httpbin.org"}}]}}]}}}],"status":{}},{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"VS1QJepZTts=","parentSpanId":"j7D3aE2ZGRQ=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1732873124311781120","endTimeUnixNano":"1732873124311782656","status":{}},{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"XxoNTGD3hcM=","parentSpanId":"j7D3aE2ZGRQ=","name":"kong.upstream.selection","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1732873124311796480","endTimeUnixNano":"1732873124311818496","attributes":[{"key":"proxy.kong.upstream.id","value":{"stringValue":"unknown"}},{"key":"try_count","value":{"doubleValue":1}},{"key":"proxy.kong.upstream.lb_algorithm","value":{"stringValue":"unknown"}}],"status":{}},{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"RA+EU1CA6Jg=","parentSpanId":"XxoNTGD3hcM=","name":"kong.upstream.try_select","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1732873124311796480","endTimeUnixNano":"1732873124311818496","attributes":[{"key":"proxy.kong.upstream.connect_duration_ms","value":{"doubleValue":0}},{"key":"try_count","value":{"doubleValue":1}},{"key":"proxy.kong.target.id","value":{"stringValue":"unknown"}},{"key":"network.peer.port","value":{"doubleValue":443}},{"key":"network.peer.name","value":{"stringValue":"httpbin.org"}},{"key":"network.peer.address","value":{"stringValue":"18.213.123.165"}},{"key":"keepalive","value":{"boolValue":true}}],"status":{}},{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"vH33nsVHD0s=","parentSpanId":"j7D3aE2ZGRQ=","name":"kong.upstream.ttfb","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1732873124311818496","endTimeUnixNano":"1732873124311818496","status":{}},{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"j6ZOT0K73mA=","parentSpanId":"j7D3aE2ZGRQ=","name":"kong.upstream.read_response","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1732873124311818496","endTimeUnixNano":"1732873124524818432","status":{}}]}]},{"resource":{"attributes":[{"key":"service.instance.id","value":{"stringValue":"199dac6f-0d39-4297-8de8-01d32ce8130f"}},{"key":"service.version","value":{"stringValue":"3.9.0.0"}},{"key":"session.id","value":{"stringValue":"01937749-5e3e-7cc8-92bc-7544bbcd19f5"}},{"key":"service.name","value":{"stringValue":"kong"}}]},"scopeSpans":[{"scope":{"name":"kong-internal","version":"0.1.0"},"spans":[{"traceId":"cheXC9pTxmL/PdeTFag9TQ==","spanId":"j7D3aE2ZGRQ=","name":"kong","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1732873124311000064","endTimeUnixNano":"1732873124528350720","attributes":[{"key":"client.address","value":{"stringValue":"192.168.65.1"}},{"key":"proxy.kong.service.id","value":{"stringValue":"f0d7c3a5-64ee-4065-b298-a985cdf969a8"}},{"key":"proxy.kong.route.id","value":{"stringValue":"42a74709-ffd0-4c3e-a466-8d978829a6af"}},{"key":"network.peer.address","value":{"stringValue":"192.168.65.1"}},{"key":"proxy.kong.upstream.id","value":{"stringValue":"unknown"}},{"key":"proxy.kong.upstream.addr","value":{"stringValue":"18.213.123.165"}},{"key":"url.full","value":{"stringValue":"http://localhost/req/headers"}},{"key":"proxy.kong.target.id","value":{"stringValue":"unknown"}},{"key":"http.request.header.host","value":{"stringValue":"localhost"}},{"key":"proxy.kong.request.id","value":{"stringValue":"bbb7e4374d3509271c0019440b7bd474"}},{"key":"url.scheme","value":{"stringValue":"http"}},{"key":"proxy.kong.upstream.ttfb_ms","value":{"doubleValue":0}},{"key":"proxy.kong.upstream.read_response_duration_ms","value":{"doubleValue":213}},{"key":"proxy.kong.latency_total_ms","value":{"doubleValue":213}},{"key":"proxy.kong.redis.total_io_ms","value":{"doubleValue":0}},{"key":"proxy.kong.tcpsock.total_io_ms","value":{"doubleValue":0}},{"key":"http.request.method","value":{"stringValue":"GET"}},{"key":"proxy.kong.upstream.host","value":{"stringValue":"18.213.123.165:443"}},{"key":"network.protocol.version","value":{"stringValue":"1.1"}}],"status":{}}]}]}]}
+{"batches":[{"resource":{"attributes":[{"key":"session.id","value":{"stringValue":"0193cf2f-943d-793a-819b-04ccf30948f3"}},{"key":"service.instance.id","value":{"stringValue":"4eb9bfce-d4fb-429d-b5d4-f37be1dfd680"}},{"key":"service.version","value":{"stringValue":"3.10.0.0"}},{"key":"service.name","value":{"stringValue":"kong"}}]},"scopeSpans":[{"scope":{"name":"kong-internal","version":"0.1.0"},"spans":[{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"jaw9O51b7eQ=","name":"kong","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832732999936","endTimeUnixNano":"1734347833661143808","attributes":[{"key":"url.full","value":{"stringValue":"http://localhost/foo/anything"}},{"key":"http.response.status_code","value":{"doubleValue":200}},{"key":"network.peer.address","value":{"stringValue":"34.226.108.155"}},{"key":"proxy.kong.latency.upstream.ttfb","value":{"doubleValue":568}},{"key":"proxy.kong.latency.upstream.read_response_duration","value":{"doubleValue":1}},{"key":"proxy.kong.latency.total","value":{"doubleValue":927}},{"key":"proxy.kong.latency.redis.total_io","value":{"doubleValue":0}},{"key":"proxy.kong.latency.tcpsock.total_io","value":{"doubleValue":0}},{"key":"http.request.size","value":{"stringValue":"280"}},{"key":"proxy.kong.request.id","value":{"stringValue":"0f9fc8071dbf62141d8f136bbb4cdd39"}},{"key":"client.address","value":{"stringValue":"127.0.0.1"}},{"key":"network.protocol.name","value":{"stringValue":"http"}},{"key":"proxy.kong.service.id","value":{"stringValue":"6ac56e3e-6f02-417b-b683-3d8bcfa7a839"}},{"key":"network.peer.port","value":{"doubleValue":443}},{"key":"network.protocol.version","value":{"stringValue":"1.1"}},{"key":"proxy.kong.route.id","value":{"stringValue":"34627a0f-d67f-4aff-b5db-462e0d4ca1f3"}},{"key":"client.port","value":{"stringValue":"51632"}},{"key":"proxy.kong.upstream.id","value":{"stringValue":"060cc439-1fa0-4711-a87b-7721d71c4eb4"}},{"key":"http.request.method","value":{"stringValue":"POST"}},{"key":"proxy.kong.upstream.addr","value":{"stringValue":"34.226.108.155"}},{"key":"proxy.kong.upstream.host","value":{"stringValue":"34.226.108.155:443"}},{"key":"http.request.header.host","value":{"stringValue":"localhost"}},{"key":"proxy.kong.target.id","value":{"stringValue":"4fa11aba-7e12-48ff-9bc8-827db4939301"}},{"key":"http.route","value":{"stringValue":"/foo"}},{"key":"url.scheme","value":{"stringValue":"http"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"eU4w1buq/ME=","parentSpanId":"jaw9O51b7eQ=","name":"kong.read_client_http_headers","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832732999936","endTimeUnixNano":"1734347832733523456","attributes":[{"key":"proxy.kong.http.request.headers.count","value":{"doubleValue":8}},{"key":"proxy.kong.http.request.headers.size","value":{"doubleValue":195}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"Pq8AHC6l7/k=","parentSpanId":"jaw9O51b7eQ=","name":"kong.phase.rewrite","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832733757440","endTimeUnixNano":"1734347832734179072","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"jB8u1zr5ziA=","parentSpanId":"jaw9O51b7eQ=","name":"kong.phase.access [debug: missing start]","kind":"SPAN_KIND_INTERNAL","endTimeUnixNano":"1734347832734516480","status":{},"events":[{"timeUnixNano":"1730397283960413400","attributes":[{"key":"message","value":{"stringValue":"exception"}},{"key":"exception.message","value":{"stringValue":"./kong/plugins/request-transformer/handler.lua:20: attempt to index global 'some_nil_variable' (a nil value)"}}],"droppedAttributesCount":0,"name":""}]},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"jB8u1zr5zig=","parentSpanId":"jaw9O51b7eQ=","name":"kong.phase.access [debug: missing end]","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832734516480","status":{},"events":[{"timeUnixNano":"1730397283960413400","attributes":[{"key":"message","value":{"stringValue":"exception"}},{"key":"exception.message","value":{"stringValue":"./kong/plugins/request-transformer/handler.lua:20: attempt to index global 'some_nil_variable' (a nil value)"}}],"droppedAttributesCount":0,"name":""}]},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"kvqrSQxXvCg=","parentSpanId":"jB8u1zr5zig=","name":"kong.router","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832734629632","endTimeUnixNano":"1734347832734826752","attributes":[{"key":"proxy.kong.router.matched","value":{"boolValue":true}},{"key":"proxy.kong.service.id","value":{"stringValue":"6ac56e3e-6f02-417b-b683-3d8bcfa7a839"}},{"key":"proxy.kong.route.id","value":{"stringValue":"34627a0f-d67f-4aff-b5db-462e0d4ca1f3"}},{"key":"proxy.kong.router.upstream_path","value":{"stringValue":"/"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"Cur1GqHIG/8=","parentSpanId":"jB8u1zr5zig=","name":"kong.phase.access","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832735258880","endTimeUnixNano":"1734347832736532224","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"TltE6SKF1Gw=","parentSpanId":"Cur1GqHIG/8=","name":"kong.router","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832735565312","endTimeUnixNano":"1734347832735602944","attributes":[{"key":"proxy.kong.router.matched","value":{"boolValue":true}},{"key":"proxy.kong.service.id","value":{"stringValue":"6ac56e3e-6f02-417b-b683-3d8bcfa7a839"}},{"key":"proxy.kong.route.id","value":{"stringValue":"34627a0f-d67f-4aff-b5db-462e0d4ca1f3"}},{"key":"proxy.kong.router.upstream_path","value":{"stringValue":"/"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"VWA3UYCXUxs=","parentSpanId":"Cur1GqHIG/8=","name":"kong.access.plugin.acme","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832735847168","endTimeUnixNano":"1734347832735917568","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"a34e6c20-3f98-4841-9858-3ca8a09095b7"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"CfAKAQA8cJI=","parentSpanId":"Cur1GqHIG/8=","name":"kong.access.plugin.request-transformer","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832736018176","endTimeUnixNano":"1734347832736438528","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"bdcb19c8-3dca-4ea9-8a0e-679fb50a3138"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"9CpiF5ZqCak=","parentSpanId":"CfAKAQA8cJI=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832736348160","endTimeUnixNano":"1734347832736356096","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"YSaVrPJeALo=","parentSpanId":"CfAKAQA8cJI=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832736419840","endTimeUnixNano":"1734347832736424960","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"cjHPVXNFEgI=","parentSpanId":"jB8u1zr5zig=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832736904448","endTimeUnixNano":"1734347832736909312","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"mziYy3y5MYI=","parentSpanId":"jB8u1zr5zig=","name":"kong.phase.header_filter","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347833659182848","endTimeUnixNano":"1734347833659495168","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"JAhrk1KDjxo=","parentSpanId":"jB8u1zr5zig=","name":"kong.phase.body_filter","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347833659626752","endTimeUnixNano":"1734347833660816128","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"izyzMU3IxCE=","parentSpanId":"jaw9O51b7eQ=","name":"kong.upstream.selection","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347832737147392","endTimeUnixNano":"1734347833091174400","attributes":[{"key":"proxy.kong.upstream.lb_algorithm","value":{"stringValue":"round-robin"}},{"key":"try_count","value":{"doubleValue":1}},{"key":"proxy.kong.upstream.id","value":{"stringValue":"060cc439-1fa0-4711-a87b-7721d71c4eb4"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"1pq1U0wCeVY=","parentSpanId":"izyzMU3IxCE=","name":"kong.upstream.try_select","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347832737147392","endTimeUnixNano":"1734347833091174400","attributes":[{"key":"try_count","value":{"doubleValue":1}},{"key":"keepalive","value":{"boolValue":true}},{"key":"network.peer.name","value":{"stringValue":"httpbin.org"}},{"key":"network.peer.address","value":{"stringValue":"34.226.108.155"}},{"key":"proxy.kong.target.id","value":{"stringValue":"4fa11aba-7e12-48ff-9bc8-827db4939301"}},{"key":"network.peer.port","value":{"doubleValue":443}},{"key":"proxy.kong.latency.upstream.connect_duration","value":{"doubleValue":354}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"pNj/Jg8tINw=","parentSpanId":"jaw9O51b7eQ=","name":"kong.upstream.ttfb","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347833091174400","endTimeUnixNano":"1734347833659174400","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"7peBX+7x154=","parentSpanId":"jaw9O51b7eQ=","name":"kong.upstream.read_response","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347833659174400","endTimeUnixNano":"1734347833660174336","status":{}}]}]}]}
diff --git a/packages/core/tracing/sandbox/pages/TraceViewerPage.vue b/packages/core/tracing/sandbox/pages/TraceViewerPage.vue
index 6322f15bfb..f2e8e9889c 100644
--- a/packages/core/tracing/sandbox/pages/TraceViewerPage.vue
+++ b/packages/core/tracing/sandbox/pages/TraceViewerPage.vue
@@ -57,14 +57,14 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { buildSpanTrees, TraceViewer, type TraceViewerConfig } from '../../src'
-import rawSpans from '../fixtures/spans.json'
-// import traceBatches from '../fixtures/trace-batches.json'
+import { buildSpanTrees, mergeSpansInTraceBatches, TraceViewer, type TraceViewerConfig } from '../../src'
+// import rawSpans from '../fixtures/spans.json'
+import traceBatches from '../fixtures/trace-batches.json'
 
 const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
 
-const spanRoots = computed(() => buildSpanTrees(rawSpans))
-// const spanRoots = computed(() => buildSpanTrees(mergeSpansInTraceBatches(traceBatches)))
+// const spanRoots = computed(() => buildSpanTrees(rawSpans))
+const spanRoots = computed(() => buildSpanTrees(mergeSpansInTraceBatches(traceBatches)))
 const showSkeleton = ref(false)
 const slideoutVisible = ref(false)
 
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue b/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue
index 57267fa4fd..6cb61798f2 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue
@@ -31,7 +31,7 @@ import { ConfigCardItem, ConfigurationSchemaType, EntityLink, type EntityLinkDat
 import { computed, inject, onWatcherCleanup, shallowRef, watch } from 'vue'
 import composables from '../../composables'
 import { SPAN_ATTRIBUTE_VALUE_UNKNOWN, SpanAttributeKeys, TRACE_VIEWER_CONFIG } from '../../constants'
-import type { EntityRequest, IKeyValue, Span, TraceViewerConfig } from '../../types'
+import type { EntityRequest, IKeyValue, SpanNode, TraceViewerConfig } from '../../types'
 import { getPhaseAndPlugin, unwrapAnyValue } from '../../utils'
 
 import '@kong-ui-public/entities-shared/dist/style.css'
@@ -39,7 +39,7 @@ import '@kong-ui-public/entities-shared/dist/style.css'
 const { i18n: { t } } = composables.useI18n()
 
 const props = defineProps<{
-  span: Span
+  span: SpanNode['span']
   keyValue: IKeyValue
   /**
    * Label to show for the attribute.
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue b/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
index 46345f2bd6..e605ebf032 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="span.attributes"
-    class="span-attribute-table"
-  >
+  <div class="span-attribute-table">
     <div class="title">
       {{ t('trace_viewer.span_attributes.title') }}
     </div>
@@ -16,12 +13,14 @@
         :span="span"
       />
 
-      <SpanAttribute
-        v-for="keyValue in span.attributes"
-        :key="keyValue.key"
-        :key-value="keyValue"
-        :span="span"
-      />
+      <template v-if="span.attributes">
+        <SpanAttribute
+          v-for="keyValue in span.attributes"
+          :key="keyValue.key"
+          :key-value="keyValue"
+          :span="span"
+        />
+      </template>
     </div>
   </div>
 </template>
@@ -30,27 +29,27 @@
 import { computed } from 'vue'
 import composables from '../../composables'
 import { SpanAttributeKeys, WATERFALL_ROW_PADDING_X } from '../../constants'
-import type { IKeyValue, Span } from '../../types'
+import type { IKeyValue, SpanNode } from '../../types'
 import { formatNanoDateTimeString } from '../../utils'
 import SpanAttribute from './SpanAttribute.vue'
 
 const { i18n: { t } } = composables.useI18n()
 
-const props = defineProps<{ span: Span }>()
+const props = defineProps<{ span: SpanNode['span'] }>()
 
 const internalAttributes = computed<(IKeyValue & { label?: string })[]>(() => {
   return [
     {
       key: SpanAttributeKeys._INTERNAL_START_TIME,
       value: {
-        stringValue: formatNanoDateTimeString(BigInt(props.span.startTimeUnixNano)),
+        stringValue: formatNanoDateTimeString(props.span.startTimeUnixNano),
       },
       label: t('span_attributes.labels.start_time'),
     },
     {
       key: SpanAttributeKeys._INTERNAL_END_TIME,
       value: {
-        stringValue: formatNanoDateTimeString(BigInt(props.span.endTimeUnixNano)),
+        stringValue: formatNanoDateTimeString(props.span.endTimeUnixNano),
       },
       label: t('span_attributes.labels.end_time'),
     },
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanEventList.vue b/packages/core/tracing/src/components/trace-viewer/SpanEventList.vue
index 5506899a1b..014c8a50bf 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanEventList.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanEventList.vue
@@ -12,10 +12,10 @@
 </template>
 
 <script setup lang="ts">
-import type { Span } from '../../types'
+import type { SpanNode } from '../../types'
 import SpanEvent from './SpanEvent.vue'
 
-defineProps<{ span: Span }>()
+defineProps<{ span: SpanNode['span'] }>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
index 8bf69bcc38..928245443b 100644
--- a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
+++ b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
@@ -61,15 +61,27 @@
         />
       </template>
       <div
-        v-else-if="selectedSpan && !spanNothingToDisplay"
+        v-else-if="selectedSpan"
         class="span-details"
       >
+        <KAlert
+          v-if="spanMaybeIncomplete(selectedSpan)"
+          appearance="danger"
+          :message="t('trace_viewer.incomplete_span_warning.message')"
+          show-icon
+          :style="{ width: '100%' }"
+          :title="t('trace_viewer.incomplete_span_warning.title')"
+        >
+          <template #icon>
+            <DangerCircleIcon />
+          </template>
+        </KAlert>
+
         <SpanEventList
           v-if="selectedSpan.span.events && selectedSpan.span.events.length > 0"
           :span="selectedSpan.span"
         />
         <SpanAttributeTable
-          v-if="selectedSpan.span.attributes && selectedSpan.span.attributes.length > 0"
           :span="selectedSpan.span"
         />
       </div>
@@ -89,11 +101,13 @@
 </template>
 
 <script setup lang="ts">
+import { DangerCircleIcon } from '@kong/icons'
 import { Pane, Splitpanes } from '@kong/splitpanes'
-import { computed, provide, reactive, shallowRef } from 'vue'
+import { provide, reactive, shallowRef } from 'vue'
 import composables from '../../composables'
 import { TRACE_VIEWER_CONFIG, WATERFALL_ROW_COLUMN_GAP, WATERFALL_ROW_LABEL_WIDTH, WATERFALL_ROW_PADDING_X, WATERFALL_SPAN_BAR_FADING_WIDTH } from '../../constants'
 import type { SpanNode, TraceViewerConfig } from '../../types'
+import { spanMaybeIncomplete } from '../../utils'
 import WaterfallLegend from '../waterfall/WaterfallLegend.vue'
 import WaterfallView from '../waterfall/WaterfallView.vue'
 import SpanAttributeTable from './SpanAttributeTable.vue'
@@ -118,22 +132,6 @@ const selectedSpan = shallowRef<SpanNode | undefined>(undefined)
 const handleUpdateSelectedSpan = (span?: SpanNode) => {
   selectedSpan.value = span
 }
-
-const spanNothingToDisplay = computed(() => {
-  if (!selectedSpan.value) {
-    return true
-  }
-
-  if (selectedSpan.value.span.events && selectedSpan.value.span.events.length > 0) {
-    return false
-  }
-
-  if (selectedSpan.value.span.attributes && selectedSpan.value.span.attributes.length > 0) {
-    return false
-  }
-
-  return true
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue b/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue
index 9375d1e5cd..0d5ce7f496 100644
--- a/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue
+++ b/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue
@@ -51,13 +51,17 @@ const barColor = computed(() => {
  * Note: The value is calculated without the zoom factor to reduce unnecessary recalculations.
  */
 const barUnscaledLeftBaseRatio = computed(() => {
-  if (!config.root) {
+  const spanStart = props.spanNode.span.startTimeUnixNano
+  const subtreeStart = config.root?.subtreeValues.startTimeUnixNano
+  const subtreeMin = config.root?.subtreeValues.minDurationNano
+
+  if (spanStart === undefined || subtreeStart === undefined || subtreeMin === undefined) {
     return 0
   }
 
-  const relativeStart = Number(BigInt(props.spanNode.span.startTimeUnixNano) - (config.root?.subtreeValues.startTimeUnixNano ?? 0n))
+  const relativeStart = Number(spanStart - subtreeStart)
 
-  return (relativeStart / (config.totalDurationNano - config.root.subtreeValues.minDurationNano))
+  return (relativeStart / (config.totalDurationNano - subtreeMin))
 })
 
 /**
@@ -95,7 +99,10 @@ const barLeft = computed(() =>
 )
 
 const barExtraWidthFactor = computed(() => {
-  if (!config.root) {
+  const spanDuration = props.spanNode.durationNano
+  const subtreeMin = config.root?.subtreeValues.minDurationNano
+
+  if (spanDuration === undefined || subtreeMin === undefined) {
     return 0
   }
 
@@ -110,8 +117,7 @@ const barExtraWidthFactor = computed(() => {
    * Therefore, the formula to calculate the factor for a span is:
    * (span duration - minimal duration) / (total duration - minimal duration)`
    */
-  return (props.spanNode.durationNano - config.root.subtreeValues.minDurationNano)
-    / (config.totalDurationNano - config.root.subtreeValues.minDurationNano)
+  return (spanDuration - subtreeMin) / (config.totalDurationNano - subtreeMin)
 })
 
 /**
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue b/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
index 9946f0caa9..fdbeeb7069 100644
--- a/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
+++ b/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
@@ -34,19 +34,30 @@
         <div class="end-decorator">
           <WarningIcon
             v-if="hasException"
-            class="exception-mark"
             :color="KUI_COLOR_TEXT_WARNING"
             :size="KUI_FONT_SIZE_30"
           />
 
-          <div class="duration">
+          <DangerCircleIcon
+            v-if="maybeIncomplete"
+            :color="KUI_COLOR_TEXT_DANGER"
+            :size="KUI_FONT_SIZE_30"
+          />
+
+          <div
+            v-else
+            class="duration"
+          >
             {{ fmt(spanNode.durationNano) }}
           </div>
         </div>
       </div>
     </div>
 
-    <div class="bar-wrapper">
+    <div
+      v-if="!maybeIncomplete"
+      class="bar-wrapper"
+    >
       <WaterfallSpanBar :span-node="spanNode" />
     </div>
   </div>
@@ -64,12 +75,12 @@
 </template>
 
 <script lang="ts" setup>
-import { KUI_COLOR_TEXT_WARNING, KUI_FONT_SIZE_30 } from '@kong/design-tokens'
-import { WarningIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_DANGER, KUI_COLOR_TEXT_WARNING, KUI_FONT_SIZE_30 } from '@kong/design-tokens'
+import { WarningIcon, DangerCircleIcon } from '@kong/icons'
 import { computed, inject, ref, watch, type PropType, type Ref } from 'vue'
 import { SPAN_EVENT_ATTRIBUTES, WATERFALL_CONFIG, WATERFALL_ROWS_STATE, WATERFALL_SPAN_BAR_FADING_WIDTH, WaterfallRowsState } from '../../constants'
 import { type SpanNode, type WaterfallConfig } from '../../types'
-import { getDurationFormatter } from '../../utils'
+import { getDurationFormatter, spanMaybeIncomplete } from '../../utils'
 import WaterfallSpanBar from './WaterfallSpanBar.vue'
 import WaterfallTreeControl from './WaterfallTreeControl.vue'
 import WaterfallSpacer, { SpacerType } from './WaterfallTreeSpacer.vue'
@@ -155,6 +166,8 @@ const hasException = computed(() => {
   return false
 })
 
+const maybeIncomplete = computed(() => spanMaybeIncomplete(props.spanNode))
+
 watch(rowsState, (value) => {
   if (value !== WaterfallRowsState.OVERRIDDEN) {
     expanded.value = value === WaterfallRowsState.EXPANDED
@@ -297,5 +310,9 @@ const handleSelect = () => {
       z-index: 10;
     }
   }
+
+  :deep(.k-tooltip) {
+    max-width: 300px;
+  }
 }
 </style>
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallView.vue b/packages/core/tracing/src/components/waterfall/WaterfallView.vue
index ae5edd9af4..c65a3163f7 100644
--- a/packages/core/tracing/src/components/waterfall/WaterfallView.vue
+++ b/packages/core/tracing/src/components/waterfall/WaterfallView.vue
@@ -124,11 +124,13 @@ const rowsAreaGuideX = ref<number | undefined>(undefined)
 const config = reactive<MarkReactiveInputRefs<WaterfallConfig, 'ticks' | 'root' | 'totalDurationNano'>>({
   ticks: toRef(props, 'ticks'),
   root: toRef(props, 'rootSpan'),
-  totalDurationNano: computed(() =>
-    props.rootSpan
-      ? Number(props.rootSpan.subtreeValues.endTimeUnixNano - props.rootSpan.subtreeValues.startTimeUnixNano)
-      : 0,
-  ),
+  totalDurationNano: computed(() => {
+    if (props.rootSpan?.subtreeValues.startTimeUnixNano === undefined || props.rootSpan?.subtreeValues.endTimeUnixNano === undefined) {
+      return 0
+    }
+
+    return Number(props.rootSpan.subtreeValues.endTimeUnixNano - props.rootSpan.subtreeValues.startTimeUnixNano)
+  }),
   zoom: 1,
   viewport: { left: 0, right: 0 },
 })
diff --git a/packages/core/tracing/src/locales/en.json b/packages/core/tracing/src/locales/en.json
index 25a6118b30..c3597097ba 100644
--- a/packages/core/tracing/src/locales/en.json
+++ b/packages/core/tracing/src/locales/en.json
@@ -23,6 +23,10 @@
         "title": "Exception message"
       }
     },
+    "incomplete_span_warning": {
+      "message": "This span is incomplete, this could be because of a sampling issue. Please exercise caution when interpreting this span.",
+      "title": "Incomplete span"
+    },
     "url": "URL"
   },
   "waterfall": {
diff --git a/packages/core/tracing/src/types/spans.ts b/packages/core/tracing/src/types/spans.ts
index d6d9a6d3f8..2bde42ceee 100644
--- a/packages/core/tracing/src/types/spans.ts
+++ b/packages/core/tracing/src/types/spans.ts
@@ -1,6 +1,13 @@
 import type { IKeyValue } from './otlp'
 
-export interface Span {
+/**
+ * The type parameter `Time` is used to specify the type of the timestamps in the span.
+ * The `buildSpanTrees` utility will convert string timestamps to bigint ones.
+ *
+ * We will internally use `Span<bigint>` in `SpanNode` for performance reasons, while we will expose
+ * `Span<string>` by default to avoid breaking changes in the public API.
+ */
+export interface Span<Time extends string | bigint = string> {
   traceId: string
   spanId: string
   /**
@@ -9,8 +16,8 @@ export interface Span {
    */
   parentSpanId?: string
   name: string
-  startTimeUnixNano: string
-  endTimeUnixNano: string
+  startTimeUnixNano?: Time
+  endTimeUnixNano?: Time
   attributes?: IKeyValue[]
   events?: Event[]
 }
@@ -22,9 +29,9 @@ export interface Event {
 }
 
 export interface SpanNode {
-  span: Span
+  span: Span<bigint>
   root?: boolean
-  durationNano: number // Number.MAX_SAFE_INTEGER / 1e9 / 60 / 60 / 24 = 104.24999137431702 days (enough for most cases)
+  durationNano?: number // Number.MAX_SAFE_INTEGER / 1e9 / 60 / 60 / 24 = 104.24999137431702 days (enough for most cases)
   parent?: SpanNode
   children: SpanNode[]
   /**
@@ -35,16 +42,16 @@ export interface SpanNode {
     /**
      * The earliest start time among all nodes in the subtree.
      */
-    startTimeUnixNano: bigint
+    startTimeUnixNano?: bigint
     /**
      * The latest end time among all nodes in the subtree
      */
-    endTimeUnixNano: bigint
+    endTimeUnixNano?: bigint
     /**
      * The minimum duration among all nodes in the subtree.
      * Default to the duration of the span itself.
      */
-    minDurationNano: number
+    minDurationNano?: number
   }
 }
 
diff --git a/packages/core/tracing/src/utils/spans.ts b/packages/core/tracing/src/utils/spans.ts
index d9a5a86ebf..ce3d497790 100644
--- a/packages/core/tracing/src/utils/spans.ts
+++ b/packages/core/tracing/src/utils/spans.ts
@@ -18,12 +18,33 @@ export const buildSpanTrees = (spans: Span[]): SpanNode[] => {
       spanId,
       parentSpanId,
       name,
-      startTimeUnixNano,
-      endTimeUnixNano,
       attributes,
       events,
     } = span
-    const durationNano = Number(BigInt(span.endTimeUnixNano) - BigInt(span.startTimeUnixNano))
+
+    let startTimeUnixNano: bigint | undefined
+    let endTimeUnixNano: bigint | undefined
+
+    try {
+      startTimeUnixNano = BigInt(span.startTimeUnixNano!)
+    } catch (e) {
+      console.warn(`Failed to convert the start time "${span.startTimeUnixNano}" to bigint:`, { error: e, span })
+    }
+
+    try {
+      endTimeUnixNano = BigInt(span.endTimeUnixNano!)
+    } catch (e) {
+      console.warn(`Failed to convert the end time "${span.endTimeUnixNano}" to bigint:`, { error: e, span })
+    }
+
+    const durationNano = startTimeUnixNano !== undefined && endTimeUnixNano !== undefined
+      ? Number(endTimeUnixNano - startTimeUnixNano)
+      : undefined
+
+    if (durationNano !== undefined && durationNano < 0) {
+      console.warn(`Invalid span duration "${durationNano}":`, { span })
+    }
+
     const node: SpanNode = {
       span: {
         traceId,
@@ -36,11 +57,11 @@ export const buildSpanTrees = (spans: Span[]): SpanNode[] => {
         events: cloneDeep(events), // Avoid mutating the original events
       },
       root: !span.parentSpanId || span.parentSpanId === SPAN_ZERO_ID,
-      durationNano,
+      durationNano, // undefined indicates either the start or end time is missing or invalid
       children: [],
       subtreeValues: {
-        startTimeUnixNano: BigInt(span.startTimeUnixNano),
-        endTimeUnixNano: BigInt(span.endTimeUnixNano),
+        startTimeUnixNano,
+        endTimeUnixNano,
         minDurationNano: durationNano,
       },
     }
@@ -55,13 +76,19 @@ export const buildSpanTrees = (spans: Span[]): SpanNode[] => {
       const parent = nodes.get(node.span.parentSpanId!)!
       parent.children.push(node)
       // Update subtree values when necessary
-      if (node.subtreeValues.minDurationNano < parent.subtreeValues.minDurationNano) {
+      if (node.subtreeValues.minDurationNano !== undefined
+        && (parent.subtreeValues.minDurationNano === undefined
+          || node.subtreeValues.minDurationNano < parent.subtreeValues.minDurationNano)) {
         parent.subtreeValues.minDurationNano = node.subtreeValues.minDurationNano
       }
-      if (node.subtreeValues.startTimeUnixNano < parent.subtreeValues.startTimeUnixNano) {
+      if (node.subtreeValues.startTimeUnixNano !== undefined
+        && (parent.subtreeValues.startTimeUnixNano === undefined
+          || node.subtreeValues.startTimeUnixNano < parent.subtreeValues.startTimeUnixNano)) {
         parent.subtreeValues.startTimeUnixNano = node.subtreeValues.startTimeUnixNano
       }
-      if (node.subtreeValues.endTimeUnixNano > parent.subtreeValues.endTimeUnixNano) {
+      if (node.subtreeValues.endTimeUnixNano !== undefined
+        && (parent.subtreeValues.endTimeUnixNano === undefined
+          || node.subtreeValues.endTimeUnixNano > parent.subtreeValues.endTimeUnixNano)) {
         parent.subtreeValues.endTimeUnixNano = node.subtreeValues.endTimeUnixNano
       }
     } else {
@@ -70,12 +97,27 @@ export const buildSpanTrees = (spans: Span[]): SpanNode[] => {
   }
 
   for (const node of nodes.values()) {
-    node.children.sort((a, b) => Number(BigInt(a.span.startTimeUnixNano) - BigInt(b.span.startTimeUnixNano)))
+    node.children.sort((a, b) => {
+      if (a.span.startTimeUnixNano !== undefined && b.span.startTimeUnixNano !== undefined) {
+        return Number(a.span.startTimeUnixNano - b.span.startTimeUnixNano)
+      }
+      // Hoist the spans without start time to the top
+      if (a.span.startTimeUnixNano === undefined && b.span.startTimeUnixNano === undefined) {
+        return 0
+      }
+      return a.span.startTimeUnixNano === undefined ? -1 : 1
+    })
   }
 
   return roots
 }
 
+/**
+ * Detect if a span is incomplete. The result is not guaranteed to be accurate.
+ */
+export const spanMaybeIncomplete = (node: SpanNode): boolean =>
+  node.durationNano === undefined || node.durationNano < 0
+
 /**
  * Parse the plugin name and phase from a span name.
  *
diff --git a/packages/core/tracing/src/utils/time.ts b/packages/core/tracing/src/utils/time.ts
index 7d39787c10..8fc537f81e 100644
--- a/packages/core/tracing/src/utils/time.ts
+++ b/packages/core/tracing/src/utils/time.ts
@@ -4,7 +4,11 @@ export const getDurationFormatter = (locales: Intl.LocalesArgument = 'en') => {
     maximumFractionDigits: 2,
   })
 
-  return (nanoseconds: number) => {
+  return (nanoseconds?: number) => {
+    if (nanoseconds === undefined || Number.isNaN(nanoseconds)) {
+      return 'N/A'
+    }
+
     let t = nanoseconds
 
     if (t < 1000) {
@@ -33,14 +37,29 @@ export const getDurationFormatter = (locales: Intl.LocalesArgument = 'en') => {
 
 /**
  * This function formats a nanosecond duration into a human-readable string.
+ * The output string will use the local time zone.
  *
- * Example output: `2024-12-09T13:31:47.476672512Z`
+ * Example output: `2024-12-09 13:31:47.476672512`
  *
- * @param nanoseconds
- * @returns an ISO 8601 formatted string with nanoseconds precision
+ * @param unixNano UNIX timestamp in nanoseconds
+ * @returns an formatted date and time string with nanoseconds precision
  */
-export const formatNanoDateTimeString = (nanoseconds: bigint) => {
-  const ms = nanoseconds / BigInt(1e6)
-  const nsRemainder = nanoseconds - ms * BigInt(1e6)
-  return new Date(Number(ms)).toISOString().replace(/Z$/g, `${nsRemainder.toString().padStart(6, '0')}Z`)
+export const formatNanoDateTimeString = (unixNano?: bigint) => {
+  if (unixNano === undefined) {
+    return 'N/A'
+  }
+
+  const ms = unixNano / BigInt(1e6)
+  const date = new Date(Number(ms))
+
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+  const milliseconds = String(date.getMilliseconds()).padStart(3, '0')
+  const nanoseconds = (unixNano - ms * BigInt(1e6)).toString().padStart(6, '0')
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}${nanoseconds}`
 }
diff --git a/packages/core/tracing/src/utils/trace.ts b/packages/core/tracing/src/utils/trace.ts
index 5c3d36b211..921c8f32d0 100644
--- a/packages/core/tracing/src/utils/trace.ts
+++ b/packages/core/tracing/src/utils/trace.ts
@@ -16,6 +16,12 @@ export const mergeSpans = (spans: Span[]): Span[] => {
         dedupedAttributes: new Map(),
       }
       dedupedSpans.set(uniqId, dds)
+    } else if (Array.isArray(span.events)) {
+      if (!Array.isArray(dds.events)) {
+        dds.events = [...span.events]
+      } else {
+        dds.events.push(...span.events!)
+      }
     }
 
     if (Array.isArray(dds.attributes)) {
@@ -23,10 +29,6 @@ export const mergeSpans = (spans: Span[]): Span[] => {
         dds.dedupedAttributes?.set(attr.key, attr)
       }
     }
-
-    if (Array.isArray(dds.events)) {
-      dds.events.push(...span.events!)
-    }
   }
 
   return Array.from(dedupedSpans.values()).map((dds) => {