Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: react suspense log added #565

Merged
merged 8 commits into from
Sep 2, 2024
Merged

refactor: react suspense log added #565

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9a1ffbe
refactor: suspense logs added
PritishBudhiraja Aug 14, 2024
0d50607
refactor: suspense logs added
PritishBudhiraja Aug 14, 2024
37f3f90
Merge branch 'main' into react-suspense-log-added
PritishBudhiraja Aug 14, 2024
c8f66bd
Merge branch 'main' into react-suspense-log-added
PritishBudhiraja Aug 21, 2024
66db774
Merge branch 'main' into react-suspense-log-added
PritishBudhiraja Aug 26, 2024
2f2e14d
Merge branch 'main' of github.com:juspay/hyperswitch-web into react-s…
PritishBudhiraja Sep 2, 2024
5eef8e0
fix: display name plugin added
PritishBudhiraja Sep 2, 2024
1a583e7
fix: comments addressed
PritishBudhiraja Sep 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Index.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
47 changes: 25 additions & 22 deletions src/PaymentElement.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,47 +284,47 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
<PaymentShimmer />
}
let checkoutEle = {
<ErrorBoundary key={selectedOption}>
<ErrorBoundary key={selectedOption} componentName="PaymentElement">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this ErrorBoundary?

{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) =>
Expand All @@ -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>
}
Expand Down Expand Up @@ -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
Expand Down
11 changes: 8 additions & 3 deletions src/Payments/PaymentRequestButtonElement.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,13 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
{walletOptions
->Array.mapWithIndex((item, i) => {
<ErrorBoundary
level={ErrorBoundary.RequestButton} key={`${item}-${i->Int.toString}-request-button`}>
<React.Suspense fallback={<WalletShimmer />} key={i->Int.toString}>
level={ErrorBoundary.RequestButton}
key={`${item}-${i->Int.toString}-request-button`}
componentName="PaymentRequestButtonElement">
<ReusableReactSuspense
loaderComponent={<WalletShimmer />}
componentName="PaymentRequestButtonElement"
key={i->Int.toString}>
{switch clientSecret {
| Some(_) =>
switch item->paymentMode {
Expand Down Expand Up @@ -123,7 +128,7 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
}
| None => React.null
}}
</React.Suspense>
</ReusableReactSuspense>
</ErrorBoundary>
})
->React.array}
Expand Down
27 changes: 15 additions & 12 deletions src/RenderPaymentMethods.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,28 +72,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
Expand Down Expand Up @@ -144,12 +146,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
}}
Expand Down
5 changes: 4 additions & 1 deletion src/WalletElement.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 8 additions & 5 deletions src/orca-log-catcher/ErrorBoundary.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -157,6 +157,7 @@ module ErrorCard = {
firstEvent: false,
metadata: JSON.Encode.null,
ephemeralKey: "",
componentName,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Sanskar2001 will we be able to see this new type directly in Grafana or some other changes will be required? The use of this type is to help detect the component which crashed

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@PritishBudhiraja We don't want to introduce one more column in sdk_events for this, can you please append the component name in value only?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated please check once

}
beaconApiCall([errorLog])
}
Expand Down Expand Up @@ -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>
}
12 changes: 8 additions & 4 deletions src/orca-log-catcher/OrcaLogger.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,7 @@ type logFile = {
paymentMethod: string,
metadata: JSON.t,
ephemeralKey: string,
componentName?: string,
}

type setlogApiValueType =
Expand Down Expand Up @@ -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 => ()
}
}
Expand Down
8 changes: 8 additions & 0 deletions src/orca-log-catcher/ReusableReactSuspense.res
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@react.component
let make = (~children, ~loaderComponent, ~componentName) => {
Console.log2("-- componentName -- ", componentName)
PritishBudhiraja marked this conversation as resolved.
Show resolved Hide resolved

<ErrorBoundary level=ErrorBoundary.PaymentMethod componentName>
<React.Suspense fallback={loaderComponent}> {children} </React.Suspense>
</ErrorBoundary>
}
Loading