[TEST] Add OpenTelemetry integration with Signoz

[cmer81]

Add OpenTelemetry integration with Signoz for frontend monitoring

Summary

Implements OpenTelemetry instrumentation to send frontend traces to Signoz. This enables monitoring of user interactions, HTTP requests, and performance metrics for the Vue 3
application.

Changes

Dependencies

• Added OpenTelemetry packages for browser instrumentation:
  • @opentelemetry/api
  • @opentelemetry/sdk-trace-web
  • @opentelemetry/auto-instrumentations-web
  • @opentelemetry/exporter-trace-otlp-http
  • @opentelemetry/resources
  • @opentelemetry/semantic-conventions

Configuration

• New file: src/telemetry.ts - OpenTelemetry initialization with:

  • OTLP exporter configured for Signoz endpoint
  • Auto-instrumentation for fetch, XMLHttpRequest, and user interactions
  • Service name: infoclimat-frontend
  • Environment-aware configuration (dev vs prod)

• Modified: src/main.ts - Import telemetry before app initialization

• Modified: vite.config.ts - Added proxy configuration for dev environment:

  • Routes /otel/* requests to http://192.168.4.5:4318
  • Avoids CORS issues during development

Automatic Instrumentation

The following are automatically captured:

• ✅ HTTP requests (fetch/axios)
• ✅ XMLHttpRequest calls
• ✅ User interactions (clicks, inputs, form submissions)

Testing

1. Start the dev server: npm run dev
2. Navigate to http://localhost:5173/opendata
3. Check browser console for: OpenTelemetry initialized for infoclimat-frontend
4. Perform actions (navigate, click, make API calls)
5. Verify traces appear in Signoz under service infoclimat-frontend