@envive-ai/react-widgets-v3 0.3.63 → 0.3.64

package/src/hocs/withBaseWidget/__tests__/withBaseWidget.test.tsx

@@ -79,6 +79,15 @@ vi.mock('@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent', () => ({
   useTrackComponentVisibleEvent: (...args: unknown[]) => mockUseTrackComponentVisibleEvent(...args),
 }));
 
+vi.mock('@envive-ai/react-hooks/contexts/featureFlagServiceContext', () => ({
+  useFeatureFlagService: () => ({ featureFlagService: undefined }),
+}));
+
+// Diagnostics pulls its own amplitude context internally; stub it here like the other sub-hooks.
+vi.mock('@envive-ai/react-hooks/hooks/WidgetLoadDiagnostics', () => ({
+  useWidgetLoadDiagnostics: vi.fn(),
+}));
+
 // Test widget component
 interface TestWidgetProps extends BaseWidgetProps {
   testId?: string;
@@ -153,6 +162,7 @@ describe('withBaseWidget', () => {
         {
           widget_config_id: 'test-config-1',
           widget_type: WidgetTypeV3.PromptCarouselV3,
+          load_id: expect.any(String),
         },
         '0px',
         true,
@@ -173,6 +183,7 @@ describe('withBaseWidget', () => {
         {
           widget_config_id: 'test-config-2',
           widget_type: WidgetTypeV3.ChatPreviewV3,
+          load_id: expect.any(String),
         },
         '100px',
         true,
@@ -198,6 +209,7 @@ describe('withBaseWidget', () => {
         {
           widget_config_id: 'test-config-4',
           widget_type: WidgetTypeV3.SocialProofV3,
+          load_id: expect.any(String),
           custom_prop: 'custom_value',
           another_prop: 123,
         },
@@ -647,6 +659,7 @@ describe('withBaseWidget', () => {
         {
           widget_config_id: 'test-config-integration',
           widget_type: WidgetTypeV3.PromptCarouselV3,
+          load_id: expect.any(String),
           test_integration: true,
         },
         '0px',
@@ -722,6 +735,7 @@ describe('withBaseWidget', () => {
         {
           widget_config_id: 'widget-1',
           widget_type: WidgetTypeV3.PromptCarouselV3,
+          load_id: expect.any(String),
         },
         '0px',
         true,
@@ -731,6 +745,7 @@ describe('withBaseWidget', () => {
         {
           widget_config_id: 'widget-2',
           widget_type: WidgetTypeV3.ChatPreviewV3,
+          load_id: expect.any(String),
         },
         '0px',
         true,

package/src/hocs/withBaseWidget/withBaseWidget.tsx

@@ -8,6 +8,9 @@ import { usePage } from '@envive-ai/react-hooks/contexts/pageContext';
 import { useWidgetConfig } from '@envive-ai/react-hooks/contexts/widgetConfigContext';
 import { OrgUIConfigV3, WidgetConfigV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useUiConfig } from '@envive-ai/react-hooks/contexts/uiConfigContext';
+import { FeatureGates } from '@envive-ai/react-hooks/application/models';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
+import { useWidgetLoadDiagnostics } from '@envive-ai/react-hooks/hooks/WidgetLoadDiagnostics';
 import { BaseWidgetProps, WithBaseWidgetOptions } from './types';
 
 const logger = new Logger('withBaseWidget');
@@ -51,12 +54,28 @@ export function withBaseWidget<P extends BaseWidgetProps>(
     const [uiConfigSettled, setUiConfigSettled] = useState(false);
     const ownRequestsSettled = hardcopySettled && widgetConfigSettled && uiConfigSettled;
 
+    // --- Widget load diagnostics (see useWidgetLoadDiagnostics) ---
+    // load_id correlates this widget's mount / rendered / outcome / stall events for one load.
+    const loadId = useRef(
+      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`,
+    ).current;
+    const { featureFlagService } = useFeatureFlagService();
+    // Diagnostics are ON by default; the gate is a kill switch (default false → enabled) so we
+    // can gather a cross-merchant baseline. Flip it true (globally or per-org) via Statsig to stop.
+    const diagnosticsEnabled = !featureFlagService?.isFeatureGateEnabled(
+      FeatureGates.IsWidgetDiagnosticsDisabled,
+    );
+    // Reason this widget's own hardcopy request rejected (distinct from a served static fallback).
+    const hardcopyErrorRef = useRef<string | undefined>(undefined);
+
     const visibilityEventProps = {
       widget_config_id: widgetConfigId,
       widget_type: widgetType,
+      // Threaded onto [Envive] Widget Rendered so it can be joined to the diagnostics events.
+      load_id: loadId,
       ...options?.visibilityEventProps,
     };
-    const { isVisible } = useTrackComponentVisibleEvent(
+    const { isVisible, visibilitySource } = useTrackComponentVisibleEvent(
       widgetRef,
       visibilityEventProps,
       options?.rootMargin || '0px',
@@ -125,8 +144,14 @@ export function withBaseWidget<P extends BaseWidgetProps>(
       hardcopyFetchedRef.current = true;
       getHardcopy({ widgetType, userEvent })
         .then(setHardcopyContent)
-        .catch(() => {
-          // Silently handle errors - widget will render without hardcopy content
+        .catch(error => {
+          // Silently handle errors - widget will render without hardcopy content. Record the
+          // reason for the load-outcome diagnostic (the served static-fallback path resolves
+          // rather than rejects, so reaching here means no content at all).
+          hardcopyErrorRef.current =
+            error instanceof Error && error.message.includes('timed out')
+              ? 'hardcopy_timeout'
+              : 'hardcopy_error';
         })
         .finally(() => {
           setHardcopySettled(true);
@@ -162,6 +187,25 @@ export function withBaseWidget<P extends BaseWidgetProps>(
         });
     }, [startLoading, widgetConfigId, widgetType, getWidgetConfig]);
 
+    const pendingRequests = [
+      hardcopySettled ? null : 'hardcopy',
+      widgetConfigSettled ? null : 'widgetConfig',
+      uiConfigSettled ? null : 'uiConfig',
+    ].filter((name): name is string => name !== null);
+
+    useWidgetLoadDiagnostics({
+      enabled: diagnosticsEnabled,
+      loadId,
+      widgetType,
+      widgetConfigId,
+      startLoading,
+      ownRequestsSettled,
+      hardcopyContent,
+      visibilitySource,
+      pendingRequests,
+      hardcopyErrorReason: hardcopyErrorRef.current,
+    });
+
     return (
       <span ref={widgetRef}>
         <Widget

package/src/widgets/ProductCardWidget/__tests__/ProductCardWidget.test.tsx

@@ -60,6 +60,11 @@ vi.mock('@envive-ai/react-hooks/contexts/featureFlagServiceContext', () => ({
   useFeatureFlagService: () => ({ featureFlagService: undefined }),
 }));
 
+// Diagnostics pulls its own amplitude context internally; stub it like the other sub-hooks.
+vi.mock('@envive-ai/react-hooks/hooks/WidgetLoadDiagnostics', () => ({
+  useWidgetLoadDiagnostics: vi.fn(),
+}));
+
 vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
   useHardcopy: () => ({
     getHardcopy: mockGetHardcopy,
@@ -131,6 +136,7 @@ describe('ProductCardWidget analytics', () => {
           {
             widget_config_id: 'test-config-1',
             widget_type: WidgetTypeV3.ProductCardV3,
+            load_id: expect.any(String),
           },
           '0px',
           true,