keystone-design-bootstrap 1.0.96 → 1.0.98

package/src/tracking/logging.ts

@@ -1,11 +1,12 @@
 'use client';
 
-import { captureCustomEvent } from './captureEvent';
+import { logs } from '@opentelemetry/api-logs';
+import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-http';
+import { resourceFromAttributes } from '@opentelemetry/resources';
+import { BatchLogRecordProcessor, LoggerProvider } from '@opentelemetry/sdk-logs';
 
 const BUILD_CONSOLE_DISABLED = process.env.NEXT_PUBLIC_LOGGING_DISABLED === '1';
 const BUILD_POSTHOG_DISABLED = process.env.NEXT_PUBLIC_POSTHOG_LOGGING_DISABLED === '1';
-const POSTHOG_LOG_EVENT = 'keystone_client_log';
-
 interface LoggingWindow extends Window {
   __loggingDisabled?: boolean;
   __posthogLoggingDisabled?: boolean;
@@ -14,10 +15,23 @@ interface LoggingWindow extends Window {
 export type LogLevel = 'info' | 'warn' | 'error';
 
 export type LogOptions = {
-  /** Send this log payload to PostHog (`keystone_client_log`). */
+  /** Send this log payload to PostHog Logs product. */
   shipToPostHog?: boolean;
 };
 
+type OTelInitOptions = {
+  apiKey: string;
+  apiHost?: string;
+  serviceName?: string;
+  environment?: string;
+  accountId?: number;
+  accountName?: string;
+};
+let otelProvider: LoggerProvider | null = null;
+let otelLogger: ReturnType<typeof logs.getLogger> | null = null;
+let otelInitFingerprint = '';
+const browserConsole = globalThis?.['console'];
+
 /**
  * Channel → accent colour. Unregistered channels fall through to gray.
  */
@@ -43,6 +57,81 @@ export const CHANNEL_COLORS: Record<string, string> = {
   'mobile-value-props-pin': '#4fafa0',
 };
 
+function flattenAttributes(input: Record<string, unknown>, prefix = ''): Record<string, string | number | boolean> {
+  const output: Record<string, string | number | boolean> = {};
+
+  for (const [key, value] of Object.entries(input)) {
+    const nextKey = prefix ? `${prefix}.${key}` : key;
+    if (value === null || value === undefined) continue;
+
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      output[nextKey] = value;
+      continue;
+    }
+
+    if (Array.isArray(value)) {
+      output[nextKey] = JSON.stringify(value);
+      continue;
+    }
+
+    if (typeof value === 'object') {
+      Object.assign(output, flattenAttributes(value as Record<string, unknown>, nextKey));
+      continue;
+    }
+
+    output[nextKey] = String(value);
+  }
+
+  return output;
+}
+
+function stripTrailingSlash(host: string): string {
+  return host.replace(/\/+$/, '');
+}
+
+export function initializePostHogLogging(options: OTelInitOptions): void {
+  if (typeof window === 'undefined') return;
+  if (!options.apiKey?.trim()) return;
+
+  const apiHost = stripTrailingSlash(options.apiHost?.trim() || 'https://us.i.posthog.com');
+  const serviceName = options.serviceName?.trim() || 'keystone-customer-site';
+  const environment = options.environment?.trim() || 'production';
+  const fingerprint = `${apiHost}|${options.apiKey}|${serviceName}|${environment}|${options.accountId ?? ''}|${options.accountName ?? ''}`;
+  if (otelLogger && otelInitFingerprint === fingerprint) return;
+
+  if (otelProvider) {
+    // Cleanly replace logger provider when config changes.
+    void otelProvider.shutdown().catch(() => {});
+    otelProvider = null;
+    otelLogger = null;
+  }
+
+  const baseAttributes: Record<string, string | number | boolean> = {
+    'service.name': serviceName,
+    environment,
+    site_domain: window.location.hostname,
+  };
+  if (options.accountId !== undefined) baseAttributes.account_id = options.accountId;
+  if (options.accountName) baseAttributes.account_name = options.accountName;
+
+  const exporter = new OTLPLogExporter({
+    url: `${apiHost}/i/v1/logs?token=${encodeURIComponent(options.apiKey)}`,
+    headers: {
+      // Keep request "simple" to avoid CORS preflight in browser.
+      'Content-Type': 'text/plain',
+    },
+  });
+
+  otelProvider = new LoggerProvider({
+    resource: resourceFromAttributes(baseAttributes),
+    processors: [new BatchLogRecordProcessor(exporter)],
+  });
+
+  logs.setGlobalLoggerProvider(otelProvider);
+  otelLogger = logs.getLogger(serviceName);
+  otelInitFingerprint = fingerprint;
+}
+
 function isConsoleEnabled(): boolean {
   if (BUILD_CONSOLE_DISABLED) return false;
   if (typeof window === 'undefined') return true;
@@ -61,7 +150,12 @@ function formatDetail(detail: Record<string, unknown>): string {
     .join('  ');
 }
 
-function emitConsole(level: LogLevel, channel: string, event: string, detail: Record<string, unknown>): void {
+function emitConsole(
+  level: LogLevel,
+  channel: string,
+  event: string,
+  detail: Record<string, unknown>,
+): void {
   const color = CHANNEL_COLORS[channel] ?? '#aaa';
   const detailStr = formatDetail(detail);
   const message = `%c[${channel}] %c${event}%c ${detailStr}`;
@@ -74,40 +168,38 @@ function emitConsole(level: LogLevel, channel: string, event: string, detail: Re
   const detailStyle = 'color:#999; font-weight:normal';
 
   if (level === 'error') {
-    console.error(message, channelStyle, eventStyle, detailStyle);
+    browserConsole?.error?.(message, channelStyle, eventStyle, detailStyle);
     return;
   }
   if (level === 'warn') {
-    console.warn(message, channelStyle, eventStyle, detailStyle);
+    browserConsole?.warn?.(message, channelStyle, eventStyle, detailStyle);
     return;
   }
-  console.log(message, channelStyle, eventStyle, detailStyle);
+  browserConsole?.log?.(message, channelStyle, eventStyle, detailStyle);
 }
 
-function maybeShipToPostHog(
-  level: LogLevel,
-  channel: string,
-  event: string,
-  detail: Record<string, unknown>,
-  options?: LogOptions,
-): void {
-  const shouldShip = options?.shipToPostHog ?? level !== 'info';
-  if (!shouldShip || !isPostHogShippingEnabled()) return;
-
-  captureCustomEvent(POSTHOG_LOG_EVENT, {
-    level,
-    channel,
-    event,
-    detail,
+function emitToPostHog(level: LogLevel, channel: string, event: string, detail: Record<string, unknown>): void {
+  if (!otelLogger) return;
+
+  const severityText = level === 'warn' ? 'WARNING' : level === 'error' ? 'ERROR' : 'INFO';
+  const attributes = flattenAttributes({ channel, ...detail });
+
+  otelLogger.emit({
+    severityText,
+    body: event,
+    attributes,
   });
 }
 
 function emit(level: LogLevel, channel: string, event: string, detail: Record<string, unknown>, options?: LogOptions): void {
+  const shouldShip = (options?.shipToPostHog ?? level !== 'info') && isPostHogShippingEnabled();
   // Keep warn/error visible even when regular logs are muted.
   if (level !== 'info' || isConsoleEnabled()) {
     emitConsole(level, channel, event, detail);
   }
-  maybeShipToPostHog(level, channel, event, detail, options);
+  if (shouldShip) {
+    emitToPostHog(level, channel, event, detail);
+  }
 }
 
 export function log(channel: string, event: string, detail: Record<string, unknown> = {}, options?: LogOptions): void {