From 798f73dfe7bc089546b2a3e9f0b976a263ba372e Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Tue, 22 Apr 2025 13:13:56 +0800
Subject: [PATCH] fix(mobile): add ScreenErrorScreen component for error
 handling

- Introduced a new ScreenErrorScreen component to display user-friendly error messages.
- Integrated the ScreenErrorScreen into the WrappedScreenItem using an ErrorBoundary for improved error management.
- Enhanced navigation experience by allowing users to go back when an error occurs.

These changes improve the application's resilience and user experience during error scenarios.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../components/errors/ScreenErrorScreen.tsx   | 39 +++++++++++++++++++
 .../src/lib/navigation/WrappedScreenItem.tsx  |  4 +-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 apps/mobile/src/components/errors/ScreenErrorScreen.tsx

diff --git a/apps/mobile/src/components/errors/ScreenErrorScreen.tsx b/apps/mobile/src/components/errors/ScreenErrorScreen.tsx
new file mode 100644
index 000000000..d564fe9f3
--- /dev/null
+++ b/apps/mobile/src/components/errors/ScreenErrorScreen.tsx
@@ -0,0 +1,39 @@
+import * as React from "react"
+import { Text, TouchableOpacity, View } from "react-native"
+
+import { useCanBack, useNavigation } from "@/src/lib/navigation/hooks"
+
+interface ScreenErrorScreenProps {
+  error?: Error
+  resetError?: () => void
+}
+
+export const ScreenErrorScreen: React.FC<ScreenErrorScreenProps> = ({ error }) => {
+  const navigation = useNavigation()
+  const canGoBack = useCanBack()
+
+  return (
+    <View className="bg-system-background flex-1">
+      <View className="flex-1 items-center justify-center px-6">
+        <Text className="mb-6 text-[64px]">😕</Text>
+        <Text className="text-label mb-3 text-center text-xl font-semibold">
+          This page went wrong, go back and try again.
+        </Text>
+        <Text className="text-secondary-label mb-8 text-center text-lg">
+          {error?.message || "An unexpected error occurred."}
+        </Text>
+
+        <View className="flex-row gap-4">
+          {canGoBack && (
+            <TouchableOpacity
+              className="bg-accent min-w-[160px] rounded-xl px-6 py-3"
+              onPress={() => navigation.back()}
+            >
+              <Text className="text-center text-[17px] font-semibold text-white">Go Back </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+    </View>
+  )
+}
diff --git a/apps/mobile/src/lib/navigation/WrappedScreenItem.tsx b/apps/mobile/src/lib/navigation/WrappedScreenItem.tsx
index 58c2768c5..155d6249c 100644
--- a/apps/mobile/src/lib/navigation/WrappedScreenItem.tsx
+++ b/apps/mobile/src/lib/navigation/WrappedScreenItem.tsx
@@ -14,6 +14,8 @@ import {
   ScreenStackItem,
 } from "react-native-screens"
 
+import { ErrorBoundary } from "@/src/components/common/ErrorBoundary"
+import { ScreenErrorScreen } from "@/src/components/errors/ScreenErrorScreen"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { useColor } from "@/src/theme/colors"
 
@@ -153,7 +155,7 @@ export const WrappedScreenItem: FC<
             onNativeDismissCancelled={handleDismiss}
           >
             <Header />
-            {children}
+            <ErrorBoundary fallbackRender={ScreenErrorScreen}>{children}</ErrorBoundary>
           </ScreenStackItem>
         </ScreenOptionsContext.Provider>
       </ScreenItemContext.Provider>