From 288bd30b2be6755d57a818040f824fc24aa610e5 Mon Sep 17 00:00:00 2001 From: Jesse Pinho Date: Wed, 13 Mar 2024 16:25:53 -0700 Subject: [PATCH 1/8] Render a 404 page --- apps/minifront/src/components/not-found.tsx | 5 +++++ apps/minifront/src/components/shared/error-boundary.tsx | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 apps/minifront/src/components/not-found.tsx diff --git a/apps/minifront/src/components/not-found.tsx b/apps/minifront/src/components/not-found.tsx new file mode 100644 index 0000000000..e0e7e88de4 --- /dev/null +++ b/apps/minifront/src/components/not-found.tsx @@ -0,0 +1,5 @@ +import { SplashPage } from '@penumbra-zone/ui'; + +export const NotFound = () => { + return That page could not be found. ; +}; diff --git a/apps/minifront/src/components/shared/error-boundary.tsx b/apps/minifront/src/components/shared/error-boundary.tsx index 06ab2a2619..b64a173706 100644 --- a/apps/minifront/src/components/shared/error-boundary.tsx +++ b/apps/minifront/src/components/shared/error-boundary.tsx @@ -1,13 +1,15 @@ -import { useRouteError } from 'react-router-dom'; +import { isRouteErrorResponse, useRouteError } from 'react-router-dom'; import { PraxNotConnectedError } from '@penumbra-zone/client'; import { ExtensionNotConnected } from '../extension-not-connected'; +import { NotFound } from '../not-found'; export const ErrorBoundary = () => { const error = useRouteError(); if (error instanceof PraxNotConnectedError) return ; + if (isRouteErrorResponse(error) && error.status === 404) return ; - console.error(error); + console.error('ErrorBoundary caught error:', error); return (
From f078c7a52e07a42b992bb8c9c7487bfadd0cbb96 Mon Sep 17 00:00:00 2001 From: Jesse Pinho Date: Thu, 14 Mar 2024 12:00:55 -0700 Subject: [PATCH 2/8] Render an 'extension unavailable' page if needed --- .../src/components/extension-unavailable.tsx | 16 ++++++++++++++++ .../src/components/shared/error-boundary.tsx | 4 ++++ 2 files changed, 20 insertions(+) create mode 100644 apps/minifront/src/components/extension-unavailable.tsx diff --git a/apps/minifront/src/components/extension-unavailable.tsx b/apps/minifront/src/components/extension-unavailable.tsx new file mode 100644 index 0000000000..21abc4719f --- /dev/null +++ b/apps/minifront/src/components/extension-unavailable.tsx @@ -0,0 +1,16 @@ +import { SplashPage } from '@penumbra-zone/ui'; +import { HeadTag } from './metadata/head-tag'; + +export const ExtensionUnavailable = () => { + return ( + <> + + + + {`We can't currently connect to the Penumbra extension. This could be because the RPC node + that you're connected to is down. Please try reloading this page; and if that doesn't work, + please consider using a different RPC node.`} + + + ); +}; diff --git a/apps/minifront/src/components/shared/error-boundary.tsx b/apps/minifront/src/components/shared/error-boundary.tsx index b64a173706..da33eeeb63 100644 --- a/apps/minifront/src/components/shared/error-boundary.tsx +++ b/apps/minifront/src/components/shared/error-boundary.tsx @@ -2,10 +2,14 @@ import { isRouteErrorResponse, useRouteError } from 'react-router-dom'; import { PraxNotConnectedError } from '@penumbra-zone/client'; import { ExtensionNotConnected } from '../extension-not-connected'; import { NotFound } from '../not-found'; +import { ExtensionUnavailable } from '../extension-unavailable'; +import { Code, ConnectError } from '@connectrpc/connect'; export const ErrorBoundary = () => { const error = useRouteError(); + if (error instanceof ConnectError && error.code === Code.Unavailable) + return ; if (error instanceof PraxNotConnectedError) return ; if (isRouteErrorResponse(error) && error.status === 404) return ; From 2d09088f13e0d8fcf6ef25d876fa9e89e5bb591b Mon Sep 17 00:00:00 2001 From: Jesse Pinho Date: Thu, 14 Mar 2024 12:19:30 -0700 Subject: [PATCH 3/8] Link to the node's status page from the error page --- .../minifront/src/components/extension-unavailable.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/minifront/src/components/extension-unavailable.tsx b/apps/minifront/src/components/extension-unavailable.tsx index 21abc4719f..001a1cc4b9 100644 --- a/apps/minifront/src/components/extension-unavailable.tsx +++ b/apps/minifront/src/components/extension-unavailable.tsx @@ -1,6 +1,9 @@ import { SplashPage } from '@penumbra-zone/ui'; import { HeadTag } from './metadata/head-tag'; +const NODE_STATUS_PAGE_URL = + window.location.hostname === 'localhost' ? 'http://localhost:5174' : '/'; + export const ExtensionUnavailable = () => { return ( <> @@ -8,7 +11,12 @@ export const ExtensionUnavailable = () => { {`We can't currently connect to the Penumbra extension. This could be because the RPC node - that you're connected to is down. Please try reloading this page; and if that doesn't work, + that you're connected to is down. Please check `} + + the node's status page + + ; + {` and if that doesn't work, please consider using a different RPC node.`} From 0295b3b8c804534a98a3d61893a525d5cdf473ee Mon Sep 17 00:00:00 2001 From: Jesse Pinho Date: Thu, 14 Mar 2024 12:19:45 -0700 Subject: [PATCH 4/8] Render a nicer ErrorBoundary --- apps/minifront/src/components/shared/error-boundary.tsx | 7 ++++--- apps/node-status/src/components/error-boundary.tsx | 9 +++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/apps/minifront/src/components/shared/error-boundary.tsx b/apps/minifront/src/components/shared/error-boundary.tsx index da33eeeb63..15d2c188f4 100644 --- a/apps/minifront/src/components/shared/error-boundary.tsx +++ b/apps/minifront/src/components/shared/error-boundary.tsx @@ -4,6 +4,7 @@ import { ExtensionNotConnected } from '../extension-not-connected'; import { NotFound } from '../not-found'; import { ExtensionUnavailable } from '../extension-unavailable'; import { Code, ConnectError } from '@connectrpc/connect'; +import { SplashPage } from '@penumbra-zone/ui'; export const ErrorBoundary = () => { const error = useRouteError(); @@ -16,8 +17,8 @@ export const ErrorBoundary = () => { console.error('ErrorBoundary caught error:', error); return ( -
-

{String(error)}

-
+ + {String(error)} + ); }; diff --git a/apps/node-status/src/components/error-boundary.tsx b/apps/node-status/src/components/error-boundary.tsx index 2927484905..d219c4f5a4 100644 --- a/apps/node-status/src/components/error-boundary.tsx +++ b/apps/node-status/src/components/error-boundary.tsx @@ -1,13 +1,14 @@ +import { SplashPage } from '@penumbra-zone/ui'; import { useRouteError } from 'react-router-dom'; export const ErrorBoundary = () => { const error = useRouteError(); - console.error(error); + console.error('ErrorBoundary caught error:', error); return ( -
-

{String(error)}

-
+ + {String(error)} + ); }; From 1ccf86894c04dde803ea1d01f3aaea610fe1ddfc Mon Sep 17 00:00:00 2001 From: Jesse Pinho Date: Thu, 14 Mar 2024 12:21:00 -0700 Subject: [PATCH 5/8] Don't throw on a missing chainId --- apps/minifront/src/fetchers/chain-id.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/minifront/src/fetchers/chain-id.ts b/apps/minifront/src/fetchers/chain-id.ts index bff6aca319..0036a8888d 100644 --- a/apps/minifront/src/fetchers/chain-id.ts +++ b/apps/minifront/src/fetchers/chain-id.ts @@ -1,8 +1,6 @@ import { viewClient } from '../clients'; -export const getChainId = async (): Promise => { +export const getChainId = async (): Promise => { const { parameters } = await viewClient.appParameters({}); - if (!parameters?.chainId) throw new Error('No chainId in response'); - - return parameters.chainId; + return parameters?.chainId; }; From a37a2d1285b7d1ce841ed38ed2a935905f9eaef2 Mon Sep 17 00:00:00 2001 From: Jesse Pinho Date: Thu, 14 Mar 2024 13:43:08 -0700 Subject: [PATCH 6/8] Brackets --- apps/minifront/src/components/shared/error-boundary.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/minifront/src/components/shared/error-boundary.tsx b/apps/minifront/src/components/shared/error-boundary.tsx index 15d2c188f4..92bbfb00b5 100644 --- a/apps/minifront/src/components/shared/error-boundary.tsx +++ b/apps/minifront/src/components/shared/error-boundary.tsx @@ -9,8 +9,9 @@ import { SplashPage } from '@penumbra-zone/ui'; export const ErrorBoundary = () => { const error = useRouteError(); - if (error instanceof ConnectError && error.code === Code.Unavailable) + if (error instanceof ConnectError && error.code === Code.Unavailable) { return ; + } if (error instanceof PraxNotConnectedError) return ; if (isRouteErrorResponse(error) && error.status === 404) return ; From c68fc470596e88c2e27c29f97bf70bfc3c20552e Mon Sep 17 00:00:00 2001 From: Jesse Pinho Date: Thu, 14 Mar 2024 14:07:01 -0700 Subject: [PATCH 7/8] Tweak language --- .../src/components/extension-unavailable.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/apps/minifront/src/components/extension-unavailable.tsx b/apps/minifront/src/components/extension-unavailable.tsx index 001a1cc4b9..fed5543344 100644 --- a/apps/minifront/src/components/extension-unavailable.tsx +++ b/apps/minifront/src/components/extension-unavailable.tsx @@ -10,14 +10,19 @@ export const ExtensionUnavailable = () => { - {`We can't currently connect to the Penumbra extension. This could be because the RPC node - that you're connected to is down. Please check `} - - the node's status page - - ; - {` and if that doesn't work, - please consider using a different RPC node.`} +

We can't currently connect to the Penumbra extension.

+

+ This page may have been left open for too long, causing a timeout. Please reload this page + and see if that fixes the issue. +

+

+ If it doesn't, the RPC node that you're connected to could be down. Check{' '} + + the node's status page + {' '} + and, if it is down, consider switching to a different RPC URL in the Penumbra + extension's settings. +

); From ece76b4c241f4b285f8c9ea656d24c6f1a1bb3a1 Mon Sep 17 00:00:00 2001 From: Jesse Pinho Date: Thu, 14 Mar 2024 14:42:01 -0700 Subject: [PATCH 8/8] Tweak language --- apps/minifront/src/components/shared/error-boundary.tsx | 2 +- apps/node-status/src/components/error-boundary.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/minifront/src/components/shared/error-boundary.tsx b/apps/minifront/src/components/shared/error-boundary.tsx index 92bbfb00b5..b1f77a5ada 100644 --- a/apps/minifront/src/components/shared/error-boundary.tsx +++ b/apps/minifront/src/components/shared/error-boundary.tsx @@ -18,7 +18,7 @@ export const ErrorBoundary = () => { console.error('ErrorBoundary caught error:', error); return ( - + {String(error)} ); diff --git a/apps/node-status/src/components/error-boundary.tsx b/apps/node-status/src/components/error-boundary.tsx index d219c4f5a4..30e2129491 100644 --- a/apps/node-status/src/components/error-boundary.tsx +++ b/apps/node-status/src/components/error-boundary.tsx @@ -7,7 +7,7 @@ export const ErrorBoundary = () => { console.error('ErrorBoundary caught error:', error); return ( - + {String(error)} );