@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/telemetry.js

@@ -1,358 +1,358 @@
-import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
-import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
-import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
-import { Resource } from '@opentelemetry/resources';
-import { SEMRESATTRS_SERVICE_NAME, SEMRESATTRS_SERVICE_VERSION, SEMRESATTRS_DEPLOYMENT_ENVIRONMENT } from '@opentelemetry/semantic-conventions';
-import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
-import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
-import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
-import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
-import { ZoneContextManager } from '@opentelemetry/context-zone';
-import { B3Propagator } from '@opentelemetry/propagator-b3';
-
-// Telemetry configuration from environment or defaults
-const TELEMETRY_CONFIG = {
-  serviceName: import.meta.env.VITE_OTEL_SERVICE_NAME || 'jetbook-performersportal',
-  serviceVersion: import.meta.env.VITE_OTEL_SERVICE_VERSION || '1.0.0',
-  environment: import.meta.env.VITE_ENVIRONMENT || 'development',
-  otlpEndpoint: import.meta.env.VITE_OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces',
-  tracesEnabled: import.meta.env.VITE_OTEL_TRACES_ENABLED !== 'false',
-  sampleRate: parseFloat(import.meta.env.VITE_OTEL_TRACES_SAMPLER_ARG || '0.1'), // 10% sampling by default
-  consoleDebug: import.meta.env.VITE_OTEL_DEBUG === 'true'
-};
-
-let tracer = null;
-let tracerProvider = null;
-
-// Helper to log telemetry events when debugging
-function debugLog(message, data) {
-  if (TELEMETRY_CONFIG.consoleDebug) {
-    console.log(`[Telemetry] ${message}`, data || '');
-  }
-}
-
-// Initialize OpenTelemetry
-export function initTelemetry() {
-  if (!TELEMETRY_CONFIG.tracesEnabled) {
-    console.log('[Telemetry] Tracing is disabled');
-    return;
-  }
-
-  try {
-    // Create resource with service information
-    const resource = new Resource({
-        [SEMRESATTRS_SERVICE_NAME]: TELEMETRY_CONFIG.serviceName,
-        [SEMRESATTRS_SERVICE_VERSION]: TELEMETRY_CONFIG.serviceVersion,
-        [SEMRESATTRS_DEPLOYMENT_ENVIRONMENT]: TELEMETRY_CONFIG.environment,
-        'browser.user_agent': navigator.userAgent,
-        'browser.language': navigator.language,
-        'browser.platform': navigator.platform
-    });
-
-    // Create tracer provider
-    tracerProvider = new WebTracerProvider({
-      resource,
-      sampler: {
-        shouldSample: () => {
-          return {
-            decision: Math.random() < TELEMETRY_CONFIG.sampleRate ? 1 : 0,
-            attributes: []
-          };
-        }
-      }
-    });
-
-    // Configure OTLP exporter
-    const exporter = new OTLPTraceExporter({
-      url: TELEMETRY_CONFIG.otlpEndpoint,
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-
-    // Add batch span processor
-    tracerProvider.addSpanProcessor(new BatchSpanProcessor(exporter, {
-      maxQueueSize: 100,
-      maxExportBatchSize: 50,
-      scheduledDelayMillis: 500,
-      exportTimeoutMillis: 30000
-    }));
-
-    // Set global provider
-    tracerProvider.register({
-      contextManager: new ZoneContextManager(),
-      propagator: new B3Propagator()
-    });
-
-    // Enable browser instrumentations
-    // These auto-register with the global tracer provider when instantiated and enabled
-    new DocumentLoadInstrumentation({
-      applyCustomAttributesOnSpan: {
-        documentLoad: (span) => {
-          span.setAttribute('page.path', window.location.pathname);
-          span.setAttribute('page.search', window.location.search);
-          span.setAttribute('page.hash', window.location.hash);
-          span.setAttribute('portal.type', 'performers');
-        },
-        documentFetch: (span) => {
-          span.setAttribute('document.referrer', document.referrer);
-        }
-      }
-    }).enable();
-
-    new FetchInstrumentation({
-      propagateTraceHeaderCorsUrls: [
-        /^http:\/\/localhost:8080\/.*/,
-        /^https:\/\/api\.jetbook\.com\/.*/,
-        /^https:\/\/.*\.get-micdrop\.com\/.*/
-      ],
-      clearTimingResources: true,
-      applyCustomAttributesOnSpan: (span, request, response) => {
-        const url = new URL(request.url || '');
-        span.setAttribute('http.url.pathname', url.pathname);
-        span.setAttribute('http.url.search', url.search);
-        span.setAttribute('portal.type', 'performers');
-
-        if (response) {
-          span.setAttribute('http.response.status', response.status);
-          span.setAttribute('http.response.content_length', response.headers?.get('content-length') || 0);
-        }
-      }
-    }).enable();
-
-    new XMLHttpRequestInstrumentation({
-      propagateTraceHeaderCorsUrls: [
-        /^http:\/\/localhost:8080\/.*/,
-        /^https:\/\/api\.jetbook\.com\/.*/,
-        /^https:\/\/.*\.get-micdrop\.com\/.*/
-      ],
-      clearTimingResources: true
-    }).enable();
-
-    new UserInteractionInstrumentation({
-      eventNames: ['click', 'submit', 'change'],
-      shouldPreventSpanCreation: (eventType, element, span) => {
-        // Skip telemetry for certain elements
-        if (element.classList?.contains('no-telemetry')) {
-          return true;
-        }
-        // Skip very frequent events
-        if (eventType === 'change' && element.tagName === 'INPUT' && element.type === 'text') {
-          return true;
-        }
-        return false;
-      }
-    }).enable();
-
-    // Get tracer instance
-    tracer = tracerProvider.getTracer(
-      TELEMETRY_CONFIG.serviceName,
-      TELEMETRY_CONFIG.serviceVersion
-    );
-
-    debugLog('Telemetry initialized', TELEMETRY_CONFIG);
-    console.log(`[Telemetry] Initialized with ${TELEMETRY_CONFIG.sampleRate * 100}% sampling rate`);
-
-  } catch (error) {
-    console.error('[Telemetry] Failed to initialize:', error);
-  }
-}
-
-// Create custom span for tracking specific operations
-export function startSpan(name, options = {}) {
-  if (!tracer) return null;
-
-  const span = tracer.startSpan(name, {
-    ...options,
-    attributes: {
-      'span.kind': 'internal',
-      'portal.type': 'performers',
-      ...options.attributes
-    }
-  });
-
-  debugLog(`Started span: ${name}`, options.attributes);
-  return span;
-}
-
-// End a span and set its status
-export function endSpan(span, status = { code: 0 }) {
-  if (!span) return;
-
-  span.setStatus(status);
-  span.end();
-  debugLog(`Ended span: ${span.name}`, status);
-}
-
-// Track page views (for SPAs)
-export function trackPageView(pagePath, pageTitle) {
-  if (!tracer) return;
-
-  const span = tracer.startSpan('page_view', {
-    attributes: {
-      'page.path': pagePath,
-      'page.title': pageTitle || document.title,
-      'page.url': window.location.href,
-      'page.referrer': document.referrer,
-      'portal.type': 'performers'
-    }
-  });
-
-  span.end();
-  debugLog(`Tracked page view: ${pagePath}`);
-}
-
-// Track custom events
-export function trackEvent(eventName, attributes = {}) {
-  if (!tracer) return;
-
-  const span = tracer.startSpan(`event.${eventName}`, {
-    attributes: {
-      'event.name': eventName,
-      'event.timestamp': new Date().toISOString(),
-      'portal.type': 'performers',
-      ...attributes
-    }
-  });
-
-  span.end();
-  debugLog(`Tracked event: ${eventName}`, attributes);
-}
-
-// Track performer-specific actions
-export function trackPerformerAction(action, metadata = {}) {
-  if (!tracer) return;
-
-  const span = tracer.startSpan(`performer.${action}`, {
-    attributes: {
-      'performer.action': action,
-      'performer.metadata': JSON.stringify(metadata),
-      'portal.type': 'performers',
-      'page.url': window.location.href,
-      'timestamp': new Date().toISOString()
-    }
-  });
-
-  span.end();
-  debugLog(`Tracked performer action: ${action}`, metadata);
-}
-
-// Track errors
-export function trackError(error, context = {}) {
-  if (!tracer) return;
-
-  const span = tracer.startSpan('error', {
-    attributes: {
-      'error.message': error.message || String(error),
-      'error.stack': error.stack,
-      'error.type': error.name || 'Error',
-      'error.context': JSON.stringify(context),
-      'page.url': window.location.href,
-      'portal.type': 'performers'
-    }
-  });
-
-  span.setStatus({ code: 2, message: error.message });
-  span.recordException(error);
-  span.end();
-
-  debugLog(`Tracked error: ${error.message}`, context);
-}
-
-// Track API calls with custom attributes
-export function trackAPICall(method, endpoint, status, duration, attributes = {}) {
-  if (!tracer) return;
-
-  const span = tracer.startSpan('api_call', {
-    attributes: {
-      'http.method': method,
-      'http.url': endpoint,
-      'http.status_code': status,
-      'http.duration_ms': duration,
-      'portal.type': 'performers',
-      ...attributes
-    }
-  });
-
-  span.setStatus({ code: status >= 400 ? 2 : 0 });
-  span.end();
-
-  debugLog(`Tracked API call: ${method} ${endpoint}`, { status, duration });
-}
-
-// Track user actions
-export function trackUserAction(action, metadata = {}) {
-  if (!tracer) return;
-
-  const span = tracer.startSpan(`user.${action}`, {
-    attributes: {
-      'user.action': action,
-      'user.metadata': JSON.stringify(metadata),
-      'portal.type': 'performers',
-      'page.url': window.location.href,
-      'timestamp': new Date().toISOString()
-    }
-  });
-
-  span.end();
-  debugLog(`Tracked user action: ${action}`, metadata);
-}
-
-// Shutdown telemetry gracefully
-export async function shutdownTelemetry() {
-  if (tracerProvider) {
-    try {
-      await tracerProvider.shutdown();
-      console.log('[Telemetry] Shutdown complete');
-    } catch (error) {
-      console.error('[Telemetry] Shutdown error:', error);
-    }
-  }
-}
-
-// Connect client spans with SSR spans using trace context
-function connectWithSSRTrace() {
-  // Check if we have trace context from SSR
-  const ssrTraceContext = window.__TRACE_CONTEXT__;
-  if (ssrTraceContext && tracer) {
-    // Create a span linked to the SSR span
-    const span = tracer.startSpan('client.performer.init', {
-      attributes: {
-        'span.kind': 'client',
-        'client.type': 'browser',
-        'portal.type': 'performers',
-        'ssr.trace_id': ssrTraceContext.traceId,
-        'ssr.span_id': ssrTraceContext.spanId
-      },
-      links: [{
-        context: {
-          traceId: ssrTraceContext.traceId,
-          spanId: ssrTraceContext.spanId,
-          traceFlags: ssrTraceContext.traceFlags || 0
-        }
-      }]
-    });
-
-    span.end();
-    debugLog('Connected to SSR trace', ssrTraceContext);
-  }
-}
-
-// Auto-initialize on module load if in browser environment
-if (typeof window !== 'undefined') {
-  // Initialize telemetry when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      initTelemetry();
-      connectWithSSRTrace();
-    });
-  } else {
-    initTelemetry();
-    connectWithSSRTrace();
-  }
-
-  // Cleanup on page unload
-  window.addEventListener('beforeunload', () => {
-    shutdownTelemetry();
-  });
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
+import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { SEMRESATTRS_SERVICE_NAME, SEMRESATTRS_SERVICE_VERSION, SEMRESATTRS_DEPLOYMENT_ENVIRONMENT } from '@opentelemetry/semantic-conventions';
+import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
+import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
+import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
+import { ZoneContextManager } from '@opentelemetry/context-zone';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+
+// Telemetry configuration from environment or defaults
+const TELEMETRY_CONFIG = {
+  serviceName: import.meta.env.VITE_OTEL_SERVICE_NAME || 'jetbook-performersportal',
+  serviceVersion: import.meta.env.VITE_OTEL_SERVICE_VERSION || '1.0.0',
+  environment: import.meta.env.VITE_ENVIRONMENT || 'development',
+  otlpEndpoint: import.meta.env.VITE_OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces',
+  tracesEnabled: import.meta.env.VITE_OTEL_TRACES_ENABLED !== 'false',
+  sampleRate: parseFloat(import.meta.env.VITE_OTEL_TRACES_SAMPLER_ARG || '0.1'), // 10% sampling by default
+  consoleDebug: import.meta.env.VITE_OTEL_DEBUG === 'true'
+};
+
+let tracer = null;
+let tracerProvider = null;
+
+// Helper to log telemetry events when debugging
+function debugLog(message, data) {
+  if (TELEMETRY_CONFIG.consoleDebug) {
+    console.log(`[Telemetry] ${message}`, data || '');
+  }
+}
+
+// Initialize OpenTelemetry
+export function initTelemetry() {
+  if (!TELEMETRY_CONFIG.tracesEnabled) {
+    console.log('[Telemetry] Tracing is disabled');
+    return;
+  }
+
+  try {
+    // Create resource with service information
+    const resource = new Resource({
+        [SEMRESATTRS_SERVICE_NAME]: TELEMETRY_CONFIG.serviceName,
+        [SEMRESATTRS_SERVICE_VERSION]: TELEMETRY_CONFIG.serviceVersion,
+        [SEMRESATTRS_DEPLOYMENT_ENVIRONMENT]: TELEMETRY_CONFIG.environment,
+        'browser.user_agent': navigator.userAgent,
+        'browser.language': navigator.language,
+        'browser.platform': navigator.platform
+    });
+
+    // Create tracer provider
+    tracerProvider = new WebTracerProvider({
+      resource,
+      sampler: {
+        shouldSample: () => {
+          return {
+            decision: Math.random() < TELEMETRY_CONFIG.sampleRate ? 1 : 0,
+            attributes: []
+          };
+        }
+      }
+    });
+
+    // Configure OTLP exporter
+    const exporter = new OTLPTraceExporter({
+      url: TELEMETRY_CONFIG.otlpEndpoint,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+
+    // Add batch span processor
+    tracerProvider.addSpanProcessor(new BatchSpanProcessor(exporter, {
+      maxQueueSize: 100,
+      maxExportBatchSize: 50,
+      scheduledDelayMillis: 500,
+      exportTimeoutMillis: 30000
+    }));
+
+    // Set global provider
+    tracerProvider.register({
+      contextManager: new ZoneContextManager(),
+      propagator: new B3Propagator()
+    });
+
+    // Enable browser instrumentations
+    // These auto-register with the global tracer provider when instantiated and enabled
+    new DocumentLoadInstrumentation({
+      applyCustomAttributesOnSpan: {
+        documentLoad: (span) => {
+          span.setAttribute('page.path', window.location.pathname);
+          span.setAttribute('page.search', window.location.search);
+          span.setAttribute('page.hash', window.location.hash);
+          span.setAttribute('portal.type', 'performers');
+        },
+        documentFetch: (span) => {
+          span.setAttribute('document.referrer', document.referrer);
+        }
+      }
+    }).enable();
+
+    new FetchInstrumentation({
+      propagateTraceHeaderCorsUrls: [
+        /^http:\/\/localhost:8080\/.*/,
+        /^https:\/\/api\.jetbook\.com\/.*/,
+        /^https:\/\/.*\.get-micdrop\.com\/.*/
+      ],
+      clearTimingResources: true,
+      applyCustomAttributesOnSpan: (span, request, response) => {
+        const url = new URL(request.url || '');
+        span.setAttribute('http.url.pathname', url.pathname);
+        span.setAttribute('http.url.search', url.search);
+        span.setAttribute('portal.type', 'performers');
+
+        if (response) {
+          span.setAttribute('http.response.status', response.status);
+          span.setAttribute('http.response.content_length', response.headers?.get('content-length') || 0);
+        }
+      }
+    }).enable();
+
+    new XMLHttpRequestInstrumentation({
+      propagateTraceHeaderCorsUrls: [
+        /^http:\/\/localhost:8080\/.*/,
+        /^https:\/\/api\.jetbook\.com\/.*/,
+        /^https:\/\/.*\.get-micdrop\.com\/.*/
+      ],
+      clearTimingResources: true
+    }).enable();
+
+    new UserInteractionInstrumentation({
+      eventNames: ['click', 'submit', 'change'],
+      shouldPreventSpanCreation: (eventType, element, span) => {
+        // Skip telemetry for certain elements
+        if (element.classList?.contains('no-telemetry')) {
+          return true;
+        }
+        // Skip very frequent events
+        if (eventType === 'change' && element.tagName === 'INPUT' && element.type === 'text') {
+          return true;
+        }
+        return false;
+      }
+    }).enable();
+
+    // Get tracer instance
+    tracer = tracerProvider.getTracer(
+      TELEMETRY_CONFIG.serviceName,
+      TELEMETRY_CONFIG.serviceVersion
+    );
+
+    debugLog('Telemetry initialized', TELEMETRY_CONFIG);
+    console.log(`[Telemetry] Initialized with ${TELEMETRY_CONFIG.sampleRate * 100}% sampling rate`);
+
+  } catch (error) {
+    console.error('[Telemetry] Failed to initialize:', error);
+  }
+}
+
+// Create custom span for tracking specific operations
+export function startSpan(name, options = {}) {
+  if (!tracer) return null;
+
+  const span = tracer.startSpan(name, {
+    ...options,
+    attributes: {
+      'span.kind': 'internal',
+      'portal.type': 'performers',
+      ...options.attributes
+    }
+  });
+
+  debugLog(`Started span: ${name}`, options.attributes);
+  return span;
+}
+
+// End a span and set its status
+export function endSpan(span, status = { code: 0 }) {
+  if (!span) return;
+
+  span.setStatus(status);
+  span.end();
+  debugLog(`Ended span: ${span.name}`, status);
+}
+
+// Track page views (for SPAs)
+export function trackPageView(pagePath, pageTitle) {
+  if (!tracer) return;
+
+  const span = tracer.startSpan('page_view', {
+    attributes: {
+      'page.path': pagePath,
+      'page.title': pageTitle || document.title,
+      'page.url': window.location.href,
+      'page.referrer': document.referrer,
+      'portal.type': 'performers'
+    }
+  });
+
+  span.end();
+  debugLog(`Tracked page view: ${pagePath}`);
+}
+
+// Track custom events
+export function trackEvent(eventName, attributes = {}) {
+  if (!tracer) return;
+
+  const span = tracer.startSpan(`event.${eventName}`, {
+    attributes: {
+      'event.name': eventName,
+      'event.timestamp': new Date().toISOString(),
+      'portal.type': 'performers',
+      ...attributes
+    }
+  });
+
+  span.end();
+  debugLog(`Tracked event: ${eventName}`, attributes);
+}
+
+// Track performer-specific actions
+export function trackPerformerAction(action, metadata = {}) {
+  if (!tracer) return;
+
+  const span = tracer.startSpan(`performer.${action}`, {
+    attributes: {
+      'performer.action': action,
+      'performer.metadata': JSON.stringify(metadata),
+      'portal.type': 'performers',
+      'page.url': window.location.href,
+      'timestamp': new Date().toISOString()
+    }
+  });
+
+  span.end();
+  debugLog(`Tracked performer action: ${action}`, metadata);
+}
+
+// Track errors
+export function trackError(error, context = {}) {
+  if (!tracer) return;
+
+  const span = tracer.startSpan('error', {
+    attributes: {
+      'error.message': error.message || String(error),
+      'error.stack': error.stack,
+      'error.type': error.name || 'Error',
+      'error.context': JSON.stringify(context),
+      'page.url': window.location.href,
+      'portal.type': 'performers'
+    }
+  });
+
+  span.setStatus({ code: 2, message: error.message });
+  span.recordException(error);
+  span.end();
+
+  debugLog(`Tracked error: ${error.message}`, context);
+}
+
+// Track API calls with custom attributes
+export function trackAPICall(method, endpoint, status, duration, attributes = {}) {
+  if (!tracer) return;
+
+  const span = tracer.startSpan('api_call', {
+    attributes: {
+      'http.method': method,
+      'http.url': endpoint,
+      'http.status_code': status,
+      'http.duration_ms': duration,
+      'portal.type': 'performers',
+      ...attributes
+    }
+  });
+
+  span.setStatus({ code: status >= 400 ? 2 : 0 });
+  span.end();
+
+  debugLog(`Tracked API call: ${method} ${endpoint}`, { status, duration });
+}
+
+// Track user actions
+export function trackUserAction(action, metadata = {}) {
+  if (!tracer) return;
+
+  const span = tracer.startSpan(`user.${action}`, {
+    attributes: {
+      'user.action': action,
+      'user.metadata': JSON.stringify(metadata),
+      'portal.type': 'performers',
+      'page.url': window.location.href,
+      'timestamp': new Date().toISOString()
+    }
+  });
+
+  span.end();
+  debugLog(`Tracked user action: ${action}`, metadata);
+}
+
+// Shutdown telemetry gracefully
+export async function shutdownTelemetry() {
+  if (tracerProvider) {
+    try {
+      await tracerProvider.shutdown();
+      console.log('[Telemetry] Shutdown complete');
+    } catch (error) {
+      console.error('[Telemetry] Shutdown error:', error);
+    }
+  }
+}
+
+// Connect client spans with SSR spans using trace context
+function connectWithSSRTrace() {
+  // Check if we have trace context from SSR
+  const ssrTraceContext = window.__TRACE_CONTEXT__;
+  if (ssrTraceContext && tracer) {
+    // Create a span linked to the SSR span
+    const span = tracer.startSpan('client.performer.init', {
+      attributes: {
+        'span.kind': 'client',
+        'client.type': 'browser',
+        'portal.type': 'performers',
+        'ssr.trace_id': ssrTraceContext.traceId,
+        'ssr.span_id': ssrTraceContext.spanId
+      },
+      links: [{
+        context: {
+          traceId: ssrTraceContext.traceId,
+          spanId: ssrTraceContext.spanId,
+          traceFlags: ssrTraceContext.traceFlags || 0
+        }
+      }]
+    });
+
+    span.end();
+    debugLog('Connected to SSR trace', ssrTraceContext);
+  }
+}
+
+// Auto-initialize on module load if in browser environment
+if (typeof window !== 'undefined') {
+  // Initialize telemetry when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      initTelemetry();
+      connectWithSSRTrace();
+    });
+  } else {
+    initTelemetry();
+    connectWithSSRTrace();
+  }
+
+  // Cleanup on page unload
+  window.addEventListener('beforeunload', () => {
+    shutdownTelemetry();
+  });
 }