@envive-ai/react-hooks 0.3.56 → 0.3.58

package/src/application/logging/logLevel.ts

@@ -0,0 +1,162 @@
+/**
+ * Console log-level gate shared by every package's Logger.
+ *
+ * Debug and info are muted by default: a single merchant page load produces
+ * ~950 debug lines (the bulk of them from featureFlagService checking gates on
+ * every render), which is unusable noise on a customer's site.
+ *
+ * To turn logging back on, in priority order:
+ *
+ *   1. Query param — `?envive_log_level=debug`
+ *      The support lever. Wins over everything else so logging can always be
+ *      re-enabled on a live merchant page, even if the embedding page pinned a
+ *      level at bootstrap. The chosen level is persisted to localStorage so it
+ *      survives navigation (a support session spans more than one page view);
+ *      clear it with `?envive_log_level=warn` or by removing the stored key.
+ *
+ *   2. `setLogLevel('debug')` — programmatic, e.g. bootstrap code or tests.
+ *
+ *   3. `window._envive.logLevel = 'debug'` (or `window._spiffy.logLevel`)
+ *      Read on every call, so it can be flipped from the browser console
+ *      mid-session without a reload.
+ *
+ *   4. `localStorage['envive-log-level']` — sticky per browser.
+ *
+ *   5. Default: 'warn'.
+ *
+ * Levels, least to most verbose: silent < error < warn < info < debug.
+ * A message emits when its own level is at or below the resolved level, so
+ * 'silent' mutes everything including errors.
+ *
+ * Kept free of React imports (like featureFlagService): the injection bundle
+ * logs from its pre-config code path, before it decides whether to load the
+ * React app, and pulling React in here would put it on the eager chunk.
+ */
+
+export const LOG_LEVELS = ['silent', 'error', 'warn', 'info', 'debug'] as const;
+
+export type LogLevel = (typeof LOG_LEVELS)[number];
+
+const LEVEL_SEVERITY: Record<LogLevel, number> = {
+  silent: 0,
+  error: 1,
+  warn: 2,
+  info: 3,
+  debug: 4,
+};
+
+/* Errors and warnings only. logDebug/logInfo make up the bulk of the call sites
+ * in this repo and used to print on every merchant page load. */
+export const DEFAULT_LOG_LEVEL: LogLevel = 'warn';
+
+export const LOG_LEVEL_QUERY_PARAM = 'envive_log_level';
+export const LOG_LEVEL_STORAGE_KEY = 'envive-log-level';
+
+const asLogLevel = (value: unknown): LogLevel | undefined => {
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  const normalized = value.toLowerCase();
+  return (LOG_LEVELS as readonly string[]).includes(normalized)
+    ? (normalized as LogLevel)
+    : undefined;
+};
+
+/* Set by setLogLevel(). Overrides window/stored/default, but deliberately not
+ * the query param, so support can always turn logging back on in a live session
+ * even if the embedding page pinned a level at bootstrap. */
+let programmaticLevel: LogLevel | undefined;
+
+/* The query param and localStorage cannot change without a navigation, so both
+ * are read once. `undefined` means "not resolved yet" and `null` caches a miss,
+ * keeping repeat lookups off the logging hot path. */
+let cachedQueryLevel: LogLevel | null | undefined;
+let cachedStoredLevel: LogLevel | null | undefined;
+
+/* Persists the level so it survives navigation — a support session spans more
+ * than one page view. */
+const storeLevel = (level: LogLevel): void => {
+  if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+    return;
+  }
+  try {
+    window.localStorage.setItem(LOG_LEVEL_STORAGE_KEY, level);
+  } catch {
+    // Storage can be full or blocked; the level still applies to this page.
+  }
+};
+
+const readQueryLevel = (): LogLevel | undefined => {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  const url = window.location?.href ?? '';
+  if (!url.includes('?')) {
+    return undefined;
+  }
+  try {
+    const params = new URLSearchParams(new URL(url).search);
+    return asLogLevel(params.get(LOG_LEVEL_QUERY_PARAM));
+  } catch {
+    return undefined;
+  }
+};
+
+const queryLevel = (): LogLevel | undefined => {
+  if (cachedQueryLevel === undefined) {
+    const level = readQueryLevel();
+    if (level) {
+      storeLevel(level);
+    }
+    cachedQueryLevel = level ?? null;
+  }
+  return cachedQueryLevel ?? undefined;
+};
+
+const storedLevel = (): LogLevel | undefined => {
+  if (cachedStoredLevel === undefined) {
+    let level: LogLevel | undefined;
+    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {
+      try {
+        level = asLogLevel(window.localStorage.getItem(LOG_LEVEL_STORAGE_KEY));
+      } catch {
+        level = undefined;
+      }
+    }
+    cachedStoredLevel = level ?? null;
+  }
+  return cachedStoredLevel ?? undefined;
+};
+
+/* Read on every call, so it can be flipped from the browser console mid-session
+ * without a reload. */
+const windowLevel = (): LogLevel | undefined => {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  const windowOverride = window as Window & {
+    _envive?: { logLevel?: string };
+    _spiffy?: { logLevel?: string };
+  };
+  return asLogLevel(windowOverride._envive?.logLevel ?? windowOverride._spiffy?.logLevel);
+};
+
+/* Resolution order mirrors featureFlagService's override chain: query param >
+ * setLogLevel() > window._envive.logLevel > localStorage > default. */
+export const getLogLevel = (): LogLevel =>
+  queryLevel() ?? programmaticLevel ?? windowLevel() ?? storedLevel() ?? DEFAULT_LOG_LEVEL;
+
+/* Pass undefined to clear the override and fall back to the levers above. */
+export const setLogLevel = (level: LogLevel | undefined): void => {
+  programmaticLevel = level;
+};
+
+export const isLevelEnabled = (level: Exclude<LogLevel, 'silent'>): boolean =>
+  LEVEL_SEVERITY[getLogLevel()] >= LEVEL_SEVERITY[level];
+
+/* Test seam: drops the memoized query-param and localStorage resolution. */
+export const resetLogLevelForTesting = (): void => {
+  programmaticLevel = undefined;
+  cachedQueryLevel = undefined;
+  cachedStoredLevel = undefined;
+};

