feat: Add OpenTelemetry integration by creating otel.js and importing it into main.js.

frontend/admin/js/main.js

@@ -1,3 +1,5 @@
+import './otel.js';
+
 import { isAuthenticatedAsAdmin } from './api.js';
 import { applyRippleEffect, closeAllDropdownsOnOutsideClick } from './utils.js';
 

frontend/admin/js/otel.js

@@ -0,0 +1,47 @@
+import { WebTracerProvider } from 'https://esm.sh/@opentelemetry/sdk-trace-web@1.22.0';
+import { getWebAutoInstrumentations } from 'https://esm.sh/@opentelemetry/auto-instrumentations-web@0.37.0';
+import { OTLPTraceExporter } from 'https://esm.sh/@opentelemetry/exporter-trace-otlp-http@0.49.1';
+import { BatchSpanProcessor } from 'https://esm.sh/@opentelemetry/sdk-trace-base@1.22.0';
+import { registerInstrumentations } from 'https://esm.sh/@opentelemetry/instrumentation@0.49.1';
+import { ZoneContextManager } from 'https://esm.sh/@opentelemetry/context-zone@1.22.0';
+import { Resource } from 'https://esm.sh/@opentelemetry/resources@1.22.0';
+import { SemanticResourceAttributes } from 'https://esm.sh/@opentelemetry/semantic-conventions@1.22.0';
+
+// Инициализация провайдера метрик и трейсов с именем сервиса
+const provider = new WebTracerProvider({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'magistr-frontend-admin',
+  }),
+});
+
+// Экспортер отправляет данные на относительный путь /otel/v1/traces.
+// На проде Caddy перехватит этот запрос и проксирует в SigNoz OTLP Collector (порт 4318).
+const traceExporter = new OTLPTraceExporter({
+  url: window.location.origin + '/otel/v1/traces',
+});
+
+// Использование BatchSpanProcessor для буферизации трейсов перед отправкой
+provider.addSpanProcessor(new BatchSpanProcessor(traceExporter));
+
+// Использование ZoneContextManager для поддержки асинхронных операций (Promise, setTimeout, etc)
+provider.register({
+  contextManager: new ZoneContextManager(),
+});
+
+// Регистрация авто-инструментаций для бразуера (document-load, xml-http-request, fetch, history, etc)
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.*/,
+        clearTimingResources: true,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.*/,
+        clearTimingResources: true,
+      },
+    }),
+  ],
+});
+
+console.log('OpenTelemetry Web SDK initialized successfully.');