Pull request #206: error boundary component added

Merge in EXC/orca-elements from errorBoundaryComponent to master * commit '95f45d53bb3bf94f35b31ce8d3eaaea181fef970': emoji change sending logs to grafana and handling for payment request button error boundary component added
juspay · Aug 31, 2023 · 2884815 · 2884815
2 parents 442ca61 + 95f45d5
commit 2884815
Show file tree

Hide file tree

Showing 6 changed files with 394 additions and 168 deletions.
diff --git a/src/Index.res b/src/Index.res
@@ -9,7 +9,9 @@ let app = switch ReactDOM.querySelector("#app") {
   root->render(
     <div className="h-auto flex flex-col ">
       <div className="h-auto flex flex-col">
-        <Recoil.RecoilRoot> <ErrorBoundary> <App /> </ErrorBoundary> </Recoil.RecoilRoot>
+        <Recoil.RecoilRoot>
+          <ErrorBoundary level=ErrorBoundary.Top> <App /> </ErrorBoundary>
+        </Recoil.RecoilRoot>
       </div>
     </div>,
   )

diff --git a/src/PaymentElement.res b/src/PaymentElement.res
@@ -190,58 +190,65 @@ let make = (
     <PaymentShimmer />
   }
   let checkoutEle = {
-    switch selectedOption->paymentMode {
-    | Card => <CardPayment cardProps expiryProps cvcProps paymentType list />
-    | Klarna =>
-      <SessionPaymentWrapper type_=Others>
-        {switch tokenObj {
-        | OtherTokenOptional(optToken) =>
-          switch optToken {
-          | Some(token) =>
-            <React.Suspense fallback={loader()}>
-              <KlarnaSDKLazy sessionObj=token list />
-            </React.Suspense>
-          | None =>
+    <ErrorBoundary key={selectedOption}>
+      {switch selectedOption->paymentMode {
+      | Card => <CardPayment cardProps expiryProps cvcProps paymentType list />
+      | Klarna =>
+        <SessionPaymentWrapper type_=Others>
+          {switch tokenObj {
+          | OtherTokenOptional(optToken) =>
+            switch optToken {
+            | Some(token) =>
+              <React.Suspense fallback={loader()}>
+                <KlarnaSDKLazy sessionObj=token list />
+              </React.Suspense>
+            | None =>
+              <React.Suspense fallback={loader()}>
+                <KlarnaPaymentLazy paymentType countryProps list />
+              </React.Suspense>
+            }
+          | _ =>
             <React.Suspense fallback={loader()}>
               <KlarnaPaymentLazy paymentType countryProps list />
             </React.Suspense>
-          }
-        | _ =>
-          <React.Suspense fallback={loader()}>
-            <KlarnaPaymentLazy paymentType countryProps list />
-          </React.Suspense>
-        }}
-      </SessionPaymentWrapper>
-    | ACHTransfer =>
-      <React.Suspense fallback={loader()}>
-        <ACHBankTransferLazy paymentType list />
-      </React.Suspense>
-    | SepaTransfer =>
-      <React.Suspense fallback={loader()}>
-        <SepaBankTransferLazy paymentType list countryProps />
-      </React.Suspense>
-    | BacsTransfer =>
-      <React.Suspense fallback={loader()}>
-        <BacsBankTransferLazy paymentType list />
-      </React.Suspense>
-    | ACHBankDebit =>
-      <React.Suspense fallback={loader()}> <ACHBankDebitLazy paymentType /> </React.Suspense>
-    | SepaBankDebit =>
-      <React.Suspense fallback={loader()}> <SepaBankDebitLazy paymentType /> </React.Suspense>
-    | BacsBankDebit =>
-      <React.Suspense fallback={loader()}> <BacsBankDebitLazy paymentType /> </React.Suspense>
-    | BanContactCard =>
-      <CardPayment cardProps expiryProps cvcProps paymentType isBancontact=true list />
-    | BecsBankDebit =>
-      <React.Suspense fallback={loader()}> <BecsBankDebitLazy paymentType /> </React.Suspense>
-    | _ => <PaymentMethodsWrapperLazy paymentType list paymentMethodName=selectedOption />
-    }
+          }}
+        </SessionPaymentWrapper>
+      | ACHTransfer =>
+        <React.Suspense fallback={loader()}>
+          <ACHBankTransferLazy paymentType list />
+        </React.Suspense>
+      | SepaTransfer =>
+        <React.Suspense fallback={loader()}>
+          <SepaBankTransferLazy paymentType list countryProps />
+        </React.Suspense>
+      | BacsTransfer =>
+        <React.Suspense fallback={loader()}>
+          <BacsBankTransferLazy paymentType list />
+        </React.Suspense>
+      | ACHBankDebit =>
+        <React.Suspense fallback={loader()}> <ACHBankDebitLazy paymentType /> </React.Suspense>
+      | SepaBankDebit =>
+        <React.Suspense fallback={loader()}> <SepaBankDebitLazy paymentType /> </React.Suspense>
+      | BacsBankDebit =>
+        <React.Suspense fallback={loader()}> <BacsBankDebitLazy paymentType /> </React.Suspense>
+      | BanContactCard =>
+        <CardPayment cardProps expiryProps cvcProps paymentType isBancontact=true list />
+      | BecsBankDebit =>
+        <React.Suspense fallback={loader()}> <BecsBankDebitLazy paymentType /> </React.Suspense>
+      | _ =>
+        <React.Suspense fallback={loader()}>
+          <PaymentMethodsWrapperLazy paymentType list paymentMethodName=selectedOption />
+        </React.Suspense>
+      }}
+    </ErrorBoundary>
   }
   <>
     <RenderIf
       condition={paymentOptions->Js.Array2.length > 0 || walletOptions->Js.Array2.length > 0}>
       <div className="flex flex-col place-items-center">
-        <PaymentRequestButtonElement sessions walletOptions list />
+        <ErrorBoundary key="payment_request_buttons_all" level={ErrorBoundary.RequestButton}>
+          <PaymentRequestButtonElement sessions walletOptions list />
+        </ErrorBoundary>
         <RenderIf
           condition={paymentOptions->Js.Array2.length > 0 &&
           walletOptions->Js.Array2.length > 0 &&

diff --git a/src/Payments/PaymentMethodsWrapper.res b/src/Payments/PaymentMethodsWrapper.res
@@ -176,7 +176,15 @@ let default = (props: props) => {
         postFailedSubmitResponse(~errortype="validation_error", ~message="Please enter all fields")
       }
     }
-  }, (fullName, email, country, blikCode, props.paymentMethodName, phoneNumber.value, (selectedBank, currency)))
+  }, (
+    fullName,
+    email,
+    country,
+    blikCode,
+    props.paymentMethodName,
+    phoneNumber.value,
+    (selectedBank, currency),
+  ))
   submitPaymentData(submitCallback)
   let bottomElement = <InfoElement />
   <div

