Show a nicer UI when minifront can't connect to the extension, and for other errors #752
Conversation
This file contains 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
Base automatically changed from
jessepinho/unavailable-rpc-errors-part-1-web-571
to
main
March 13, 2024 22:36
jessepinho
force-pushed
the
jessepinho/unavailable-rpc-errors-part-2-web-571
branch
7 times, most recently
from
599316e to
065eaa5
Compare
jessepinho
force-pushed
the
jessepinho/unavailable-rpc-errors-part-2-web-571
branch
from
065eaa5 to
a37a2d1
Compare
jessepinho
changed the title
jessepinho
commented
Mar 14, 2024
Comment on lines
+3
to
+5
| export const getChainId = async (): Promise<string | undefined> => { | ||
| const { parameters } = await viewClient.appParameters({}); | ||
| if (!parameters?.chainId) throw new Error('No chainId in response'); | ||
|
|
||
| return parameters.chainId; | ||
| return parameters?.chainId; |
There was a problem hiding this comment.
This is a little change @turbocrime suggested. We don't need to throw if the chain ID doesn't come back from the server.
jessepinho
changed the title
jessepinho
requested review from
grod220 and
turbocrime
and removed request for
grod220
turbocrime
reviewed
Mar 14, 2024
turbocrime
reviewed
Mar 14, 2024
turbocrime
reviewed
Mar 14, 2024
Comment on lines
+4
to
+5
| const NODE_STATUS_PAGE_URL = | ||
| window.location.hostname === 'localhost' ? 'http://localhost:5174' : '/'; |
There was a problem hiding this comment.
this probably needs a .env and webpack define
edit: i guess this is vite
There was a problem hiding this comment.
actually, it seems to be the same as the grpc endpoint uri
There was a problem hiding this comment.
this is tricky... we'd want to define the port number in .env, you mean, right? that would mean putting 5174 in node-status's .env file, and then importing it from minifront? (Cause I assume we'd also want to use the .env value in node-status's package.json dev script.)
turbocrime
approved these changes
Mar 14, 2024
turbocrime
reviewed
Mar 14, 2024
Comment on lines
+12
to
+26
| <SplashPage title='Penumbra extension unavailble'> | ||
| <p className='mb-2'>We can't currently connect to the Penumbra extension.</p> | ||
| <p className='mb-2'> | ||
| This page may have been left open for too long, causing a timeout. Please reload this page | ||
| and see if that fixes the issue. | ||
| </p> | ||
| <p> | ||
| If it doesn't, the RPC node that you're connected to could be down. Check{' '} | ||
| <a href={NODE_STATUS_PAGE_URL} className='underline'> | ||
| the node's status page | ||
| </a>{' '} | ||
| and, if it is down, consider switching to a different RPC URL in the Penumbra | ||
| extension's settings. | ||
| </p> | ||
| </SplashPage> |
There was a problem hiding this comment.
these cases should be readily distinguishable by the error message
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.
Previously, when the RPC node was unavailable, the
<ErrorBoundary />component would catch the error, stringify it, and render it to the screen.Now, we detect whether the given error is specific to the RPC being unavailable, and we show a message for that case.
Before
After
I also prettified the
<ErrorBoundary />in both the minifront and node-status apps to show other types of errors inside a<SplashPage />— e.g.:And lastly, I created a 404 page:
Closes #571
Closes #339