DAPR对接Zipkin缺失spanId致前端报错问题排查求助

问题详情 #

在Zipkin界面查看链路追踪数据时，触发前端报错：

TypeError: Cannot read properties of undefined (reading 'spanId')
at ao (Timeline.tsx:88:50)
at Xo (react-dom.production.min.js:153:146)
at ms (react-dom.production.min.js:261:496)
at cl (react-dom.production.min.js:246:265)
at sl (react-dom.production.min.js:246:194)
at $s (react-dom.production.min.js:239:172)
at react-dom.production.min.js:123:115
at t.unstable_runWithPriority (scheduler.production.min.js:19:467)
at Gi (react-dom.production.min.js:122:325)
at Yi (react-dom.production.min.js:123:61)

排查后确认，从Zipkin获取的追踪记录中确实没有spanId字段，示例数据如下：

[
  {
    "traceId": "8820012910cdb32bb41316551a150715",
    "parentId": "42836ff2aac7d271",
    "id": "498a8343e43beb74",
    "kind": "SERVER",
    "name": "calllocal/liftservice/lift",
    "timestamp": 1678755356047932,
    "duration": 198974,
    "localEndpoint": {
      "serviceName": "liftservice"
    },
    "tags": {
      "dapr.api": "/dapr.proto.internals.v1.ServiceInvocation/CallLocal",
      "dapr.invoke_method": "Lift",
      "dapr.protocol": "grpc",
      "otel.library.name": "dapr-diagnostics",
      "rpc.service": "ServiceInvocation",
      "service.name": "liftservice"
    }
  }
]

当前使用的Dapr配置：

apiVersion: dapr.io/v1alpha1
kind: Configuration
metadata:
  name: daprsystem
spec:
  mtls:
    enabled: true
  tracing:
    samplingRate: "1"
    zipkin:
      endpointAddress: "http://zipkin:9411/api/v2/spans"

已在Google及Dapr官方文档中查找解决方案，未找到相关内容。

解决尝试方向 #

1. 升级Dapr到最新稳定版 #

这个问题大概率是Dapr版本的兼容性bug——Dapr通过OpenTelemetry向Zipkin上报数据时，字段命名和Zipkin前端的预期不匹配。Zipkin V2 API规范中span的ID字段是id，但前端Timeline组件硬依赖spanId字段。升级到最新稳定版的Dapr，这类字段映射的问题通常会被修复。

2. 中间代理补全字段 #

如果暂时无法升级Dapr，可以在Dapr和Zipkin之间搭建一个简单的代理服务，收到Dapr的上报请求后，将每个span对象中的id值复制为spanId字段，再转发给Zipkin。比如用Nginx Lua脚本、Node.js或者Go写个轻量服务就能实现，临时规避前端的报错。

3. 修改Zipkin前端代码应急 #

如果能获取Zipkin的源码，找到Timeline.tsx的第88行，给spanId的读取逻辑加个兜底判断，比如将原代码中读取spanId的部分改为targetSpan?.spanId || targetSpan?.id，这样即使没有spanId，也能使用id字段的值，避免直接抛出错误。

内容的提问来源于stack exchange，提问作者David Hayes