在 JavaScript 应用程序的 Opentelemetry 中添加服务名称

Question

我正在尝试将 Opentelemetry (Otl) 集成到我的 Angular 应用程序中以跟踪前端调用。一切正常，我可以在 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"
    }),
});

Answer 2

使用 providerConfig 设置服务名称。按照代码将服务名称设置为“SPA 测试”。

import { Resource } from '@opentelemetry/resources';
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { ZipkinExporter, ExporterConfig } from '@opentelemetry/exporter-zipkin';

const providerConfig = {
  resource: new Resource({
      [SemanticResourceAttributes.SERVICE_NAME]: "SPA Test"
  }),
};
const provider = new WebTracerProvider(providerConfig);

const zipkinOptions: ExporterConfig = {
  url: "http://localhost:9411/api/v2/spans"
};
const exporter = new ZipkinExporter(zipkinOptions);
const zipkinProcessor = new BatchSpanProcessor(exporter);
provider.addSpanProcessor(zipkinProcessor);
provider.register();

var tracer = provider.getTracer(CustomersComponent.name, "0.1.0");
var span = tracer.startSpan(CustomersComponent.name);
console.info(span);
span.end();

在 JavaScript 应用程序的 Opentelemetry 中添加服务名称

Add Service name in the Opentelemetry for a JavaScript application

javascript

zipkin

angular

jaeger

open-telemetry