@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/telemetry.js

@@ -1,402 +1,402 @@
-// @ts-nocheck
-import { ZoneContextManager } from '@opentelemetry/context-zone';
-import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
-import { registerInstrumentations } from '@opentelemetry/instrumentation';
-import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
-import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
-import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
-import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
-import { B3Propagator } from '@opentelemetry/propagator-b3';
-import { resourceFromAttributes } from '@opentelemetry/resources';
-import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
-import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
-import {
-  ATTR_SERVICE_NAME,
-  ATTR_SERVICE_VERSION,
-} from '@opentelemetry/semantic-conventions';
-
-/**
- * Telemetry configuration from environment variables.
- * Each app can override these via VITE_* environment variables.
- */
-const TELEMETRY_CONFIG = {
-  serviceName: import.meta.env.VITE_OTEL_SERVICE_NAME || 'micdrop-app',
-  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',
-  // Portal type for distinguishing apps in traces (e.g., 'frontend', 'performers')
-  portalType: import.meta.env.VITE_PORTAL_TYPE || 'unknown',
-};
-
-// Default CORS URLs for trace propagation - apps can extend this
-const DEFAULT_CORS_URLS = [
-  /^http:\/\/localhost:8080\/.*/,
-  /^https:\/\/api\.jetbook\.com\/.*/,
-  /^https:\/\/api\.micdrop\.com\/.*/,
-  /^https:\/\/.*\.get-micdrop\.com\/.*/,
-];
-
-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 with optional custom configuration
- * @param {Object} customConfig - Override default config
- */
-export function initTelemetry(customConfig = {}) {
-  const config = { ...TELEMETRY_CONFIG, ...customConfig };
-  
-  if (!config.tracesEnabled) {
-    debugLog('Tracing is disabled');
-    return;
-  }
-
-  try {
-    // Create resource with service information
-    const resource = resourceFromAttributes({
-      [ATTR_SERVICE_NAME]: config.serviceName,
-      [ATTR_SERVICE_VERSION]: config.serviceVersion,
-      'deployment.environment': config.environment,
-      'browser.user_agent': navigator.userAgent,
-      'browser.language': navigator.language,
-      'browser.platform': navigator.platform,
-      'portal.type': config.portalType,
-    });
-
-    // Configure OTLP exporter
-    const exporter = new OTLPTraceExporter({
-      url: config.otlpEndpoint,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    // Create tracer provider with span processors
-    tracerProvider = new WebTracerProvider({
-      resource,
-      sampler: {
-        shouldSample: () => {
-          return {
-            decision: Math.random() < config.sampleRate ? 1 : 0,
-            attributes: [],
-          };
-        },
-      },
-      spanProcessors: [
-        new BatchSpanProcessor(exporter, {
-          maxQueueSize: 100,
-          maxExportBatchSize: 50,
-          scheduledDelayMillis: 500,
-          exportTimeoutMillis: 30000,
-        }),
-      ],
-    });
-
-    // Set global provider
-    tracerProvider.register({
-      contextManager: new ZoneContextManager(),
-      propagator: new B3Propagator(),
-    });
-
-    // Get CORS URLs (allow custom via config)
-    const corsUrls = config.corsUrls || DEFAULT_CORS_URLS;
-
-    // Register instrumentations
-    registerInstrumentations({
-      instrumentations: [
-        // Document load instrumentation
-        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', config.portalType);
-            },
-            documentFetch: span => {
-              span.setAttribute('document.referrer', document.referrer);
-            },
-          },
-        }),
-
-        // Fetch instrumentation for API calls
-        new FetchInstrumentation({
-          propagateTraceHeaderCorsUrls: corsUrls,
-          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', config.portalType);
-
-            if (response) {
-              span.setAttribute('http.response.status', response.status);
-              span.setAttribute(
-                'http.response.content_length',
-                response.headers?.get('content-length') || 0
-              );
-            }
-          },
-        }),
-
-        // XHR instrumentation for legacy AJAX calls
-        new XMLHttpRequestInstrumentation({
-          propagateTraceHeaderCorsUrls: corsUrls,
-          clearTimingResources: true,
-        }),
-
-        // User interaction instrumentation
-        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;
-          },
-        }),
-      ],
-    });
-
-    // Get tracer instance
-    tracer = tracerProvider.getTracer(config.serviceName, config.serviceVersion);
-
-    debugLog('Telemetry initialized', config);
-    debugLog(`Initialized ${config.serviceName} with ${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': TELEMETRY_CONFIG.portalType,
-      ...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': TELEMETRY_CONFIG.portalType,
-    },
-  });
-
-  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': TELEMETRY_CONFIG.portalType,
-      ...attributes,
-    },
-  });
-
-  span.end();
-  debugLog(`Tracked event: ${eventName}`, attributes);
-}
-
-// 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': TELEMETRY_CONFIG.portalType,
-    },
-  });
-
-  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': TELEMETRY_CONFIG.portalType,
-      ...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),
-      'page.url': window.location.href,
-      'portal.type': TELEMETRY_CONFIG.portalType,
-      timestamp: new Date().toISOString(),
-    },
-  });
-
-  span.end();
-  debugLog(`Tracked user action: ${action}`, metadata);
-}
-
-// Track performer-specific actions (for performers portal)
-export function trackPerformerAction(action, metadata = {}) {
-  if (!tracer) return;
-
-  const span = tracer.startSpan(`performer.${action}`, {
-    attributes: {
-      'performer.action': action,
-      'performer.metadata': JSON.stringify(metadata),
-      'page.url': window.location.href,
-      'portal.type': TELEMETRY_CONFIG.portalType,
-      timestamp: new Date().toISOString(),
-    },
-  });
-
-  span.end();
-  debugLog(`Tracked performer action: ${action}`, metadata);
-}
-
-// Shutdown telemetry gracefully
-export async function shutdownTelemetry() {
-  if (tracerProvider) {
-    try {
-      await tracerProvider.shutdown();
-      debugLog('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.init', {
-      attributes: {
-        'span.kind': 'client',
-        'client.type': 'browser',
-        'portal.type': TELEMETRY_CONFIG.portalType,
-        '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 telemetry (call this in your app's entry point)
- * This sets up auto-initialization and cleanup handlers
- */
-export function setupAutoTelemetry() {
-  if (typeof window === 'undefined') return;
-
-  // 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();
-  });
-}
-
-// Export config for testing/debugging
-export function getTelemetryConfig() {
-  return { ...TELEMETRY_CONFIG };
-}
-
-// Auto-initialize telemetry on module load
-setupAutoTelemetry();
+// @ts-nocheck
+import { ZoneContextManager } from '@opentelemetry/context-zone';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
+import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
+import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { resourceFromAttributes } from '@opentelemetry/resources';
+import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
+import {
+  ATTR_SERVICE_NAME,
+  ATTR_SERVICE_VERSION,
+} from '@opentelemetry/semantic-conventions';
+
+/**
+ * Telemetry configuration from environment variables.
+ * Each app can override these via VITE_* environment variables.
+ */
+const TELEMETRY_CONFIG = {
+  serviceName: import.meta.env.VITE_OTEL_SERVICE_NAME || 'micdrop-app',
+  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',
+  // Portal type for distinguishing apps in traces (e.g., 'frontend', 'performers')
+  portalType: import.meta.env.VITE_PORTAL_TYPE || 'unknown',
+};
+
+// Default CORS URLs for trace propagation - apps can extend this
+const DEFAULT_CORS_URLS = [
+  /^http:\/\/localhost:8080\/.*/,
+  /^https:\/\/api\.jetbook\.com\/.*/,
+  /^https:\/\/api\.micdrop\.com\/.*/,
+  /^https:\/\/.*\.get-micdrop\.com\/.*/,
+];
+
+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 with optional custom configuration
+ * @param {Object} customConfig - Override default config
+ */
+export function initTelemetry(customConfig = {}) {
+  const config = { ...TELEMETRY_CONFIG, ...customConfig };
+  
+  if (!config.tracesEnabled) {
+    debugLog('Tracing is disabled');
+    return;
+  }
+
+  try {
+    // Create resource with service information
+    const resource = resourceFromAttributes({
+      [ATTR_SERVICE_NAME]: config.serviceName,
+      [ATTR_SERVICE_VERSION]: config.serviceVersion,
+      'deployment.environment': config.environment,
+      'browser.user_agent': navigator.userAgent,
+      'browser.language': navigator.language,
+      'browser.platform': navigator.platform,
+      'portal.type': config.portalType,
+    });
+
+    // Configure OTLP exporter
+    const exporter = new OTLPTraceExporter({
+      url: config.otlpEndpoint,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    // Create tracer provider with span processors
+    tracerProvider = new WebTracerProvider({
+      resource,
+      sampler: {
+        shouldSample: () => {
+          return {
+            decision: Math.random() < config.sampleRate ? 1 : 0,
+            attributes: [],
+          };
+        },
+      },
+      spanProcessors: [
+        new BatchSpanProcessor(exporter, {
+          maxQueueSize: 100,
+          maxExportBatchSize: 50,
+          scheduledDelayMillis: 500,
+          exportTimeoutMillis: 30000,
+        }),
+      ],
+    });
+
+    // Set global provider
+    tracerProvider.register({
+      contextManager: new ZoneContextManager(),
+      propagator: new B3Propagator(),
+    });
+
+    // Get CORS URLs (allow custom via config)
+    const corsUrls = config.corsUrls || DEFAULT_CORS_URLS;
+
+    // Register instrumentations
+    registerInstrumentations({
+      instrumentations: [
+        // Document load instrumentation
+        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', config.portalType);
+            },
+            documentFetch: span => {
+              span.setAttribute('document.referrer', document.referrer);
+            },
+          },
+        }),
+
+        // Fetch instrumentation for API calls
+        new FetchInstrumentation({
+          propagateTraceHeaderCorsUrls: corsUrls,
+          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', config.portalType);
+
+            if (response) {
+              span.setAttribute('http.response.status', response.status);
+              span.setAttribute(
+                'http.response.content_length',
+                response.headers?.get('content-length') || 0
+              );
+            }
+          },
+        }),
+
+        // XHR instrumentation for legacy AJAX calls
+        new XMLHttpRequestInstrumentation({
+          propagateTraceHeaderCorsUrls: corsUrls,
+          clearTimingResources: true,
+        }),
+
+        // User interaction instrumentation
+        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;
+          },
+        }),
+      ],
+    });
+
+    // Get tracer instance
+    tracer = tracerProvider.getTracer(config.serviceName, config.serviceVersion);
+
+    debugLog('Telemetry initialized', config);
+    debugLog(`Initialized ${config.serviceName} with ${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': TELEMETRY_CONFIG.portalType,
+      ...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': TELEMETRY_CONFIG.portalType,
+    },
+  });
+
+  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': TELEMETRY_CONFIG.portalType,
+      ...attributes,
+    },
+  });
+
+  span.end();
+  debugLog(`Tracked event: ${eventName}`, attributes);
+}
+
+// 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': TELEMETRY_CONFIG.portalType,
+    },
+  });
+
+  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': TELEMETRY_CONFIG.portalType,
+      ...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),
+      'page.url': window.location.href,
+      'portal.type': TELEMETRY_CONFIG.portalType,
+      timestamp: new Date().toISOString(),
+    },
+  });
+
+  span.end();
+  debugLog(`Tracked user action: ${action}`, metadata);
+}
+
+// Track performer-specific actions (for performers portal)
+export function trackPerformerAction(action, metadata = {}) {
+  if (!tracer) return;
+
+  const span = tracer.startSpan(`performer.${action}`, {
+    attributes: {
+      'performer.action': action,
+      'performer.metadata': JSON.stringify(metadata),
+      'page.url': window.location.href,
+      'portal.type': TELEMETRY_CONFIG.portalType,
+      timestamp: new Date().toISOString(),
+    },
+  });
+
+  span.end();
+  debugLog(`Tracked performer action: ${action}`, metadata);
+}
+
+// Shutdown telemetry gracefully
+export async function shutdownTelemetry() {
+  if (tracerProvider) {
+    try {
+      await tracerProvider.shutdown();
+      debugLog('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.init', {
+      attributes: {
+        'span.kind': 'client',
+        'client.type': 'browser',
+        'portal.type': TELEMETRY_CONFIG.portalType,
+        '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 telemetry (call this in your app's entry point)
+ * This sets up auto-initialization and cleanup handlers
+ */
+export function setupAutoTelemetry() {
+  if (typeof window === 'undefined') return;
+
+  // 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();
+  });
+}
+
+// Export config for testing/debugging
+export function getTelemetryConfig() {
+  return { ...TELEMETRY_CONFIG };
+}
+
+// Auto-initialize telemetry on module load
+setupAutoTelemetry();