frontend: Duplicate server spans & high-cardinality span names on next.js spans

[cedricziel]

Bug Report

The frontend service produces a semantically incorrect trace where it has 2 kind=server spans AND it produces high-cardinality span names for spans produced by the next.js instrumentation.

Symptom

A clear and concise description of what the bug is.

What is the expected behavior?

1. ONE server span, not two
2. no high-cardinality spans

What is the actual behavior?

Please describe the actual behavior experienced.

Reproduce

Run the demo, observe that calls to /api/cart produce server spans with query parameters and there's 2 server spans.

Additional Context

Please feel free to add any other context about the problem here.

[puckpuck]

There are existing rules in the deployed Otel Collector configuration to fix the high cardinality spans. This is a known issue with Next.js instrumentation. When you run the demo with make start, which uses this Collector config, you will not get the high cardinality span names.

[cedricziel]

@puckpuck it still breaks for the bring your own backend when deploying the helm chart or when using a different collector - i dont think its fixed.

[puckpuck]

Reading the docs now for the Demo and Kubernetes, I can see why it is not obvious that you need to configure your "bring your own backend" to have certain transformation rules. We only make mention of spanmetrics, but there are also other collector configuration details that need to be applied.

@cedricziel you would need to apply this transform processor configuration to your own Collector.