fix(tracing): handle missing fields in span (#1856)

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":{}}]}]}]}

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)
 

packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue

@@ -31,15 +31,15 @@ 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'
 
 const { i18n: { t } } = composables.useI18n()
 
 const props = defineProps<{
-  span: Span
+  span: SpanNode['span']
   keyValue: IKeyValue
   /**
    * Label to show for the attribute.

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'),
     },

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>