javascript - 在 Opentelemetry 中为 JavaScript 应用程序添加服务名称

Question

我正在尝试在我的 Angular 应用程序中集成 Opentelemetry (Otl) 来跟踪前端调用。一切正常，我可以在 Zipkin 中看到调用。
但唯一的问题是它在 Zipkin 界面中显示为“unknown_service”。
下面是我的整个 Angular 代码和 Zipkin 屏幕截图。这只是一个示例应用程序。但是我的要求是，我要将 Opentelemetry 代码集成到 http 拦截器中，以便在一个地方轻松维护，而不是每次服务调用。 service.name 也应该动态传递，以便在 Zipkin 中进行跟踪。
如何在调用之前添加服务名称？

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();
      });
    });
  }

}

Answer 1

服务名称必须根据规范通过资源设置。我不确定您使用的是哪个版本的 js 库。这应该为您提供服务名称。

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

...
...

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