为 Angular 项目设置 Opentelemetry- 导出到 Zipkin 问题

Question

我有一个 hello-world Angular 项目，我正在尝试在其上设置 opentelemetry。没有后端，我只想看到前端的痕迹。我按照以下库提供的说明进行操作，但没有在 Zipkin 上找到痕迹： opentelemetry-angular-interceptor

我运行 ng serve 的时候没有具体错误，就是看不到痕迹。

这是我在这个项目上所做的：

Environment.ts 文件:

import { DiagLogLevel } from '@opentelemetry/api';
import {
  OpenTelemetryConfig
} from '@jufab/opentelemetry-angular-interceptor';

interface IEnvironment {
  production: boolean;
  urlTest: string;
  openTelemetryConfig: OpenTelemetryConfig;
}

// Example to configure the angular-interceptor library
export const environment: IEnvironment = {
  production: false,
  urlTest: 'http://localhost:4200',
  openTelemetryConfig: {
    commonConfig: {
      console: true, // Display trace on console
      production: true, // Send Trace with BatchSpanProcessor (true) or SimpleSpanProcessor (false)
      serviceName: 'instrumentation-example', // Service name send in trace
      probabilitySampler: '1', // 75% sampling
      logLevel: DiagLogLevel.ALL //ALL Log, DiagLogLevel is an Enum from @opentelemetry/api
    },
    zipkinConfig: {
      url: 'http://localhost:9411/api/v2/spans'
    },
    b3PropagatorConfig: {
      multiHeader: '0' //Value : 'O' (single), '1' (multi)
    },
    instrumentationConfig: {
      xmlHttpRequest: true,
      fetch: true,
      documentLoad: true,
    }
  }
};

app.module.ts 文件:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {
  ZipkinExporterModule,
  CompositePropagatorModule,
  OtelWebTracerModule,
} from '@jufab/opentelemetry-angular-interceptor';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ZipkinExporterModule,
    BrowserModule,
    AppRoutingModule,
    //Insert propagator module
    CompositePropagatorModule,
    OtelWebTracerModule.forRoot(environment.openTelemetryConfig),
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

向 environment.ts 文件添加配置并将包括 ZipkinExporterModule 在内的所有必要模块导入 app.module.ts 但在 Zipkin 上看不到痕迹。

Answer 1

我想通了！我刚刚添加了

"<otel-instrumentation></otel-instrumentation>"

到组件！现在可以使用了。

为 Angular 项目设置 Opentelemetry- 导出到 Zipkin 问题

Opentelemetry set up for Angular Project- Export to Zipkin Problem

zipkin

angular

open-telemetry