Merge branch 'cb-iframe-loading' into 'main'

Add sentry logging for iframe loading See merge request web/clients!9748
ProtonMail · Apr 5, 2024 · 7373b18 · 7373b18
1 parent 61b39fa
commit 7373b18
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/packages/chargebee/src/checkpoints.ts b/packages/chargebee/src/checkpoints.ts
@@ -1,4 +1,4 @@
-export const chargebeeWrapperVersion = '1.0.1';
+export const chargebeeWrapperVersion = '1.0.2';
 
 export type Checkpoint = {
     name: string;

diff --git a/packages/chargebee/src/message-bus.ts b/packages/chargebee/src/message-bus.ts
@@ -170,23 +170,23 @@ export interface ParentMessagesProps {
 
 // the event handler function must be async to make sure that we catch all errors, sync and async
 const getEventListener = (messageBus: MessageBus) => async (e: MessageEvent) => {
-    try {
-        const parseEvent = (data: any) => {
-            if (typeof data !== 'string') {
-                return data;
-            }
-
-            let props;
-            try {
-                props = JSON.parse(data);
-            } catch (error) {
-                props = {};
-            }
-            return props;
-        };
+    const parseEvent = (data: any) => {
+        if (typeof data !== 'string') {
+            return data;
+        }
+
+        let props;
+        try {
+            props = JSON.parse(data);
+        } catch (error) {
+            props = {};
+        }
+        return props;
+    };
 
-        const event = parseEvent(e.data);
+    const event = parseEvent(e.data);
 
+    try {
         if (isSetConfigurationEvent(event)) {
             // Do not remove await here or anywhere else in the function. It ensures that all errors are caught
             await messageBus.onSetConfiguration(event, (result) => {
@@ -258,7 +258,7 @@ const getEventListener = (messageBus: MessageBus) => async (e: MessageEvent) =>
             // ignore unknown event
         }
     } catch (error) {
-        addCheckpoint('failed_to_handle_parent_message', { error, event });
+        addCheckpoint('failed_to_handle_parent_message', { error, event, eventRawData: e.data });
         messageBus.sendUnhandledErrorMessage(error);
     }
 };

diff --git a/packages/components/payments/chargebee/ChargebeeIframe.tsx b/packages/components/payments/chargebee/ChargebeeIframe.tsx
@@ -599,6 +599,7 @@ export const ChargebeeIframe = ({
 }: ChargebeeIframeProps) => {
     const [initialized, setInitialized] = useState(false);
     const abortRef = useRef<AbortController | null>(null);
+    const loadingTimeoutRef = useRef<any>(null);
 
     useEffect(() => {
         return () => {
@@ -641,6 +642,8 @@ export const ChargebeeIframe = ({
     const threeDs = useThreeDsChallenge(false);
 
     const onLoad = async () => {
+        clearTimeout(loadingTimeoutRef.current);
+
         // initialization of paypal is called in the facade, and others are called here, at least for now
         if (type === 'card') {
             await iframeHandles.handles.initializeCreditCard({ isNarrow: !!isNarrow });
@@ -671,6 +674,19 @@ export const ChargebeeIframe = ({
         []
     );
 
+    useEffect(() => {
+        loadingTimeoutRef.current = setTimeout(() => {
+            if (!initialized) {
+                captureMessage('Payments: Chargebee iframe not loaded', {
+                    level: 'error',
+                    extra: { type },
+                });
+            }
+        }, 20000);
+
+        return () => clearTimeout(loadingTimeoutRef.current);
+    }, []);
+
     // The iframe document body has a margin of 8px by default. We don't remove it from within, because this
     // additional space is used to display the borders and other elements.
     // The negative margin is used to compensate for the extra space and for the iframe to fit perfectly.