refactor: suspense logs added

juspay · Aug 14, 2024 · 9a1ffbe · 9a1ffbe
1 parent 3c82cfb
commit 9a1ffbe
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 34 deletions.
diff --git a/src/PaymentElement.res b/src/PaymentElement.res
@@ -288,43 +288,43 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       {switch selectedOption->PaymentModeType.paymentMode {
       | Card => <CardPayment cardProps expiryProps cvcProps paymentType />
       | Klarna =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="KlarnaPaymentLazy">
           <KlarnaPaymentLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | ACHTransfer =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="ACHBankTransferLazy">
           <ACHBankTransferLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | SepaTransfer =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="SepaBankTransferLazy">
           <SepaBankTransferLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | BacsTransfer =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="BacsBankTransferLazy">
           <BacsBankTransferLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | ACHBankDebit =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="ACHBankDebitLazy">
           <ACHBankDebitLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | SepaBankDebit =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="SepaBankDebitLazy">
           <SepaBankDebitLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | BacsBankDebit =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="BacsBankDebitLazy">
           <BacsBankDebitLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | BanContactCard =>
         <CardPayment cardProps expiryProps cvcProps paymentType isBancontact=true />
       | BecsBankDebit =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="BecsBankDebitLazy">
           <BecsBankDebitLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | Boleto =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="BoletoLazy">
           <BoletoLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | ApplePay =>
         switch applePayToken {
         | ApplePayTokenOptional(optToken) =>
@@ -350,9 +350,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
           }}
         </SessionPaymentWrapper>
       | _ =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="PaymentMethodsWrapperLazy">
           <PaymentMethodsWrapperLazy paymentType paymentMethodName=selectedOption />
-        </React.Suspense>
+        </ReusableReactSuspense>
       }}
     </ErrorBoundary>
   }

diff --git a/src/Payments/PaymentRequestButtonElement.res b/src/Payments/PaymentRequestButtonElement.res
@@ -66,7 +66,10 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
     ->Array.mapWithIndex((item, i) => {
       <ErrorBoundary
         level={ErrorBoundary.RequestButton} key={`${item}-${i->Int.toString}-request-button`}>
-        <React.Suspense fallback={<WalletShimmer />} key={i->Int.toString}>
+        <ReusableReactSuspense
+          loaderComponent={<WalletShimmer />}
+          componentName="PaymentRequestButtonElement"
+          key={i->Int.toString}>
           {switch clientSecret {
           | Some(_) =>
             switch item->paymentMode {
@@ -123,7 +126,7 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
             }
           | None => React.null
           }}
-        </React.Suspense>
+        </ReusableReactSuspense>
       </ErrorBoundary>
     })
     ->React.array}

diff --git a/src/RenderPaymentMethods.res b/src/RenderPaymentMethods.res
@@ -71,28 +71,30 @@ let make = (
       <div className="w-full font-medium">
         {switch paymentType {
         | Card =>
-          <React.Suspense
-            fallback={<RenderIf condition={showLoader}>
+          <ReusableReactSuspense
+            loaderComponent={<RenderIf condition={showLoader}>
               <CardElementShimmer />
-            </RenderIf>}>
+            </RenderIf>}
+            componentName="SingleLineCardPaymentLazy">
             <SingleLineCardPaymentLazy
               paymentType cardProps expiryProps cvcProps zipProps handleElementFocus isFocus
             />
-          </React.Suspense>
+          </ReusableReactSuspense>
         | GooglePayElement
         | PayPalElement
         | ApplePayElement
         | KlarnaElement
         | ExpressCheckoutElement
         | Payment =>
-          <React.Suspense
-            fallback={<RenderIf condition={showLoader}>
+          <ReusableReactSuspense
+            loaderComponent={<RenderIf condition={showLoader}>
               {paymentType->Utils.getIsWalletElementPaymentType
                 ? <WalletShimmer />
                 : <PaymentElementShimmer />}
-            </RenderIf>}>
+            </RenderIf>}
+            componentName="PaymentElementRendererLazy">
             <PaymentElementRendererLazy paymentType cardProps expiryProps cvcProps />
-          </React.Suspense>
+          </ReusableReactSuspense>
         | CardNumberElement =>
           <InputField
             isValid=isCardValid
@@ -143,12 +145,13 @@ let make = (
             isFocus
           />
         | PaymentMethodsManagement =>
-          <React.Suspense
-            fallback={<RenderIf condition={showLoader}>
+          <ReusableReactSuspense
+            loaderComponent={<RenderIf condition={showLoader}>
               <PaymentElementShimmer />
-            </RenderIf>}>
+            </RenderIf>}
+            componentName="PaymentManagementLazy">
             <PaymentManagementLazy />
-          </React.Suspense>
+          </ReusableReactSuspense>
         | PaymentMethodCollectElement
         | NONE => React.null
         }}

diff --git a/src/orca-log-catcher/ReusableReactSuspense.res b/src/orca-log-catcher/ReusableReactSuspense.res
@@ -0,0 +1,8 @@
+@react.component
+let make = (~children, ~loaderComponent, ~componentName) => {
+  Console.log2("-- componentName -- ", componentName)
+
+  <ErrorBoundary level=ErrorBoundary.PaymentMethod>
+    <React.Suspense fallback={loaderComponent}> {children} </React.Suspense>
+  </ErrorBoundary>
+}