Angular OpenTelemetry Instrumentation

This guide provides step-by-step instructions for setting up OpenTelemetry (OTel) instrumentation in your Angular applications to enable comprehensive observability. OpenTelemetry is an open-source framework that helps you collect telemetry data (such as traces, metrics, and logs) from your app to monitor its performance and health. Once your telemetry data is captured, you can configure an exporter to send it directly to Atatus for advanced monitoring and insights. The process of setting up OpenTelemetry in Angular involves three key steps: Instrumenting Your Angular Application: Add the necessary OpenTelemetry components to your Angular app for trace and metric collection.
Configuring the Exporter: Set up the exporter to send your telemetry data to Atatus.
Validating the Setup: Verify that the configuration is working and that your data is being correctly sent to Atatus.

​

Sending Telemetry Data to Atatus in Two Ways

Send Telemetry Traces to Atatus Option 1: No Code Automatic Instrumentation (recommended)
Option 2: Code Level Automatic Instrumentation
Send Traces Using the OTel Collector Binary
Option 1: No Code Automatic Instrumentation (recommended)
Option 2: Code Level Automatic Instrumentation

​

Send Telemetry Traces to Atatus

​

Option 1: No Code Automatic Instrumentation

1. Install OpenTelemetry packages
   npm install --save @opentelemetry/api
   npm install --save @opentelemetry/auto-instrumentations-node
   
2. Run your application
   export OTEL_TRACES_EXPORTER="otlp"
   export OTEL_EXPORTER_OTLP_ENDPOINT="https://otel-rx.atatus.com:443"
   export OTEL_NODE_RESOURCE_DETECTORS="env,host,os"
   export OTEL_SERVICE_NAME="<APP_NAME>"
   export OTEL_EXPORTER_OTLP_HEADERS="api-key=ATATUS_INGESTION_KEY"
   export NODE_OPTIONS="--require @opentelemetry/auto-instrumentations-node/register"
   <your_run_command>
   

You can get the ATATUS_INGESTION_KEY from Settings -> Account Settings -> API Keys in Atatus dashboard.

​

Option 2: Code Level Automatic Instrumentation

1. Install OpenTelemetry packages
   npm install --save @opentelemetry/sdk-trace-web@^1.21.0
   npm install --save @opentelemetry/instrumentation@^0.48.0
   npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
   npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
   npm install --save @opentelemetry/resources@^1.21.0
   npm install --save @opentelemetry/propagator-b3@^1.21.0
   npm install --save @opentelemetry/semantic-conventions@^1.21.0
   
2. Create instrument.ts file
   import { registerInstrumentations } from '@opentelemetry/instrumentation';
   import {
     WebTracerProvider,
     ConsoleSpanExporter,
     SimpleSpanProcessor,
     BatchSpanProcessor,
   } from '@opentelemetry/sdk-trace-web';
   import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
   import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
   import { Resource } from '@opentelemetry/resources';
   import { B3Propagator } from '@opentelemetry/propagator-b3';
   import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
   
   const resource = Resource.default().merge(
     new Resource({
       [SemanticResourceAttributes.SERVICE_NAME]: '<service_name>',
       [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
     })
   );
   
   const provider = new WebTracerProvider({ resource });
   
   provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
   
   provider.addSpanProcessor(
     new BatchSpanProcessor(
       new OTLPTraceExporter({
         url: 'https://otel-rx.atatus.com:443/v1/traces',
         headers: {
           'api-key': '{ATATUS_INGESTION_KEY}',
         },
       })
     )
   );
   
   provider.register({
     propagator: new B3Propagator(),
   });
   
   registerInstrumentations({
     instrumentations: [
       getWebAutoInstrumentations({
         '@opentelemetry/instrumentation-document-load': {},
         '@opentelemetry/instrumentation-user-interaction': {},
         '@opentelemetry/instrumentation-fetch': {
           propagateTraceHeaderCorsUrls: /.+/,
         },
         '@opentelemetry/instrumentation-xml-http-request': {
           propagateTraceHeaderCorsUrls: /.+/,
         },
       }),
     ],
   });
   
3. Add the below import to your main.ts file.
   import './app/instrument';
   
4. Run the application
   ng serve
   

​

Send Traces Using the OTel Collector Binary:

To collect and send traces to Atatus, it’s recommended to install the OpenTelemetry (OTel) Collector binary. The OTel Collector helps gather logs, host metrics, resource, and infrastructure attributes, enabling richer contextual data and easier signal correlation. For detailed instructions on setting up the OTel Collector binary on your VM, please refer to the official installation guide. Once the Collector is up and running, you can proceed with instrumenting your Java application to start sending telemetry data to Atatus.

​

Option 1: No Code Automatic Instrumentation

1. Install OpenTelemetry packages
   npm install --save @opentelemetry/api
   npm install --save @opentelemetry/auto-instrumentations-node
   
2. Run your application
   export OTEL_TRACES_EXPORTER="otlp"
   export OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4318"
   export OTEL_NODE_RESOURCE_DETECTORS="env,host,os"
   export OTEL_SERVICE_NAME="<APP_NAME>"
   export NODE_OPTIONS="--require @opentelemetry/auto-instrumentations-node/register"
   <your_run_command>
   

You can get the ATATUS_INGESTION_KEY from Settings -> Account Settings -> API Keys in Atatus dashboard.

​

Option 2: Code Level Automatic Instrumentation

1. Install OpenTelemetry packages
   npm install --save @opentelemetry/sdk-trace-web@^1.21.0
   npm install --save @opentelemetry/instrumentation@^0.48.0
   npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
   npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
   npm install --save @opentelemetry/resources@^1.21.0
   npm install --save @opentelemetry/propagator-b3@^1.21.0
   npm install --save @opentelemetry/semantic-conventions@^1.21.0
   
2. Create instrument.ts file
   import { registerInstrumentations } from '@opentelemetry/instrumentation';
   import {
     WebTracerProvider,
     ConsoleSpanExporter,
     SimpleSpanProcessor,
     BatchSpanProcessor,
   } from '@opentelemetry/sdk-trace-web';
   import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
   import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
   import { Resource } from '@opentelemetry/resources';
   import { B3Propagator } from '@opentelemetry/propagator-b3';
   import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
   
   const resource = Resource.default().merge(
     new Resource({
       [SemanticResourceAttributes.SERVICE_NAME]: '<service_name>',
       [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
     })
   );
   
   const provider = new WebTracerProvider({ resource });
   
   provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
   
   provider.addSpanProcessor(
     new BatchSpanProcessor(
       new OTLPTraceExporter({
         url: 'http://localhost:4318',
       })
     )
   );
   
   provider.register({
     propagator: new B3Propagator(),
   });
   
   registerInstrumentations({
     instrumentations: [
       getWebAutoInstrumentations({
         '@opentelemetry/instrumentation-document-load': {},
         '@opentelemetry/instrumentation-user-interaction': {},
         '@opentelemetry/instrumentation-fetch': {
           propagateTraceHeaderCorsUrls: /.+/,
         },
         '@opentelemetry/instrumentation-xml-http-request': {
           propagateTraceHeaderCorsUrls: /.+/,
         },
       }),
     ],
   });
   
3. Add the below import to your main.ts file.
   import './app/instrument';
   
4. Run the application
   ng serve