Kantongku: hardening - ErrorBoundary + catch semua load async (anti force-close)

App.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { Component, useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
 import { ActivityIndicator, StatusBar, StyleSheet, Text, View } from 'react-native';
 import * as SplashScreen from 'expo-splash-screen';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -11,6 +12,27 @@ import { colors } from './src/theme/colors';
 
 SplashScreen.preventAutoHideAsync().catch(() => {});
 
+/** Tangkap error render agar tidak force-close: tampilkan layar aman. */
+class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean; message: string }> {
+  state = { hasError: false, message: '' };
+
+  static getDerivedStateFromError(e: unknown) {
+    return { hasError: true, message: e instanceof Error ? e.message : String(e) };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <View style={styles.center}>
+          <Text style={styles.errorTitle}>Terjadi kesalahan 😢</Text>
+          <Text style={styles.errorText}>{this.state.message}</Text>
+        </View>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 export default function App() {
   const [ready, setReady] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -62,16 +84,18 @@ export default function App() {
   }
 
   return (
-    <SafeAreaProvider>
-      <NavigationContainer>
-        <RootNavigator initialRoute={initialRoute} />
-      </NavigationContainer>
-      <StatusBar
-        barStyle="light-content"
-        translucent={false}
-        backgroundColor={colors.primary}
-      />
-    </SafeAreaProvider>
+    <ErrorBoundary>
+      <SafeAreaProvider>
+        <NavigationContainer>
+          <RootNavigator initialRoute={initialRoute} />
+        </NavigationContainer>
+        <StatusBar
+          barStyle="light-content"
+          translucent={false}
+          backgroundColor={colors.primary}
+        />
+      </SafeAreaProvider>
+    </ErrorBoundary>
   );
 }