Unipin Angular Trace

An Angular library for OpenTelemetry distributed tracing with automatic instrumentation for HTTP requests, user interactions, and form submissions.

Installation

pnpm install

Usage

Add the provideUnipinTrace function to your application's provider array in app.config.ts:

import { provideUnipinTrace } from '@unipin/angular-trace';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideUnipinTrace({
      otelCollectorUrl: environment.otelCollectorUrl,
      apiEndpoint: environment.api.endpoint,
      serviceName: 'dgs',
      allowedCorsUrls: [environment.api.endpoint, 'https://additional-api.com'],
      enableFingerprint: true
    }),
  ],
};

Configuration Options

• otelCollectorUrl (required): URL of the OpenTelemetry collector endpoint
• apiEndpoint (required): Your API endpoint for CORS configuration
• serviceName (required): Name of your service for tracing identification
• allowedCorsUrls (optional): Additional CORS URLs to include in trace propagation
• enableFingerprint (optional): Enable device fingerprinting for device identification (default: false)

Features

• Automatic HTTP Tracing: Captures fetch and XMLHttpRequest calls with detailed attributes
• User Interaction Tracking: Tracks button clicks and form submissions with contextual information
• Device Fingerprinting: Optional device identification using FingerprintJS
• Span Customization: Automatic span naming and attribute enrichment

Building

To build the project run:

ng build

This will compile the library and store the build artifacts in the dist/ directory.