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

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/stories/FullPageSalesAgentWidget.stories.tsx

@@ -101,9 +101,11 @@ export const PartialView: Story = {
   name: 'Partial View (default)',
   // 'fake-widget-config-id' short-circuits withBaseWidget's real widget-config
   // fetch (see WidgetConfigProvider.getWidgetConfig) and resolves to `{}` —
-  // partialViewEnabled then comes out `undefined`, which now correctly
-  // defaults to enabled regardless of which merchant is selected in the
-  // toolbar or what that merchant's own backend config has configured.
+  // both `partialViewMode` and the deprecated `partialViewEnabled` then come
+  // out `undefined`, which resolvePartialViewEnabled (see
+  // FullPageSalesAgent/hooks/resolvePartialViewMode.ts) correctly defaults
+  // to enabled, regardless of which merchant is selected in the toolbar or
+  // what that merchant's own backend config has configured.
   args: {
     widgetConfigId: 'fake-widget-config-id',
   },

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,