Attaching HttpApi spans to NextJS (aka @vercel/otel)

Hi, I'm using the @vercel/otel package for collecting tracers from my NextJS application. I use the HttpApi at /api and would like to attach the spans from Effect to the existing spans from NextJS.

The current image shows the trace coming from NextJS and I would like to attach the effects spans to it.

This is my code so far but I can't get it working.

export const TracingLayer = Layer.unwrapEffect(
  Effect.gen(function* () {
    yield* Effect.log("Building tracing layer")

    const serviceName = yield* Config.string("OTEL_SERVICE_NAME")
    const url = yield* Config.string("OTEL_EXPORTER_OTLP_ENDPOINT")
    const headersFromConfig = yield* Config.string("OTEL_EXPORTER_OTLP_HEADERS").pipe(Config.withDefault(""))
    const headers = yield* Schema.decodeUnknown(HeadersSchema)(headersFromConfig)

    return OtlpTracer.layer({
      url,
      headers,
      resource: { serviceName },
    })
  })
)
image.png
Was this page helpful?