diff --git a/src/Payments/PaymentRequestButtonElement.res b/src/Payments/PaymentRequestButtonElement.res
@@ -33,46 +33,49 @@ let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
   <div className="flex flex-col gap-1 h-auto w-full max-w-[750px]">
     {walletOptions
     ->Js.Array2.mapi((item, i) => {
-      <React.Suspense fallback={<WalletShimmer />} key={i->Belt.Int.toString}>
-        {switch clientSecret {
-        | Some(_) =>
-          switch item->paymentMode {
-          | GPayWallet =>
-            <SessionPaymentWrapper type_={Wallet}>
-              {switch gPayToken {
-              | OtherTokenOptional(optToken) =>
-                switch googlePayThirdPartyToken {
-                | GooglePayThirdPartyTokenOptional(googlePayThirdPartyOptToken) =>
-                  <GPayLazy
-                    sessionObj=optToken list thirdPartySessionObj=googlePayThirdPartyOptToken
-                  />
-                | _ => <GPayLazy sessionObj=optToken list thirdPartySessionObj=None />
-                }
+      <ErrorBoundary
+        level={ErrorBoundary.RequestButton} key={`${item}-${i->Belt.Int.toString}-request-button`}>
+        <React.Suspense fallback={<WalletShimmer />} key={i->Belt.Int.toString}>
+          {switch clientSecret {
+          | Some(_) =>
+            switch item->paymentMode {
+            | GPayWallet =>
+              <SessionPaymentWrapper type_={Wallet}>
+                {switch gPayToken {
+                | OtherTokenOptional(optToken) =>
+                  switch googlePayThirdPartyToken {
+                  | GooglePayThirdPartyTokenOptional(googlePayThirdPartyOptToken) =>
+                    <GPayLazy
+                      sessionObj=optToken list thirdPartySessionObj=googlePayThirdPartyOptToken
+                    />
+                  | _ => <GPayLazy sessionObj=optToken list thirdPartySessionObj=None />
+                  }
+                | _ => React.null
+                }}
+              </SessionPaymentWrapper>
+            | PaypalWallet =>
+              <SessionPaymentWrapper type_={Wallet}>
+                {switch paypalToken {
+                | OtherTokenOptional(optToken) =>
+                  switch optToken {
+                  | Some(token) => <PaypalSDKLazy sessionObj=token list />
+                  | None => <PayPalLazy list />
+                  }
+                | _ => <PayPalLazy list />
+                }}
+              </SessionPaymentWrapper>
+            | ApplePayWallet =>
+              switch applePayToken {
+              | ApplePayTokenOptional(optToken) => <ApplePayLazy sessionObj=optToken list />
               | _ => React.null
-              }}
-            </SessionPaymentWrapper>
-          | PaypalWallet =>
-            <SessionPaymentWrapper type_={Wallet}>
-              {switch paypalToken {
-              | OtherTokenOptional(optToken) =>
-                switch optToken {
-                | Some(token) => <PaypalSDKLazy sessionObj=token list />
-                | None => <PayPalLazy list />
-                }
-              | _ => <PayPalLazy list />
-              }}
-            </SessionPaymentWrapper>
-          | ApplePayWallet =>
-            switch applePayToken {
-            | ApplePayTokenOptional(optToken) => <ApplePayLazy sessionObj=optToken list />
-            | _ => React.null
-            }
+              }
 
-          | NONE => React.null
-          }
-        | None => React.null
-        }}
-      </React.Suspense>
+            | NONE => React.null
+            }
+          | None => React.null
+          }}
+        </React.Suspense>
+      </ErrorBoundary>
     })
     ->React.array}
   </div>