@jufab/opentelemetry-angular-interceptor is an Angular Library to deploy OpenTelemetry in your Angular application
This library uses opentelemetry-js package
Use Angular >= 13.0.0
More info : https://jufab.github.io/opentelemetry-angular-interceptor/
This library offers two possibilities to use it in Angular App :
With npm :
npm i @jufab/opentelemetry-angular-interceptor
Use the "OpentelemetryConfig" interface to configure the Tracer
export interface OpenTelemetryConfig {
commonConfig: CommonCollectorConfig;
batchSpanProcessorConfig?: BatchSpanProcessorConfig;
otelcolConfig?: OtelCollectorConfig;
jaegerPropagatorConfig?: JaegerPropagatorConfig;
zipkinConfig?: ZipkinCollectorConfig;
b3PropagatorConfig?: B3PropagatorConfig;
ignoreUrls?: IgnoreUrlsConfig;
} Example global Configuration
From the interceptor-example
opentelemetryConfig: {
commonConfig: {
console: true, //(boolean) Display trace on console
production: false, //(boolean) Send trace with BatchSpanProcessor (true) or SimpleSpanProcessor (false)
logBody: true, //(boolean) true add body in a log, nothing otherwise
serviceName: 'interceptor-example', //Service name send in trace
resourceAttributes: { // extra resource attributes like service.namespace
[ATTR_SERVICE_VERSION]: 'version 1.0.0', // Service version
},
probabilitySampler: '0.7', //Samples a configurable percentage of traces, string value between '0' to '1'
logLevel:DiagLogLevel.ALL //(Enum) DiagLogLevel is an Enum from @opentelemetry/api
},
batchSpanProcessorConfig: { //Only if production = true in commonConfig
maxQueueSize: '2048', // The maximum queue size. After the size is reached spans are dropped.
maxExportBatchSize: '512', // The maximum batch size of every export. It must be smaller or equal to maxQueueSize.
scheduledDelayMillis: '5000', // The interval between two consecutive exports
exportTimeoutMillis: '30000', // How long the export can run before it is cancelled
},
otelcolConfig: {
url: 'http://localhost:4318/v1/traces', //URL of opentelemetry collector
},
jaegerPropagatorConfig: {
customHeader: 'custom-header',
}
}
From the instrumentation-example
backendApp.get('/api/config', (req,res) => {
return res.status(200).send({
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
resourceAttributes: { // extra resource attributes like service.namespace
'service.namespace': 'namespace'
},
probabilitySampler: '0.75', // 75% sampling
logLevel: 99 //ALL Log, DiagLogLevel is an Enum from @opentelemetry/api
},
otelcolConfig: {
url: 'http://localhost:4318/v1/traces', // URL of opentelemetry collector
}
});
})
This configuration applies if production is true in commonConfig.
Instrumentation example project have an external configuration to show how you can do it.
You need 3 modules to add to your application.
You add this modules in your application module (generally app.module.ts)
There is 4 exporters:
there is 6 propagators (more info about propagator: https://github.com/open-telemetry/opentelemetry-js/tree/main/packages/opentelemetry-core)
Just add OpenTelemetryInterceptorModule to insert Interceptor
import { NgModule } from '@angular/core';
...
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { OpenTelemetryInterceptorModule, OtelColExporterModule, CompositePropagatorModule } from '@jufab/opentelemetry-angular-interceptor';
import { environment } from '../environments/environment';
...
@NgModule({
declarations: [AppComponent, ...],
imports: [
...
HttpClientModule,
//Insert module OpenTelemetryInterceptorModule with configuration, HttpClientModule is used for interceptor
OpenTelemetryInterceptorModule.forRoot(environment.opentelemetryConfig),
//Insert OtelCol exporter module
OtelColExporterModule,
//Insert propagator module
CompositePropagatorModule,
...
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Declare this OtelWebTracerModule to configure instrumentation.
You need to provide Web instrumentation on the OTEL_INSTRUMENTATION_PLUGINS token in providers section of NgModule
Example in instrumentation-example project
...
import { OtelColExporterModule, CompositePropagatorModule, OtelWebTracerModule } from 'projects/opentelemetry-interceptor/src/public-api';
...
@NgModule({
declarations: [AppComponent, ...],
imports: [
...
// OtelCol Exporter Module
OtelColExporterModule,
// Composite Propagator Module
CompositePropagatorModule,
// OtelWebTracerModule to configure instrumentation component.
OtelWebTracerModule.forRoot(environment.openTelemetryConfig),
...
],
providers: [
{provide: OTEL_INSTRUMENTATION_PLUGINS, useValue: [new XMLHttpRequestInstrumentation()]}
],
bootstrap: [AppComponent],
})
export class AppModule { }
This module uses APP_INITIALIZER token to load instrumentation (multi:true). No component needs now
Interceptor Module And Instrumentation ModuleDon't use them at the same time : you're going to have the same trace twice.
This library exposes injection token. You can use them to override or customize.
IExporterIPropagatorOpenTelemetryConfigInstrumentationOption arrayYou can add a logger to the OtelColExporterModule with the OTEL_LOGGER token.
You can use a custom logger which implements the DiagLogger in @opentelemetry/api.
Or, you can use an existing logger which implements the same functions (error, warn, info, debug) like ngx-logger.
You can use ngx-logger.
In your appModule, insert LoggerModule and configure it
@NgModule({
...
imports: [
LoggerModule.forRoot(environment.loggerConfig),
]
...
And use OTEL_LOGGER token to inject NGXLogger
@NgModule({
...
providers: [
...
{ provide: OTEL_LOGGER, useExisting: NGXLogger }
...
]
Don't forget to set "logLevel" in Common Configuration (Level must be the same between NGXLogger and common configuration)
(Optional) Add span attributes during interceptionYou can see an example in the interceptor-example.
This option is only available for Interceptor Module
Implement a CustomSpan and the method add(span: Span, request: HttpRequest<unknown>, response: HttpResponse<unknown> | HttpErrorResponse): Span
Implement CustomSpan class like :
class CustomSpanImpl implements CustomSpan {
add(span: Span, request: HttpRequest<unknown>, response: HttpResponse<unknown> | HttpErrorResponse): Span {
span.setAttribute('mycustom.key', request.params + ";" + response.status);
return span;
}
}
Inject it in you App module with OTEL_CUSTOM_SPAN :
@NgModule({
...
providers: [
...
{ provide: OTEL_CUSTOM_SPAN, useClass: CustomSpanImpl }
...
]
You can see an example in the interceptor-example.
This library is based on HttpClientModule and the HTTP_INTERCEPTORS
OpenTelemetryInterceptor implement an HttpInterceptor and the intercept method.
This implementation initialise a WebTracerProvider, create a Span and add header propagation in the current call.
The response body is adding by an event in span.
This project has two example Angular Application:
You can see how configure and insert all modules.
You can althought test opentelemetry-angular-interceptor with this two applications.
To start this Interceptor example application, run command :
npm run start:complete-interceptor-example
and open the application at http://localhost:4200
To start this Instrumentation example application, run command :
npm run start:complete-instrumentation-example
and open the application at http://localhost:4200
[Optional] Result in OpenTelemetry-collectorIf you want to see the result in a collector *, there's a docker-compose available in this project.
You can start it with this command :
docker-compose -f collector/docker-compose.yaml up -d
Go to the jaeger application (http://localhost:16686) to see result.
More info about the collector here : https://github.com/open-telemetry/opentelemetry-collector
* without an Agent or a Collector you can see an error in your browser about sending a "trace".
WARNING in xxx/fesm2015/jufab-opentelemetry-angular-interceptor.js depends on '@opentelemetry/web'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in xxx/fesm2015/jufab-opentelemetry-angular-interceptor.js depends on '@opentelemetry/core'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in xxx/fesm2015/jufab-opentelemetry-angular-interceptor.js depends on '@opentelemetry/tracing'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in xxx/fesm2015/jufab-opentelemetry-angular-interceptor.js depends on '@opentelemetry/api'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies WARNING in xxx/fesm2015/jufab-opentelemetry-angular-interceptor.js depends on '@opentelemetry/exporter-collector/build/src/platform/browser'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Add to your angular.json
"options": {
"allowedCommonJsDependencies": [
"@opentelemetry/api",
"@opentelemetry/exporter-collector",
"@opentelemetry/exporter-zipkin",
"@opentelemetry/tracing",
"@opentelemetry/web",
"@opentelemetry/core",
"@opentelemetry/propagator-jaeger",
"@opentelemetry/propagator-b3",
"@opentelemetry/instrumentation",
"@opentelemetry/instrumentation-xml-http-request",
"@opentelemetry/instrumentation-document-load",
"@opentelemetry/instrumentation-fetch",
"@opentelemetry/context-zone-peer-dep"
], Error Fix error TS2694: Namespace 'NodeJS' has no exported member 'Timeout'. Need dependence @type/node >= 12.0.2 error TS1086: An accessor cannot be declared in an ambient context. Need dependence typescript >= 3.6.0
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4