keystone-design-bootstrap 1.0.95 → 1.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.95",
+  "version": "1.0.96",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/tracking/PostHogProvider.tsx

@@ -4,6 +4,7 @@ import posthog from 'posthog-js';
 import { PostHogProvider as PHProvider } from 'posthog-js/react';
 import { useEffect, Suspense } from 'react';
 import { usePathname, useSearchParams } from 'next/navigation';
+import { error as logError } from './logging';
 
 const DEFAULT_HOST = 'https://us.i.posthog.com';
 
@@ -125,6 +126,40 @@ export function PostHogProvider({ apiKey, apiHost, accountId, accountName, envir
     });
   }, [apiKey, apiHost, accountId, accountName, environment]);
 
+  useEffect(() => {
+    const onWindowError = (event: ErrorEvent) => {
+      logError(
+        'global-client',
+        'WINDOW_ERROR',
+        {
+          message: event.message || 'unknown_error',
+          filename: event.filename || 'unknown_file',
+          lineno: event.lineno || 0,
+          colno: event.colno || 0,
+          stack: event.error instanceof Error ? event.error.stack || '' : '',
+        },
+        { shipToPostHog: true },
+      );
+    };
+
+    const onUnhandledRejection = (event: PromiseRejectionEvent) => {
+      const reason = event.reason;
+      const payload =
+        reason instanceof Error
+          ? { message: reason.message, stack: reason.stack || '' }
+          : { message: String(reason), stack: '' };
+
+      logError('global-client', 'UNHANDLED_REJECTION', payload, { shipToPostHog: true });
+    };
+
+    window.addEventListener('error', onWindowError);
+    window.addEventListener('unhandledrejection', onUnhandledRejection);
+    return () => {
+      window.removeEventListener('error', onWindowError);
+      window.removeEventListener('unhandledrejection', onUnhandledRejection);
+    };
+  }, []);
+
   return (
     <PHProvider client={posthog}>
       <Suspense fallback={null}>

package/src/tracking/index.ts

@@ -30,3 +30,5 @@ export { GoogleTagManager } from './GoogleTagManager';
 export type { GoogleTagManagerProps } from './GoogleTagManager';
 export { captureEvent, captureCustomEvent } from './captureEvent';
 export type { KsEventName, KsEventProperties } from './captureEvent';
+export { log, warn, error, CHANNEL_COLORS } from './logging';
+export type { LogLevel, LogOptions } from './logging';

package/src/tracking/logging.ts

@@ -0,0 +1,123 @@
+'use client';
+
+import { captureCustomEvent } from './captureEvent';
+
+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;
+}
+
+export type LogLevel = 'info' | 'warn' | 'error';
+
+export type LogOptions = {
+  /** Send this log payload to PostHog (`keystone_client_log`). */
+  shipToPostHog?: boolean;
+};
+
+/**
+ * Channel → accent colour. Unregistered channels fall through to gray.
+ */
+export const CHANNEL_COLORS: Record<string, string> = {
+  // Shared diagnostics
+  'global-client': '#d2a8ff',
+
+  // Section pins (desktop)
+  'every-channel-pin': '#9febd7',
+  'hero-pin': '#6ecc8b',
+  'pricing-pin': '#399587',
+  'product-screens-pin': '#4fafa0',
+  'social-proof-pin': '#ffbb8a',
+  'value-props-pin': '#e0a733',
+  'work-pin': '#f57e56',
+
+  // Section pins (mobile)
+  'mobile-every-channel-pin': '#7ed9c6',
+  'mobile-hero-pin': '#f0eee6',
+  'mobile-pricing-pin': '#80d4ff',
+  'mobile-product-screens-pin': '#3a9085',
+  'mobile-social-proof-pin': '#ffd580',
+  'mobile-value-props-pin': '#4fafa0',
+};
+
+function isConsoleEnabled(): boolean {
+  if (BUILD_CONSOLE_DISABLED) return false;
+  if (typeof window === 'undefined') return true;
+  return (window as LoggingWindow).__loggingDisabled !== true;
+}
+
+function isPostHogShippingEnabled(): boolean {
+  if (BUILD_POSTHOG_DISABLED) return false;
+  if (typeof window === 'undefined') return false;
+  return (window as LoggingWindow).__posthogLoggingDisabled !== true;
+}
+
+function formatDetail(detail: Record<string, unknown>): string {
+  return Object.entries(detail)
+    .map(([k, v]) => `${k}=${typeof v === 'number' ? v.toFixed(4) : String(v)}`)
+    .join('  ');
+}
+
+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}`;
+  const channelStyle = `color:${color}; font-weight:bold`;
+  const eventStyle = level === 'error'
+    ? 'color:#e94e4e; font-weight:bold'
+    : level === 'warn'
+      ? 'color:#f5a623; font-weight:bold'
+      : 'color:#fff; font-weight:bold';
+  const detailStyle = 'color:#999; font-weight:normal';
+
+  if (level === 'error') {
+    console.error(message, channelStyle, eventStyle, detailStyle);
+    return;
+  }
+  if (level === 'warn') {
+    console.warn(message, channelStyle, eventStyle, detailStyle);
+    return;
+  }
+  console.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 emit(level: LogLevel, channel: string, event: string, detail: Record<string, unknown>, options?: LogOptions): void {
+  // 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);
+}
+
+export function log(channel: string, event: string, detail: Record<string, unknown> = {}, options?: LogOptions): void {
+  emit('info', channel, event, detail, options);
+}
+
+export function warn(channel: string, event: string, detail: Record<string, unknown> = {}, options?: LogOptions): void {
+  emit('warn', channel, event, detail, options);
+}
+
+export function error(channel: string, event: string, detail: Record<string, unknown> = {}, options?: LogOptions): void {
+  emit('error', channel, event, detail, options);
+}