How to custom fetch's span name instead of default HTTP {method}?

[ahuigo]

Refer to this code (https://github.com/open-telemetry/opentelemetry-js/blob/main/examples/opentelemetry-web/examples/fetch/index.js), I've implement my own fetch request tracer.

Problem

The problem is that the default name of fetch span if HTTP {method}, e.g., HTTP GET, HTTP POST

Question

Q: How to change fetch span name to api's url or url path?

My code

I've tried this piece of code, it does not work.

import api, { context, trace } from '@opentelemetry/api';
import { B3Propagator } from '@opentelemetry/propagator-b3';
import { W3CTraceContextPropagator } from '@opentelemetry/core';

import { ConsoleSpanExporter, SimpleSpanProcessor, BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { config } from '@/conf';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';

import { Resource } from '@opentelemetry/resources';
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';

const provider = new WebTracerProvider({
  resource: new Resource({
    [SemanticResourceAttributes.SERVICE_NAME]: 'my-ui',
  }),
});


provider.addSpanProcessor(new BatchSpanProcessor(new OTLPTraceExporter({
  url: config.otel_endpoint + "/v1/traces",
})));
provider.register({
  contextManager: new ZoneContextManager(),
  // propagator: new B3Propagator(), // use header b3
  propagator: new W3CTraceContextPropagator(),// use header traceparent
});

registerInstrumentations({
  instrumentations: [
    new FetchInstrumentation({
      ignoreUrls: [/localhost:8090\/sockjs-node/],
      propagateTraceHeaderCorsUrls: [
        /^localhost/,
      ],
      clearTimingResources: true,
    }),
  ],
});

[ahuigo]

I've solved this problem.

Solution

Remove registerInstrumentations and create span with spanName and append tracing headers to fetch request manually like this:

import api, { context, trace } from '@opentelemetry/api';
import { propagation } from '@opentelemetry/api';
import { W3CTraceContextPropagator } from '@opentelemetry/core';
import { ConsoleSpanExporter, SimpleSpanProcessor, BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { config } from '@/conf';
import { Resource } from '@opentelemetry/resources';
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';

const provider = new WebTracerProvider({
  resource: new Resource({
    [SemanticResourceAttributes.SERVICE_NAME]: 'my-ui',
  }),
});

provider.addSpanProcessor(new BatchSpanProcessor(new OTLPTraceExporter({
  url: config.otel_endpoint + "/v1/traces",
})));
provider.register({
  contextManager: new ZoneContextManager(),
  // propagator: new B3Propagator(), // use header b3
  propagator: new W3CTraceContextPropagator(),// use header traceparent
});

export async function traceFetchWrapper(req: Request): Promise<any> {
  let traceFlag = false;
  for (const testurl of propagateTraceHeaderCorsUrls) {
  const tracer = trace.getTracer('my-ui');
  const span = tracer.startSpan(req.url);
  try {
    const headers: Record<string, string> = {};
    propagation.inject(trace.setSpan(context.active(), span), headers);
    for (const [key, value] of Object.entries(headers)) {
      req.headers.set(key, value);
    }
    const response = await fetch(req);
    span.addEvent('fetching-request-span-completed');
    return response;
  } catch (error: any) {
    span.recordException(error);
    throw error;
  } finally {
    span.end();
  }
};

The workround is:

[ahuigo]

The simplest way is using Proxy:

import { context, trace } from '@opentelemetry/api';
import { propagation } from '@opentelemetry/api';
import { W3CTraceContextPropagator } from '@opentelemetry/core';
import { SimpleSpanProcessor, BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { config } from '@/conf';
import { Resource } from '@opentelemetry/resources';
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
const appName = "my-ui";
const propagateTraceHeaderCorsUrls = [
  /^http:\/\/localhost/,
];

const provider = new WebTracerProvider({
  resource: new Resource({
    [SemanticResourceAttributes.SERVICE_NAME]: appName,
  }),
});

// Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests
// provider.addSpanProcessor(new BatchSpanProcessor(new ConsoleSpanExporter()));
provider.addSpanProcessor(new BatchSpanProcessor(new OTLPTraceExporter({
  url: config.otel_endpoint + "/v1/traces",
})));
provider.register({
  contextManager: new ZoneContextManager(),
  // propagator: new B3Propagator(), // use header b3
  propagator: new W3CTraceContextPropagator(),// use header traceparent
});

function isAllowTrace(url: string) {
  if (!url.startsWith("http")) {
    return false;
  }
  for (const testurl of propagateTraceHeaderCorsUrls) {
    if (testurl.test(url)) {
      return true;
    }
  }
  return false;
}

window.fetch = new Proxy(window.fetch, {
  apply: async (target, thisArg, argumentsList: [any, any]) => {
    const req = new Request(...(argumentsList));
    const url = req.url
    if (!isAllowTrace(url)) {
      return Reflect.apply(target, thisArg, [req]);
    }

    // otel tracer
    const tracer = trace.getTracer(appName);
    const reqURL = new URL(url);
    const spanName = reqURL.host.split(".")[0] + reqURL.pathname;
    const span = tracer.startSpan(spanName);
    // const spanCtx = trace.setSpan(context.active(), span);
    try {
      const headers: Record<string, string> = {};
      propagation.inject(trace.setSpan(context.active(), span), headers);
      for (const [key, value] of Object.entries(headers)) {
        req.headers.set(key, value);
      }
      const response = await Reflect.apply(target, thisArg, [req]);
      span.addEvent('fetching-request-span-completed');
      return response;
    } catch (error: any) {
      span.recordException(error);
      throw error;
    } finally {
      span.end();
    }
  }
});