opentelemetry-angular-interceptor icon indicating copy to clipboard operation
opentelemetry-angular-interceptor copied to clipboard

How can I use this with ng standalone?

Open obabac opened this issue 5 months ago • 1 comments

What I did:

  1. Install the Necessary Packages
npm install @jufab/opentelemetry-angular-interceptor @opentelemetry/api
  1. Create a Custom Module for OpenTelemetry Standalone components don't directly support ModuleWithProviders types in the imports array. To work around this, create a separate Angular module to handle the OpenTelemetry configuration:
import { NgModule } from '@angular/core';
import {
    CompositePropagatorModule, OpenTelemetryConfig,
    OpenTelemetryInterceptorModule,
    OtelColExporterModule
} from "@jufab/opentelemetry-angular-interceptor";

const otelConfig: OpenTelemetryConfig = {
    commonConfig: {
        console: true,
        production: false,
        serviceName: 'demo-ui',
        resourceAttributes: {
            'service.name': 'Demo-UI',
        },
        logBody: true,
        probabilitySampler: '1',
        logLevel: DiagLogLevel.ALL,
    },
    otelcolConfig: {
        url: 'http://localhost:5080/api/default/traces',
        timeoutMillis: 10000,
        headers: {
            'Authorization': 'Basic dd9vdEBleGFtcGxlLmNvbTpDb21wbGV4cGFzcyMxMjM=',
        }
    }
};

@NgModule({
    imports: [
        OpenTelemetryInterceptorModule.forRoot(otelConfig),
        OtelColExporterModule,
        CompositePropagatorModule,
    ],
})
export class OpenTelemetryModule {
    constructor() {
        console.log('OpenTelemetryModule initialized');
    }
}
  1. Import the Module in Your Standalone Component In your standalone component, import this module:
import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { OpenTelemetryModule } from './open-telemetry.module';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    standalone: true,
    imports: [
        IonApp, IonRouterOutlet,
        OpenTelemetryModule  // Import the custom OpenTelemetry module here
    ]
})
export class AppComponent {
    constructor() {
        console.log('AppComponent initialized with OpenTelemetry');
    }
}

This approach doesn't work for me. It does not intercept my requests neither does it send any trace. The modules seems to get initialized (see the console log) though. Any help would be appreciated

obabac avatar Aug 29 '24 11:08 obabac