I have a hello-world Angular project that I'm trying to set up opentelemetry on it. There is no back end and I just want to see the traces for the frontend. I followed the instruction provided by the following library but I don't get the traces on Zipkin: opentelemetry-angular-interceptor
There is no specific error when I run ng serve, I just can't see the traces.
This is what I've done on this project:
Environment.ts file:
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 file:
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 { }
Added configuration to environment.ts file and imported all necessary modules including ZipkinExporterModule to app.module.ts but can't see the traces on Zipkin.
