refactor: suspense logs added

juspay · Aug 14, 2024 · 0d50607 · 0d50607
1 parent 9a1ffbe
commit 0d50607
Show file tree

Hide file tree

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

diff --git a/src/PaymentElement.res b/src/PaymentElement.res
@@ -284,7 +284,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     <PaymentShimmer />
   }
   let checkoutEle = {
-    <ErrorBoundary key={selectedOption}>
+    <ErrorBoundary key={selectedOption} componentName="PaymentElement">
       {switch selectedOption->PaymentModeType.paymentMode {
       | Card => <CardPayment cardProps expiryProps cvcProps paymentType />
       | Klarna =>
@@ -402,7 +402,10 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       condition={(paymentOptions->Array.length > 0 || walletOptions->Array.length > 0) &&
         showFields}>
       <div className="flex flex-col place-items-center">
-        <ErrorBoundary key="payment_request_buttons_all" level={ErrorBoundary.RequestButton}>
+        <ErrorBoundary
+          key="payment_request_buttons_all"
+          level={ErrorBoundary.RequestButton}
+          componentName="PaymentRequestButtonElement">
           <PaymentRequestButtonElement sessions walletOptions paymentType />
         </ErrorBoundary>
         <RenderIf

diff --git a/src/Payments/PaymentRequestButtonElement.res b/src/Payments/PaymentRequestButtonElement.res
@@ -65,7 +65,9 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
     {walletOptions
     ->Array.mapWithIndex((item, i) => {
       <ErrorBoundary
-        level={ErrorBoundary.RequestButton} key={`${item}-${i->Int.toString}-request-button`}>
+        level={ErrorBoundary.RequestButton}
+        key={`${item}-${i->Int.toString}-request-button`}
+        componentName="PaymentRequestButtonElement">
         <ReusableReactSuspense
           loaderComponent={<WalletShimmer />}
           componentName="PaymentRequestButtonElement"

diff --git a/src/WalletElement.res b/src/WalletElement.res
@@ -33,7 +33,10 @@ let make = (~paymentType) => {
 
   <RenderIf condition={walletOptions->Array.length > 0}>
     <div className="flex flex-col place-items-center">
-      <ErrorBoundary key="payment_request_buttons_all" level={ErrorBoundary.RequestButton}>
+      <ErrorBoundary
+        key="payment_request_buttons_all"
+        level={ErrorBoundary.RequestButton}
+        componentName="WalletElement">
         <PaymentRequestButtonElement sessions walletOptions paymentType />
       </ErrorBoundary>
     </div>

diff --git a/src/orca-log-catcher/ErrorBoundary.res b/src/orca-log-catcher/ErrorBoundary.res
@@ -123,7 +123,7 @@ module ErrorTextAndImage = {
 
 module ErrorCard = {
   @react.component
-  let make = (~error: Sentry.ErrorBoundary.fallbackArg, ~level) => {
+  let make = (~error: Sentry.ErrorBoundary.fallbackArg, ~level, ~componentName) => {
     let beaconApiCall = data => {
       if data->Array.length > 0 {
         let logData = data->Array.map(OrcaLogger.logFileToObj)->JSON.Encode.array->JSON.stringify
@@ -157,6 +157,7 @@ module ErrorCard = {
           firstEvent: false,
           metadata: JSON.Encode.null,
           ephemeralKey: "",
+          componentName,
         }
         beaconApiCall([errorLog])
       }
@@ -200,10 +201,12 @@ module ErrorCard = {
   }
 }
 
-let defaultFallback = (e, level) => {
-  <ErrorCard error=e level />
+let defaultFallback = (e, level, componentName) => {
+  <ErrorCard error=e level componentName />
 }
 @react.component
-let make = (~children, ~renderFallback=defaultFallback, ~level=PaymentMethod) => {
-  <Sentry.ErrorBoundary fallback={e => renderFallback(e, level)}> children </Sentry.ErrorBoundary>
+let make = (~children, ~renderFallback=defaultFallback, ~level=PaymentMethod, ~componentName) => {
+  <Sentry.ErrorBoundary fallback={e => renderFallback(e, level, componentName)}>
+    children
+  </Sentry.ErrorBoundary>
 }
diff --git a/src/orca-log-catcher/OrcaLogger.res b/src/orca-log-catcher/OrcaLogger.res
@@ -210,6 +210,7 @@ type logFile = {
   paymentMethod: string,
   metadata: JSON.t,
   ephemeralKey: string,
+  componentName?: string,
 }
 
 type setlogApiValueType =
@@ -539,14 +540,17 @@ let make = (
     let counter = eventName->calculateAndUpdateCounterHook
     if GlobalVars.enableLogging && counter <= maxLogsPushedPerEventName {
       switch loggingLevel {
-      | DEBUG => log->Array.push(mainLogFile, _)->ignore
+      | DEBUG => log->(Array.push(mainLogFile, _))->ignore
       | INFO =>
         [INFO, WARNING, ERROR]->Array.includes(log.logType)
-          ? log->Array.push(mainLogFile, _)->ignore
+          ? log->(Array.push(mainLogFile, _))->ignore
           : ()
       | WARNING =>
-        [WARNING, ERROR]->Array.includes(log.logType) ? log->Array.push(mainLogFile, _)->ignore : ()
-      | ERROR => [ERROR]->Array.includes(log.logType) ? log->Array.push(mainLogFile, _)->ignore : ()
+        [WARNING, ERROR]->Array.includes(log.logType)
+          ? log->(Array.push(mainLogFile, _))->ignore
+          : ()
+      | ERROR =>
+        [ERROR]->Array.includes(log.logType) ? log->(Array.push(mainLogFile, _))->ignore : ()
       | SILENT => ()
       }
     }

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