Fix Back to Home button in global error

zeriontech · May 8, 2024 · 20ce09f · 20ce09f
1 parent e5b8dd8
commit 20ce09f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/src/ui/App/App.tsx b/src/ui/App/App.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { AreaProvider } from 'react-area';
 import { QueryClientProvider, useQuery } from '@tanstack/react-query';
 import {
@@ -398,6 +398,7 @@ export interface AppProps {
 }
 
 export function App({ initialView, mode, inspect }: AppProps) {
+  const [retryKey, setRetryKey] = useState(0);
   const bodyClassList = useMemo(() => {
     const result = [];
     if (pageTemplateType === 'dialog') {
@@ -423,7 +424,15 @@ export function App({ initialView, mode, inspect }: AppProps) {
         <QueryClientProvider client={queryClient}>
           <DesignTheme bodyClassList={bodyClassList} />
           <Router>
-            <ErrorBoundary renderError={(error) => <ViewError error={error} />}>
+            <ErrorBoundary
+              retryKey={retryKey}
+              renderError={(error) => (
+                <ViewError
+                  error={error}
+                  onRetry={() => setRetryKey((count) => count + 1)}
+                />
+              )}
+            >
               <InactivityDetector />
               <SessionResetHandler />
               <ThemeDecoration />

diff --git a/src/ui/components/ErrorBoundary/ErrorBoundary.tsx b/src/ui/components/ErrorBoundary/ErrorBoundary.tsx
@@ -4,6 +4,7 @@ import { getError } from 'src/shared/errors/getError';
 export class ErrorBoundary extends React.Component<
   React.PropsWithChildren<{
     forceIsErrorForTesting?: boolean;
+    retryKey?: number;
     renderError: (
       error?: (Error & { code?: number }) | null
     ) => React.ReactNode;
@@ -15,6 +16,12 @@ export class ErrorBoundary extends React.Component<
     return { hasError: true, error: getError(error) };
   }
 
+  componentDidUpdate(prevProps: Readonly<{ retryKey?: number | undefined }>) {
+    if (prevProps.retryKey !== this.props.retryKey) {
+      this.setState({ hasError: false, error: null });
+    }
+  }
+
   render() {
     if (this.state.hasError || this.props.forceIsErrorForTesting) {
       return this.props.renderError(this.state.error);

diff --git a/src/ui/components/ViewError/ViewError.tsx b/src/ui/components/ViewError/ViewError.tsx
@@ -30,10 +30,12 @@ export function ViewError({
   title = 'Unable to perform this action right now',
   subtitle = 'Please try again and report the issue if it persists.',
   error,
+  onRetry,
 }: {
   title?: string;
   subtitle?: string | null;
   error?: Error | null;
+  onRetry?: () => void;
 }) {
   const navigate = useNavigate();
   const { pathname, search } = useLocation();
@@ -131,7 +133,7 @@ export function ViewError({
               if (pageTemplateType !== 'dialog') {
                 navigate('/');
               }
-              window.location.reload();
+              onRetry?.();
             }}
             style={{ paddingInline: 8 }}
           >