Add Service name in the Opentelemetry for a JavaScript application

Issue

I am trying to integrate Opentelemetry (Otl) in my Angular application to trace the frontend calls. Everything works fine and I am able to see the calls in the Zipkin.

But the only problem is that it is showing it as "unknown_service" in the Zipkin interface.

Below is my entire Angular code and Zipkin screenshot as well. This is just a sample application. But my requirement is that I am going to integrate the Opentelemetry code in the http interceptor so that it will be easy to maintain at one place instead of every service call. Also service.name should be passed dynamically so that it will be traced in Zipkin.

How can I add a service name before it gets called?

import { Component, OnInit } from '@angular/core';
import {ZipkinServicesService} from './zipkin-services.service';


// Opentelemetry components
import { context, trace } from '@opentelemetry/api';
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing';
import { WebTracerProvider } from '@opentelemetry/web';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
import { B3Propagator } from '@opentelemetry/propagator-b3';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { ZipkinExporter } from '@opentelemetry/exporter-zipkin';

@Component({
  selector: 'app-zipkin-integration',
  templateUrl: './zipkin-integration.component.html',
  styleUrls: ['./zipkin-integration.component.scss']
})
export class ZipkinIntegrationComponent implements OnInit {

  respData: string;
  webTracerWithZone;
  

  constructor(
    public zipkinService: ZipkinServicesService,
  ) {

    const providerWithZone = new WebTracerProvider();

    const options = {
      url: 'http://localhost:9411/api/v2/spans',
      serviceName: 'interceptor-example',// This is NOT working.
    }
    const exporter = new ZipkinExporter(options);

    const zipKinProcessor = new SimpleSpanProcessor(exporter);

    providerWithZone.addSpanProcessor(zipKinProcessor);

    providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
    providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new CollectorTraceExporter()));

    providerWithZone.register({
      contextManager: new ZoneContextManager(),
      propagator: new B3Propagator(),
    });

    registerInstrumentations({
      instrumentations: [
        new XMLHttpRequestInstrumentation({
          ignoreUrls: [/localhost:8090\/sockjs-node/],
          propagateTraceHeaderCorsUrls: [
            'https://httpbin.org/post',
          ],
        }),
      ],
    });

    this.webTracerWithZone = providerWithZone.getTracer('example-tracer-web');

   }

  ngOnInit(): void {
 
  }

  zipGet (){
    let i = 10;
    const span1 = this.webTracerWithZone.startSpan(`files-series-info-${i}`);
    let postData = [{
      no : 2,
      emp : 3
    }];
    context.with(trace.setSpan(context.active(), span1), () => {
      this.zipkinService.httpGet(postData).subscribe( (data: any) => {
        this.respData = data;
        // Opentelemetry after response.
        trace.getSpan(context.active()).addEvent('fetching-span1-completed');
        span1.end();
      });
    });
    
  }

  zipPost (){
    let postData = [{
      no : 1,
      emp : 2
    }];

    let i = 10;
    const span1 = this.webTracerWithZone.startSpan(`files-series-info-${i}`);

    context.with(trace.setSpan(context.active(), span1), () => {
      this.zipkinService.httpPost(postData).subscribe( (data: any) => {
        this.respData = data;
        // Opentelemetry after response.
        trace.getSpan(context.active()).addEvent('fetching-span1-completed');
        span1.end();
      });
    });
  }

}

Solution

Service name must be set via resource as per the specification. I am not sure which version of js libs you are using. This should get you the service name.

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

...
...

const provider = new WebTracerProvider({
    resource: new Resource({
        [ResourceAttributes.SERVICE_NAME]: "interceptor-example"
    }),
});

Answered By - Srikanth Chekuri