feat: Integrate OpenTelemetry for distributed tracing in both frontend and backend applications.

frontend/script.js

@@ -1,6 +1,32 @@
 (() => {
   'use strict';
 
+  // --- OpenTelemetry Frontend Instrumentation ---
+  // Загружаем OTel Web SDK динамически через esm.sh, чтобы не ломать старый Vanilla JS (без type="module")
+  import('https://esm.sh/@opentelemetry/sdk-trace-web').then(async ({ WebTracerProvider, BatchSpanProcessor }) => {
+    const { OTLPTraceExporter } = await import('https://esm.sh/@opentelemetry/exporter-trace-otlp-http');
+    const { getWebAutoInstrumentations } = await import('https://esm.sh/@opentelemetry/auto-instrumentations-web');
+    const { registerInstrumentations } = await import('https://esm.sh/@opentelemetry/instrumentation');
+    const { Resource } = await import('https://esm.sh/@opentelemetry/resources');
+
+    const exporter = new OTLPTraceExporter({
+      url: window.location.origin + '/otel/v1/traces' // Трафик пойдет через ваш Caddy Proxy
+    });
+    
+    const provider = new WebTracerProvider({
+      resource: new Resource({ 'service.name': 'magistr-frontend' }),
+    });
+    
+    provider.addSpanProcessor(new BatchSpanProcessor(exporter));
+    provider.register();
+
+    registerInstrumentations({
+      instrumentations: [getWebAutoInstrumentations()]
+    });
+    console.log("SigNoz (OpenTelemetry) инициализирован во фронтенде.");
+  }).catch(e => console.error("Ошибка загрузки OTel:", e));
+  // ----------------------------------------------
+
   const form = document.getElementById('login-form');
   const usernameInput = document.getElementById('username');
   const passwordInput = document.getElementById('password');