Merge pull request #1248 from msalcala11/improve-tab-error-fallback

Improve Tab Screen Error Fallback
bitpay · Jul 11, 2024 · 360f013 · 360f013
2 parents 94da971 + bc2a4a6
commit 360f013
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/src/navigation/tabs/TabScreenErrorFallback.tsx b/src/navigation/tabs/TabScreenErrorFallback.tsx
@@ -2,23 +2,32 @@ import React, {useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {Linking, ScrollView} from 'react-native';
 import ErrorBoundary from 'react-native-error-boundary';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useNavigation} from '@react-navigation/native';
 import {NativeStackScreenProps} from '@react-navigation/native-stack';
+import styled from 'styled-components/native';
 import {
   ScreenContainer,
   ScreenGutter,
   WIDTH,
 } from '../../components/styled/Containers';
-import styled from 'styled-components/native';
-import {H3, Link, Paragraph, TextAlign} from '../../components/styled/Text';
+import TabContainer from './TabContainer';
 import {ShopScreens, ShopStackParamList} from './shop/ShopStack';
 import {BillGroupParamList, BillScreens} from './shop/bill/BillGroup';
 import {CardHomeScreenProps} from '../card/screens/CardHome';
+import {HeaderContainer, HeaderLeftContainer} from './home/components/Styled';
+import {H3, Link, Paragraph, TextAlign} from '../../components/styled/Text';
 import WarningSvg from '../../../assets/img/warning.svg';
+import Icons from '../wallet/components/WalletIcons';
 import {Grey, LightBlack, Slate10} from '../../styles/colors';
 
+interface TabsScreenErrorFallbackOptions {
+  includeHeader?: boolean;
+}
 interface TabsScreenErrorFallbackProps {
   error?: Error;
   stackTrace?: string;
+  options?: TabsScreenErrorFallbackOptions;
 }
 
 const TabScreenContainer = styled(ScreenContainer)`
@@ -63,10 +72,22 @@ const ErrorMessageContainer = styled.View`
 const TabScreenErrorFallback: React.FC<TabsScreenErrorFallbackProps> = ({
   error,
   stackTrace,
+  options,
 }) => {
   const {t} = useTranslation();
+  const navigation = useNavigation();
   return (
-    <ScreenContainer>
+    <TabContainer>
+      {options?.includeHeader ? (
+        <HeaderContainer>
+          <HeaderLeftContainer>
+            <TouchableOpacity
+              onPress={() => navigation.navigate('SettingsHome')}>
+              <Icons.HomeSettings />
+            </TouchableOpacity>
+          </HeaderLeftContainer>
+        </HeaderContainer>
+      ) : null}
       <ScrollView contentContainerStyle={{flex: 1}}>
         <TabScreenContainer>
           <TabScreenErrorBody>
@@ -80,22 +101,22 @@ const TabScreenErrorFallback: React.FC<TabsScreenErrorFallbackProps> = ({
                     Linking.openURL('https://bitpay.com/request-help/wizard')
                   }>
                   {t('contact BitPay Support')}
-                </Link>{' '}
-                and provide the error message below.
+                </Link>
+                , and provide the error message below.
               </Paragraph>
             </TextAlign>
             <ErrorBox>
               <ErrorMessageContainer>
                 <Paragraph>{error?.message || ''}</Paragraph>
               </ErrorMessageContainer>
               <StackTraceContainer>
-                <StackTrace>{stackTrace || ''}</StackTrace>
+                <StackTrace>{error?.stack || stackTrace || ''}</StackTrace>
               </StackTraceContainer>
             </ErrorBox>
           </TabScreenErrorBody>
         </TabScreenContainer>
       </ScrollView>
-    </ScreenContainer>
+    </TabContainer>
   );
 };
 
@@ -106,12 +127,17 @@ type TabScreenProps =
 
 export const withErrorFallback = <T extends TabScreenProps>(
   TabScreen: React.FC<T>,
+  options: TabsScreenErrorFallbackOptions = {},
 ) => {
   return function TabScreenWithFallback(props: T) {
     const [error, setError] = useState<Error>();
     const [stackTrace, setStackTrace] = useState<string>();
     const fallbackComponent = () => (
-      <TabScreenErrorFallback error={error} stackTrace={stackTrace} />
+      <TabScreenErrorFallback
+        error={error}
+        stackTrace={stackTrace}
+        options={options}
+      />
     );
     return (
       <ErrorBoundary

diff --git a/src/navigation/tabs/home/HomeRoot.tsx b/src/navigation/tabs/home/HomeRoot.tsx
@@ -318,4 +318,4 @@ const HomeRoot = () => {
   );
 };
 
-export default withErrorFallback(HomeRoot);
+export default withErrorFallback(HomeRoot, {includeHeader: true});
-Original file line number
+Diff line change
@@ Expand Up / @@ -318,4 +318,4 @@ const HomeRoot = () => { @@
       );
     };
-    export default withErrorFallback(HomeRoot);
+    export default withErrorFallback(HomeRoot, {includeHeader: true});