package/src/application/logging/logger.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+import { isLevelEnabled } from 'src/application/logging/logLevel';
 
 class Logger {
   private readonly caller: string;
@@ -15,6 +16,9 @@ class Logger {
   }
 
   logInfo(message: string, ...args: unknown[]): void {
+    if (!isLevelEnabled('info')) {
+      return;
+    }
     console.info(
       `INFO: [envive-ai] ${Logger.getTimestamp()} - ${this.caller} - ${message}`,
       ...args,
@@ -22,6 +26,9 @@ class Logger {
   }
 
   logDebug(message: string, ...args: unknown[]): void {
+    if (!isLevelEnabled('debug')) {
+      return;
+    }
     console.debug(
       `DEBUG: [envive-ai] ${Logger.getTimestamp()} - ${this.caller} - ${message}`,
       ...args,
@@ -29,6 +36,9 @@ class Logger {
   }
 
   logError(message: string, error: unknown | undefined, ...args: unknown[]): void {
+    if (!isLevelEnabled('error')) {
+      return;
+    }
     console.error(
       `ERROR: [envive-ai] ${Logger.getTimestamp()} - ${this.caller} - ${message} error=${error}`,
       args,
@@ -36,6 +46,9 @@ class Logger {
   }
 
   logWarn(message: string, error: unknown | undefined, ...args: unknown[]): void {
+    if (!isLevelEnabled('warn')) {
+      return;
+    }
     console.warn(
       `WARN: [envive-ai] ${Logger.getTimestamp()} - ${this.caller} - ${message} error=${error}`,
       args,

package/src/contexts/salesAgentContext/salesAgentService.ts

@@ -313,7 +313,7 @@ export const useSalesAgentService: () => SalesAgentService = () => {
         //   },
         // });
       } catch (e) {
-        console.error('error getting streaming responses', e);
+        logger.logError('error getting streaming responses', e);
         successfulResponse = false;
         // Log failed next_responses call
         // const responseTime = Date.now() - startTime;

package/src/contexts/userIdentityContext/__tests__/userIdentityContext.test.tsx

@@ -177,13 +177,12 @@ describe('UserIdentityProvider', () => {
     it('should allow components to access context via useUserIdentity hook', async () => {
       renderWithProviders(<MockComponent />);
 
+      // Verify all context methods are accessible. The user id is populated by an async
+      // effect, so the content assertions must wait for it rather than assert right away.
       await waitFor(() => {
-        expect(screen.getByTestId('user-id')).toBeInTheDocument();
+        expect(screen.getByTestId('user-id').textContent).toContain('spiffy-user-id-');
+        expect(screen.getByTestId('is-ready').textContent).toBe('true');
       });
-
-      // Verify all context methods are accessible
-      expect(screen.getByTestId('user-id').textContent).toContain('spiffy-user-id-');
-      expect(screen.getByTestId('is-ready').textContent).toBe('true');
     });
 
     it('should throw error when used outside of UserIdentityProvider', () => {

package/src/hooks/ChatToggle/__tests__/useChatToggle.test.ts

@@ -0,0 +1,273 @@
+import { renderHook } from '@testing-library/react';
+import { ChatElementDisplayLocationV3 } from 'src/application/models';
+import { EnviveMetricsEventName } from 'src/contexts/amplitudeContext';
+import {
+  WidgetInteraction,
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '../../WidgetInteraction/types';
+import { useChatToggle } from '../useChatToggle';
+
+const mockTrackEvent = vi.fn();
+const mockTrackWidgetInteraction = vi.fn<(props: WidgetInteraction) => void>();
+const mockOnToggle = vi.fn();
+
+let isOpen = false;
+
+vi.mock('src/contexts/amplitudeContext/amplitudeContext', async () => {
+  const actual = await vi.importActual('src/contexts/amplitudeContext/amplitudeContext');
+  return {
+    ...actual,
+    useAmplitude: () => ({ trackEvent: mockTrackEvent }),
+  };
+});
+
+vi.mock('../../WidgetInteraction', () => ({
+  useWidgetInteraction: () => ({ trackWidgetInteraction: mockTrackWidgetInteraction }),
+}));
+
+vi.mock('jotai', async () => {
+  const actual = await vi.importActual('jotai');
+  return {
+    ...actual,
+    useAtomValue: () => ({ isOpen }),
+    useSetAtom: () => mockOnToggle,
+  };
+});
+
+const emitted = (): WidgetInteraction[] =>
+  (mockTrackWidgetInteraction.mock.calls as unknown as WidgetInteraction[][]).map(
+    ([interaction]) => interaction,
+  );
+
+/** Every WidgetInteraction emission made during the call, as [widget, interactionType] pairs. */
+const emissions = () =>
+  emitted().map(({ trigger }) => [trigger.widget, trigger.widget_interaction]);
+
+const emissionsOfType = (type: WidgetInteractionType) =>
+  emitted().filter(({ trigger }) => trigger.widget_interaction === type);
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  isOpen = false;
+});
+
+describe('useChatToggle — open', () => {
+  it('attributes the click to the widget that was actually clicked', () => {
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.toggle(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
+
+    expect(emissions()).toEqual([
+      [WidgetInteractionComponent.SOCIAL_PROOF, WidgetInteractionType.WIDGET_CLICKED],
+    ]);
+  });
+
+  it.each([
+    [
+      ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON,
+      WidgetInteractionComponent.CHAT_PREVIEW,
+    ],
+    [ChatElementDisplayLocationV3.TYPING_ANIMATION, WidgetInteractionComponent.EMBEDDED_WIDGET],
+    [ChatElementDisplayLocationV3.PROMPT_CAROUSEL, WidgetInteractionComponent.SUGGESTION_BAR],
+    [
+      ChatElementDisplayLocationV3.PRODUCT_CARD_TEXT_FIELD,
+      WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+    ],
+    [ChatElementDisplayLocationV3.FLOATING_BUTTON, WidgetInteractionComponent.FLOATING_BUTTON],
+  ])('attributes %s to %s', (location, expectedWidget) => {
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.toggle(location);
+
+    expect(emissions()).toEqual([[expectedWidget, WidgetInteractionType.WIDGET_CLICKED]]);
+  });
+
+  it.each([
+    ChatElementDisplayLocationV3.AUTOMATIC_PROMPT,
+    ChatElementDisplayLocationV3.REFERRER_BASED_PROMPT,
+    ChatElementDisplayLocationV3.WINDOW_API_CALL,
+  ])('emits no widget interaction for the system-initiated trigger %s', location => {
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.toggle(location);
+
+    expect(mockTrackWidgetInteraction).not.toHaveBeenCalled();
+  });
+
+  it('still emits the v2 expanded event for system-initiated opens', () => {
+    // B2 suppresses only the v3 intentional click. The v2 event is unchanged, so merchants
+    // still on v2 dashboards see no difference at all.
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.toggle(ChatElementDisplayLocationV3.AUTOMATIC_PROMPT);
+
+    expect(mockTrackEvent).toHaveBeenCalledTimes(1);
+    expect(mockTrackEvent.mock.calls[0][0].eventProps.message_metadata.trigger_location).toBe(
+      ChatElementDisplayLocationV3.AUTOMATIC_PROMPT,
+    );
+    expect(mockOnToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('never emits a collapse when opening', () => {
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.toggle(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
+
+    expect(emissionsOfType(WidgetInteractionType.WIDGET_COLLAPSED)).toHaveLength(0);
+  });
+});
+
+describe('useChatToggle — close', () => {
+  beforeEach(() => {
+    isOpen = true;
+  });
+
+  it('emits exactly one collapse, attributed to the floating chat', () => {
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.closeChat(
+      ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY,
+      undefined,
+      'body_click',
+    );
+
+    expect(emissions()).toEqual([
+      [WidgetInteractionComponent.FLOATING_CHAT, WidgetInteractionType.WIDGET_COLLAPSED],
+    ]);
+  });
+
+  it.each(['body_click', 'swipe', 'close_button'] as const)(
+    'carries collapse_source %s',
+    source => {
+      const { result } = renderHook(() => useChatToggle());
+
+      result.current.closeChat(
+        ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON,
+        undefined,
+        source,
+      );
+
+      const [collapse] = emissionsOfType(WidgetInteractionType.WIDGET_COLLAPSED);
+      expect(collapse.trigger.widget_interaction_data).toEqual({
+        widget_collapsed: { collapse_source: source },
+      });
+    },
+  );
+
+  it('omits widget_interaction_data when no collapse source is given', () => {
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.closeChat(ChatElementDisplayLocationV3.WINDOW_API_CALL);
+
+    const [collapse] = emissionsOfType(WidgetInteractionType.WIDGET_COLLAPSED);
+    expect(collapse.trigger.widget_interaction_data).toBeUndefined();
+  });
+
+  it('never emits a click when closing', () => {
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+
+    expect(emissionsOfType(WidgetInteractionType.WIDGET_CLICKED)).toHaveLength(0);
+  });
+});
+
+describe('useChatToggle — guards', () => {
+  it('openChat does nothing when the chat is already open', () => {
+    isOpen = true;
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
+
+    expect(mockTrackWidgetInteraction).not.toHaveBeenCalled();
+    expect(mockOnToggle).not.toHaveBeenCalled();
+  });
+
+  it('closeChat does nothing when the chat is already closed', () => {
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+
+    expect(mockTrackWidgetInteraction).not.toHaveBeenCalled();
+    expect(mockOnToggle).not.toHaveBeenCalled();
+  });
+
+  it('hover stays attributed to the floating button', () => {
+    // onHover is only wired to the floating button itself, so it is intentionally unchanged.
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.onHover();
+
+    expect(emissions()).toEqual([
+      [WidgetInteractionComponent.FLOATING_BUTTON, WidgetInteractionType.WIDGET_HOVERED],
+    ]);
+  });
+});
+
+describe('useChatToggle — adaptive storefront safety', () => {
+  it('emits no ASF widget under any trigger location', () => {
+    // The ASF dashboard filters on v3_widget in {full_page_sales_agent,
+    // full_page_sales_agent_recommendations}. This hook must never produce either value, or the
+    // change could move ASF product-surface metrics.
+    const asfWidgets: WidgetInteractionComponent[] = [
+      WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+      WidgetInteractionComponent.FULL_PAGE_SALES_AGENT_RECOMMENDATIONS,
+      WidgetInteractionComponent.FULL_PAGE_SALES_AGENT_RECOMMENDATIONS_ATC_FALLBACK,
+    ];
+
+    for (const location of Object.values(ChatElementDisplayLocationV3)) {
+      vi.clearAllMocks();
+
+      isOpen = false;
+      const opened = renderHook(() => useChatToggle());
+      opened.result.current.toggle(location);
+
+      isOpen = true;
+      const closed = renderHook(() => useChatToggle());
+      closed.result.current.toggle(location);
+
+      for (const [widget] of emissions()) {
+        expect(asfWidgets).not.toContain(widget);
+      }
+    }
+  });
+
+  it('only ever emits click, collapse or hover — never an ASF-dashboard interaction type', () => {
+    // The ASF product funnels filter on product_card_clicked / add_to_cart_clicked, and the
+    // engagement funnels on interaction_class=intentional. This hook must not emit any
+    // product-related type.
+    const forbidden = [
+      WidgetInteractionType.PRODUCT_CARD_CLICKED,
+      WidgetInteractionType.ADD_TO_CART_CLICKED,
+      WidgetInteractionType.MESSAGE_SUBMITTED,
+      WidgetInteractionType.SUGGESTION_CLICKED,
+    ];
+
+    for (const location of Object.values(ChatElementDisplayLocationV3)) {
+      vi.clearAllMocks();
+
+      isOpen = false;
+      renderHook(() => useChatToggle()).result.current.toggle(location);
+
+      isOpen = true;
+      renderHook(() => useChatToggle()).result.current.toggle(location);
+
+      for (const [, type] of emissions()) {
+        expect(forbidden).not.toContain(type);
+      }
+    }
+  });
+});
+
+describe('useChatToggle — event names', () => {
+  it('emits the v3 widget interaction event name', () => {
+    const { result } = renderHook(() => useChatToggle());
+
+    result.current.toggle(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
+
+    expect(mockTrackWidgetInteraction.mock.calls[0][0].eventName).toBe(
+      EnviveMetricsEventName.WidgetInteraction,
+    );
+  });
+});

package/src/hooks/ChatToggle/useChatToggle.ts

@@ -7,7 +7,12 @@ import {
   useAmplitude,
 } from 'src/contexts/amplitudeContext/amplitudeContext';
 import { useWidgetInteraction } from '../WidgetInteraction';
-import { WidgetInteractionComponent, WidgetInteractionType } from '../WidgetInteraction/types';
+import {
+  CHAT_TRIGGER_WIDGET,
+  Collapse,
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '../WidgetInteraction/types';
 
 export const useChatToggle = () => {
   const onToggle = useSetAtom(chatOnToggleAtom);
@@ -15,15 +20,27 @@ export const useChatToggle = () => {
   const { trackEvent } = useAmplitude();
   const { trackWidgetInteraction } = useWidgetInteraction();
 
-  const toggle = (triggerLocation: ChatElementDisplayLocationV3, triggerId?: string) => {
+  const toggle = (
+    triggerLocation: ChatElementDisplayLocationV3,
+    triggerId?: string,
+    collapseSource?: Collapse['collapse_source'],
+  ) => {
+    // null for system-initiated triggers, undefined if a caller passed no location at all.
+    const triggerWidget = CHAT_TRIGGER_WIDGET[triggerLocation] ?? null;
+
     if (!isOpen) {
-      trackWidgetInteraction({
-        eventName: EnviveMetricsEventName.WidgetInteraction,
-        trigger: {
-          widget: WidgetInteractionComponent.FLOATING_BUTTON,
-          widget_interaction: WidgetInteractionType.WIDGET_CLICKED,
-        },
-      });
+      // Only a real user click on a real widget counts as an intentional interaction. System
+      // triggers (auto-popup, referrer prompt, window API) are still recorded by the floating
+      // chat's own WIDGET_EXPANDED event, so nothing is lost by skipping the click here.
+      if (triggerWidget) {
+        trackWidgetInteraction({
+          eventName: EnviveMetricsEventName.WidgetInteraction,
+          trigger: {
+            widget: triggerWidget,
+            widget_interaction: WidgetInteractionType.WIDGET_CLICKED,
+          },
+        });
+      }
 
       trackEvent({
         eventName: SpiffyMetricsEventName.ChatComponentExpanded,
@@ -35,11 +52,17 @@ export const useChatToggle = () => {
         },
       });
     } else {
+      // The thing being collapsed is always the floating chat, whatever triggered the close.
+      // This is the single emitter for WIDGET_COLLAPSED — callers pass collapseSource rather
+      // than firing their own duplicate event.
       trackWidgetInteraction({
         eventName: EnviveMetricsEventName.WidgetInteraction,
         trigger: {
-          widget: WidgetInteractionComponent.FLOATING_BUTTON,
+          widget: WidgetInteractionComponent.FLOATING_CHAT,
           widget_interaction: WidgetInteractionType.WIDGET_COLLAPSED,
+          ...(collapseSource
+            ? { widget_interaction_data: { widget_collapsed: { collapse_source: collapseSource } } }
+            : {}),
         },
       });
 
@@ -63,9 +86,13 @@ export const useChatToggle = () => {
     }
   };
 
-  const closeChat = (triggerLocation: ChatElementDisplayLocationV3, triggerId?: string) => {
+  const closeChat = (
+    triggerLocation: ChatElementDisplayLocationV3,
+    triggerId?: string,
+    collapseSource?: Collapse['collapse_source'],
+  ) => {
     if (isOpen) {
-      toggle(triggerLocation, triggerId);
+      toggle(triggerLocation, triggerId, collapseSource);
     }
   };
 

package/src/hooks/Intersection/useIntersection.ts

@@ -1,4 +1,7 @@
 import { RefObject, useEffect, useRef, useState } from 'react';
+import Logger from 'src/application/logging/logger';
+
+const logger = new Logger('useIntersection');
 
 // https://rasilbaidar.medium.com/trigger-event-when-element-enters-viewport-the-react-way-168509da2e23
 export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: string) => {
@@ -10,21 +13,21 @@ export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: str
   // Bails immediately once the observer is attached, keeping per-render cost O(1).
   useEffect(() => {
     const current = element?.current;
-    console.debug('[useIntersection] effect ran', {
+    logger.logDebug('effect ran', {
       elementCurrent: current,
       rootMargin,
       alreadyObserving: !!observerRef.current,
     });
 
     if (!current) {
-      console.debug('[useIntersection] element.current is null — observer NOT attached');
+      logger.logDebug('element.current is null — observer NOT attached');
       return;
     }
     if (observerRef.current) return; // already observing
 
     const observer = new IntersectionObserver(
       ([entry]) => {
-        console.debug('[useIntersection] IntersectionObserver fired', {
+        logger.logDebug('IntersectionObserver fired', {
           isIntersecting: entry.isIntersecting,
           intersectionRatio: entry.intersectionRatio,
           boundingClientRect: entry.boundingClientRect,
@@ -37,7 +40,7 @@ export const useIntersection = (element: RefObject<HTMLElement>, rootMargin: str
 
     observer.observe(current);
     observerRef.current = observer;
-    console.debug('[useIntersection] observer attached to element', current);
+    logger.logDebug('observer attached to element', current);
   });
 
   // Disconnect on unmount only — intentionally separate from the setup effect above.

package/src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent.ts

@@ -1,5 +1,6 @@
 import { useAtomValue } from 'jotai';
 import { RefObject, useEffect, useRef } from 'react';
+import Logger from 'src/application/logging/logger';
 import { pageVariantInfoAtom } from 'src/atoms/app';
 import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
 import { PageVariantInfo } from 'src/contexts/pageContext/types';
@@ -10,6 +11,8 @@ import {
   SpiffyMetricsEventName,
 } from 'src/services/amplitudeService/amplitudeService';
 
+const logger = new Logger('useTrackComponentVisibleEvent');
+
 /**
  * Tracks a component and logs `SpiffyMetricsEventName.ChatComponentVisible` when visible.
  *
@@ -44,7 +47,7 @@ export const useTrackComponentVisibleEvent = (
   const renderOffsetMs = useRef(safeNow()).current;
 
   useEffect(() => {
-    console.debug('[useTrackComponentVisibleEvent] effect ran', {
+    logger.logDebug('effect ran', {
       enabled,
       isVisible,
       hasTrackedEvent: hasTrackedEvent.current,
@@ -52,19 +55,19 @@ export const useTrackComponentVisibleEvent = (
     });
 
     if (!enabled) {
-      console.debug('[useTrackComponentVisibleEvent] skipped — enabled is false');
+      logger.logDebug('skipped — enabled is false');
       return;
     }
     if (hasTrackedEvent.current) {
-      console.debug('[useTrackComponentVisibleEvent] skipped — event already tracked');
+      logger.logDebug('skipped — event already tracked');
       return;
     }
     if (!isVisible) {
-      console.debug('[useTrackComponentVisibleEvent] skipped — element not visible');
+      logger.logDebug('skipped — element not visible');
       return;
     }
 
-    console.debug('[useTrackComponentVisibleEvent] firing tracking events', eventProps);
+    logger.logDebug('firing tracking events', eventProps);
     trackEvent({
       eventName: SpiffyMetricsEventName.ChatComponentVisible,
       eventProps,