Adding OpenTelemetry to an Angular Application

[utterances-bot]

Adding OpenTelemetry to an Angular Application - Tim Deschryver

How to register the OpenTelemetry web packages to automatically create traces and send them to a backend. The result is a helpful dashboard containing insights about the Angular application.

https://timdeschryver.dev/blog/adding-opentelemetry-to-an-angular-application

[Jonathan-w6d]

Just so you know, your blogpost made at least one happy devops ;)
I was having some much trouble making auto instrumentation work with static fronts, thanks a lot !

[timdeschryver]

That's great to hear, thanks for the feedback @Jonathan-w6d !

[DvDruzhkov]

hi, in angular universal I get an error Cannot find name 'Task' and Cannot find name 'Zone'
the problem occurs in the file node_modules/@opentelemetry/auto-instrumentations-web/node_modules/@opentelemetry/instrumentation-user-interaction/build/src/internal-types.d.ts
did you solve this problem?

[DvDruzhkov]

I want to make loading lazy, for this I put the loading logic init of openTelemetry in a separate file and load it at the start of the application through import. everything is fine, but the assembly for the ssr is not going to

[timdeschryver]

Hey @DvDruzhkov , sorry but I don't really have SSR experience with Angular.
It seems like it's throwing this issue because zone.js is not loaded yet.

[DvDruzhkov]

this problem occurs during the build, I will try to solve it

[DvDruzhkov]

i did it

instead of library @opentelemetry/auto-instrumentations-web I used @opentelemetry/instrumentation @opentelemetry/instrumentation-xml-http-request
as a result, registerInstrumentations looks like this:

registerInstrumentations({
instrumentations: [new XMLHttpRequestInstrumentation()],
});

[DvDruzhkov]

after these settings the build for web and ssr works

[Choupa-web]

Hello,

That's a great post! It saved my day.

with that solution is it possible to also send messages logged to console global object of my browser?

[timdeschryver]

Hi @Choupa-web , using the ConsoleSpanExporter (it's also mentioned in the article), the messages will also be logged to the console. I don't recommend this to use in production though.

[ngie-mp]

hi very interesting tutorial, Im learning about code instrumentation and I have already deployed another observability platform. Do you think that I can follow this tutorial and linked with SigNoz for exemple ?

[timdeschryver]

Thanks @ngie-mp , I expect it to work because observability is based on a standard.

[lugogregory]

Hi Tim!! i want to integrate this solution with an Angular v17 application, but when trying to install the @opentelemetry/auto-instrumentations-web package, I get a dependency conflict error, because the this package has [email protected] in its peerDeps and my project uses zone.js@ 0.14.6, I have managed to install it using the --peer-deps flag, but I would like not to do it that way. Did this happen to you?

[timdeschryver]

Hello @lugogregory , I also received that warning.
To be fair, I don't know if there's a good way to fix this.

[lugogregory]

Hi Tim, thank you for your quick and timely response. I have another question, how can i change the name of the service that appears in the main dropdown? "unknow_service". Thanks

[Jhignas]

Hello @lugogregory , I think you can do this using something called resources to set these up.

import { Resource } from '@opentelemetry/resources';
import {
  SEMRESATTRS_SERVICE_NAME,
  SEMRESATTRS_SERVICE_VERSION,
} from '@opentelemetry/semantic-conventions';

const resource = Resource.default().merge(
  new Resource({
    [SEMRESATTRS_SERVICE_NAME]: 'service-name-here',
    [SEMRESATTRS_SERVICE_VERSION]: '0.1.0',
  }),
);

const provider = new WebTracerProvider({
  resource: resource,
});

[timdeschryver]

Sorry I missed this message, see @Jhignas 's answer.
Thanks @Jhignas !

[jvproduct]

Looking forward to "how to make this code more "Angulary", include more information in our traces to make it easier to monitor, how to log errors, and more."

Any update on this?

[Saber-Bjeoui]

Thanks for sharing, great post!
Am actually using Helm to deploy Angular apps, until now I didn't succeed to get otel working despite I followed this article and also checked others. I am sure am missing something but don't know where or what, any one have an idea ?