Single Page Application (Angular) error

[andreatosato]

Hi, I want to use OpenTelemetry on angular application.

My app is written in angular.
I follow examples on this path.

I have this error:

node_modules/@opentelemetry/tracing/build/src/BasicTracerProvider.d.ts:17:5 - error TS2416: Property 'getTracer' in type 'BasicTracerProvider' is not assignable to the same property in base type 'TracerProvider'.

and also:

node_modules/@opentelemetry/exporter-collector/build/src/transform.d.ts:1:48 - error TS2614: Module '"@opentelemetry/api"' has no exported member 'TimedEvent'. Did you mean to use 'import TimedEvent from "@opentelemetry/api"' instead?

1 import { SpanAttributes, SpanKind, SpanStatus, TimedEvent, TraceState } from '@opentelemetry/api';

My Angular component:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { context, trace } from '@opentelemetry/api';
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing';
import { WebTracerProvider } from '@opentelemetry/web';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { B3Propagator } from '@opentelemetry/propagator-b3';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { ZipkinExporter } from '@opentelemetry/exporter-zipkin';

const provider = new WebTracerProvider();
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.addSpanProcessor(new SimpleSpanProcessor(new ZipkinExporter(
  {
    url: 'http://zipkin:9411/api/v2/spans'
  }
)));
provider.register({
  contextManager: new ZoneContextManager(),
  propagator: new B3Propagator(),
});

registerInstrumentations({
  instrumentations: [
    new FetchInstrumentation({
      ignoreUrls: [/localhost:4200\/sockjs-node/],
      propagateTraceHeaderCorsUrls: [
        'http://localhost:10000',
      ],
      clearTimingResources: true,
    }),
  ],
});

@Component({
  selector: 'app-access-dapr',
  templateUrl: './access-dapr.component.html',
  styleUrls: ['./access-dapr.component.sass']
})
export class AccessDaprComponent implements OnInit {
  public weathers!: Weather[];

  constructor(private httpClient: HttpClient) { }

  ngOnInit(): void {
  }

  callCatalog(){
    const webTracerWithZone = provider.getTracer('example-tracer-web');
    const singleSpan = webTracerWithZone.startSpan(`callserver`);
    this.httpClient.get<Weather[]>("http://localhost:10000/c/weather")
                   .subscribe(t => {
                     this.weathers = t;
                     singleSpan.end();
                    });
  }
}

class Weather {
  Date!: Date;
  TemperatureC!: number;
  TemperatureF!: number;
  Summary!: string;
}

[Flarna]

I guess that incompatible versions of OTel components are used. Please see compatibility matrix for details.

[andreatosato]

"@opentelemetry/api": "^0.20.0",
"@opentelemetry/context-zone-peer-dep": "^0.19.0",
"@opentelemetry/exporter-collector": "^0.19.0",
"@opentelemetry/exporter-zipkin": "^0.19.0",
"@opentelemetry/instrumentation": "^0.19.0",
"@opentelemetry/instrumentation-document-load": "^0.16.0",
"@opentelemetry/instrumentation-fetch": "^0.19.0",
"@opentelemetry/instrumentation-xml-http-request": "^0.19.0",
"@opentelemetry/propagator-b3": "^0.19.0",
"@opentelemetry/propagator-jaeger": "^0.19.0",
"@opentelemetry/web": "^0.19.0",

[Dharin-shah]

hey @andreatosato
use this

"dependencies": {
    "@opentelemetry/api": "^0.18.x",
    "@opentelemetry/core": "^0.18.x",
    "@opentelemetry/exporter-jaeger": "^0.19.0",
    "@opentelemetry/exporter-prometheus": "^0.19.0",
    "@opentelemetry/exporter-zipkin": "^0.19.0",
    "@opentelemetry/instrumentation-express": "^0.16.0",
    "@opentelemetry/instrumentation-grpc": "^0.19.0",
    "@opentelemetry/instrumentation-http": "^0.19.0",
    "@opentelemetry/node": "^0.18.x"
  },

[Flarna]

@andreatosato As written in the compat table please try with "@opentelemetry/api": "^1.0.0-rc.0"

I don't recommend to mix e.g @opentelemetry/core 0.18.x with @opentelemetry/exporter-zipkin 0.19.0. It may work but compat table tells a different story.

[Dharin-shah]

yeah could be, however that is something thats working for me as of now

[andreatosato]

@Flarna @Dharin-shah with "^1.0.0-rc.0" angular compile!
Now i need to investigate how to work with DAPR.