feat: handle api errors on UI during subscription #38090
+358
−210
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
Collaborator
✨ Files requiring CODEOWNER review ✨🔐 @MetaMask/web3auth (2 files, +238 -200)
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Collaborator
Builds ready [15b795a]
UI Startup Metrics (1225 ± 106 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [4df4ceb]
UI Startup Metrics (1231 ± 94 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
tuna1207
previously approved these changes
Nov 24, 2025
chaitanyapotti
previously approved these changes
Nov 24, 2025
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
| subscriptionsError || | ||
| subscriptionPricingError || | ||
| availableTokenBalancesError || | ||
| subscriptionResult.error; |
There was a problem hiding this comment.
Bug: Error UI shows for non-critical API failures
The hasApiError check combines errors from all subscription hooks, but it shows an error UI even when non-critical data fails to load (like availableTokenBalancesError). This means users see an error page and "Try Again" button even if subscriptionPricing loaded successfully and the page could display plan details. The error UI should only show when critical data like subscriptionPricing or the actual subscription request fails.
Additional Locations (1)
Collaborator
Builds ready [8eccbfc]
UI Startup Metrics (1209 ± 91 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
lionellbriones
dismissed stale reviews from tuna1207 and chaitanyapotti
via
1343384
Collaborator
Builds ready [1343384]
UI Startup Metrics (1252 ± 94 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
| </Button> | ||
| </Box> | ||
| </Content> | ||
| ) : ( |
There was a problem hiding this comment.
Bug: Error UI shown while data is loading
The error UI is displayed whenever hasApiError is true, even when data is still loading. According to the PR discussion, showing error UI while loading is unintended—the main content should display in the background with a loading indicator on top. The condition should exclude errors that occur during the loading state by checking !loading before displaying the error UI.
Additional Locations (1)
| paddingTop={2} | ||
| className="shield-plan-page__plans" | ||
| {loading && !hasApiError && <LoadingScreen />} | ||
| {hasApiError ? ( |
There was a problem hiding this comment.
Bug: Error UI shown during simultaneous loading operations
When multiple independent async operations run in parallel (subscriptions, pricing, token balances), one could fail while another is still loading. Currently, hasApiError condition displays error UI regardless of loading state. However, the PR comment indicates "not showing the error ui while loading is intended". When loading is true, the error UI should not be displayed. The condition should check hasApiError && !loading instead of just hasApiError to match the stated intent.
Collaborator
Builds ready [6d5cb67]
UI Startup Metrics (1222 ± 100 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [5071d81]
UI Startup Metrics (1230 ± 108 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
| > | ||
| <div className="shield-plan-page__radio" /> | ||
| {loading && !hasApiError && <LoadingScreen />} | ||
| {hasApiError ? ( |
There was a problem hiding this comment.
Bug: Error UI shows while data is still loading
When a secondary API error occurs (like availableTokenBalancesError) while primary data is still loading (like subscriptionPricingLoading), the error UI displays instead of the loading screen. The error condition should check that loading is complete before showing errors, not display errors during active loading states. This prevents confusing UX where users see an error message while the page is still trying to fetch data in the background.
Collaborator
Builds ready [e0248ca]
UI Startup Metrics (1243 ± 99 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Shield Plan page: adds UI for handling for api errors
Back button
Try again
Reloads metamask extension
Changelog
CHANGELOG entry: adds UI for handling for api errors on shield plan page
Related issues
Fixes:
Manual testing steps
Chrome developer tools>NetworktabScreenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Adds an API error screen with retry on Shield Plan, routes back to Settings or Home based on entry source, updates e2e tests, and introduces a new i18n string.
hasApiErrorfrom subscription/pricing/balances/subscriptionResult; showApiErrorHandler(with retry reload) instead of content; only showLoadingScreenwhen no error.settingsordefaultbased onsourcequery param (EntryModalSourceEnum); usesuseLocation..shield-plan-page__error-contentspacing.ui/components/app/api-error-handler(icon, messageshieldPlanErrorText, "Try again" reload); exported via index.shieldPlanErrorTexttoapp/_locales/en/messages.jsonandapp/_locales/en_GB/messages.json.mockNotEligible: truefor settings-origin flows; minor flow adjustments.Written by Cursor Bugbot for commit e0248ca. This will update automatically on new commits. Configure here.