diff --git a/frontend/admin/js/main.js b/frontend/admin/js/main.js index 6745859..ae85f6a 100755 --- a/frontend/admin/js/main.js +++ b/frontend/admin/js/main.js @@ -1,3 +1,5 @@ +import './otel.js'; + import { isAuthenticatedAsAdmin } from './api.js'; import { applyRippleEffect, closeAllDropdownsOnOutsideClick } from './utils.js'; diff --git a/frontend/admin/js/otel.js b/frontend/admin/js/otel.js new file mode 100644 index 0000000..2de329d --- /dev/null +++ b/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.');