-
Notifications
You must be signed in to change notification settings - Fork 3
feat: show plaid link flow error #713
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.
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
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Greptile Summary
This PR implements comprehensive error handling for Plaid bank linking failures by introducing a new error state management system. The changes add a PlaidLinkErrorStoreProvider that uses Zustand to track Plaid link errors globally across the application.
The implementation integrates error detection in the useLinkedAccounts hook by adding an onEvent callback that listens for Plaid's ERROR events and records them in the store. When errors occur, users see different UI presentations depending on context: an alternate error state in the LinkAccounts onboarding component (via early return in LinkAccountsLinkStep) and a dismissable modal in the regular LinkedAccounts component.
The error UI provides two clear actions - "Link another bank" to retry the connection process, or "Complete" to proceed without linking additional accounts. The error state is automatically dismissed when a successful link occurs or when manually dismissed by the user.
The changes also include visual styling updates to the DataState component's error state, using proper design system error colors instead of transparent backgrounds, and responsive CSS for the error modal that stacks buttons vertically on smaller screens.
Confidence score: 4/5
- This PR is generally safe to merge with well-structured error handling that improves user experience
- The score reflects minor concerns about error event detection specificity and potential edge cases in async operations
- Files that need more attention:
useLinkedAccounts.tsfor the event handling logic andPlaidLinkErrorModal.tsxfor the modal state management
9 files reviewed, 3 comments
src/components/LinkedAccounts/PlaidLinkErrorModal/PlaidLinkErrorModal.tsx
Outdated
Show resolved
Hide resolved
src/components/PlatformOnboarding/Steps/LinkAccountsLinkStep.tsx
Outdated
Show resolved
Hide resolved
| } | ||
| } | ||
|
|
||
| @container (max-width: 26.25rem) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Where does this number come from? Asking to see if it's a repeatable constant we should re-use as a var.
| @@ -0,0 +1,76 @@ | |||
| import { useCallback, useContext } from 'react' | |||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is inconsequential, but why should this PlaidLinkError component be nested under LinkedAccounts? We're reusing it for multiple other components.
Description
This PR shows an error when Plaid is unable to link a bank rather than failing silently.
As an error state In the

LinkAccountscomponentAs a dismissable modal in the

LinkedAccountscomponent