Send OpenTelemetry data from Browser

[pondorasti]

Intro

I want to instrument the client side part of my Next.js app using OpenTelemetry's Browser SDK. As references, here's what my instrumentation setup currently looks like:

const instrumentationClientSdk = async () => {
  const { ZoneContextManager } = await import("@opentelemetry/context-zone")

  const provider = new WebTracerProvider({
    resource: new Resource({ [SEMRESATTRS_SERVICE_NAME]: "test" }).merge(
      detectResourcesSync({ detectors: [browserDetector] }),
    ),
  })

  provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter()))

  provider.addSpanProcessor(
    new BatchSpanProcessor(
      new OTLPTraceExporter({
        url: "https://api.axiom.co/v1/traces",
        headers: {
          Authorization: `Bearer ${env.NEXT_PUBLIC_AXIOM_TOKEN}`,
          "X-Axiom-Dataset": "open_telemetry",
        },
      }),
    ),
  )

  const contextManager = new ZoneContextManager()

  provider.register({
    contextManager,
    propagator: new CompositePropagator({
      propagators: [new W3CBaggagePropagator(), new W3CTraceContextPropagator()],
    }),
  })

  registerInstrumentations({
    tracerProvider: provider,
    instrumentations: [
      getWebAutoInstrumentations(),
    ],
  })
}

I looked over the Send OpenTelemetry data to Axiom guide and I was not able to find any resources on how to get this working.

Proposal

I would like to have an additional Next.js rewrite for ${config.proxyPath}/traces along with public token authentication.

next-axiom/src/withAxiom.ts

Lines 26 to 37 in ab8288e

	const axiomRewrites: Rewrite[] = [
	{
	source: `${config.proxyPath}/web-vitals`,
	destination: webVitalsEndpoint,
	basePath: false,
	},
	{
	source: `${config.proxyPath}/logs`,
	destination: logsEndpoint,
	basePath: false,
	},
	];